网页制作小样例之博文尚美

借_口

已于 2022-07-31 14:29:47 修改

阅读量264

点赞数

文章标签： css css3 html

于 2022-07-31 14:26:01 首次发布

本文链接：https://blog.csdn.net/ENDlesslove0/article/details/126085275

版权

文章目录

- 展示与源码

展示与源码

1.效果展示

在这里插入图片描述

2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Title</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-width: 407px
        }

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

        #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: 21px;
        }

    </style>
</head>
<body>
<div id="head" class="container">
    <div class="head_logo l">
        <a href="#">
            <img src="/imgs/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(./imgs/banner.png)"><a href="#"></a></li>
        <li style="background-image: url(./imgs/banner.png)"><a href="#"></a></li>
        <li style="background-image: url(./imgs/banner.png)"><a href="#"></a></li>
        <li style="background-image: url(./imgs/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="./imgs/20141121095216750.png" alt=""></a></li>
            <li><a href="#"><img src="./imgs/20141121095528549.png" alt=""></a></li>
            <li><a href="#"><img src="./imgs/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 LATEST NEWS</p>
    </div>
    <dl>
        <dt class="l">
            <img src="./imgs/xs1.png" alt="">
        </dt>
        <dd class="l">
            <ul class="news_list l">
                <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>08</i>
                        <span>Jan</span>
                    </div>
                    <div class="news_text l">
                        <h3><a href="#">flash网站制作特点</a></h3>
                        <p>很多客户。。。巴拉巴拉</p>
                    </div>
                </li>
                <li>
                    <div class="news_date l">
                        <i>07</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>06</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="#">Protfolio</a>| <a href="#">Contact</a>
        </div>
    </div>
</div>
</body>
</html>

3. 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(../imgs/title_bg.png) no-repeat center 7px;
    font-weight: normal;
}

.area_title p {
    color: #9f9f9f;
    font-size: 14px;
    line-height: 34px
}
.area_title li{
}


.service_list {
    text-align: center;
    margin-top: 34px;
}

.service_list li {
    float: left;
    width: 250px;
    margin: 0 10px;
}

.service_list div {
    width: 102px;
    height: 102px;
    margin: 0 auto;
}

.service_list li:nth-of-type(1) div {
    background-image: url(../imgs/web1.png)
}

.service_list li:nth-of-type(2) div {
    background-image: url(../imgs/mail1.png)
}

.service_list li:nth-of-type(3) div {
    background-image: url(../imgs/graphic1.png)
}

.service_list li:nth-of-type(4) div {
    background-image: url(../imgs/e-bussiness1.png);
}

.service_list h3 {
    font-size: 18px;
    color: #434343;
    line-height: 36px;
    margin-top: 25px;
}

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