【Web前端学前体验】HTML+CSS 实战练习-Olay玉兰油官网

最新推荐文章于 2023-02-16 19:57:46 发布
最新推荐文章于 2023-02-16 19:57:46 发布
阅读量684 收藏 5
点赞数
分类专栏： HTML+CSS 文章标签： 前端实战HTML+CSS HTML+CSS实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JACKSON_CYA/article/details/90642410
版权

不想多说了，这次对自己挺失望的，虽然完整的写完了页面，但是其实发现了一个很大的问题，就是代码非常不规范。而且重复非常多，这次已经了解到问题了，虽然完整写完但是会回去好好阅读一下前端规范。

预览：
在这里插入图片描述
HTML部分：

<div class="headed_on">
    <div class="headed">
        <div class="headed_top">
            <span><a href="#" class="contact_us">联系我们</a><a href="#" class="language">中文（中华人民共和国）</a></span>
        </div>
    </div>
</div>
        <div class="headed_bottom">
            <div class="headed_logo">
                <a href="#" target="_blank" title="OLAY"><img src="images/olay_logo.png" /></a>
            </div>
            <div class="headed_nav">
                <ul>
                    <li><a href="#">产品类型</a></li>
                    <li><a href="#">护肤步骤</a></li>
                    <li><a href="#">护肤问题</a></li>
                    <li><a href="#">品牌故事</a></li>
                    <li><a href="#">更多体验</a></li>
                </ul>

            </div>
            <div class="headed_search">
                <input type="search" placeholder="输入搜索关键字">
                <input type="button" value="搜索">
            </div>
        </div>
    

    <div class="banner">
        <div class="banner_lb">
            <a href="#" target="_blank" ><img src="images/olay_youth_protect_aqua_sheer_lightscreen PC.jpg" /></a>
        </div>
    </div>
    <div class="product">
        <div class="product_1">
            <a href="#" alt="" target="_blank"><img src="images/product_1.jpg" /></a>
            <a href="#" class="product_btn product_1_btn" title="了解更多">了解更多</a>
        </div>
        <div class="product_2">
            <div>
                <h3>HERO INGREDIENTS & BENEFIT</h3>
            </div>
            <div><p>明星成分与功效</p></div>
        </div>
        <div class="product_2_img">
            <a href="#" target="_blank" title="Olay全线修护精髓"><img src="images/product_2.jpg" /></a>
            <a href="#" class="product_btn product_2_btn">了解详情</a>
        </div>
        <div class="product_3">
            <div class="product_3_top">
                <h3>LEARN MORE ABOUT OLAY PRODUCT LINES</h3>
            </div>
            <div><p>了解更多关于Olay的产品系列</p></div>
        </div> 
        <div class="product_3_items">
            <div class="items_top">
                <div class="items_top_left">
                    <img src="images/item_1.png" alt="ProX-博研诗" title="ProX-博研诗"/>
                    <div class="prox_1">
                        <h3>
                            触启肌源细胞<sup>2</sup> , 紧致 上扬 水光肌
                        </h3>
                    </div>
                    <a href="#" class="product_btn items_1_btn" title="了解更多">了解更多</a>
                    <a href="#" class="items_1_btn2 product_btn" title="产品系列">产品系列</a>
                </div>
                <div class="items_top_right">
                    <img src="images/item_2.png" alt="ProX-博研诗" title="ProX-博研诗"/>
                    <div class="prox_2">
                        <h3>
                            修护自然保湿屏障，肌肤柔嫩、水润、强健
                        </h3>
                    </div>
                    <a href="#" class="product_btn items_1_btn btn2" title="了解更多">了解更多</a>
                    <a href="#" class="items_2_btn2 product_btn btn2-ap" title="产品系列">产品系列</a>
                </div>
            </div>
            <div class="items_top_2">
                <div class="items_top_left">
                    <img src="images/item_3.png" alt="ProX-博研诗" title="ProX-博研诗"/>
                    <div class="prox_3">
                        <h3>
                            紧轮廓，赋弹力，淡细纹，焕活年轻肌肤*
                        </h3>
                    </div>
                    <a href="#" class="product_btn items_1_btn btn2" title="了解更多">了解更多</a>
                    <a href="#" class="items_2_btn2 product_btn" title="产品系列">产品系列</a>
                </div>
                <div class="items_top_right">
                    <img src="images/item_4.png" alt="ProX-博研诗" title="ProX-博研诗"/>
                    <div class="prox_3">
                        <h3>
                            保湿补水，快速渗透，给予肌肤净瑕透白
                        </h3>
                    </div>
                    <a href="#" class="items_3_btn2 product_btn" title="产品系列">产品系列</a>
                </div>
            </div>
            <div class="product_pedia">
                <div class="product_3_top">
                    <h3>SKIN PEDIA</h3>
                </div>
                <div><p>美肌资讯</p>
                </div>
                <div class="pedia_items">
                    <div class="pedia_items_1">
                        <img src="images/pedia_item_1.png" title="护肤知识">
                        <div class="pedia_1_contact">
                            <div class="pedia_link_1">
                                <a href="#">护肤知识</a>
                            </div>
                            <div class="pedia_link_2">
                                <a href="#">
                                    护肤这件小事的7个雷区在这儿等着你<br />
                                    2016-06-03 17:54</a>
                            </div>
                        </div>
                    </div>
                    <div class="pedia_items_1">
                        <img src="images/pedia_item_2.jpg" title="产品评测">
                        <div class="pedia_1_contact">
                            <div class="pedia_link_1">
                                <a href="#">产品评测</a>
                            </div>
                            <div class="pedia_link_2">
                                <a href="#">
                                    Olay携手新代言人宋茜，年轻演绎你不止是你<br />
                                    2019-5-22 16:32:58</a>
                            </div>
                        </div>
                    </div>
                    <div class="pedia_items_3">
                        <img src="images/pedia_item_3.png">
                        <div class="pedia_link_1">
                            <a href="#">品牌最新动向</a>
                        </div>
                        <div class="pedia_link_2">
                            <a href="#">
                                Olay大红瓶携手高圆圆“肌秘”私享会<br />
                                2019-5-22 16:32:58</a>
                        </div>
                    </div>
                </div>
            </div> 

        </div> 
        <div class="product_more">
            <div class="product_3_top">
                <h3>MORE FROM OLAY</h3>
            </div>
            <div><p>更多信息</p>
            </div>  
        </div>
        <div class="more_item"> 
            <div class="moreItem_1">
                <a href=""><img src="images/moreItem_1.png" title="品牌故事" /></a>
                <div class="item_bottom">
                    <div class="item_bottom_title">品牌故事</div>
                    <div class="item_bottom_ins">OLAY是一款真正因爱而生的产品，是一个男人为他的妻子创作的礼物。20世纪50年代，化学家格雷厄姆•武尔夫（Graham Wulff）发现...</div>
                    <a href="#" class="product_btn items_more_btn btn2" title="了解更多">了解更多</a>
                </div>
            </div>
            <div class="moreItem_1">
                    <a href="#"><img src="images/moreItem_2.png" title="全球美誉" /></a>
                    <div class="item_bottom">
                        <div class="item_bottom_title">品牌故事</div>
                        <div class="item_bottom_ins">
			
                                明星大红瓶、明星小红瓶、明星夜精灵、明星7效霜、明星新生之水、明星双旋眼霜、明星小滴管等荣获多项国际权威美妆大奖...
                            
		</div>
                        <a href="#" class="product_btn items_more_btn btn2" title="了解更多">了解更多</a>
                    </div>
                </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer_on">
            <div class="footer_on_top">
                <div class="footer_list">
                    <ul>
                        <li><a href="#"><img src="images/olay_wechat.png" title="Olay微信二维码" class="footer_pic"/></a></li>
                        <li><a href="#"><img src="images/prox_wechat.png" title="Pro-X微信二维码" class="footer_pic"/></a></li>
                        <li><a href="#"><img src="images/icon_sina.png" title="新浪微博Olay" class="footer_pic"/></a></li>
                        <li><a href="#"><img src="images/icon_prox.png" title="Pro-X新浪微博" class="footer_pic"/></a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-list">
                <div class="footer-prdlst">
                    <div class="footer-info">
                        <div class="footer-info-left">
                            <div class="footer-info1">
                                <ul class="info-nav">
                                    <li class="footerlist1">产品系列</li>
                                    <li class="footerlist-item footerlist2 linkmr28"><a href="#">紧致 上扬 水光肌</a></li>
                                    <li class="footerlist3 linkmr28"><a href="#">紧致 上扬 水光肌</a></li>
                                    <li class="footerlist-item footerlist4"><a href="#">【酵】醒活力少女肌</a></li>
                                    <li class="footerlist3 linkmr28"><a href="#">【酵】醒活力少女肌</a></li>
                                    <li class="footerlist-item footerlist5"><a href="#">皮肤科学级功效</a></li>
                                    <li class="footerlist3 mr30"><a href="#">皮肤科学级功效</a></li>
                                    <li class="footerlist-item footerlist6"><a href="#">媲美高端奢华体验</a></li>
                                    <li class="footerlist3 mr20"><a href="#">媲美高端奢华体验</a></li>
                                    <li class="footerlist-item footerlist7"><a href="#">专为年轻肌肤设计</a></li>
                                    <li class="footerlist3 mr30"><a href="#">专为年轻肌肤设计</a></li>   
                                    <li class="footerlist-item footerlist8"><a href="#">玉兰油美肌沐浴露</a></li>
                                    <li class="footerlist3 mrLast"><a href="#">玉兰油美肌沐浴露</a></li>                        
                                </ul>
                            </div>
                            <div class="footer-info1">
                                <ul class="info-nav">
                                    <li class="footerlist1">护肤步骤</li>
                                    <li class="footerlist2_1  hfmrtop"><a href="#">洁面</a></li>
                                    <li class="footerlist2_1"><a href="#">爽肤</a></li>
                                    <li class="footerlist2_1"><a href="#">精华</a></li>
                                    <li class="footerlist2_1"><a href="#">精油</a></li>
                                    <li class="footerlist2_1"><a href="#">乳液</a></li>
                                    <li class="footerlist2_1"><a href="#">面霜</a></li>
                                    <li class="footerlist2_1"><a href="#">眼霜</a></li>
                                    <li class="footerlist2_1"><a href="#">面膜</a></li>
                                    <li class="footerlist2_1"><a href="#">防晒</a></li>
                                    <li class="footerlist2_1"><a href="#">彩妆</a></li>
                                    <li class="footerlist2_1"><a href="#">卸妆</a></li>
                                    <li class="footerlist2_1"><a href="#">护理</a></li>
                                </ul>
                            </div>
                            <div class="footer-info1">
                                <ul class="info-nav">
                                    <li class="footerlist1">护肤问题</li>
                                </ul>
                                <ul class="info-nav">
                                        <li class="footerlist1">了解肌肤问题</li>
                                        <li class="footerlist2_1"><a href="#">色斑&肤色不均</a></li>
                                        <li class="footerlist2_1"><a href="#">细纹&皱纹</a></li>
                                </ul>
                                <ul class="info-nav">
                                        <li class="footerlist1">护肤需求</li>
                                        <li class="footerlist2_1"><a href="#">淡化细纹</a></li>
                                        <li class="footerlist2_1"><a href="#">紧致肌肤</a></li>
                                        <li class="footerlist2_1"><a href="#">美白淡斑</a></li>
                                        <li class="footerlist2_1"><a href="#">提亮肤色</a></li>
                                        <li class="footerlist2_1"><a href="#">保湿锁水</a></li>
                                        <li class="footerlist2_1"><a href="#">防晒隔离</a></li>
                                </ul>
                                <ul class="info-nav">
                                        <li class="footerlist1">眼部问题</li>
                                        <li class="footerlist2_1"><a href="#">眼袋</a></li>
                                        <li class="footerlist2_1"><a href="#">鱼尾纹</a></li>
                                        <li class="footerlist2_1"><a href="#">黑眼圈</a></li>
                                        <li class="footerlist2_1"><a href="#">眼下皱纹</a></li>
                                </ul>

                            </div>
                        </div>
                        <div class="footer-info-right">
                                <div class="footer-info1">
                                        <ul class="info-nav">
                                            <li class="footerlist1">品牌故事</li>
                                        </ul>
                                        <ul class="info-nav">
                                                <li class="footerlist1">品牌历史</li>
                                                <li class="footerlist2_1"><a href="#">关于Olay</a></li>
                                                <li class="footerlist2_1"><a href="#">全球美誉</a></li>
                                                <li class="footerlist2_1"><a href="#">我们的科技与研发</a></li>
                                                <li class="footerlist2_1"><a href="#">OLAY常见问题</a></li>
                                        </ul>
                                        <ul class="info-nav">
                                                <li class="footerlist1">产品故事</li>
                                                <li class="footerlist2_1"><a href="#">产品对比</a></li>
                                        </ul>
                                        <ul class="info-nav">
                                                <li class="footerlist1">明星系列</li>
                                                <li class="footerlist2_1"><a href="#">臻粹系列</a></li>
                                                <li class="footerlist2_1"><a href="#">Pro-X博研诗系列</a></li>
                                                <li class="footerlist2_1"><a href="#">新生塑颜系列</a></li>
                                                <li class="footerlist2_1"><a href="#">多效修护系列</a></li>
                                                <li class="footerlist2_1"><a href="#">Olay Body系列</a></li>
                                        </ul>
                                        <ul class="info-nav">
                                                <li class="footerlist1">先进成分</li>
                                                <li class="footerlist2_1"><a href="#">氨基酸肽</a></li>
                                                <li class="footerlist2_1"><a href="#">烟酰胺（维他命B3）</a></li>
                                                <li class="footerlist2_1"><a href="#">奇迹胜肽B3科技</a></li>
                                        </ul>
                                </div>
                                <div class="footer-info1">
                                        <ul class="info-nav">
                                            <li class="footerlist1">更多体验</li>
                                        </ul>
                                        <ul class="info-nav">
                                                <li class="footerlist1">纯美礼遇，唯你所属</li>
                                                <li class="footerlist2_1"><a href="#">Olay冻龄俱乐部</a></li>
                                        </ul>
                                        <ul class="info-nav">
                                                <li class="footerlist1">申请试用</li>
                                                <li class="footerlist2_1"><a href="#">Olay「冻龄」俱乐部新人礼</a></li>
                                                <li class="footerlist2_1"><a href="#">申请试用</a></li>
                                        </ul>
                                        <ul class="info-nav">
                                                <li class="footerlist1">美肌资讯</li>
                                                <li class="footerlist2_1"><a href="#">品牌最新动向</a></li>
                                                <li class="footerlist2_1"><a href="#">产品测评</a></li>
                                                <li class="footerlist2_1"><a href="#">护肤知识</a></li>
                                                <li class="footerlist2_1"><a href="#">科技与创新</a></li>
                                        </ul>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-copyright">
                <div class="copyright">
                    <ul class="copyright-list">
                        <li class="copyright-item"><a href="#">Olay的承诺</a></li>
                        <li class="copyright-item"><a href="#">网站地图</a></li>
                        <li class="copyright-item"><a href="#">消费者隐私政策</a></li>
                        <li class="copyright-item"><a href="#">条款与条件</a></li>
                        <li class="copyright-item"><a href="#">联系我们</a></li>
                        <li class="copyright-item"><a href="#">了解OLAY</a></li>
                        <li class="copyright-item"><a href="#">Olay常见问题</a></li>
                        <li class="copyright-item"><a href="#">AdChoices <img src="images/icon1.png"></a></li>
                        <li class="copyright-item"><a href="#">© 2019 CHEN XXXXXX有限公司版权所有</a></li>
                        <li class="copyright-item last"><a href="#">粤ICP备88888888号-88</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

