当前位置：网站首页>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 ,
边栏推荐
- [full stack plan - programming language C] basic introductory knowledge
- Visual Studio 2019 (LocalDB)\MSSQLLocalDB SQL Server 2014 数据库版本为852无法打开，此服务器支持782版及更低版本
- 30. Few-shot Named Entity Recognition with Self-describing Networks 阅读笔记
- Time bomb inside the software: 0-day log4shell is just the tip of the iceberg
- Sonar:cognitive complexity
- SQL blind injection (WEB penetration)
- ENSP MPLS layer 3 dedicated line
- Present pod information to the container through environment variables
- Tutorial on the principle and application of database system (011) -- relational database
- SQL lab 21~25 summary (subsequent continuous update) (including secondary injection explanation)
猜你喜欢
2022 8th "certification Cup" China University risk management and control ability challenge
Problem: the string and characters are typed successively, and the results conflict
RHSA first day operation
《通信软件开发与应用》课程结业报告
About sqli lab less-15 using or instead of and parsing
UP Meta—Web3.0世界创新型元宇宙金融协议
Learning and using vscode
SQL Lab (36~40) includes stack injection, MySQL_ real_ escape_ The difference between string and addslashes (continuous update after)
zero-shot, one-shot和few-shot
浅谈估值模型 (二): PE指标II——PE Band
随机推荐
@What happens if bean and @component are used on the same class?
Is it safe to open an account in Ping An Securities mobile bank?
全球首堆“玲龙一号”反应堆厂房钢制安全壳上部筒体吊装成功
牛客网刷题网址
Sort out the garbage collection of JVM, and don't involve high-quality things such as performance tuning for the time being
Niuke website
DOM parsing XML error: content is not allowed in Prolog
powershell cs-UTF-16LE编码上线
Rationaldmis2022 advanced programming macro program
ES底层原理之倒排索引
Ctfhub -web SSRF summary (excluding fastcgi and redI) super detailed
【玩转 RT-Thread】 RT-Thread Studio —— 按键控制电机正反转、蜂鸣器
顶级域名有哪些?是如何分类的?
[shortest circuit] acwing1128 Messenger: Floyd shortest circuit
Typescript interface inheritance
免备案服务器会影响网站排名和权重吗?
30. Few-shot Named Entity Recognition with Self-describing Networks 阅读笔记
SQL lab 21~25 summary (subsequent continuous update) (including secondary injection explanation)
Superscalar processor design yaoyongbin Chapter 9 instruction execution excerpt
SQL injection -- Audit of PHP source code (take SQL lab 1~15 as an example) (super detailed)