当前位置：网站首页>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 ,
边栏推荐
- 《看完就懂系列》天哪！搞懂节流与防抖竟简单如斯~
- 2022年在启牛开华泰的账户安全吗？
- 盘点JS判断空对象的几大方法
- 数据库系统原理与应用教程（007）—— 数据库相关概念
- Simple network configuration for equipment management
- @What happens if bean and @component are used on the same class?
- The road to success in R & D efficiency of 1000 person Internet companies
- gcc 编译报错
- Epp+dis learning road (2) -- blink! twinkle!
- Rationaldmis2022 advanced programming macro program
猜你喜欢
powershell cs-UTF-16LE编码上线
Introduction and application of smoothstep in unity: optimization of dissolution effect
In the small skin panel, use CMD to enter the MySQL command, including the MySQL error unknown variable 'secure_ file_ Priv 'solution (super detailed)
Completion report of communication software development and Application
![108. Network security penetration test - [privilege escalation 6] - [windows kernel overflow privilege escalation]](/img/c0/8a7b52c46eadd27cf4784ab2f32002.png)
108. Network security penetration test - [privilege escalation 6] - [windows kernel overflow privilege escalation]
SQL lab 26~31 summary (subsequent continuous update) (including parameter pollution explanation)
Zero shot, one shot and few shot
Solutions to cross domain problems
（待会删）yyds，付费搞来的学术资源，请低调使用！
Processing strategy of message queue message loss and repeated message sending
随机推荐
Superscalar processor design yaoyongbin Chapter 8 instruction emission excerpt
Epp+dis learning path (1) -- Hello world!
MATLAB实现Huffman编码译码含GUI界面
Solve server returns invalid timezone Go to ‘Advanced’ tab and set ‘serverTimezone’ property manually
SQL Lab (36~40) includes stack injection, MySQL_ real_ escape_ The difference between string and addslashes (continuous update after)
[data clustering] realize data clustering analysis based on multiverse optimization DBSCAN with matlab code
Idea 2021 Chinese garbled code
Present pod information to the container through environment variables
Solutions to cross domain problems
[filter tracking] strapdown inertial navigation simulation based on MATLAB [including Matlab source code 1935]
Completion report of communication software development and Application
Cenos openssh upgrade to version 8.4
"Series after reading" my God! It's so simple to understand throttling and anti shake~
VSCode的学习使用
[play RT thread] RT thread Studio - key control motor forward and reverse rotation, buzzer
Common locking table processing methods in Oracle
112. Network security penetration test - [privilege promotion article 10] - [Windows 2003 lpk.ddl hijacking rights lifting & MSF local rights lifting]
108. Network security penetration test - [privilege escalation 6] - [windows kernel overflow privilege escalation]
About web content security policy directive some test cases specified through meta elements
[filter tracking] strapdown inertial navigation pure inertial navigation solution matlab implementation