当前位置：网站首页>Comprehensively design an oppe home page -- the bottom of the page
Comprehensively design an oppe home page -- the bottom of the page
2022-07-29 09:49:00 【（-^_^-）】
Analyze the structure ：
In one line , A picture , written words
Realization effect ： 
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>OPPO</title>
</head>
<body>
<!-- At the top of the page -->
<div id="top">
<div class="container"></div>
</div>
<!-- The head of the page -->
<div id="header">
<div class="container">
<!-- There are three items on the left -->
<!-- /* Realize the whole float */ -->
<div class="header_left left">
<div class="xlwb"></div>
<div class="txwb"></div>
<div class="tel">4001-666-888</div>
</div>
<!-- The same style on the right is different The list fits a little There are five -->
<ul class="right">
<li><a href="#"> Sign in </a></li>
<li><a href="#"> register </a></li>
<li><a href="#"> Redeem points </a></li>
<li><a href="#"> Help center </a></li>
<li class="shop_car">
<span></span>
<a href="#"> The shopping cart </a>
</li>
</ul>
</div>
</div>
<!-- The navigation bar of the page -->
<div id="nav">
<div class="container">
<!-- There is one on the left -->
<div class="logo left">
<img src="img/logo.png" alt="logo">
</div>
<!-- The same style on the right is different The list fits a little Yes 7 term -->
<ul class="right">
<li><a href="#"> home page </a></li>
<li><a href="#"> mobile phone </a></li>
<li><a href="#"> parts </a></li>
<li><a href="#"> service </a></li>
<li><a href="#"> Experience shop </a></li>
<li><a href="#"> Software store </a></li>
<li><a href="#">ColorOS</a></li>
</ul>
</div>
</div>
<!-- Page banner -->
<div id="banner">
<div class="container"></div>
</div>
<!-- The star model part of the page -->
<div id="star">
<div class="container">
<!-- There is an item above, which has pictures -->
<div class="star_top">
<img src="img/i-c-title.png" alt=" Pictures of star models ">
</div>
<!-- There is one item below the li There are pictures in it Text price And has a similar structure 4 part Use list Tags -->
<ul>
<li>
<div><img src="img/20141030152751NRihyRENa7.jpg" alt=" Photo "></div>
<h2>N3</h2>
<p> Electric rotating camera </p>
<!-- ¥ Ten page symbols are used as name coins -->
<p class="money">¥3999 Buy now <span></span></p>
</li>
<li class="line"></li>
<li>
<div><img src="img/20141029162235J7aJmCHkFm.jpg" alt=" Photo "></div>
<h2>R5</h2>
<p> Electric rotating camera </p>
<!-- ¥ Ten page symbols are used as name coins -->
<p class="money">¥3999 Buy now <span></span></p>
</li>
<li class="line"></li>
<li>
<div><img src="img/20150120092342k2ABsEHnQN.jpg" alt=" Photo "></div>
<h2>R1C</h2>
<p> Thin to 4.85mm</p>
<!-- ¥ Ten page symbols are used as name coins -->
<p class="money">¥2999 Buy now <span></span></p>
</li>
<li class="line"></li>
<li>
<div><img src="img/20150423183545tYnFzYnn3p.jpg" alt=" Photo "></div>
<h2>A31</h2>
<p> I'm actually mastering </p>
<!-- ¥ Ten page symbols are used as name coins -->
<p class="money">¥999 Buy now <span></span></p>
</li>
</ul>
</div>
</div>
<!-- Selected accessories of the page -->
<div id="accessory">
<div class="container">
<!-- Upper part -->
<div class="acc_top">
<img src="img/wb.png" alt=" Selected accessories ">
</div>
<!-- Lower part -->
<div class="acc_main">
<!-- It's divided into two parts -->
<div class="acc_left left">
<!-- The left part is divided into upper and lower parts -->
<div class="acc_left_top">
<!-- The upper part is divided into left and right parts -->
<div class="acc_left_top_left">
<img src="img/20150413174400N0dPnxUKHk.jpg" alt=" Leather cover ">
</div>
<div class="acc_left_top_right">
<!-- The part on the right is divided into upper and lower parts -->
<div class="acc_left_top_right_top">
<p>OPPO Mobile official website AAESSORY parts </p>
<ul>
<li> The headset </li>
<li> The headset </li>
<li> The headset </li>
<li> The headset </li>
<li> The headset </li>
<li> The headset </li>
</ul>
<h2 class="line"></h2>
<p> All accessories <span></span></p>
</div>
<div class="acc_left_top_right_bottom">
<img src="img/20131120165101xYIYzhkVEy.jpg" alt=" The power adapter ">
</div>
</div>
</div>
<div class="acc_left_bottom">
<img src="img/20150413174340NLV2gvV4FU.jpg" alt=" cable ">
</div>
</div>
<div class="acc_right right">
<div>
<img src="img/20150123182505RO822scYYt.jpg" alt=" Flash charging ">
</div>
<div>
<img src="img/20141230145609l7Fsk7CdHy.jpg" alt=" headset ">
</div>
<div>
<img src="img/20141011101157yZEFpMrk0h.jpg" alt=" The headset ">
</div>
<div>
<img src="img/201410270957132inlm3IwsV.jpg" alt=" Bluetooth headset ">
</div>
</div>
</div>
</div>
</div>
<!-- The search part of the page -->
<div id="world">
<div class="container">
<div class="world_top">
<img src="img/weibo.png" alt=" oppo ">
</div>
<div class="world_main">
<div class="worle_left left">
<div><img src="img/201403261455420lqMPNGENc.png" alt=" Shopping points "></div>
<div><img src="img/20150226100534QqezQ85N6y.jpg" alt=" hire purchase "></div>
<div><img src="img/20140926184007v2rjcVFcbW.jpg" alt=" Cash on Delivery "></div>
<div><img src="img/20131212113902waaLqQUWfB.jpg" alt=" Firmware upgrade "></div>
</div>
<div class="world_right right">
<div class="world_title">
<div class="news"> Journalism </div>
<div class="weibo"> Microblogging </div>
</div>
<!-- Pictures have the same elements Use list -->
<ul>
<li> <!-- In every list It's a mixture of pictures and texts So use a custom list -->
<dl>
<dt>
<img src="img/20150227161036GqO59Dvta2.jpg" alt=" dream ">
</dt><!-- The title of the custom list is picture -->
<dd>OPPO R5 Golden Edition Create a dream trip to New York Fashion Week </dd><!-- Description of the list item -->
</dl>
</li>
<li> <!-- In every list It's a mixture of pictures and texts So use a custom list -->
<dl>
<dt>
<img src="img/201502271135596D2wBJxvH0.jpg" alt=" The magazine ">
</dt><!-- The title of the custom list is picture -->
<dd>OPPO Hand made Fashion magazine cover blockbuster feeling </dd><!-- Description of the list item -->
</dl>
</li>
<li> <!-- In every list It's a mixture of pictures and texts So use a custom list -->
<dl>
<dt>
<img src="img/20140604145924CFBnAtVjqN.jpg" alt=" The headset ">
</dt><!-- The title of the custom list is picture -->
<dd> Industry revolution OPPO Release the world's most sensitive flat panel headphones PM-1</dd><!-- Description of the list item -->
</dl>
</li>
<li> <!-- In every list It's a mixture of pictures and texts So use a custom list -->
<dl>
<dt>
<img src="img/20140919101741cvR0TcGkaq.jpg" alt=" Awards ">
</dt><!-- The title of the custom list is picture -->
<dd> Ultimate original OPPO PM-1 Headphones won the grand prize for everyone </dd><!-- Description of the list item -->
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- The service part of the page -->
<div id="service">
<div class="container">
<ul>
<li class="service0">
<dl>
<dt></dt>
<dd class="dd1"> Genuine protection </dd>
<dd class="dd2"> All goods are original </dd>
</dl>
</li>
<li class="service1">
<dl>
<dt></dt>
<dd class="dd1">79 Package mail from yuan </dd>
<dd class="dd2"> Efficient direct logistics distribution </dd>
</dl>
</li>
<li class="service2">
<dl>
<dt></dt>
<dd class="dd1">7 Day return and exchange </dd>
<dd class="dd2"> Support 7 Day return ,30 I'd like to exchange it in a few days </dd>
</dl>
</li>
<li class="service3">
<dl>
<dt></dt>
<dd class="dd1">285 Self raising point </dd>
<dd class="dd2"> Relaxed and comfortable , Covering all major cities </dd>
</dl>
</li>
<li class="service4">
<dl>
<dt></dt>
<dd class="dd1">365 Customer service outlets </dd>
<dd class="dd2"> All goods are original </dd>
</dl>
</li>
</ul>
</div>
</div>
<!-- After sales service of the page -->
<div id="alter_sale">
<div class="container">
<ul>
<li>
<ol>
<li><a href="#"> About us </a></li>
<li><a href="#"> About OPPO</a></li>
<li><a href="#"> Information Center </a></li>
<li><a href="#"> Talent recruitment </a></li>
</ol>
</li>
<li>
<ol>
<li><a href="#"> Recommended model </a></li>
<li><a href="#">N3</a></li>
<li><a href="#">R5</a></li>
<li><a href="#">R1C</a></li>
<li><a href="#">Find 7</a></li>
</ol>
</li>
<li>
<ol>
<li><a href="#"> Shopping related </a></li>
<li><a href="#"> Help center </a></li>
<li><a href="#"> Peripheral products </a></li>
<li><a href="#">OPPO Experience shop </a></li>
<li><a href="#"> Customer service policy </a></li>
</ol>
</li>
<li>
<ol>
<li><a href="#"> Membership Center </a></li>
<li><a href="#"> Product registration </a></li>
<li><a href="#"> Membership registration </a></li>
<li><a href="#"> Member login </a></li>
</ol>
</li>
<li>
<ol>
<li><a href="#"> Pay attention to our </a></li>
<li class="a">
<a href="#">
<span class="xlwb"></span>
Sina weibo
</a>
</li>
<li class="a">
<a href="#">
<span class="txwb"></span> Tencent micro-blog
</a>
</li>
<li class="a">
<a href="#">
<span class="rrw"></span>
Renren.com
</a>
</li>
<li class="a">
<a href="#">
<span class="qqkj"></span>
QQ Space
</a>
</li>
</ol>
</li>
<li>
<ol>
<li>
<a href="#"> Contact us </a>
</li>
<li class="b">
<a href="#">
<span></span>
4001-666-88
</a>
</li>
<li class="c">
<a href="#">7*24 Hour customer service call
</a>
</li>
<li class="d">
<a href="#"><span></span> Online Service
</a>
</li>
<li class="e">
<a href="#"> Service period ：8:30-22:00</a>
</li>
</ol>
</li>
</ul>
</div>
</div>
<!-- Bottom of page -->
<div id="footer">
<div class="container">
<p>
<img src="img/i-f-logo.png" alt="oppo">
<span>@2005-2005 The Beijing municipal xxxxxxxx</span>
<a href="#"> copyright </a>
<a href="#"> Use agreement </a>
<a href="#"> Website map </a>
<a href="#"> link </a>
<a href="#"> Contact us </a>
</p>
</div>
</div>
</body>
</html>css
/* Initialize style */
/* Reset the default style */
*{
padding: 0;
margin: 0;
font-size: 14px;
}
/* Clear the flag at the front of the list */
ol,ul{
list-style-type: none;
}
/* Clear the default style of hyperlinks */
a{
color: #666;/* gray */
text-decoration: none;/* Remove underscores */
}
/* Write left and right floats in the class */
.left{
float: left;
}
.right{
float: right;
}
/* Test part */
#top,#header,#nav,#banner,#star,#accessory,#world,#service,#alter_sale,#footer{
height: 100px;
width: 100%;
/*border: 1px solid #000;*/
}
.container{
width: 1280px;
/*border: 1px solid #f00;*/
margin: 0 auto; /* The content part is centered */
}
/**********************************************
***************** The top style of the page *****************
***********************************************/
#top{
height: 5px;
background-color: #00925f;
}
/**********************************************
***************** Page header style *****************
***********************************************/
#header{
height: 30px;
background-color: #2d2d2d;
}
/* Sina Weibo icon settings */
#header .xlwb{
width: 22px;
height: 19px;
background: url("../img/icons.png") no-repeat -48px -98px; /* Offset it */
}
/* Tencent Weibo icon settings */
#header .txwb{
width: 17px;
height: 24px;
background: url("../img/icons.png") no-repeat -28px -93px; /* Offset it */
}
/* Phone settings */
#header .tel{
color: #17925f;
font-size: 14px;
}
/* Implement one line display float */
#header .header_left div{
float: left;
margin:6px 10px 0px; /* From the above 6 Left and right margins 10 Bottom margin 0 */
}
#header ul li{
float: left;
line-height: 30px;
}
#header li a{
color: #b2b2b2;
font-size: 14px;
border-right: 1px solid #b2b2b2;
padding:0px 10px;/* The distance between the text and the border */
}
#header li a:hover{
color: #00925f;
}
#header .shop_car span{
width: 19px;
height: 16px;
margin-left: 10px;
display: inline-block; /* You can set up */
/* span It's an in-line element Cannot set inline width Change the display mode */
background: url("../img/icons.png") no-repeat 0px -96px;
}
#header .shop_car a{
border: none;
}
/**********************************************
***************** The navigation bar style of the page **************
***********************************************/
#nav{
height: 90px;
background-color: #eeeeee;
}
#nav li{
float: left;
margin: 0px 15px;
line-height: 90px; /* Writing in the middle */
}
#nav li a{
color: #666666; /* Text color */
font-weight: bold;/* Bold effect */
}
#nav li a:hover{ /* Pay attention to this : No space after */
color: #00925f; /* Text color */
font-weight: bold;/* Bold effect */
}
/**************************************************
***************** The style of the star model part of the page **************
***************************************************/
#star{
height: 700px;
background-color: #f2f2f2;
}
#star .star_top{
text-align: center;/*div Align center */
margin: 20px; /* Make it a distance from the upper boundary */
}
#star ul{
width: 1265px;/* Adjust to fit your computer page */
margin: 10px auto;
}
#star li{
width: 300px;
/*border: 1px solid #000;*/
float: left;
border-bottom: 4px solid #dfdfdf;
transition:all 0.3s linear ;
}
#star li:hover{
border-bottom: 4px solid #4bf5d0;
transform: translateY(-10px);
}
#star li img{
width: 300px;
}
#star li h2{
text-align: center;/* Align text Center */
margin-top: 10px; /* The distance between words and photos */
}
#star li p{
text-align: center;/* Align text Center */
margin: 10px 0; /* Top and bottom margin about 0*/
font-size: 12px;
color: #bdbdbd;
}
#star .money{
color: #00925F;
font-size: 14px;
}
#star li span{
/* span It's an in-line element Cannot set inline width Change the display mode */
width: 13px;
height: 13px;
margin-left: 5px;
display: inline-block; /* You can set up */
vertical-align: middle;/* Property to set the vertical alignment of an element This element is placed in the middle of the parent element .*/
background: url("../img/icons-1.png") no-repeat -177px -1014px;/* The setting width of the offset Height */
}
#star .line{
width: 0;
height: 450px;
border-left: 1px solid #eaeaea;
margin: 0 10px;
}
/**************************************************
***************** The style of the selected accessories section of the page **************
***************************************************/
#accessory{
height: 950px;
background-color: #f6f6f6;
overflow: hidden; /* Prevent the following Modules have an impact */
}
#accessory .acc_main{
width: 1090px;
margin: 10px auto;
}
#accessory .acc_top{
overflow: hidden;
text-align: center;
margin: 20px 0;
}
#accessory .acc_left{
width: 540px;
height: 950px;
/*border: 2px solid #000;*/
margin-top: 10px;
}
/*************************************/
#accessory .acc_left_top_left img{
width: 250px;
float: left;
border-bottom: 3px solid #eaeaea;
margin-right: 10px;
margin-bottom: 20px;
transition:all 0.3s linear ;
}
#accessory .acc_left_top_left img:hover{
border-bottom: 3px solid #00925f;
transform: translateY(-10px);
}
/*************************************/
#accessory .acc_left_top_right_top {
float: left;
width: 250px;
height: 250px;
border-bottom: 3px solid #eaeaea;
background-color: #fff;
padding: 20px;
box-sizing: border-box; /* Change the actual calculation method of elements After adding the inner margin, the actual size of the element changes */
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
transition:all 0.3s linear ;
}
#accessory .acc_left_top_right_top:hover{
border-bottom: 3px solid #00925f;
transform: translateY(-10px);
}
#accessory .acc_left_top_right_top p:first-child{
font-size: 14px;
font-weight: bold;/* In bold */
text-align: center;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
#accessory .acc_left_top_right_top li{
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
}
#accessory .acc_left_top_right_top li:hover{
color: #00925f;
}
#accessory .acc_left_top_right_top .line{
width: 150px;
height: 0;
border-top: 1px solid #ccc;
clear: both; /* Remove the floating */
margin: 10px auto;
}
#accessory .acc_left_top_right_top p{
text-align: center;
}
#accessory .acc_left_top_right_top p:hover{
color: #00925f;
}
#accessory .acc_left_top_right_top span{
/* span It's an in-line element Cannot set inline width Change the display mode */
width: 13px;
height: 13px;
margin-left: 10px;
display: inline-block; /* You can set up */
vertical-align: middle;/* Property to set the vertical alignment of an element This element is placed in the middle of the parent element .*/
background: url("../img/icons-1.png") no-repeat -177px -1014px;/* The setting width of the offset Height */
}
/*************************************/
#accessory .acc_left_top_right_bottom img{
float: left;
border-bottom: 3px solid #eaeaea;
margin: 10px;
transition:all 0.3s linear ;
width: 250px;
}
#accessory .acc_left_top_right_bottom img:hover{
transform: translateY(-10px);
border-bottom: 3px solid #00925f;
}
/*************************************/
#accessory .acc_left_bottom img{
width: 520px;
border-bottom: 3px solid #eaeaea;
transition:all 0.3s linear ;
}
#accessory .acc_left_bottom img:hover{
border-bottom: 3px solid #00925f;
transform: translateY(-10px);
}
/*************************************/
#accessory .acc_right{
width: 540px;
/*border: 1px solid orange;*/
}
#accessory .acc_right img{
width: 250px;
}
#accessory .acc_right div:first-child img{ /* The first element of the same element */
width: 520px;
height: 250px;
}
#accessory .acc_right div:last-child img{ /* The first element of the same element */
height: 241px;
}
#accessory .acc_right div{
float: left;
margin: 10px;
border-bottom: 3px solid #eaeaea;
transition:all 0.3s linear ;
}
#accessory .acc_right div:hover{
border-bottom: 3px solid #00925f;
transform: translateY(-10px);
}
/**************************************************
***************** The style of the search element oper part of the page **************
***************************************************/
#world{
height: 700px;
/*clear: both; This has no effect on clearing floating here */
overflow: hidden; /* Clearing the float also has no effect */
background-color: #eaeaea;
}
#world .world_top{
text-align: center;
margin: 20px 0px;
}
#world .worle_left{
width: 800px;
}
#world .worle_left div{
float: left;
margin: 10px;
border-bottom: 3px solid #eaeaea;
transition:all 0.3s linear ;
}
#world .worle_left div:hover{
border-bottom: 3px solid #00925f;
transform: translateY(-10px);
}
#world .world_right{
margin-top: 10px;
width: 400px;
height: 567px;
background-color: #fff;
}
#world .world_right img{
width: 100px;
height: 100px;
}
#world .world_right .world_title{
height: 60px;
}
#world .world_right .world_title div{
height: 60px;
width: 200px;
background-color: #eaeaea;
text-align: center;
line-height: 60px;
float: left;
border-top: 3px solid #eaeaea;
}
#world .world_right .world_title div:hover{
color: #00925f;
}
#world .world_right .world_title div:first-child{
background-color: #fff;
border-top: 3px solid #00925f;
}
#world .world_right ul li{
background-color: #eaeaea;
margin: 20px 10px;
}
#world .world_right dl{
width: 380px;
height: 100px;
position: relative; /* To move the image below relative to this box */
}
#world .world_right dl dt{
position: absolute;
}
#world .world_right dl dd{
position: absolute;
top: 20px;
left: 140px;
}
#world .world_main{
width: 1214px;
margin: 10px auto;
}
/**************************************************
***************** Style of the service part of the page **************
***************************************************/
#service{
height: 100px;
background-color: #fff;
}
#service dl{
width: 200px;
height: 100px;
/*border: 1px solid #000;*/
position: relative; /* Use... For the positioning of the following image parts relative*/
}
#service dl dt{ /* Picture part */
width: 42px;
height: 42px;
background: url("../img/icons.png") no-repeat 0px -44px;
position: absolute ;
top: 30px;
left: 10px;
}
#service .service1 dt:nth-child(1){
background: url("../img/icons.png") no-repeat -51px -44px;
}
#service .service2 dt:nth-child(1){
background: url("../img/icons.png") no-repeat -100px -44px;
}
#service .service3 dt:nth-child(1){
background: url("../img/icons.png") no-repeat -152px -44px;
}
#service .service4 dt:nth-child(1){
background: url("../img/icons.png") no-repeat -200px -41px;
}
#service dl .dd1{
position: absolute ;
top: 30px;
left: 60px;
font-weight: bold;
}
#service dl .dd2{
position: absolute ;
top: 50px;
left: 60px;
color: #aaa;
font-size: 12px;
}
#service li{
float: left;
margin: 0px 10px;
transition:all 0.3s linear ;
}
#service li:hover{
transform: translateY(-10px);
}
#service ul{
width: 1110px;
margin: 0 auto;
height: 98px;
border-bottom: 1px solid #333;
}
/**************************************************
***************** The style of the after-sales service part of the page **************
***************************************************/
#alter_sale{
height: 200px;
background-color: #fff;
}
#alter_sale ul{
width: 1100px;
margin: 0px auto;
padding-top: 20px;
}
#alter_sale ul li{
width: 140px;
float: left;
text-align: center;
margin: 0 20px;
}
#alter_sale ol li{
line-height: 30px;
}
#alter_sale ol li:first-child a{
font-weight: bold;
}
#alter_sale .a{
position: relative;
}
/* Sina Weibo icon settings */
#alter_sale .xlwb{
display: inline-block;
width: 25px;
height: 25px;
background: url("../img/icons-1.png") no-repeat 0px -880px; /* Offset it */
position: absolute;
left: 5px;
top: 3px;
}
#alter_sale .a a:hover{
color: red;
}
#alter_sale .a a:hover .xlwb{
background: url("../img/icons-1.png") no-repeat -140px -880px; /* Offset it */
}
/* Tencent Weibo icon settings */
#alter_sale .txwb{
display: inline-block;
width: 25px;
height: 25px;
background: url("../img/icons-1.png") no-repeat 0px -908px; /* Offset it */
position: absolute;
left: 5px;
top: 3px;
}
#alter_sale .a a:hover .txwb{
background: url("../img/icons-1.png") no-repeat -140px -908px; /* Offset it */
}
/* Renren icon settings */
#alter_sale .rrw{
display: inline-block;
width: 25px;
height: 25px;
background: url("../img/icons-1.png") no-repeat 0px -938px; /* Offset it */
position: absolute;
left: 5px;
top: 3px;
}
#alter_sale .a a:hover .rrw{
background: url("../img/icons-1.png") no-repeat -140px -938px; /* Offset it */
}
/*qq Space icon settings */
#alter_sale .qqkj{
display: inline-block;
width: 25px;
height: 25px;
background: url("../img/icons-1.png") no-repeat 0px -854px; /* Offset it */
position: absolute;
left: 5px;
top: 3px;
}
#alter_sale .a a:hover .qqkj{
background: url("../img/icons-1.png") no-repeat -140px -854px; /* Offset it */
}
#alter_sale .b span{
display: inline-block;
width: 33px;
height: 33px;
background: url("../img/icons.png") no-repeat 0px 0px; /* Offset it */
position: absolute;
left: -35px;
}
#alter_sale .b a{
color: #00925f;
font-size: 17px;
position: relative;
}
#alter_sale .c,.e a{
font-size: 8px;
}
#alter_sale .d a span{
display: inline-block;
width: 33px;
height: 33px;
background: url("../img/icons.png") no-repeat -38px 0px; /* Offset it */
position: absolute;
left: -55px;
}
#alter_sale .d a{
color: #00925f;
font-size: 17px;
position: relative;
}
/**************************************************
***************** Style at the bottom of the page **************
***************************************************/
#footer{
height: 40px;
background-color: #2d2d2d;
}
#footer p{
line-height: 40px;
}
#footer p img{
margin-left: 20px;
}
#footer p span{
color: #828282;
margin: 0px 430px 0px 20px;
}
#footer p a{
color: #fff;
margin: 0px 10px;
}
#footer p a:hover{
color: #00925f;
}
边栏推荐
- Div horizontal layout aligned on both sides
- Sublime Text3 set different indents for different files
- div水平布局两边对齐
- Source code analysis of senparc.weixin.sample.mp
- Linear regression of machine learning (least square handwriting +sklearn Implementation)
- Basic operations of OpenCV image processing
- [C language] minesweeping (recursive expansion + marking function)
- PyQt5快速开发与实战 6.1 好软件的三个维度 ＆＆ 6.2 PyQt5中的布局管理 ＆＆ 6.3 PyQt5的绝对位置布局
- What is Cartland number? What are the applications?
- shell编程之sed,正则表达式
猜你喜欢
Pytest+allure generate test report
【C语言】扫雷(递归展开 + 标记功能)
分布式Session共享的4类技术方案，与优劣势比较
C＃ 值类型和引用类型讲解
机器学习入门的百科全书-2018年“机器学习初学者”公众号文章汇总
How to query express logistics and filter out no information doc No. to delete or copy
36. JS animation
Source code analysis of senparc.weixin.sample.mp
Webassembly 2022 questionnaire results are fresh
![[C language] Sanzi chess (intelligent chess playing + blocking players)](/img/36/4a269887189e64562227a8592433c3.png)
[C language] Sanzi chess (intelligent chess playing + blocking players)
随机推荐
引入redis缓存出现的问题以及解决方式
2021年CS保研经历（四）：西交软院预推免、信工所三室预推免
i.MX6ULL驱动开发 | 32 - 手动编写一个虚拟网卡设备
[C language] minesweeping (recursive expansion + marking function)
Logistic regression of machine learning
Behind 100000 visits...
读博后降维打击数学建模！
A little knowledge ~ miscellaneous notes on topics ~ a polymorphic problem
How to customize the opportunity closing form in dynamics 365online
What is Cartland number? What are the applications?
Commonly used DOS commands [gradually improved]
Network security (5)
Network security (6)
Sed, regular expression of shell programming
Sublime Text3 set different indents for different files
Orbslam2 installation test and summary of various problems
PyQt5快速开发与实战 6.4 QBoxLayout(框布局)
这是一份不完整的数据竞赛年鉴！
[苹果开发者账号]06 转让开发者账号后，开发者年费自动续费问题
Read Plato farm's eplato and the reason for its high premium