【Web前端学前体验】HTML+CSS 实战练习-Olay玉兰油官网
不想多说了，这次对自己挺失望的，虽然完整的写完了页面，但是其实发现了一个很大的问题，就是代码非常不规范。而且重复非常多，这次已经了解到问题了，虽然完整写完但是会回去好好阅读一下前端规范。
预览：
HTML部分：
HERO INGREDIENTS & BENEFIT
明星成分与功效
LEARN MORE ABOUT OLAY PRODUCT LINES
了解更多关于Olay的产品系列
MORE FROM OLAY
更多信息
主要问题出在下面，CSS部分，代码非常杂乱，而且很多相同属性的没有合并通用，后续多多努力吧。
CSS代码：
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,a{margin:0;padding:0;border:0;}
body{font-family:"Microsoft Yahei";background: #000;}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
li{font:inherit;display: list-item;}
a{text-decoration:none;}
a:link{color:#000;}
/* 头部开始 */
.headed_on{
background: #fff;
}
.headed{
margin: 0 auto;
width: 1000px;
}
.headed_top{
height: 33px;
font-size: 12px;
color: #000;
}
.headed_top span{
float: right;
}
.headed_top a{
margin-left: 10px;
color: #000;
padding-right: 10px;
}
.headed_top a:hover{
color: black;
}
.headed_top .contact_us{
line-height: 29px;
border-right:1px solid #000;
}
.headed_bottom{
height: 104px;
max-width:1000px;
margin: 0 auto;
background: #000;
text-align: center;
position: relative;
}
.headed_logo{
float: left;
margin: 0 auto;
}
.headed_nav{
float: left;
margin: 0 auto;
font-size: 14px;
padding-left: 234px;
position: absolute;
height: 104px;
}
.headed_nav ul{
height: 20px;
line-height: 20px;
overflow: hidden;
margin-top:45px;
}
.headed_nav li{
margin-left: 50px;
float: left;
}
.headed_nav ul li a{
color: #fff;
}
.headed_nav a:hover{
color: rgb(63, 233, 29);
}
.headed_search{
margin: 0 auto;
width: 145px;
height: 31px;
margin:5px 0 0 5px;
position: absolute;
overflow: hidden;
left:838px;
}
.headed_search input::-webkit-input-placeholder{
padding-left: 5px;
color: #f0f0f0;
}
.headed_search input[type=search]{
color:#f0f0f0;
border-radius: 50px;
height: 26px;
width: 130px;
overflow: hidden;
background: #b2b2b2;
border-style: none;
outline: none;
}
.headed_search input[type=button]{
float: left;
height: 20px;
width:17px;
border:none;
background: #b2b2b2
url(images/search_btn.png)no-repeat;
text-indent: -9999px;
position: absolute;
cursor: pointer;
left: 113px;
top:5px;
outline: none;
}
.banner{
background: #fff;
height: 410px;
max-width: 2000px;
}
.product{
background: #fff;
text-align: center;
}
.product_1{
width: 1000px;
margin: 0 auto;
height: 707px;
padding-top: 80px;
position: relative;
}
.product_btn{
background: #fff;
border-radius: 50px;
border: none;
outline: none;
font-size: 16px;
height: 30px;
width: 100px;
text-align: center;
}
.product_1 .product_1_btn{
position: absolute;
top:420px;
left: 560px;
line-height: 30px;
color:#000;
}
.product_2{
width:1000px;
margin: 0 auto;
margin-bottom: 40px;
position: relative;
}
.product_2 h3{
font-size: 21px;
min-height: 40px;
text-rendering: optimizelegibility;
font-weight: normal;
font-style: normal;
text-align: center;
}
.product_2 p{
font-size: 30px;
}
.product_2_img{
height: 482px;
position: relative;
width: 1000px;
margin: 0 auto;
}
.product_2_img .product_2_btn{
position: absolute;
line-height: 30px;
left:40px;
top: 300px;
}
.product_3{
position: relative;
width: 1000px;
margin: 0 auto;
margin-bottom: 40px;
}
.product_3 h3{
padding-top:60px;
font-size: 21px;
min-height: 40px;
text-rendering: optimizelegibility;
font-weight: normal;
font-style: normal;
text-align: center;
}
.product_3 p{
font-size: 30px;
}
.product_3_items{
width: 1000px;
position: relative;
margin: 0 auto;
}
.items_top{
width:1000px;
height: 520px;
margin: 0 auto;
}
.items_top_left{
float: left;
margin: 0 4% 40px 0;
width: 48%;
position: relative;
}
.items_top_right{
float: left;
width: 48%;
margin: 0 0 40px;
position: relative;
}
.items_top_2{
width:1000px;
height: 520px;
margin: 0 auto;
}
.prox_1{
position: absolute;
top:95px;
left:110px;
}
.prox_1 h3{
font-size: 16px;
font-weight: normal;
color: #fff;
text-align: center;
}
.prox_1 sup{
font-size: 10px;
}
.items_1_btn{
position: absolute;
top:135px;
left:120px;
line-height: 30px;
color: #000;
}
.items_1_btn2{
position: absolute;
top:134px;
left:250px;
line-height: 30px;
border: solid 1px #fff;
color: #fff;
background:rgba(0, 0,0,0);
}
.prox_2,.prox_3{
position: absolute;
top:95px;
left:90px;
}
.prox_2 h3{
font-size: 16px;
font-weight: normal;
color: #000;
text-align: center;
}
.btn2{
background: #000;
color: #fff;
}
.items_2_btn2{
position: absolute;
top:134px;
left:250px;
line-height: 30px;
border: solid 1px #000;
color: #000;
background:rgba(0, 0,0,0);
}
.prox_3 h3{
font-size: 16px;
font-weight: normal;
color: #000;
text-align: center;
}
.items_3_btn2{
position: absolute;
top:139px;
left:190px;
line-height: 30px;
border: solid 1px #000;
color: #000;
background:rgba(0, 0,0,0);
}
.product_pedia{
position: relative;
width: 1000px;
margin: 0 auto;
min-height: 511px;
}
.product_pedia h3{
padding-top:60px;
font-size: 21px;
min-height: 40px;
text-rendering: optimizelegibility;
font-weight: normal;
font-style: normal;
text-align: center;
}
.product_pedia p{
font-size: 30px;
padding-bottom: 60px;
}
.pedia_items{
width: 1000px;
position: relative;
margin: 0 auto;
}
.pedia_items_1{
float: left;
margin-right: 14px;
width:31.914893617021278%;
}
.pedia_link_1{
margin-top:10px;
text-align: left;
}
.pedia_link_1 a{
color: #000;
font-size: 18px;
font-weight: 700;
}
.pedia_link_1 a:hover{
text-decoration: underline;
}
.pedia_link_2{
margin-top:4px;
text-align: left;
}
.pedia_link_2 a{
color: #000;
font-size: 16px;
line-height: 20px;
display: block;
}
.pedia_link_2 a:hover{
color:#005716;
}
.pedia_items_3{
float: left;
cursor: pointer;
}
.product_more{
width: 1000px;
margin: 0 auto;
}
.product_more h3{
font-size: 21px;
min-height: 40px;
text-rendering: optimizelegibility;
font-weight: normal;
font-style: normal;
text-align: center;
padding-top:40px;
}
.product_more p{
font-size: 30px;
padding-bottom: 50px;
}
.more_item{
width: 1000px;
margin: 0 auto;
height: 615px;
position: relative;
}
.moreItem_1{
float: left;
height: 565px;
margin-bottom: 50px;
width:50%;
position: relative;
}
.item_bottom_title{
font-size: 26px;
margin:20px 0 20px 0;
font-weight: 400;
}
.item_bottom_ins{
font-size: 14px;
text-align: left;
padding:0 10px;
}
.items_more_btn{
position: absolute;
line-height: 30px;
margin-top:20px;
left: 45%;
}
.footer{
width: 100%;
}
.footer_on{
width: 100%;
background: #000;
position: relative;
min-height: 376px;
}
.footer_on_top{
width: 1000px;
height: 65px;
padding-top:10px;
margin: 0 auto;
}
.footer_list{
width:600px;
min-height: 0px;
}
.footer_list li{
float: left;
line-height: 50px;
padding: 0 15px 0 0;
}
.footer_pic{
height: 60px;
width:auto;
}
.item_bottom a:hover{
background: rgb(63, 112, 23);
}
.footer-list{
margin:0 auto
height:615px;
border-top:1px solid #b2b2b2;
}
.footer-prdlst{
margin: 33px 0 0;
height: 580px;
}
.footer-info{
margin: 0 auto;
width: 1000px;
}
.footer-info-left{
width: 60%;
float: left;
}
.footer-info1{
float: left;
width: 200px;
margin: 0 auto;
text-align: center;
}
.footernav{
text-align: center;
}
.footerlist1{
color:#d3d3d3;
font-size: 14px;
padding:2px 0 5px;
font-weight: 700;
text-align: center;
}
.footerlist-item{
height: 35px;
margin:34px 0 0 16px;
}
.footerlist2{
background:
url(images/shouye_Olay_Cellscience.png)no-repeat center;
}
.footerlist-item a{
color: transparent;
font-size: 12px;
display: inline-block;
line-height: 14px;
}
.footerlist3{
line-height: 20px;
font-size: 12px;
}
.footerlist3 a{
color: #d3d3d3;
}
.linkmr28 a{
margin-left: 28px;
}
.footerlist3 a:hover{
color: #d1c491;
}
.footerlist4{
background: url(images/shouye_Olay_Golden_aura.png)no-repeat center;
}
.footerlist5{
background: url(images/shouye_070.png)no-repeat center;
margin:34px 0 0 34px;
}
.footerlist6{
background: url(images/shouye_604.png)no-repeat center;
margin:30px 0 0 41px;
}
.footerlist7{
background: url(images/shouye_607.png)no-repeat center;
margin:0 0 0 41px;
}
.footerlist8{
height: 40px;
background: url(images/shouye_073.png)no-repeat center;
margin:0 0 0 37px;
}
.mr30{
margin-left: 30px;
margin-bottom: 30px;
}
.mr20{
margin-left: 20px;
margin-bottom: 30px;
}
.mrLast{
margin:0 0 30px 30px;
}
.footerlist2_1{
text-align: center;
}
.footerlist2_1>a{
color: #d3d3d3;
font-size: 12px;
padding: 0;
line-height: 14px;
}
.footerlist2_1 a:hover{
color:#d1c491;
}
.hfmrtop{
margin-top: 30px;
}
.info-nav{
margin-bottom:27px;
}
.footer-info-right{
float: left;
width: 40%;
}
.footer-copyright{
height: 160px;
border-top: 1px solid #b2b2b2;
width: 100%;
}
.copyright{
width:500px;
margin:20px auto 0;
}
.copyright li{
float: left;
}
.copyright-list{
margin-left: -20%;
}
.copyright ul li:first-child a{
border-left: none;
margin-left: 0;
padding-left: 0;
}
.copyright ul li.last a{
border-left: none;
margin-left: 70px;
padding-left: 0;
}
.copyright-item{
border-right: 0px solid #000;
color: #fff;
}
.copyright-item a{
color:#d3d3d3;
font-size: 14px;
padding: 0 9px;
border-left: 2px solid #fff;
}