对于不了解 HTML 和 CSS 的人来说，创建一个有吸引力的页面似乎很困难。如果有人不知道使用 CSS，那么他们将无法使页面看起来更好或更具吸引力。因此，本文的主要重点将放在 CSS 的实现上。
创建结构：在本节中，我们将使用
HTML
About us Page
About US
Here you will get to know the team
members of our company
Our Team
CSS
*{
margin:0;
padding:0;
}
html{
scroll-behaviour:smooth;
}
:root{
--navbar-height:59px;
}
/* This is for the logo of the company */
.logo{
width:20%;
/* It is used to make the logo to
be displayed along with the ul
list horizontally */
display:flex;
justify-content:center;
align-items:center;
}
.logo img{
width:33%;
/* The logo image will have a border,
that has a width of 2px and the color
of the border is white */
border:2px solid white;
/* Now we will add a border radius of
5px to make the logo image circular */
border-radius:50px;
}
.navbar{
/* To make all those logo image and the
list to be displayed horizontally */
display:flex;
align-items:center;
justify-content:center;
position:sticky;
top:0;
/* When we will take our mouse to those
lists or image the cursor will be pointer */
cursor: pointer;
}
.nav-list{
width:70%;
/* It is to display the list in horizontal */
display:flex;
}
.nav-list li{
/* This will remove the style of bulleted list */
list-style:none;
/* This will create a space between the items */
padding:2px 6px;
}
.nav-list li a{
/* This is to remove the underline of the
text that appears when we use the anchor tag */
text-decoration:none;
/* This is to display the color of
those anchor text white */
color:white;
}
/* When the user will point their mouse towards
any anchor text they will find a different color */
.nav-list li a:hover{
color:grey;
}
.rightNav{
width:50;
/* We will find the search box along with
the search button will be shifted to right */
text-align:right;
}
#search{
padding:5px;
/* The size of the font that will be appearing
in the search box when the user will try to
search something */
font-size:17px;
/* The border of the search box has a width
of 2px and the type of the border is solid.
The color of the border will be grey */
border:2px solid grey;
/* We will use a border-radius to make the
search box give a better looking shape than
rectangular shape */
border-radius:9px;
}
.background{
/* The background image will change whenever
we load the page */
background: grey;
/* This will make the background that have
been added will be darken */
background-blend-mode:darken;
background-size:cover;
}
.firstsection{
/* It is to make the height of the
viewport to be 100 */
height:100vh;
}
.box-main{
/* This is to display the contact us and the
sentences below it to be displayed in flex */
display:flex;
justify-content:center;
align-items:center;
/* This is to display the text to have
a color of white */
color:white;
max-width:50%;
/* Now we will set the margin to auto */
/* This will make all the text to be
displayed at the center of the page */
margin:auto;
/* This will make the text to display at
the center of the page vertically */
height:80%;
}
.firstHalf{
width:75%;
display:flex;
/* It is to specify the direction of
the flexible items */
flex-direction:column;
justify-content:center
}
.firstHalf img{
display:flex;
border-radius:9050px;
}
/* This is used to make the text to
appear bigger */
/* Now we have used a font here to distinguish
itself from the next text */
.text-big{
font-family: 'Piazzolla', serif;
/* The text to have a style of bold */
font-weight: bold;
/* The size of the text to be appearing as
bigger to distinguish itself from the text
in the class text-small */
font-size: 41px;
/* The text to be aligned at center */
text-align:center;
}
.text-small{
font-family: 'Sansita Swashed', cursive;
font-size: 18px;
text-align:center;
}
#service{
margin:34px;
display:flex;
}
#service .box{
/* This is for the background of the box
to make all the boxes seperatable from
each other */
padding:300px;
margin:3px 6px;
/* To make the box have a better looking
than rectangular shape */
border-radius:28px;
}
/* This is for the image that we have
used in the box */
#service .box img{
margin-top:20px;
/* This is for the height of the image
that is required for the page */
height:150px;
margin:auto;
display:block;
/* This is to make the image obtain
a circular shape */
border-radius:200px;
}
#service .box p{
/* This is for the text that we have
written to define the image that we
have used */
font-family:sans-serif;
/* This is to make the text to be
aligned at center */
text-align:center;
}
#services{
margin:34px;
display:flex;
}
#services .box{
/* This is for the background of the box
to make all the boxes seperatable from
each other */
padding:300px;
margin:3px 6px;
/* To make the box have a better looking
than rectangular shape*/
border-radius:28px;
}
/* This is for the image that we have
used in the box*/
#services .box img{
margin-top:20px;
/* This is for the height of the image
that is required for the page */
height:150px;
margin:auto;
display:block;
/* This is to make the image obtain
a circular shape */
border-radius:200px;
}
#services .box p{
/* This is for the text that we have written
to define the image that we have used */
font-family:sans-serif;
/* This is to make the text to be
aligned at center */
text-align:center;
}
.btn{
padding:8px 20px;
margin:7px 0;
/* The radius of the border will have a width of
2px and the type of border will be solid. The
border will have a border of white depending on
what type of image we have used as background */
border:2px solid white;
/* Here we have used border-radius to make
the search button appear better */
border-radius:8px;
/* To make the button have the color
of background */
background:none;
/* To make the text of the button have
the color of white */
color:white;
cursor:pointer;
}
.btn-sm{
padding:6px 10px;
vertical-align: middle;
}
/* This is used here in case if we want to
make the text appear at center */
.center{
text-align: center;
}
.text-footer {
text-align: center;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
display: flex;
justify-content: center;
}CSS 设计：我们将使用 CSS 来设计简单的界面页面。这里创建这个页面的有趣部分是使用相同的导航栏背景和网页背景。同样在页脚中，我们将通过使用我们用于为网页和导航栏提供背景图像的类来使用相同的背景。网页的另一个有趣之处是导航栏固定在一个位置，因此当用户滚动网页时，他们会发现导航栏固定在一个位置。
CSS
*{
margin:0;
padding:0;
}
html{
scroll-behaviour:smooth;
}
:root{
--navbar-height:59px;
}
/* This is for the logo of the company */
.logo{
width:20%;
/* It is used to make the logo to
be displayed along with the ul
list horizontally */
display:flex;
justify-content:center;
align-items:center;
}
.logo img{
width:33%;
/* The logo image will have a border,
that has a width of 2px and the color
of the border is white */
border:2px solid white;
/* Now we will add a border radius of
5px to make the logo image circular */
border-radius:50px;
}
.navbar{
/* To make all those logo image and the
list to be displayed horizontally */
display:flex;
align-items:center;
justify-content:center;
position:sticky;
top:0;
/* When we will take our mouse to those
lists or image the cursor will be pointer */
cursor: pointer;
}
.nav-list{
width:70%;
/* It is to display the list in horizontal */
display:flex;
}
.nav-list li{
/* This will remove the style of bulleted list */
list-style:none;
/* This will create a space between the items */
padding:2px 6px;
}
.nav-list li a{
/* This is to remove the underline of the
text that appears when we use the anchor tag */
text-decoration:none;
/* This is to display the color of
those anchor text white */
color:white;
}
/* When the user will point their mouse towards
any anchor text they will find a different color */
.nav-list li a:hover{
color:grey;
}
.rightNav{
width:50;
/* We will find the search box along with
the search button will be shifted to right */
text-align:right;
}
#search{
padding:5px;
/* The size of the font that will be appearing
in the search box when the user will try to
search something */
font-size:17px;
/* The border of the search box has a width
of 2px and the type of the border is solid.
The color of the border will be grey */
border:2px solid grey;
/* We will use a border-radius to make the
search box give a better looking shape than
rectangular shape */
border-radius:9px;
}
.background{
/* The background image will change whenever
we load the page */
background: grey;
/* This will make the background that have
been added will be darken */
background-blend-mode:darken;
background-size:cover;
}
.firstsection{
/* It is to make the height of the
viewport to be 100 */
height:100vh;
}
.box-main{
/* This is to display the contact us and the
sentences below it to be displayed in flex */
display:flex;
justify-content:center;
align-items:center;
/* This is to display the text to have
a color of white */
color:white;
max-width:50%;
/* Now we will set the margin to auto */
/* This will make all the text to be
displayed at the center of the page */
margin:auto;
/* This will make the text to display at
the center of the page vertically */
height:80%;
}
.firstHalf{
width:75%;
display:flex;
/* It is to specify the direction of
the flexible items */
flex-direction:column;
justify-content:center
}
.firstHalf img{
display:flex;
border-radius:9050px;
}
/* This is used to make the text to
appear bigger */
/* Now we have used a font here to distinguish
itself from the next text */
.text-big{
font-family: 'Piazzolla', serif;
/* The text to have a style of bold */
font-weight: bold;
/* The size of the text to be appearing as
bigger to distinguish itself from the text
in the class text-small */
font-size: 41px;
/* The text to be aligned at center */
text-align:center;
}
.text-small{
font-family: 'Sansita Swashed', cursive;
font-size: 18px;
text-align:center;
}
#service{
margin:34px;
display:flex;
}
#service .box{
/* This is for the background of the box
to make all the boxes seperatable from
each other */
padding:300px;
margin:3px 6px;
/* To make the box have a better looking
than rectangular shape */
border-radius:28px;
}
/* This is for the image that we have
used in the box */
#service .box img{
margin-top:20px;
/* This is for the height of the image
that is required for the page */
height:150px;
margin:auto;
display:block;
/* This is to make the image obtain
a circular shape */
border-radius:200px;
}
#service .box p{
/* This is for the text that we have
written to define the image that we
have used */
font-family:sans-serif;
/* This is to make the text to be
aligned at center */
text-align:center;
}
#services{
margin:34px;
display:flex;
}
#services .box{
/* This is for the background of the box
to make all the boxes seperatable from
each other */
padding:300px;
margin:3px 6px;
/* To make the box have a better looking
than rectangular shape*/
border-radius:28px;
}
/* This is for the image that we have
used in the box*/
#services .box img{
margin-top:20px;
/* This is for the height of the image
that is required for the page */
height:150px;
margin:auto;
display:block;
/* This is to make the image obtain
a circular shape */
border-radius:200px;
}
#services .box p{
/* This is for the text that we have written
to define the image that we have used */
font-family:sans-serif;
/* This is to make the text to be
aligned at center */
text-align:center;
}
.btn{
padding:8px 20px;
margin:7px 0;
/* The radius of the border will have a width of
2px and the type of border will be solid. The
border will have a border of white depending on
what type of image we have used as background */
border:2px solid white;
/* Here we have used border-radius to make
the search button appear better */
border-radius:8px;
/* To make the button have the color
of background */
background:none;
/* To make the text of the button have
the color of white */
color:white;
cursor:pointer;
}
.btn-sm{
padding:6px 10px;
vertical-align: middle;
}
/* This is used here in case if we want to
make the text appear at center */
.center{
text-align: center;
}
.text-footer {
text-align: center;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
display: flex;
justify-content: center;
}
结合以上两段代码后，它创建了关于我们页面。
输出：
