博文尚美首页前端练习

Mr_Qin_AC

已于 2023-02-28 15:55:18 修改

阅读量340

点赞数

分类专栏： web前端文章标签： html5 css

于 2023-02-23 14:51:39 首次发布

本文链接：https://blog.csdn.net/Mr_Qin_AC/article/details/129181769

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博文尚美练习1</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        #banner{position: relative;}
        #banner .banner_list{width: 100%;height: 469px;position: relative;}
        #banner .banner_list li{width: 100%;height: 100%;background: center 0 no-repeat;position: absolute;top: 0;left: 0;opacity: 0;z-index: 1;}
        #banner .banner_list li a{display: block; width: 100%;height: 100%;}
        #banner .banner_list li.active{opacity: 1;z-index: 10;}
        #banner .banner_btn{width: 100%; text-align: center;position: absolute;bottom: 19px;z-index: 20;font-size: 0;}
        #banner .banner_btn li{display: inline-block;width: 12px;height: 12px;border: 2px solid white;border-radius: 50%;box-sizing: border-box;margin: 0 6px;cursor: pointer;}
        #banner .banner_btn li.active{background: white;}


        #service{overflow: hidden;min-height: 407px;}
        #service .service_list{text-align: center;margin-top: 34px;}
        #service .service_list li{float: left;width: 250px;margin: 0 10px;}
        #service .service_list div{width: 102px;height: 102px;margin: 0 auto;}
        #service .service_list li:nth-of-type(1) div{background-image: url(./images/web1.png);}
        #service .service_list li:nth-of-type(2) div{background-image: url(./images/e-bussiness1.png);}
        #service .service_list li:nth-of-type(3) div{background-image: url(./images/mail1.png);}
        #service .service_list li:nth-of-type(4) div{background-image: url(./images/graphic1.png);}
        #service .service_list h3{margin-top: 25px;color: #434343;line-height: 36px;font-size: 18px; }
        #service .service_list p{color: #6D6D6D;font-size: 14px;line-height: 22px;}


        #case{background-color: #f8f8f8;}
        #case .container{min-height: 460px; overflow: hidden;}
        #case .area_title{margin-top: 55px;}
        #case .area_title h2{color: #66C5B4;}
        #case .area_list{margin-top: 28px;overflow: hidden;}
        #case .area_list li{float: left;width: 340px; margin: 0 10px;}
        #case .area_btn{width: 176px;height: 37px;background: #66C5B4;border-radius: 20px;text-align: center;line-height: 37px;margin: 0 auto;font-size: 14px;margin-top: 36px;}
        #case .area_btn a{color: white;display: block;width: 100%;height: 100%;}

        #news{overflow: hidden;}
        #news dl{margin-top: 50px;}
        #news dt{width: 234px;}
        #news dd{width: 846px;}
        #news .area_title{}
        #news .news_list{width: 100%;}
        #news .news_list li{float: left; width: 50%;margin-bottom: 43px;}
        #news .news_data{width: 64px;height: 72px;border-right: #DCDCDC solid;text-align: center;}
        #news .news_data i{color:#66C5B4;font-size: 39px;display: block;}
        #news .news_data span{color: #999999;font-size: 20px;}

        #news .news_text{width: 311px;margin-left: 10px;}
        #news .news_text h3{color: #3F3F3F;font-size: 14px;line-height: 36px;}
        #news .news_text p{font-size: 12px;line-height: 21px;color: #A4A4A4;}

    



    </style>
</head>
<body>
    <div id="head" class="container">
        <div class="head_logo l">
            <a href="#">
                <img src="./images/logo.png" alt="">
            </a>
        </div>
        <ul class="head_menu r">
            <li>
                <a href="#">HOME</a>
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
            <li>
                <a href="#">PROTFOLIO</a>
            </li>
            <li>
                <a href="#">SERVICE</a>
            </li>
            <li>
                <a href="#">NEWS</a>
            </li>
            <li>
                <a href="#">CONTACT</a>
            </li>
        </ul>
    </div>

    <div id="banner" class="container_fluid">
        <ul class="banner_list">
            <li class="active" style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="banner_btn">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <div id="service" class="container">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUR SERVICES</p>
        </div>
        <ul class="service_list">
            <li>
                <div></div>
                <h3>1.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>1.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>1.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>1.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
        </ul>
    </div>

    <div id="case" class="container_fluid">
        <div class="container">
            <div class="area_title">
                <h2>{ 客户案例 } </h2>
                <p>With the best professional technology, to design the best innovative web site</p>
            </div>
            <ul class="area_list clear">
                <li>
                    <a href="#">
                        <img src="./images/20141121095216750.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/20141121095528549.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/20141121105856226.png" alt="">
                    </a>
                </li>
            </ul>
            <div class="area_btn clear">
                <a href="#">VIEW MORE</a>
            </div>
        </div>
    </div>

    <div id="news" class="container">
        <div class="area_title">
            <h2>最新资讯</h2>
            <p>TEH LATEST NEWS</p>
        </div>
        <dl>
            <dt class="l">
                <img src="./images/xs1.png" alt="">
            </dt>
            <dd class="l">
                <ul class="news_list">
                    <li>
                        <div class="news_data l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_data l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_data l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_data l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>

    <div id="foot" class="container_fluid">
        <div class="container">
            <p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
            <div class="r">
                <a href="#">Home</a>|<a href="#">About</a>|<a href="#">Portfolio</a>|<a href="#">Contact</a>  
            </div>

        </div>
    </div>

</body>
</html>

*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
a{text-decoration: none;color: #646464;}
img{display: block;}
bode{font-family: Arial;}
h1,h2,h3{font-size: 16px;}


.l{float: left;}
.r{float: right;}
.clear{content: "";display: block;clear: both;}

.container{width: 1080px;margin: 0 auto;}
.container_fluid{width: 100%;}


#head{height: 81px;}
#head .head_logo{width: 162px;height: 44;margin-top: 19px;}
#head .head_menu{height: 81px; line-height: 81px; float: right;font-size: 14px;}
#head .head_menu li{float: left;margin-left: 58px;}


.area_title{margin-top: 60px;text-align: center;}
.area_title h2{color:#363636;font-size: 20px;line-height: 20px;height: 20px;background: url(../images/title_bg.png) no-repeat center 7px;}
.area_title p{color: #9F9F9F ;font-size: 14px;line-height: 34px;}

#foot{height: 54px;background: #66c5b4;}
#foot .container{line-height: 54px;color: white;}
#foot .container a{color: white;margin: 0 10px;}