当前位置：网站首页>Zhimei creative website exercise
Zhimei creative website exercise
2022-07-07 12:25:00 【Miracle_ ze】
Beauty creation
- Zhimei creative website
- summary ：
Zhimei creative website
1. home page
effect ：
On the front page html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> home page </title>
<link rel="stylesheet" type="text/css" href="css.css">
<!-- Outside the chain -->
</head>
<body>
<!-- Page header -->
<div id="d_Header">
<div id="d_header">
<img src="../img/homepage_03.png" id="img_header_tel">
</div>
</div>
<!-- The navigation bar -->
<div id="d_nav">
<a href="#" id="a_logo"></a><!-- No page Jump , This is back to the top operation -->
<nav id="nav_nav"><!-- Navigation bar labels -->
<span>
<a href=" home page .html" class="a_nav" id="a_nav1"> home page </a><span class="s_float">|</span>
<a href=" About beauty .html" class="a_nav" > About beauty </a><span class="s_float">|</span>
<a href=" Success stories .html" class="a_nav" > Success stories </a><span class="s_float">|</span>
<a href=" news information .html" class="a_nav" > news information </a><span class="s_float">|</span>
<a href=" Online consultation .html" class="a_nav" > Online consultation </a><span class="s_float">|</span>
<a href=" Contact us .html" class="a_nav" > Contact us </a>
</span>
</nav>
</div>
<a href="#" id="a_imgbg"></a>
<div id="d_body">
<div id="d_function">
<a href="#" id="a_function1"></a>
<a href="#" id="a_function2"></a>
<a href="#" id="a_function3"></a>
<a href="#" id="a_function4"></a>
<a href="#" id="a_function5"></a>
</div>
<div id="d_exhibition"><!-- exhibition: Exhibition -->
<div>
<div class="d_head">EXGIBITION</div>
<hr class="hr_head" color="#2d3237"/>
<span id="s_head_chinese"> The case shows </span>
</div>
<div id="d_exhibition_bord">
<div class="d_bord" id="d_bord1">
<a href="#" class="a_hord_img"></a>
<a href="#" class="a_bord_chinese"> Brand design </a>
<a href="#" class="a_bord_eng">brand design</a>
</div>
<div class="d_bord" id="d_bord2">
<a href="#" class="a_hord_img" id="a_hord_img2"></a>
<a href="#" class="a_bord_chinese" id="a_bord_chinese2"> Graphic Artist Designer </a>
<a href="#" class="a_bord_eng">graphic design</a>
</div>
<div class="d_bord" id="d_bord3">
<a href="#" class="a_hord_img" id="a_hord_img3"></a>
<a href="#" class="a_bord_chinese"> Web Design </a>
<a href="#" class="a_bord_eng">bweb design</a>
</div>
<div class="d_bord" id="d_bord4">
<a href="#" class="a_hord_img" id="a_hord_img4"></a>
<a href="#" class="a_bord_chinese"> Electronic mall </a>
<a href="#" class="a_bord_eng">electronic mall</a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_hord_img" id="a_hord_img5"></a>
<a href="#" class="a_bord_chinese" id="a_bord_chinese5"> Space architecture </a>
<a href="#" class="a_bord_eng">space/<br>architecture</a>
</div>
</div>
</div>
<div id="d_about_us">
<div>
<div class="d_head">ABOUT<span class="s_white">US</span></div>
<hr class="hr_head" color="#2d3237"/>
<span id="s_head_about"> About us </span>
</div>
<div id="d_about_us_text">
<h3 id="h3_about_head"> Beauty creation , Because of concentration , So professional </h3>
<p id="d_about_text">
Whether you are a young literary and artistic person who is on the road to entrepreneurship , The owner of store goods , Entrepreneurs who need to strengthen their brands , Online shop owner ...<br/>
We can all provide you with high-end 、 Low cost design 、, We take the most effective , The fastest way to provide you with the most appropriate design
</p>
</div>
</div>
<div id="d_process">
<div>
<div class="d_head">SERVICE<span class="s_white">PROCESS</span></div>
<hr class="hr_head" color="#2d3237"/>
<span id="s_head_procrss"> Service process </span>
</div>
<div id="d_process_contain">
<img src="../img/homepage_29.png" class="img_process">
<span classs="s_process"> Project negotiation , Quote according to demand </span>
<img src="../img/homepage_40.png" class="img_right">
<img src="../img/homepage_31.png" class="img_process">
<span classs="s_process"> Advance deposit , Start designing </span>
<img src="../img/homepage_40.png" class="img_right">
<img src="../img/homepage_34.png" class="img_process">
<span classs="s_process"> Revise the final draft , Finish the design </span>
<img src="../img/homepage_40.png" class="img_right">
<img src="../img/homepage_37.png" class="img_process">
<span classs="s_process"> Sign and pay the balance </span>
</div>
</div>
</div>
<div id="d_BOTTOM">
<div id="d_boottpm">
<p>
<a href="#" class="a_bottom"> home page </a>|
<a href="#" class="a_bottom"> About beauty </a>|
<a href="#" class="a_bottom"> Success stories </a>|
<a href="#" class="a_bottom"> Online consultation </a><br/>
Copyright ©2021-3-27 Zhimei studio <br/>
Technical support :<a href="#" class="a_bottom"> Every customer builds a station </a><a href="#" class="a_bottm"> Manage login
</p>
</div>
</div>
<a href="#" id="a_fixed"> Online Service <img src="../img/homepage_0311_03.png"></a>
</body>
</html>
On the front page css
```html
*{
padding: 0;
margin: 0 auto;
font-size: 13px;
/* font size */
font-family: " Microsoft YaHei ";
}
div
{
overflow: hidden;/* Overflow hidden */
}
img{
border:0;
}
a{
text-decoration: none; /* Define the standard text */
color: black;
}
/*—————————————— Top ————————————————*/
#d_Header{
width: 100%;
background-image:linear-gradient(to top,#dadada,#f7f7f7);
/* Gradient syntax ： From top to bottom （ Default ）.
You can define an angle , To replace the predefined direction （ Down 、 Up 、 towards the right 、 towards the left 、 Right down, wait ）.
value 0deg Equal to up （to top）. value 90deg Equal to right （to right）. value 180deg Equal to down （to bottom）.
Can have multiple colors , But there is only one direction .*/
border-bottom: 1px solid #eeeeee;
}
#d_header{
width: 1600px;
/*950px no way , Center right floating width is not enough . That is, the middle division
Not sure ？？？
*/
margin: 0 auto;
height: 34px;
}
#img_header_tel{
float: right;
margin-right: 9px;
margin-top:10px;
display: inline;/* Inline elements (display:inline), Setting width and height does not work , Does not affect line breaks */
}
/*—————————————— The navigation bar ————————————————*/
#d_nav{
width: 950px;/* Big will transition to the left */
margin: 0 auto;
height: 99px;
/*border:1px solid black;*/
}
#a_logo{
background: url(../img/homepage_07.png);
float: left;
margin-left: 10px;
margin-top: 42px;
width: 195px;
height: 41px;
display: inline;/* Inline elements (display:inline), Setting width and height does not work , Does not affect line breaks */
}
#nav_nav{
float: right;/* The navigation bar floats right */
margin-right: 64px;
margin-top: 48px;
}
.a_nav{
width: 80px;
margin: 0 10px;
float-size:13px;
float: left;/* Compared with the navigation bar nav label */
text-align: center;/* Center text content */
display: inline;
height: 29px;
}
.a_nav:hover{
font-weight:bold; /* The font gets thicker */
}
/*———————————— Before that, yes span Of | There is no setting that they will line up at the end , The following settings make | After each word ——————————————*/
.s_float{
float: left ;
display: inline;
}
/*———————————— Yes span Of | Set to make | After each word , complete ——————————————*/
#a_nav1{
border-bottom: 3px solid black;
}/* The horizontal line under the text */
/*—————————————— Home page picture ————————————————*/
#a_imgbg{
background: url(../img/homepage_10.png) no-repeat center top;
/*no-repeat No repetition center： Horizontal center top： vertical */
display: block;
width: 950px;
height: 400px;
margin: 0 auto;
}
/*—————————————— The whole picture below the home page ————————————————*/
#d_body{
width: 950px;
margin: 0 auto;
margin-top: 45px;
position: relative;/* Relative positioning */
}
#d_function{
width: 100%;
height: 178px;
padding: 0 36px;
}
#a_function1{
background: url(../img/homepage_13.png);
width: 108px;
height: 110px;
float: left;
margin-right: 84px;/*??????, There is no change */
display: inline;
}
#a_function2{
background: url(../img/homepage_15.png);
width: 108px;
height: 110px;
float: left;
margin-right: 84px;
display: inline;
}
#a_function3{
background: url(../img/homepage_17.png);
width: 108px;
height: 110px;
float: left;
margin-right: 84px;
display: inline;
}
#a_function4{
background: url(../img/homepage_19.png);
width: 108px;
height: 110px;
float: left;
margin-right: 84px;
display: inline;
}
#a_function5{
background: url(../img/homepage_21.png);
width: 108px;
height: 110px;
float: left;
/*margin-right: 84px; The width is not enough */
display: inline;
}
/*—————————————— The case shows ————————————————*/
#d_exhibition{
height: 446px;
}
.d_head{
height: 32px;
background: #2d3237;
border-bottom: 1px solid #dadbdc;
text-align: center;
font-size: 24px;
font-weight: normal;
text-shadow:1px -1px 1px #a31618;/* shadow : level vertical A fuzzy distance Color */
color:#ff0000;
}
#s_head_chinese{
font-size: 14px;
width: 76px;
height: 14px;
position: absolute;
top:212px;
left: 442px;
background: white;
color: black;
text-align: center;
}
.hr_head{
border-top: 1px solid #efe8e9;
margin-top: 8px;
}
#d_exhibition_bord{
margin-top: 46px;
width: 100%;
}
.d_bord{
width: 172px;
height: 300px;
float: left;
display: inline;
margin-right: 20px;
}
#d_bord1{
background: #2d3237;
}
.a_hord_img{
display: block;
background: url(../img/homepage_30_29.png);
width: 230px;
height: 230px;
}
#a_hord_img2{
background: url(../img/homepage_30_31.png);
}
#a_hord_img3{
background: url(../img/homepage_30_33.png);
}
#a_hord_img4{
background: url(../img/homepage_30_35.png);
}
#a_hord_img5{
background: url(../img/homepage_30_37.png);
}
.a_bord_chinese{
display: block;
margin-top: 14px;
margin-left: 27px;
font-size: 13px;
line-height: 19px;/* Row spacing , Row height */
color: #fc0000;
}
.a_bord_eng{
color: white;
display: block;
margin-left: 27px;
font-size: 17px;
font-variant: small-caps;/* Lowercase to uppercase */
line-height: 17px;
}
#d_bord2{
background: #ff0000;
}
#d_bord3{
background: #2d3237;
}
#d_bord4{
background: #2d3237;
}
#d_bord5{
background: #ff0000;
margin-right: 0;
}
#a_bord_chinese2{
color: black;
}
#a_bord_chinese5{
color: black;
}
/*—————————————— About us ————————————————*/
#d_about_us{
height: 250px;
text-align: center;
}
.s_white{
color: white;
font-size: 24px;
}
#s_head_about{
font-size: 14px;
width: 76px;
height: 14px;
position: absolute;
top:657px;
left: 442px;
background: white;
color: black;
text-align: center;
}
#h3_about_head{
margin-top: 22px;
color: #666666;
}
#d_about_us_text{
line-height:27px;
}
#h3_about_head{
font-size: 18px;
line-height: 34px;
}
/*—————————————— technological process ————————————————*/
#d_process{
height: 245px;
}
#s_head_procrss{
font-size: 14px;
width: 76px;
height: 14px;
position: absolute;
background: white;
bottom: 198px;
left: 442px;
color: black;
text-align: center;
}
#d_process_contain{
margin: 48px auto;
width: 750px;
height: 22px;
overflow: visible;
}
#img_process{
float: left;
margin-right: 14px;
display: inline;
margin-top: -5px;
}
#s_process{
float: left;
margin-right: 14px;
color:#666666;
display: inline;;
float-size:12px;
font-weight: bold;
}
#img_right{
float: left;
margin-right: 11px;
margin-top: 5px;
display: inline;
}
/*—————————————— Bottom ————————————————*/
#d_BOTTOM{
background-color: #eaeaea;
border-top: 1px solid #b4b4b4;
}
#d_boottpm{
width: 950px;
height: 57px;
margin:0 auto;
text-align: center;
padding: 30px 0px;
line-height: 22px;
}
.a_bottom:hover{
font-weight: bold;
}
/*—————————————— Online Service ————————————————*/
#a_fixed{
width: 13px;
height: 89px;
border-radius: 3px 0px 0px 3px;
position: fixed;/* Compared with browser */
right: 0px;
top: 234px;
background-image: linear-gradient(to right,#e80e0d 20%,#b32524 80%);
color: white;
padding: 12px 5px 11px 7px;
line-height: 17px;
font-size: 11px;
display: block;
text-align: center;
}
2. About beauty
effect 
About beauty html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> About us </title>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
<div id="d_Header">
<div id="d_header">
<img src="../img/homepage_03.png" id="img_header_tel">
</div>
</div>
<!-- The navigation bar -->
<div id="d_nav">
<a href="#" id="a_logo"></a><!-- No page Jump , This is back to the top operation -->
<nav id="nav_nav"><!-- Navigation bar labels -->
<span>
<a href=" home page .html" class="a_nav" > home page </a><span class="s_float">|</span>
<a href=" About beauty .html" class="a_nav" id="a_nav1" > About beauty </a><span class="s_float">|</span>
<a href=" Success stories .html" class="a_nav" > Success stories </a><span class="s_float">|</span>
<a href="#" class="a_nav" > news information </a><span class="s_float">|</span>
<a href="#" class="a_nav" > Online consultation </a><span class="s_float">|</span>
<a href="#" class="a_nav" > Contact us </a>
</span>
</nav>
</div>
<a href="#" id="a_imgbg"></a>
<div id="d_body">
<div id="d_about_us">
<div>
<div class="d_head">ABOUT<span class="s_white">US</span></div>
<hr class="hr_head" color="#2d3237"/>
<span id="s_head_about"> About us </span>
</div>
<div id="d_about_us_text">
<h3 id="h3_about_head"> Beauty creation , Because of concentration , So professional </h3>
<p id="d_about_text">
Whether you are a young literary and artistic person who is on the road to entrepreneurship , The owner of store goods , Entrepreneurs who need to strengthen their brands , Online shop owner ...<br/>
We can all provide you with high-end 、 Low cost design 、, We take the most effective , The fastest way to provide you with the most appropriate design
</p>
</div>
</div>
</div>
<div id="d_BOTTOM">
<div id="d_boottpm">
<p>
<a href="#" class="a_bottom"> home page </a>|
<a href="#" class="a_bottom"> About beauty </a>|
<a href="#" class="a_bottom"> Success stories </a>|
<a href="#" class="a_bottom"> Online consultation </a><br/>
Copyright ©2021-3-27 Zhimei studio <br/>
Technical support :<a href="#" class="a_bottom"> Every customer builds a station </a><a href="#" class="a_bottm"> Manage login
</p>
</div>
</div>
</body>
</html>
About beauty css
*{
padding: 0;
margin: 0 auto;
font-size: 13px;
/* font size */
font-family: " Microsoft YaHei ";
}
div
{
overflow: hidden;/* Overflow hidden */
}
img{
border:0;
}
a{
text-decoration: none; /* Define the standard text */
color: black;
}
/*—————————————— Top ————————————————*/
#d_Header{
width: 100%;
background-image:linear-gradient(to top,#dadada,#f7f7f7);
/* Gradient syntax ： From top to bottom （ Default ）.
You can define an angle , To replace the predefined direction （ Down 、 Up 、 towards the right 、 towards the left 、 Right down, wait ）.
value 0deg Equal to up （to top）. value 90deg Equal to right （to right）. value 180deg Equal to down （to bottom）.
Can have multiple colors , But there is only one direction .*/
border-bottom: 1px solid #eeeeee;
}
#d_header{
width: 1600px;
/*950px no way , Center right floating width is not enough . That is, the middle division
Not sure ？？？
*/
margin: 0 auto;
height: 34px;
}
#img_header_tel{
float: right;
margin-right: 9px;
margin-top:10px;
display: inline;/* Inline elements (display:inline), Setting width and height does not work , Does not affect line breaks */
}
/*—————————————— The navigation bar ————————————————*/
#d_nav{
width: 950px;/* Big will transition to the left */
margin: 0 auto;
height: 99px;
/*border:1px solid black;*/
}
#a_logo{
background: url(../img/homepage_07.png);
float: left;
margin-left: 10px;
margin-top: 42px;
width: 195px;
height: 41px;
display: inline;/* Inline elements (display:inline), Setting width and height does not work , Does not affect line breaks */
}
#nav_nav{
float: right;/* The navigation bar floats right */
margin-right: 64px;
margin-top: 48px;
}
.a_nav{
width: 80px;
margin: 0 10px;
float-size:13px;
float: left;/* Compared with the navigation bar nav label */
text-align: center;/* Center text content */
display: inline;
height: 29px;
}
.a_nav:hover{
font-weight:bold; /* The font gets thicker */
}
/*———————————— Before that, yes span Of | There is no setting that they will line up at the end , The following settings make | After each word ——————————————*/
.s_float{
float: left ;
display: inline;
}
/*———————————— Yes span Of | Set to make | After each word , complete ——————————————*/
#a_nav1{
border-bottom: 3px solid black;
}/* The horizontal line under the text */
/*—————————————— Home page picture ————————————————*/
#a_imgbg{
background: url(../img/homepage_10.png) no-repeat center top;
/*no-repeat No repetition center： Horizontal center top： vertical */
display: block;
width: 950px;
height: 400px;
margin: 0 auto;
}
#d_body{
width: 950px;
margin: 0 auto;
margin-top: 45px;
position: relative;/* Relative positioning */
}
/*—————————————— About us ————————————————*/
.d_head{
height: 32px;
background: #2d3237;
border-bottom: 1px solid #dadbdc;
text-align: center;
font-size: 24px;
font-weight: normal;
text-shadow:1px -1px 1px #a31618;/* shadow : level vertical A fuzzy distance Color */
color:#ff0000;
}
.hr_head{
border-top: 1px solid #efe8e9;
margin-top: 8px;
}
#d_about_us{
height: 250px;
text-align: center;
}
.s_white{
color: white;
font-size: 24px;
}
#s_head_about{
font-size: 14px;
width: 76px;
height: 14px;
position: absolute;
top:33px;
left: 442px;
background: white;
color: black;
text-align: center;
}
#h3_about_head{
margin-top: 22px;
color: #666666;
}
#d_about_us_text{
line-height:27px;
}
#h3_about_head{
font-size: 18px;
line-height: 34px;
}
/*—————————————— Bottom ————————————————*/
#d_BOTTOM{
background-color: #eaeaea;
border-top: 1px solid #b4b4b4;
}
#d_boottpm{
width: 950px;
height: 57px;
margin:0 auto;
text-align: center;
padding: 30px 0px;
line-height: 22px;
}
.a_bottom:hover{
font-weight: bold;
}
3. The case shows
effect 
The case shows html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Success stories </title>
<link rel="stylesheet" type="text/css" href="css2.css">
</head>
<body>
<div id="d_Header">
<div id="d_header">
<img src="../img/homepage_03.png" id="img_header_tel">
</div>
</div>
<!-- The navigation bar -->
<div id="d_nav">
<a href="#" id="a_logo"></a><!-- No page Jump , This is back to the top operation -->
<nav id="nav_nav"><!-- Navigation bar labels -->
<span>
<a href=" home page .html" class="a_nav" > home page </a><span class="s_float">|</span>
<a href=" About beauty .html" class="a_nav" > About beauty </a><span class="s_float">|</span>
<a href=" Success stories .html" class="a_nav" id="a_nav1"> Success stories </a><span class="s_float">|</span>
<a href=" news information .html" class="a_nav" > news information </a><span class="s_float">|</span>
<a href=" Online consultation .html" class="a_nav" > Online consultation </a><span class="s_float">|</span>
<a href=" Contact us .html" class="a_nav" > Contact us </a>
</span>
</nav>
</div>
<a href="#" id="a_imgbg"></a>
<!-- Success stories -->
<div id="d_body">
<div id="d_achievement_head">
<span id="s_achievement_head"> Success stories </span>
</div>
<div id="d_table_bord">
<div class="d_bord">
<a href="#" class="a_img" id="a_img1"></a>
<a href="#" class="a_logoname"> Red Star Macalline Investment Manual </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img2"></a>
<a href="#" class="a_logoname"> Craftsman base </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img3"></a>
<a href="#" class="a_logoname"> Tmall boutique men's flagship store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img4"></a>
<a href="#" class="a_logoname"> Web Design </a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_img" id="a_img5"></a>
<a href="#" class="a_logoname"> Shaqiang pickle chain store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img1"></a>
<a href="#" class="a_logoname"> Red Star Macalline Investment Manual </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img2"></a>
<a href="#" class="a_logoname"> Craftsman base </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img3"></a>
<a href="#" class="a_logoname"> Tmall boutique men's flagship store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img4"></a>
<a href="#" class="a_logoname"> Web Design </a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_img" id="a_img5"></a>
<a href="#" class="a_logoname"> Shaqiang pickle chain store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img1"></a>
<a href="#" class="a_logoname"> Red Star Macalline Investment Manual </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img2"></a>
<a href="#" class="a_logoname"> Craftsman base </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img3"></a>
<a href="#" class="a_logoname"> Tmall boutique men's flagship store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img4"></a>
<a href="#" class="a_logoname"> Web Design </a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_img" id="a_img5"></a>
<a href="#" class="a_logoname"> Shaqiang pickle chain store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img1"></a>
<a href="#" class="a_logoname"> Red Star Macalline Investment Manual </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img2"></a>
<a href="#" class="a_logoname"> Craftsman base </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img3"></a>
<a href="#" class="a_logoname"> Tmall boutique men's flagship store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img4"></a>
<a href="#" class="a_logoname"> Web Design </a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_img" id="a_img5"></a>
<a href="#" class="a_logoname"> Shaqiang pickle chain store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img1"></a>
<a href="#" class="a_logoname"> Red Star Macalline Investment Manual </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img2"></a>
<a href="#" class="a_logoname"> Craftsman base </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img3"></a>
<a href="#" class="a_logoname"> Tmall boutique men's flagship store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img4"></a>
<a href="#" class="a_logoname"> Web Design </a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_img" id="a_img5"></a>
<a href="#" class="a_logoname"> Shaqiang pickle chain store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img1"></a>
<a href="#" class="a_logoname"> Red Star Macalline Investment Manual </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img2"></a>
<a href="#" class="a_logoname"> Craftsman base </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img3"></a>
<a href="#" class="a_logoname"> Tmall boutique men's flagship store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img4"></a>
<a href="#" class="a_logoname"> Web Design </a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_img" id="a_img5"></a>
<a href="#" class="a_logoname"> Shaqiang pickle chain store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img1"></a>
<a href="#" class="a_logoname"> Red Star Macalline Investment Manual </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img2"></a>
<a href="#" class="a_logoname"> Craftsman base </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img3"></a>
<a href="#" class="a_logoname"> Tmall boutique men's flagship store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img4"></a>
<a href="#" class="a_logoname"> Web Design </a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_img" id="a_img5"></a>
<a href="#" class="a_logoname"> Shaqiang pickle chain store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img1"></a>
<a href="#" class="a_logoname"> Red Star Macalline Investment Manual </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img2"></a>
<a href="#" class="a_logoname"> Craftsman base </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img3"></a>
<a href="#" class="a_logoname"> Tmall boutique men's flagship store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img4"></a>
<a href="#" class="a_logoname"> Web Design </a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_img" id="a_img5"></a>
<a href="#" class="a_logoname"> Shaqiang pickle chain store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img1"></a>
<a href="#" class="a_logoname"> Red Star Macalline Investment Manual </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img2"></a>
<a href="#" class="a_logoname"> Craftsman base </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img3"></a>
<a href="#" class="a_logoname"> Tmall boutique men's flagship store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img4"></a>
<a href="#" class="a_logoname"> Web Design </a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_img" id="a_img5"></a>
<a href="#" class="a_logoname"> Shaqiang pickle chain store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img1"></a>
<a href="#" class="a_logoname"> Red Star Macalline Investment Manual </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img2"></a>
<a href="#" class="a_logoname"> Craftsman base </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img3"></a>
<a href="#" class="a_logoname"> Tmall boutique men's flagship store </a>
</div>
<div class="d_bord">
<a href="#" class="a_img" id="a_img4"></a>
<a href="#" class="a_logoname"> Web Design </a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_img" id="a_img5"></a>
<a href="#" class="a_logoname"> Shaqiang pickle chain store </a>
</div>
</div>
<div id="d_updown">
<a href="#" class="a_updown"> The previous page </a>
<a href="#" class="a_updown">1</a>
<a href="#" class="a_updown">2</a>
<a href="#" class="a_updown"> The next page </a>
</div>
</div>
<div id="d_BOTTOM">
<div id="d_boottpm">
<p>
<a href="#" class="a_bottom"> home page </a>|
<a href="#" class="a_bottom"> About beauty </a>|
<a href="#" class="a_bottom"> Success stories </a>|
<a href="#" class="a_bottom"> Online consultation </a><br/>
Copyright ©2021-3-27 Zhimei studio <br/>
Technical support :<a href="#" class="a_bottom"> Every customer builds a station </a><a href="#" class="a_bottm"> Manage login
</p>
</div>
</div>
</body>
</html>
The case shows css
*{
padding: 0;
margin: 0 auto;
font-size: 13px;
/* font size */
font-family: " Microsoft YaHei ";
}
div
{
overflow: hidden;/* Overflow hidden */
}
img{
border:0;
}
a{
text-decoration: none; /* Define the standard text */
color: black;
}
/*—————————————— Top ————————————————*/
#d_Header{
width: 100%;
background-image:linear-gradient(to top,#dadada,#f7f7f7);
/* Gradient syntax ： From top to bottom （ Default ）.
You can define an angle , To replace the predefined direction （ Down 、 Up 、 towards the right 、 towards the left 、 Right down, wait ）.
value 0deg Equal to up （to top）. value 90deg Equal to right （to right）. value 180deg Equal to down （to bottom）.
Can have multiple colors , But there is only one direction .*/
border-bottom: 1px solid #eeeeee;
}
#d_header{
width: 1600px;
/*950px no way , Center right floating width is not enough . That is, the middle division
Not sure ？？？
*/
margin: 0 auto;
height: 34px;
}
#img_header_tel{
float: right;
margin-right: 9px;
margin-top:10px;
display: inline;/* Inline elements (display:inline), Setting width and height does not work , Does not affect line breaks */
}
/*—————————————— The navigation bar ————————————————*/
#d_nav{
width: 950px;/* Big will transition to the left */
margin: 0 auto;
height: 99px;
/*border:1px solid black;*/
}
#a_logo{
background: url(../img/homepage_07.png);
float: left;
margin-left: 10px;
margin-top: 42px;
width: 195px;
height: 41px;
display: inline;/* Inline elements (display:inline), Setting width and height does not work , Does not affect line breaks */
}
#nav_nav{
float: right;/* The navigation bar floats right */
margin-right: 64px;
margin-top: 48px;
}
.a_nav{
width: 80px;
margin: 0 10px;
float-size:13px;
float: left;/* Compared with the navigation bar nav label */
text-align: center;/* Center text content */
display: inline;
height: 29px;
}
.a_nav:hover{
font-weight:bold; /* The font gets thicker */
}
/*———————————— Before that, yes span Of | There is no setting that they will line up at the end , The following settings make | After each word ——————————————*/
.s_float{
float: left ;
display: inline;
}
/*———————————— Yes span Of | Set to make | After each word , complete ——————————————*/
#a_nav1{
border-bottom: 3px solid black;
}/* The horizontal line under the text */
/*—————————————— Home page picture ————————————————*/
#a_imgbg{
background: url(../img/homepage_10.png) no-repeat center top;
/*no-repeat No repetition center： Horizontal center top： vertical */
display: block;
width: 950px;
height: 400px;
margin: 0 auto;
}
#d_body{
width: 950px;
margin: 0 auto;
/* margin-top: 45px; */
position: relative;/* Relative positioning */
height: 1673px;
}
/*—————————————— Bottom ————————————————*/
#d_BOTTOM{
background-color: #eaeaea;
border-top: 1px solid #b4b4b4;
}
#d_boottpm{
width: 950px;
height: 57px;
margin:0 auto;
text-align: center;
padding: 30px 0px;
line-height: 22px;
}
.a_bottom:hover{
font-weight: bold;
}
/*——————————————————————————————*/
#d_body{
width: 950px;
margin: 0 auto;
margin-top: 45px;
position: relative;/* Relative positioning */
}
/*—————————————— Case study ———————————————*/
#d_achievement_head{
margin-top: 30px;
position: relative;
width: 100%;
height: 32px;
border-bottom: 2px solid #adadad;
overflow: visible;
}
#s_achievement_head{
display:block;
padding-left: 11px;
line-height: 32px;
text-align: center;
padding-right: 18px;
font-weight: bold;
position: absolute;
border-bottom: 2px solid black;
}
/*—————————————— Case text ———————————————*/
#d_table_bord{
width: 934px;
margin: 0 auto;
margin-top: 5px;
}
/*—————————————— Case text ———————————————*/
.d_bord{
width: 174px;
height: 155px;
margin-right: 16px;
text-align: center;
float: left;
display: inline;
}
.a_img{
width: 100%;
height: 117px;
float: left;
display: inline;
/* border: 1px solid black; */
}
.a_logoname{
color: #666666;
line-height: 23px;
font-size: 11px;
display:block;
}
.a_logoname:hover{
font-weight: bold;
color: black;
}
/*—————————————— Case pictures ———————————————*/
#a_img1{
background: url(../img/achievement_03.png);
}
#a_img2{
background: url(../img/achievement_05.png);
}
#a_img3{
background: url(../img/achievement_07.png);
}
#a_img4{
background: url(../img/achievement_09.png);
}
#a_img5{
background: url(../img/achievement_11.png);
}
/* Pay attention to selector priority */
#d_bord5{
margin-right: 0px;
}
/* #a_img6{
background: url(../img/achievement_18.png);
} */
/*—————————————— Case pagination ———————————————*/
#d_updown{
width: 214px;
margin: 0 auto;
}
.a_updown{
float: left;
padding: 6px hpx;
margin-right: 18px;
display: inline;
border:1px solid transparent;
/* transparent amount to rgba(0,0,0,0) Fully transparent black */
}
.a_updown:hover{
border:1px solid #daeaef;
}
news information
effect 
News dynamic html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> news information </title>
<link rel="stylesheet" type="text/css" href="css3.css">
</head>
<body>
<div id="d_Header">
<div id="d_header">
<img src="../img/homepage_03.png" id="img_header_tel">
</div>
</div>
<!-- The navigation bar -->
<div id="d_nav">
<a href="#" id="a_logo"></a><!-- No page Jump , This is back to the top operation -->
<nav id="nav_nav"><!-- Navigation bar labels -->
<span>
<a href=" home page .html" class="a_nav" > home page </a><span class="s_float">|</span>
<a href=" About beauty .html" class="a_nav" > About beauty </a><span class="s_float">|</span>
<a href=" Success stories .html" class="a_nav" > Success stories </a><span class="s_float">|</span>
<a href=" news information .html" class="a_nav" id="a_nav1"> news information </a><span class="s_float">|</span>
<a href=" Online consultation .html" class="a_nav" > Online consultation </a><span class="s_float">|</span>
<a href=" Contact us .html" class="a_nav" > Contact us </a>
</span>
</nav>
</div>
<a href="#" id="a_imgbg"></a>
<div id="d_body">
<div id="d_achievement_head">
<span id="s_achievement_head"> The article lists </span>
</div>
<ul id="ul_article">
<li class="li_article">
<a href="#" class="a_article"><span class="s_fans">[ fine ]</span> Why register a trademark ？</a>
<span class="s_time">2020-12-03</span>
</li>
<li class="li_article">
<a href="logo.html" class="a_article"><span class="s_fans">[ fine ]</span> Why design logo？</a>
<span class="s_time">2020-12-25</span>
</li>
<li class="li_article">
<a href="#" class="a_article"> Four key points of exhibition planning </a>
<span class="s_time">2020-12-09</span>
</li>
<li class="li_article">
<a href="#" class="a_article"> Four key points of exhibition planning </a>
<span class="s_time">2020-12-09</span>
</li>
<li class="li_article">
<a href="#" class="a_article"> Four key points of exhibition planning </a>
<span class="s_time">2020-12-09</span>
</li>
<li class="li_article">
<a href="#" class="a_article"> Four key points of exhibition planning </a>
<span class="s_time">2020-12-09</span>
</li>
<li class="li_article">
<a href="#" class="a_article"> Four key points of exhibition planning </a>
<span class="s_time">2020-12-09</span>
</li>
</ul>
<a href="#" class="a_updown" id="a_updown1"> The previous page </a>
<a href="#" class="a_updown">1</a>
<a href="#" class="a_updown">2</a>
<a href="#" class="a_updown"> The next page </a>
</div>
<div id="d_BOTTOM">
<div id="d_boottpm">
<p>
<a href="#" class="a_bottom"> home page </a>|
<a href="#" class="a_bottom"> About beauty </a>|
<a href="#" class="a_bottom"> Success stories </a>|
<a href="#" class="a_bottom"> Online consultation </a><br/>
Copyright ©2021-3-27 Zhimei studio <br/>
Technical support :<a href="#" class="a_bottom"> Every customer builds a station </a><a href="#" class="a_bottm"> Manage login
</p>
</div>
</div>
</body>
</html>
News dynamic css
*{
padding: 0;
margin: 0 auto;
font-size: 13px;
/* font size */
font-family: " Microsoft YaHei ";
}
div
{
overflow: hidden;/* Overflow hidden */
}
img{
border:0;
}
a{
text-decoration: none; /* Define the standard text */
color: black;
}
/*—————————————— Top ————————————————*/
#d_Header{
width: 100%;
background-image:linear-gradient(to top,#dadada,#f7f7f7);
/* Gradient syntax ： From top to bottom （ Default ）.
You can define an angle , To replace the predefined direction （ Down 、 Up 、 towards the right 、 towards the left 、 Right down, wait ）.
value 0deg Equal to up （to top）. value 90deg Equal to right （to right）. value 180deg Equal to down （to bottom）.
Can have multiple colors , But there is only one direction .*/
border-bottom: 1px solid #eeeeee;
}
#d_header{
width: 1600px;
/*950px no way , Center right floating width is not enough . That is, the middle division
Not sure ？？？
*/
margin: 0 auto;
height: 34px;
}
#img_header_tel{
float: right;
margin-right: 9px;
margin-top:10px;
display: inline;/* Inline elements (display:inline), Setting width and height does not work , Does not affect line breaks */
}
/*—————————————— The navigation bar ————————————————*/
#d_nav{
width: 950px;/* Big will transition to the left */
margin: 0 auto;
height: 99px;
/*border:1px solid black;*/
}
#a_logo{
background: url(../img/homepage_07.png);
float: left;
margin-left: 10px;
margin-top: 42px;
width: 195px;
height: 41px;
display: inline;/* Inline elements (display:inline), Setting width and height does not work , Does not affect line breaks */
}
#nav_nav{
float: right;/* The navigation bar floats right */
margin-right: 64px;
margin-top: 48px;
}
.a_nav{
width: 80px;
margin: 0 10px;
float-size:13px;
float: left;/* Compared with the navigation bar nav label */
text-align: center;/* Center text content */
display: inline;
height: 29px;
}
.a_nav:hover{
font-weight:bold; /* The font gets thicker */
}
/*———————————— Before that, yes span Of | There is no setting that they will line up at the end , The following settings make | After each word ——————————————*/
.s_float{
float: left ;
display: inline;
}
/*———————————— Yes span Of | Set to make | After each word , complete ——————————————*/
#a_nav1{
border-bottom: 3px solid black;
}/* The horizontal line under the text */
/*—————————————— Home page picture ————————————————*/
#a_imgbg{
background: url(../img/homepage_10.png) no-repeat center top;
/*no-repeat No repetition center： Horizontal center top： vertical */
display: block;
width: 950px;
height: 400px;
margin: 0 auto;
}
#d_body{
width: 950px;
margin: 0 auto;
margin-top: 45px;
position: relative;/* Relative positioning */
}
/*—————————————— Bottom ————————————————*/
#d_BOTTOM{
background-color: #eaeaea;
border-top: 1px solid #b4b4b4;
}
#d_boottpm{
width: 950px;
height: 57px;
margin:0 auto;
text-align: center;
padding: 30px 0px;
line-height: 22px;
}
.a_bottom:hover{
font-weight: bold;
}
/*—————————————— Text list ———————————————*/
#d_achievement_head{
margin-top: 30px;
position: relative;
width: 100%;
height: 32px;
border-bottom: 2px solid #adadad;
overflow: visible;
}
#s_achievement_head{
display:block;
padding-left: 11px;
line-height: 32px;
text-align: center;
padding-right: 18px;
font-weight: bold;
position: absolute;
border-bottom: 2px solid black;
}
/*—————————————— Pagination ———————————————*/
#d_updown{
padding: 6px 5px;
margin:0 auto;
margin-right: 18px;
display:inline;
}
.a_updown{
float: left;
padding: 6px hpx;
margin-right: 18px;
display: inline;
border:1px solid transparent;
/* transparent amount to rgba(0,0,0,0) Fully transparent black */
font-size: 11px;
color: #666666;
}
#a_updown1{
margin-left: 10px;
}
.a_updown:hover{
border:1px solid #dbeaef;
}
/*—————————————— article ———————————————*/
#d_body{
width: 950px;
margin: 0 auto;
/* margin-top: 45px; */
position: relative;/* Relative positioning */
height: 350px;
}
/*—————————————— list ———————————————*/
#ul_article{
width: 100%;
height: 235px;
margin-top: 5px;
list-style-type: none;/* There is no sign */
}
.li_article{
height: 30px;
border-bottom: 1px dashed #dddddd;
margin: 0 5px;
width: 940px;
line-height: 30px;
color: #666666;
}
.a_article{
float: left;
margin-left: 5px;
font-size: 11px;
display: inline;
color: #666666;
}
.s_time{
font-size: 11px;
margin-right: 15px;
float: right;
display:inline
}
.s_fans{
font-size: 11px;
color: #b10808;
}
.a_article:hover{
font-weight: bold;
}
Detailed content —— news information ： Why design logo？
effect 
Content html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>logo</title>
<link rel="stylesheet" type="text/css" href="css4.css">
</head>
<body>
<div id="d_Header">
<div id="d_header">
<img src="../img/homepage_03.png" id="img_header_tel">
</div>
</div>
<!-- The navigation bar -->
<div id="d_nav">
<a href="#" id="a_logo"></a><!-- No page Jump , This is back to the top operation -->
<nav id="nav_nav"><!-- Navigation bar labels -->
<span>
<a href=" home page .html" class="a_nav" > home page </a><span class="s_float">|</span>
<a href=" About beauty .html" class="a_nav" > About beauty </a><span class="s_float">|</span>
<a href=" Success stories .html" class="a_nav" > Success stories </a><span class="s_float">|</span>
<a href=" news information .html" class="a_nav"> news information </a><span class="s_float">|</span>
<a href=" Online consultation .html" class="a_nav" > Online consultation </a><span class="s_float">|</span>
<a href=" Contact us .html" class="a_nav" > Contact us </a>
</span>
</nav>
</div>
<a href="#" id="a_imgbg"></a>
<div id="d_body">
<div id="d_left">
<div id="d_left_head">
<span id="s_left_head"> Online Service </span>
</div>
<div id="d_server">
<a href="#" class="a_server">
<img src="../img/contant_03.png" class="img_qq">
<span class="s_server"> Customer service one </span>
</a>
<a href="#" class="a_server">
<img src="../img/contant_03.png" class="img_qq">
<span class="s_server"> Customer service II </span>
</a>
</div>
<div id="d_worktime">
<div class="d_worktime_head">
<img src="../img/contant_33.png" class="img_clock">
<span class="s_worktime_head"> working hours </span>
</div>
<p>
Monday to Friday :8:30-17:30<br/>
Saturday to Sunday :9:00-17:00
</p>
</div>
<div id="d_communicate">
<div class="d_worktime_head">
<img src="../img/contant_39.png" class="img_clock">
<span class="s_worktime_head"> Contact information </span>
</div>
<p>
Telephone ：123456789<br/>
Telephone ：147258369
</p>
</div>
</div>
<div id="d_right">
<h1 id="h1_head"> Why design logo？</h1>
<span id="s_article_time">2020-12-25 12:00</span>
<div id="d_share">
<span id="s_shareto"> Share the :</span>
<a href="#" class="a_share" ><img src="../img/contant_07.png" class="img_share"> Copy website </a>
<a href="#" class="a_share" ><img src="../img/contant_09.png" class="img_share"> Tencent micro-blog </a>
<a href="#" class="a_share" ><img src="../img/contant_11.png" class="img_share"> Sina weibo </a>
<a href="#" class="a_share" ><img src="../img/contant_13.png" class="img_share">QQ Space </a>
<a href="#" class="a_share" ><img src="../img/contant_15.png" class="img_share"> Kaixin </a>
<a href="#" class="a_share" ><img src="../img/contant_17.png" class="img_share"> Renren.com </a>
<a href="#" class="a_share" ><img src="../img/contant_19.png" class="img_share"> douban </a>
<a href="#" class="a_share" id="a_share1"><img src="../img/contant_28.png" class="img_share" > Sohu Weibo </a>
<a href="#" class="a_share" ><img src="../img/contant_29.png" class="img_share"> Netease Weibo </a>
<a href="#" class="a_share" ><img src="../img/contant_30.png" class="img_share"> Baidu space </a>
<a href="#" class="a_share" ><img src="../img/contant_31.png" class="img_share"> Baidu post bar </a>
</div>
<p class="p_text" id="p_text1">
log It conveys a kind of spirit and idea , He should convey the culture and life of the company , So the company or any organization should have its own consistent logo .
</p>
<p class="p_text">
First of all , Strengthen customer identification <br/>
logo It's unique , Can represent an enterprise , So the customer service will deepen the impression of the enterprise after seeing it . There are many kinds of goods in today's market ,
Various logo Trademark symbols are countless , Only distinctive features 、 Easy to recognize and remember 、 It has a profound meaning 、 Beautiful logo , Can be highlighted in the industry .
Make it different from other enterprises 、 Products or services , Make the audience deeply impressed by the enterprise , So design a good one logo Particularly important .
</p>
<p class="p_text">
First of all , Strengthen customer identification <br/>
logo It's unique , Can represent an enterprise , So the customer service will deepen the impression of the enterprise after seeing it . There are many kinds of goods in today's market ,
Various logo Trademark symbols are countless , Only distinctive features 、 Easy to recognize and remember 、 It has a profound meaning 、 Beautiful logo , Can be highlighted in the industry .
Make it different from other enterprises 、 Products or services , Make the audience deeply impressed by the enterprise , So design a good one logo Particularly important .
</p>
<p class="p_text">
First of all , Strengthen customer identification <br/>
logo It's unique , Can represent an enterprise , So the customer service will deepen the impression of the enterprise after seeing it . There are many kinds of goods in today's market ,
Various logo Trademark symbols are countless , Only distinctive features 、 Easy to recognize and remember 、 It has a profound meaning 、 Beautiful logo , Can be highlighted in the industry .
Make it different from other enterprises 、 Products or services , Make the audience deeply impressed by the enterprise , So design a good one logo Particularly important .
</p>
<a href="#" class="a_updown" id="a_updown1"> Last one </a>
<a href="#" class="a_updown" > Next </a>
</div>
</div>
<div id="d_BOTTOM">
<div id="d_boottpm">
<p>
<a href="#" class="a_bottom"> home page </a>|
<a href="#" class="a_bottom"> About beauty </a>|
<a href="#" class="a_bottom"> Success stories </a>|
<a href="#" class="a_bottom"> Online consultation </a><br/>
Copyright ©2021-3-27 Zhimei studio <br/>
Technical support :<a href="#" class="a_bottom"> Every customer builds a station </a><a href="#" class="a_bottm"> Manage login
</p>
</div>
</div>
</body>
</html>
Content css
```html
*{
padding: 0;
margin: 0 auto;
font-size: 13px;
/* font size */
font-family: " Microsoft YaHei ";
}
div
{
overflow: hidden;/* Overflow hidden */
}
img{
border:0;
}
a{
text-decoration: none; /* Define the standard text */
color: black;
}
/*—————————————— Top ————————————————*/
#d_Header{
width: 100%;
background-image:linear-gradient(to top,#dadada,#f7f7f7);
/* Gradient syntax ： From top to bottom （ Default ）.
You can define an angle , To replace the predefined direction （ Down 、 Up 、 towards the right 、 towards the left 、 Right down, wait ）.
value 0deg Equal to up （to top）. value 90deg Equal to right （to right）. value 180deg Equal to down （to bottom）.
Can have multiple colors , But there is only one direction .*/
border-bottom: 1px solid #eeeeee;
}
#d_header{
width: 1600px;
/*950px no way , Center right floating width is not enough . That is, the middle division
Not sure ？？？
*/
margin: 0 auto;
height: 34px;
}
#img_header_tel{
float: right;
margin-right: 9px;
margin-top:10px;
display: inline;/* Inline elements (display:inline), Setting width and height does not work , Does not affect line breaks */
}
/*—————————————— The navigation bar ————————————————*/
#d_nav{
width: 950px;/* Big will transition to the left */
margin: 0 auto;
height: 99px;
/*border:1px solid black;*/
}
#a_logo{
background: url(../img/homepage_07.png);
float: left;
margin-left: 10px;
margin-top: 42px;
width: 195px;
height: 41px;
display: inline;/* Inline elements (display:inline), Setting width and height does not work , Does not affect line breaks */
}
#nav_nav{
float: right;/* The navigation bar floats right */
margin-right: 64px;
margin-top: 48px;
}
.a_nav{
width: 80px;
margin: 0 10px;
float-size:13px;
float: left;/* Compared with the navigation bar nav label */
text-align: center;/* Center text content */
display: inline;
height: 29px;
}
.a_nav:hover{
font-weight:bold; /* The font gets thicker */
}
/*———————————— Before that, yes span Of | There is no setting that they will line up at the end , The following settings make | After each word ——————————————*/
.s_float{
float: left ;
display: inline;
}
/*—————————————— Home page picture ————————————————*/
#a_imgbg{
background: url(../img/homepage_10.png) no-repeat center top;
/*no-repeat No repetition center： Horizontal center top： vertical */
display: block;
width: 950px;
height: 400px;
margin: 0 auto;
}
#d_body{
width: 950px;
margin: 0 auto;
position: relative;/* Relative positioning */
}
/*—————————————— Bottom ————————————————*/
#d_BOTTOM{
background-color: #eaeaea;
border-top: 1px solid #b4b4b4;
}
#d_boottpm{
width: 950px;
height: 57px;
margin:0 auto;
text-align: center;
padding: 30px 0px;
line-height: 22px;
}
.a_bottom:hover{
font-weight: bold;
}
#d_left{
width: 210px;
float: left;
display:inline;
margin-top: 29px;
}
#d_left_head{
position: relative;
width: 100%;
height: 30px;
border-bottom: 2px solid #9c9c9c;
overflow: visible;
}
#s_left_head{
padding-left: 5px;
line-height: 30px;
text-align: center;
padding-right: 5px;
font-weight: bold;
position: absolute;
display:block;
border-bottom: 2px solid #ff680b;
}
#d_server{
margin-top: 10px;
margin-left: 10px;
height: 64px;
width: 190px;
border-bottom: 1px dashed #999999;
}
.a_server{
line-height: 21px;
margin-bottom: 7px;
display:block;
}
.s_server{
margin-left: 8px;
font-size: 11px;
display:inline;
}
.img_qq{
display:inline;
float: left;
}
#d_worktime{
width: 190px;
height: 100px;
margin-left: 10px;
line-height: 24px;
border-bottom: 1px dashed #999999;
overflow: visible;
}
.d_worktime_head{
height: 25px;
margin-top: 8px;
margin-left: -4px;
line-height: 25px;
font-weight: bold;
margin-bottom: 13px;
vertical-align: middle;/* The vertical alignment of elements */
}
.s_worktime_head{
float: left;
font-weight: bold;
display:inline;
}
.img_clock{
float: left;
display:inline;
}
#d_ommunicate{
overflow: visible;
width: 190px;
height: 100px;
margin-left: 10px;
line-height: 24px;
}
#d_right{
width: 740px;
height: 725px;
float: left;
margin-top: 29px;
display:inline;
}
#h1_head{
text-align: center;
font-size: 19px;
margin-top: 20px;
line-height: 21px;
}
#s_article_time{
text-align: center;
font-size: 9px;
line-height: 35px;
display:block;
}
#d_share{
width: 735px;
height: 55px;
margin: 0 auto;
border-bottom: 1px dashed #b4b4b4;
color: #666666;
line-height: 25px;
margin-bottom: 25px;
}
.a_share{
font-size: 12px;
color: #666666;
float: left;
display:inline;
margin-right: 15px;
line-height: 20px;
margin-bottom: 5px;
}
.a_share:hover{
font-weight: bold;
}
#s_shareto{
float: left;
display:inline;
font-size: 12px;
margin-left: 10px;
}
.img_share{
float: left;
margin-right: 2px;
}
#a_share1{
margin-left: 50px;
}
.p_text{
font-size: 11px;
color: #666666;
margin-bottom: 50px;
width: 650px;
}
.p_text1
{
text-indent: 0px;/* Initial indent */
}
.a_updown{
padding: 6px 5px;
margin: 0 auto;
margin-right: 18px;
display:inline;
border:1px solid transparent;
}
.a_updown:hover{
border: 1px solid #dbeaef;
}
#a_updown1{
margin-left: 290px;
}
The same goes for the remaining two pages , The content is not written ： Contact us , Online consultation （ Let's take contacting us as an example ）
effect 
Contact our html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Contact us </title>
<link rel="stylesheet" type="text/css" href="css4.css">
</head>
<body>
<div id="d_Header">
<div id="d_header">
<img src="../img/homepage_03.png" id="img_header_tel">
</div>
</div>
<!-- The navigation bar -->
<div id="d_nav">
<a href="#" id="a_logo"></a><!-- No page Jump , This is back to the top operation -->
<nav id="nav_nav"><!-- Navigation bar labels -->
<span>
<a href=" home page .html" class="a_nav" > home page </a><span class="s_float">|</span>
<a href=" About beauty .html" class="a_nav" > About beauty </a><span class="s_float">|</span>
<a href=" Success stories .html" class="a_nav" > Success stories </a><span class="s_float">|</span>
<a href=" news information .html" class="a_nav"> news information </a><span class="s_float">|</span>
<a href=" Online consultation .html" class="a_nav" > Online consultation </a><span class="s_float">|</span>
<a href=" Contact us .html" class="a_nav" id="a_nav1"> Contact us </a>
</span>
</nav>
</div>
<a href="#" id="a_imgbg"></a>
<div id="d_BOTTOM">
<div id="d_boottpm">
<p>
<a href="#" class="a_bottom"> home page </a>|
<a href="#" class="a_bottom"> About beauty </a>|
<a href="#" class="a_bottom"> Success stories </a>|
<a href="#" class="a_bottom"> Online consultation </a><br/>
Copyright ©2021-3-27 Zhimei studio <br/>
Technical support :<a href="#" class="a_bottom"> Every customer builds a station </a><a href="#" class="a_bottm"> Manage login
</p>
</div>
</div>
</body>
</html>
Contact our css
*{
padding: 0;
margin: 0 auto;
font-size: 13px;
/* font size */
font-family: " Microsoft YaHei ";
}
div
{
overflow: hidden;/* Overflow hidden */
}
img{
border:0;
}
a{
text-decoration: none; /* Define the standard text */
color: black;
}
/*—————————————— Top ————————————————*/
#d_Header{
width: 100%;
background-image:linear-gradient(to top,#dadada,#f7f7f7);
/* Gradient syntax ： From top to bottom （ Default ）.
You can define an angle , To replace the predefined direction （ Down 、 Up 、 towards the right 、 towards the left 、 Right down, wait ）.
value 0deg Equal to up （to top）. value 90deg Equal to right （to right）. value 180deg Equal to down （to bottom）.
Can have multiple colors , But there is only one direction .*/
border-bottom: 1px solid #eeeeee;
}
#d_header{
width: 1600px;
/*950px no way , Center right floating width is not enough . That is, the middle division
Not sure ？？？
*/
margin: 0 auto;
height: 34px;
}
#img_header_tel{
float: right;
margin-right: 9px;
margin-top:10px;
display: inline;/* Inline elements (display:inline), Setting width and height does not work , Does not affect line breaks */
}
/*—————————————— The navigation bar ————————————————*/
#d_nav{
width: 950px;/* Big will transition to the left */
margin: 0 auto;
height: 99px;
/*border:1px solid black;*/
}
#a_logo{
background: url(../img/homepage_07.png);
float: left;
margin-left: 10px;
margin-top: 42px;
width: 195px;
height: 41px;
display: inline;/* Inline elements (display:inline), Setting width and height does not work , Does not affect line breaks */
}
#nav_nav{
float: right;/* The navigation bar floats right */
margin-right: 64px;
margin-top: 48px;
}
.a_nav{
width: 80px;
margin: 0 10px;
float-size:13px;
float: left;/* Compared with the navigation bar nav label */
text-align: center;/* Center text content */
display: inline;
height: 29px;
}
.a_nav:hover{
font-weight:bold; /* The font gets thicker */
}
/*———————————— Before that, yes span Of | There is no setting that they will line up at the end , The following settings make | After each word ——————————————*/
.s_float{
float: left ;
display: inline;
}
/*———————————— Yes span Of | Set to make | After each word , complete ——————————————*/
#a_nav1{
border-bottom: 3px solid black;
}/* The horizontal line under the text */
/*—————————————— Home page picture ————————————————*/
#a_imgbg{
background: url(../img/homepage_10.png) no-repeat center top;
/*no-repeat No repetition center： Horizontal center top： vertical */
display: block;
width: 950px;
height: 400px;
margin: 0 auto;
}
#d_body{
width: 950px;
margin: 0 auto;
margin-top: 45px;
position: relative;/* Relative positioning */
}
/*—————————————— Bottom ————————————————*/
#d_BOTTOM{
background-color: #eaeaea;
border-top: 1px solid #b4b4b4;
}
#d_boottpm{
width: 950px;
height: 57px;
margin:0 auto;
text-align: center;
padding: 30px 0px;
line-height: 22px;
}
.a_bottom:hover{
font-weight: bold;
}
summary ：
Some renderings of the website are reduced , One of them is right web Application of website knowledge ,
边栏推荐
- EPP+DIS学习之路（1）——Hello world！
- [shortest circuit] acwing 1127 Sweet butter (heap optimized dijsktra or SPFA)
- Introduction and application of smoothstep in unity: optimization of dissolution effect
- Time bomb inside the software: 0-day log4shell is just the tip of the iceberg
- TypeScript 接口继承
- 30. Few-shot Named Entity Recognition with Self-describing Networks 阅读笔记
- 数据库系统原理与应用教程（008）—— 数据库相关概念练习题
- The function of adding @ before the path in C ＃
- ＜No. 8＞ 1816. 截断句子 （简单）
- Tutorial on principles and applications of database system (009) -- conceptual model and data model
猜你喜欢
ES底层原理之倒排索引
Fleet tutorial 14 basic introduction to listtile (tutorial includes source code)
VSCode的学习使用
全球首堆“玲龙一号”反应堆厂房钢制安全壳上部筒体吊装成功
![[data clustering] realize data clustering analysis based on multiverse optimization DBSCAN with matlab code](/img/83/0652e3138b87a4741dd8261a24d1e8.png)
[data clustering] realize data clustering analysis based on multiverse optimization DBSCAN with matlab code
![110. Network security penetration test - [privilege promotion 8] - [windows sqlserver xp_cmdshell stored procedure authorization]](/img/62/1ec8885aaa2d4dca0e764b73a1e2df.png)
110. Network security penetration test - [privilege promotion 8] - [windows sqlserver xp_cmdshell stored procedure authorization]
Processing strategy of message queue message loss and repeated message sending
Zero shot, one shot and few shot
SQL lab 26~31 summary (subsequent continuous update) (including parameter pollution explanation)
数据库系统原理与应用教程（010）—— 概念模型与数据模型练习题
随机推荐
An error occurred when vscade tried to create a file in the target directory: access denied [resolved]
Zero shot, one shot and few shot
SQL lab 1~10 summary (subsequent continuous update)
Visual studio 2019 (localdb) \mssqllocaldb SQL Server 2014 database version is 852 and cannot be opened. This server supports version 782 and earlier
In the small skin panel, use CMD to enter the MySQL command, including the MySQL error unknown variable 'secure_ file_ Priv 'solution (super detailed)
NPC Jincang was invited to participate in the "aerospace 706" I have an appointment with aerospace computer "national Partner Conference
Inverted index of ES underlying principle
Rationaldmis2022 array workpiece measurement
Sign up now ｜ oar hacker marathon phase III midsummer debut, waiting for you to challenge
DOM parsing XML error: content is not allowed in Prolog
Sonar:Cognitive Complexity认知复杂度
[play RT thread] RT thread Studio - key control motor forward and reverse rotation, buzzer
数据库系统原理与应用教程（009）—— 概念模型与数据模型
跨域问题解决方案
Sort out the garbage collection of JVM, and don't involve high-quality things such as performance tuning for the time being
The hoisting of the upper cylinder of the steel containment of the world's first reactor "linglong-1" reactor building was successful
小红书微服务框架及治理等云原生业务架构演进案例
Introduction and application of smoothstep in unity: optimization of dissolution effect
＜No. 9＞ 1805. Number of different integers in the string (simple)
【玩转 RT-Thread】 RT-Thread Studio —— 按键控制电机正反转、蜂鸣器