博文尚美整页制作

Xiaoxian____

已于 2022-07-30 23:08:22 修改

阅读量128

点赞数

文章标签： html css 前端

于 2022-07-30 23:06:06 首次发布

本文链接：https://blog.csdn.net/Xiaoxian____/article/details/126079123

版权

html部分

<!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>Document</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; le
    0; top:0; opacity: 0; z-index: 1;}
    #banner .banner_list li.active{ opacity: 1; z-index: 10;}
    #banner .banner_list a{ display: block; width:100%; height:100%;}
    #banner .banner_btn{ width:100%; position: absolute; bottom: 19px; z-index: 20; font-size:0; text-align: center;}
    #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/mail1.png);}
    #service .service_list li:nth-of-type(3) div{ background-image: url(./images/graphic1.png);}
    #service .service_list li:nth-of-type(4) div{ background-image: url(./images/e-bussiness1.png);}
    #service .service_list h3{font-size: 18px;color: #434343;line-height: 36px; margin-top:25px;}
    #service .service_list p{font-size:14px; color:#6D6D6D;line-height: 22px;}

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

    #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;}


    </style>
</head>
<body>
    <div id="head" class="container">
        <div class="head_logo l">
            <a href="#">
                <img src="./images/logo.png" alt="博文尚美" title="博文尚美">
            </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>2.GRAPHIC DESIGN</h3>
                <p>
                    标志logo设计/产品宣传册设计
                    <br>
                    企业广告/海报设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>3.E-BUSINESS PLAN</h3>
                <p>
                    淘宝/天猫装修设计及运营推广                    
                    <br>
                    企业微博、微信营销
                </p>
            </li>
            <li>
                <div></div>
                <h3>4.<MAILBOXAGENTS></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="case_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="case_btn">
                <a href="#">VIEW MORE</a>
            </div>
        </div>
    </div>
    <div id="news" class="container">
        <div class="area_title">
            <h2>最新咨询</h2>
            <p>THE LAETEST 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>

CSS部分

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

.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;}

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

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