主要问题出在下面，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;
}
jacksoncya
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度前端实战训练营--CSS基础
hechengjiang_009的博客
01-07 631
百度前端实战训练营——CSS基础
CSS-200个小案例（一）
qq_55154022的博客
12-15 2918
最近我在youtube上跟着大神学习200个CSS小案例，作者Online Tutorials 编码的内容很实用，案例中涉及定位、变换、动画等概念，适合进一步学习和巩固CSS知识，能帮助我们实现页面的特效。
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
weixin_70320000的博客
02-16 1740
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
html+css实战2
02-11
通过一个企业网站首页实战的练习，掌握html+css的通用方法论，达到拿到任何一个网站设计稿都可以心里有数，能够快速实现
css基础练习案列
JiuYueyyds的博客
02-08 149
css的div布局
前端必备技能 - 玩转css艺术之美
最新发布
02-22
玩转css艺术之美 │ 1.准备篇：学前准备.md │ 2.基础篇：浏览器.md │ 3.进阶篇：回流重绘.md │ 4.基础篇：盒模型.md │ 5.基础篇：样式计算.md │ 6.进阶篇：布局样式.md │ 7.进阶篇：函数计算.md │ 8.进阶篇：...
华中师范大学+816学前教育学+17-21真题答案.pdf
09-15
考研真题笔记专业课资料
华中师范大学+816学前教育学+17-21真题.pdf
09-15
考研真题笔记专业课资料
学前儿童练习-数字1-10连线.docx
12-01
【学前儿童练习-数字1-10连线.docx】是一个针对学龄前儿童设计的教育材料，旨在帮助孩子们初步认识和理解数字1到10的基本概念。这份文档通常包含一系列的连线活动，让孩子们通过连线的方式熟悉数字和它们所代表的...
学前心理学章节练习题1-4章.docx
10-10
学前心理学是研究0-6、7岁学前儿童心理发展规律和特点的学科，它涵盖了儿童心理的各个方面，如认知、情绪、社会性、语言和动作发展等。在学习学前心理学时，我们需要理解和掌握一系列基本概念和原则。 1. 心理是...
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
HTML实战案例
01-09
HTML+CSS各阶段实战案例代码，适合html初学者实战练习，绝对正确无误！
HTML+CSS入门案例实战（网站首页布局）
07-01
非常适合入门初学者的HTML+CSS入门案例实战（网站首页布局）...
html相关案例练习题
卓卓卓
10-16 1229
案例一 <!doctype html> <html> <head> <meta charset="utf-8"> <title>H5,200行代码实现粒子漩涡特效</title> <style> html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background
练习 | css页面练习案例
A123ppleQueen的博客
06-09 715
纸质卡片
HTML、css项目上手练习
雨云21的博客
05-04 7971
根据下边的效果图完成一个完整网页的制作 1、头部的制作： （1）制作#tou外盒子效果； （2）制作#tou1内盒子1效果：包括导航与logo； （3）制作#tou2内盒子效果：包括标题与段落文字； ...
HTML+Css基础页面练习
weixin_43675671的博客
03-22 1228
Document 网页标题 次级标题 提示信息 导航 连接1 连接2 连接3 <section> <artic...
HTML+CSS网页练习（1）
weixin_43788627的博客
12-15 756
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*清除默认样式*/ *{ margin: 0; padding: 0; } /*统一页面中的字体*/ body{ /*设置字体大小为12px,一倍行高，宋体*/ f
Html入门练习
热门推荐
道亦无名
06-28 2万+
开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 - 等标签进行定义的。 2、HTML 段落 HTML 段落是通过 标签进行定义的。 3、HTML 链接 HTML 链接是通过 标签进行定义的。 4、HTML 图像 HTML 图像是通过 标签进行定义的。 5、HTML 元素 HTML 元素指的是从开始标签
云原生-docker操作文档
11-06
在课程介绍部分，提到了学前必备基础，包括硬件要求和安装虚拟机环境所需的平台软件。课程目标是通过学习本课程，掌握容器特点及应用，了解其应用场景，掌握容器编排工具的设计理念及基本使用，掌握使用docker快速...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值