PC端企业类型整页制作练习

博文尚美

注：
首先观察设计图利用ps、蓝湖确定版心，编写公共类

common类

/* 版心 */
.container {
    width: 1080px;
    margin: 0 auto;
    /* 相对定位 */
    position: relative;

}

/* 通栏 */
.container_fluid {
    width: 100%;
}
/* 公共模块 */
* {
    margin: 0;
    padding: 0;
}

/* 清除ul ol中li的点 */
li {
    list-style: none;
}

img {
    display: block;
}

/* 去掉a连接的下划线 ，更改默认颜色*/
a {
    text-decoration: none;
    color: #646464;
}

/* 设置标题字体大小 */
h1,
h2,
h3 {

    font-size: 16px;

}

/* 设置文本字体样式 */
body {
    font-family: ArialMT;
}

/* 定义浮动及清除浮动 */
.l {
    float: left;
}

.r {
    float: right;
}

/* 清除浮动 */
.clear::after {
    content: "";
    display: block;
    clear: both;
}

完整代码如下：

common.css

/* 版心 */
.container {
    width: 1080px;
    margin: 0 auto;
    /* 相对定位 */
    position: relative;

}

/* 通栏 */
.container_fluid {
    width: 100%;
}

/* 公共模块 */
* {
    margin: 0;
    padding: 0;
}

/* 清除ul ol中li的点 */
li {
    list-style: none;
}

img {
    display: block;
}

/* 去掉a连接的下划线 ，更改默认颜色*/
a {
    text-decoration: none;
    color: #646464;
}

/* 设置标题字体大小 */
h1,
h2,
h3 {

    font-size: 16px;

}

/* 设置文本字体样式 */
body {
    font-family: ArialMT;
}

/* 定义浮动及清除浮动 */
.l {
    float: left;
}

.r {
    float: right;
}

/* 清除浮动 */
.clear::after {
    content: "";
    display: block;
    clear: both;
}




/*-- header star-- */
#header {
    height: 81px;
}

#header .header_logo {
    margin-top: 19px;
}

#header .header_menu {
    font-size: 14px;
    line-height: 81px;
}

#header .header_menu li {
    float: left;
    margin-left: 50px;
}

/* -- header end-- */

/* --area star-- */
.area_title {
    text-align: center;
    margin-top: 60px;
}

.area_title h2 {
    font-size: 20px;
    color: #363636;
    font-weight: normal;
    font-family: Adobe Heiti Std R;
    margin-bottom: 10px;
    background: url("../images/title_bg.png") center 7px no-repeat;
}

.area_title p {
    font: 14px ArialMT;
    color: #9F9F9F;
    margin-bottom: 34px;
}

/* -- area end */
/* -- footer -- */
#footer {
    background-color: #66c5b4;
}

#footer .container {
    font-size: 12px;
    height: 54px;
    line-height: 54px;
    color: white;
}

#footer ul {
    margin-left: 430px;
}

#footer ul li {
    float: left;
    margin: 0 15px;
}

#footer ul li a {
    color: #ffffff;
}

index

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博文尚美首页</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- header star -->
    <div id="header" class="container">
        <div class="header_logo l">
            <a href="#">
                <img src="./images/logo.png" alt="博文尚美">
            </a>
        </div>
        <ul class="header_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>
    <!-- header end -->

    <!-- banner star -->
    <div id="banner" class="container_fluid">
        <ul class="banner_list">
            <li class="active">
                <a href="#"></a>

            </li>
            <li>
                <a href="#"></a>
            </li>
            <li>
                <a href="#"></a>
            </li>
            <li>
                <a href="#"></a>
            </li>
        </ul>
        <ol class="banner_btn">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!-- banner end -->

    <!-- service star -->
    <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>

    <!-- case star -->
    <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>
    <!-- case end -->

    <!-- new star -->
    <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>
    <!-- new end -->

    <!-- footer star -->
    <div id="footer" class="containter_fluid">
        <div class="container">
            <p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
            <ul class="r">
                <li> <a href="#">Home</a> |</li>
                <li> <a href="#">About</a> |</li>
                <li> <a href="#">Portfolio</a> |</li>
                <li> <a href="#">Contact</a> |</li>
            </ul>
        </div>
    </div>
    <!-- footer end -->

</body>

</html>

index.css

/* banner star */
#banner {
    /* 相对定位 */
    position: relative;

}

#banner .banner_list {
    position: relative;
    width: 100%;
    height: 469px;
}

#banner .banner_list li {
    width: 100%;
    height: 100%;
    background: url("../images/banner.png") no-repeat center 0;
    /* 绝对定位 */
    position: absolute;
    left: 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;
}

/* banner end */

/* service star */
#service {
    overflow: hidden;
    min-height: 407px;

}

#service .service_list {
    text-align: center;
}

#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-child(1) div {
    background-image: url("../images/web1.png");
}

#service .service_list li:nth-child(2) div {
    background-image: url("../images/mail1.png");
}

#service .service_list li:nth-child(3) div {
    background-image: url("../images/graphic1.png");
}

#service .service_list li:nth-child(4) div {
    background-image: url("../images/e-bussiness1.png");
}

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

#service .service_list li p {
    font-size: 14px;
    color: #6D6D6D;
    line-height: 22px;
}

/* service end */
/* --case star-- */
#case {

    background-color: #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;
    text-align: center;
    line-height: 37px;
    border-radius: 25px;
    margin: 0 auto;
    margin-top: 37px;


}

#case .case_btn a {
    display: block;
    width: 100%;
    height: 100%;
    color: white;
}

/* case end */

/* new star */
#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;
}

/* new end */

效果图：
在这里插入图片描述

Silent Land

原创文章 108 获赞 3 访问量 4万+

关注私信

PC端企业类型整页制作练习

博文尚美

猜你喜欢