博文尚美页面的粗糙展现（练习）

最新推荐文章于 2023-02-23 14:51:39 发布
OrdnAry
最新推荐文章于 2023-02-23 14:51:39 发布
阅读量369
点赞数
分类专栏：学习文章标签： html css
本文链接：https://blog.csdn.net/OrdnAry/article/details/107817964
版权
学习专栏收录该内容
59 篇文章 5 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0;}
    ol,ul{list-style: none;}
    a{text-decoration: none;color: #646464;}
    img{display: block;}
    body{font-family: ArialMT;}
    .header{width:100%;height: 81px;position:fixed;background-color: white;position:    relative;}
    .header img{width:162px;height:44px;margin-left: 135px;margin-top:19px;margin-right:300px;}
    .header ul{min-width:700px;height:81px;position: absolute;top:0;left:40%}
    .header ul li{float:left;font-size: 14px; line-height: 81px;margin-left: 60px;}
     .body1{width: 100%;height: 500px;position: relative;/* overflow: hidden; */}
    .body1 img{width: 90%;height: 100%;margin:0 auto;}
    .body1 ol{width:110px;height:12px;position: absolute;top:90%;left:45%;}
    .body1 ol li{width: 12px;height:12px;border-radius: 12px;border: 2px solid white;float: left;margin-left: 10px; }
    .body1 ol li:nth-of-type(1){background-color: white;}
    .body2{width:90%;height:400px;margin:0 auto;text-align: center;margin-top:61px;}
    .body2 div h2{height:20px;line-height:20px;font-size:20px;background:url("images/title_bg.png") no-repeat center ;}
    .body2{min-width: 1280px; min-height:400px;}
    .body2 div p{font-size:14px;}
    .body2-list li{margin-top:44px;margin-left:90px;;float: left;}
    .body2-list div img{margin:0 auto;}
    .body3{width:100%;height:400px;margin:0 auto;text-align: center;background-color:#f5f5f0;}
    .body3 div h2{height:20px;line-height:20px;font-size:20px;background:url("images/title_bg.png") no-repeat center ;color:rgba(102,197,180,1);}
    .body3 div p{margin-bottom: 60px;}
    .body3 div img{min-width:340px;float: left;margin:0  20px;top:0;left:0;margin-left: 110px;}
    .body3 .tupian{min-width:1050px;height:200px;}
    .body3 .anniu{width:150px;height:30px;border-radius: 15px;background-color: darkcyan;margin: 10px auto;}
    .body3 .anniu a{color: black;line-height:30px;}
    .body3 .anniu a:hover{color:white;}
    .footer{width:100%;height: 40px;background-color:#66C5B4;position:relative;}
    #news{ min-height:450px; overflow: hidden;}
    #news .area_title{ margin-top:65px;}
    #news dl{ margin-top:48px;}
    #news dt{ width:234px;}
    #news dd{ width:846px;}
    #news .news_list{ width:100%;}
    #news .news_list li{ width:50%; float: left; margin-bottom: 48px;}
    #news .news_date{ width:71px; height:70px; border-right:1px solid #DCDCDC; text-align: center;}
    #news .news_date i{ color:#66C5B4; font-size:39px; display:block; font-weight: bold;}
    #news .news_date span{ color:#999999; font-size:20px; line-height: 36px;}
    #news .news_text{ width:310px; margin-left:20px;}
    #news .news_text h3{ font-size:14px;}
    #news .news_text h3 a{ color:#3F3F3F;}
    #news .news_text p{ color:#A4A4A4; font-size:12px; line-height: 21px; margin-top:17px;}
    
.l{ float: left;}
.r{ float: right;}
.clear:after{ content:""; display: block; clear:both;}
.container{ width:1080px; margin:0 auto; position: relative;}
.container-fluid{ width:100%;}

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

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



    </style>
</head>
<body>
    <div class="header">
        <div>
            <a href=""><img class="l"src="images/logo.png" alt="博文尚美"></a>
        </div> 
        <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>
        <li>
            <a href="">联系我们</a>
        </li>
        </ul>      
    </div>
    <div class="body1">
        <a href="">
            <img src="images/banner.png" alt="">
        </a>  
        <a href="">
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </a>        
    </div>
    <div class="body2">
        <div>
            <h2>服务范围</h2>
            <p>OUR SERVICES</p>
        </div>
        <ul class="body2-list">
            <li>
                <div><img src="images/e-bussiness1.png" alt=""></div>
                <h3>1.web design</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div><img src="images/graphic1.png" alt=""></div>
                <h3>2.graphic design</h3>
                <p>
                    标志logo设计/产品宣传册设计
                    <br>
                    企业广告/海报设计
                </p>
            </li>
            <li>
                <div><img src="images/web1.png" alt=""></div>
                <h3>3.e-business plan</h3>
                <p>
                    淘宝/天猫装修设计及运营推广                    
                    <br>
                    企业微博、微信营销
                </p>
            </li>
            <li>
                <div><img src="images/mail1.png" alt=""></div>
                <h3>4.mailboxagents</h3>
                <p>
                    腾讯/网易企业邮箱品牌代理
                    <br>
                    个性化邮箱定制开发
                </p>
            </li>
        </ul>
    </div>
    <div class="body3">
        <div>
            <h2>[客户案例]</h2>
            <p>With the best professional technology, to design the best innovative web site</p>
        </div>
        <div class="tupian">
            <img src="images/20141121095216750.png" alt="">
            <img src="images/20141121095528549.png" alt="">
            <img src="images/20141121105856226.png" alt="">
        </div>
        <div class="anniu">
            <a href="">view more</a>
        </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_date 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_date 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_date 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_date 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>