CSS项目（1）

其二115
127 阅读15分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。 ​

目录

一.准备

1.用PS切片（剪切图片）

方式1：合并图层

方式2：切片工具

 方式3：cutterman插件切图

二.学成在线首页制作

1.Header区域

2.banner模块

3.精品推荐模块

4.精品推荐大模块

5.底部模块

三.整体

一.准备

1.用PS切片（剪切图片）

方式1：合并图层

​编辑

 比如这张图片是由背景图片和文字两个图层组成，下面想要把两者整体作为图片导出。

Step1：按着CTRL将两个图层选中

Step2：CTRL+E将两个图层合并为一个

Step3：右键导出

​编辑

方式2：切片工具

Step1：选择切片工具

​编辑

 Step2：框起想要切出去的图片

​编辑

 Step3：文件->导出->存储为Web所用格式（旧版）

Step4：如果是非透明背景图片选JPEG，如果背景是透明背景选PNG

​编辑

 ​编辑

 如何将导出背景为透明的图片？

将背景图层的小眼睛关闭

​编辑

 按delete可以删除切片选中的的边框

方式3：cutterman插件切图

导出单个图层

选中图层直接导出

​编辑

 导出多个图层组成的图片

不用合并图层，选中多个图片，勾选合并导出再导出。

导出的图片背景是透明的

​编辑

结合选区工具

​编辑

选中某个部分就可以直接导出 

二.学成在线首页制作

项目目标

 ​编辑

 ​编辑

​编辑

​编辑

​编辑

​编辑

​编辑

目录结构

​编辑

CSS书写顺序

​编辑

 ​编辑

页面布局思路

​编辑

页面中行和行之间的元素标准文档流，一行之内的元素用浮动

1.Header区域

​编辑

首先测量版心的宽度

.w{
    width: 1200px;
    margin: 0 auto;
}

哪个部分需要放到中心区域，就加上这个类

然后一行一行的写页面中的元素

logo区域

 导航栏区域

​编辑

  设置文字的大小和颜色

​编辑

 用文字工具选中，可以看到字体的大小和颜色的16进制表示

搜索区域

用户头像区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../CSS/style.css">
</head>
<body>
    <div class="header w">
<!--        logo部分-->
        <div class="logo"><img src="../images/logo.png" alt=""></div>
<!--        导航栏-->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
<!--        搜索框部分-->
        <div class="search">
            <input type="text" value="输入关键字">
            <button></button>
        </div>
<!--        用户模块-->
        <div class="user">
            <img src="../images/user.png" alt="">
            大帅哥
        </div>

    </div>
</body>
</html>


*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #f3f5f7;
}

.w{
    width: 1200px;
    margin: 0 auto;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
}

.header{
    height: 42px;
    margin: 30px auto;/*头部距离上下30px，左右auto，是为了避免header的margin覆盖掉w中的margin*/
}

/*header中的logo区域*/
.logo{
    /*跟布局相关的属性*/
    float: left;/*这个必须要加浮动，不然后面的元素设置浮动后并不会上来*/
    /*跟盒子相关的属性*/
    width: 198px;
    height: 42px;
}
/*导航栏区域*/
.nav{
    float: left;
    margin-left: 60px;
    /*没有给盒子宽度，盒子的大小由内容多少决定（设置了浮动有了行内块元素的特点）*/
}
/*导航栏中的每个列表项*/
.nav ul li{
    float: left;/*a本身是行内元素，但是由于在li中才垂直显示了，所以要将li设置为浮动*/
    margin: 0 15px;/*设置每个链接直接的距离*/
}
/*列表项中的链接*/
.nav ul li a{
    /*跟布局相关的属性*/
    display: block;/*目的是让链接能有大小，行内元素不能设置宽高*/
    /*跟盒子相关的属性*/
    height: 42px;
    padding: 0 10px;/*不方便给宽度，因为每个a标签内的字数不同，但又为了让a标签内的文字距离左右宽度相同*/
    /*跟文字相关的属性*/
    font-size: 18px;
    color:#050505;
}
/*列表项中链接的动态效果*/
.nav ul li a:hover{
    color:#00a4ff;
    border-bottom: solid 2px #00a4ff;
}

.search{
    float: left;
    width: 412px;
    height: 20px;
    margin-left: 70px; /*距离链接的距离*/
}


.search input{
    float: left;/*因为行内块元素之间默认是有空隙的，所以会和button之间有空隙把button挤下去，设置浮动就可以消除空隙*/

    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0;

    color: #bfbfbf;
    font-size: 14px;
    padding-left: 15px;/*把文本框中的字往右挤*/
}

.search button{
    float: left;/**/

    width: 50px;
    height: 41px;
    border: 0;

    background: url("../images/search.png");

}

.user{
    float: right;
    margin-right: 30px;

    font-size: 14px;
    color: #666;
    line-height: 42px;
}

​编辑

2.banner模块

​编辑

<div class="banner">
        <div class="w">
            <div class="sub-nav">
                <ul>
                    <li><a href="#">前端开发<span>&gt;</span></a></li>
                    <li><a href="#">后端移动<span>&gt;</span></a></li>
                    <li><a href="#">移动开发<span>&gt;</span></a></li>
                    <li><a href="#">人工智能<span>&gt;</span></a></li>
                    <li><a href="#">商业预测<span>&gt;</span></a></li>
                    <li><a href="#">云计算&大数据<span>&gt;</span></a></li>
                    <li><a href="#">运维&从测试<span>&gt;</span></a></li>
                    <li><a href="#">UI设计<span>&gt;</span></a></li>
                    <li><a href="#">产品<span>&gt;</span></a></li>
                </ul>
            </div>
            <div class="course">
                <h2>我的课程表</h2>
                <div class="bd">
                    <ul>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ul>
                    <a href="#">全部课程</a>
                </div>
            </div>
        </div>


.banner{
    height: 421px;
    background: #1c036c;
}

.banner .w{
    height: 421px;
    background: url(../images/banner.png) no-repeat top center;/*让图片不重复，垂直靠上，水平居中对齐*/
}

.banner .w .sub-nav{
    float: left;
    width: 190px;
    height: 421px;


    background: rgba(0,0,0,0.3);
}

.banner .w .sub-nav ul li{
    height: 46px;/*每一个链接的li指定高度,从上一个文字的底量到下一个元素的底是一个li的高度*/
    padding: 0 20px;
    line-height: 46px;
}

.banner .w .sub-nav ul li a{
    color: white;
}

.banner .w .sub-nav ul li a span{
    float: right;
}
.banner .w .sub-nav ul li a:hover{
    color: #00a4ff;
}

.banner .course{
    float: right;
    width: 230px;
    height: 300px;
    margin-top: 50px;
    background-color: #ffffff;
}
.banner .course .bd{
    padding: 0 20px;
}
.banner .course h2{
    height: 48px;

    font-size: 18px;
    text-align: center;
    line-height: 48px;
    color: white;

    background-color: #9bceea;
}

.banner .course .bd li{
    padding: 14px 0;
    border-bottom: 1px solid #efefef;
}
.banner .course .bd li h4{
    font-size: 16px;
    color: #4e4e4e;
}

.banner .course .bd li p{
    font-size: 12px;
    color: #a5a5a5;
}

.banner .course .bd  a{
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;

    text-align: center;
    line-height: 38px;
    font-size: 16px;
    font-weight: 700;
    color: #00a4ff;
    background-color: white;
}

​编辑

3.精品推荐模块

​编辑

 <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">Spark</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Ajax</a></li>
        </ul>
        <a class="reset" href="#">修改兴趣</a>
    </div>


.goods{
    height: 60px;
    margin-top: 10px;
    background-color: #fff;
    box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1);/*水平，垂直，模糊距离，模糊程度*/
}

.goods h3{
    float: left;
    margin:0 30px;
    line-height: 60px;
    font-size: 16px;
    font-weight: bold;
    color: #00a4ff;

}

.goods ul li {
    float: left;

}

.goods ul li a{
    padding:0 30px;
    border-left: 1px solid #bfbfbf;
    line-height: 60px;
    font-size: 16px;
    color: #4e4e4e;
}

.goods .reset{
    float: right;
    margin-right: 30px;
    line-height: 60px;
    font-size: 16px;
    color: #00a4ff;
}

​编辑

4.精品推荐大模块

​编辑

 <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
            </ul>
        </div>
    </div>


.box{
    margin-top: 30px;
}

.box .box-hd{
    height: 45px;
    line-height: 45px;
}
.box .box-hd h3{
    float: left;
    font-size: 20px;
    font-weight: bold;
    color: black;
}

.box .box-hd a{
    float: right;
    margin-right: 30px;
    font-size: 12px;
    color: #4e4e4e;
}

/*把ul修改的最够宽，防止li在一行上装不开掉下来*/
.box .box-bd ul{
    width: 1300px;
}

.box .box-bd ul li{
    float: left;
    margin-left:15px;
    margin-bottom: 15px;
    width: 228px;
    height: 270px;
    background-color: white;
}

.box .box-bd ul li img{
    width: 100%;  /*将li上的图片修改为和li一样宽*/
}

.box .box-bd ul li h4{
    margin: 20px 20px 20px 25px;
    font-size: 14px;
}
.box .box-bd ul li p{
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}

.box .box-bd ul li p span{
    color: #ff7c4d;
}

​编辑

5.底部模块

​编辑

<div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="../images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#">下载APP</a>
            </div>
            <div class="right">
                <dl>
                    <dt>合作伙伴</dt>
                    <dd>合作机构</dd>
                    <dd>合作导师</dd>
                </dl>
                <dl class="center">
                    <dt>新手指南</dt>
                    <dd>如何注册</dd>
                    <dd>如何选课</dd>
                    <dd>如何拿到毕业证</dd>
                    <dd>学分是什么</dd>
                    <dd>考试未通过怎么办</dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd>关于</dd>
                    <dd>管理团队</dd>
                    <dd>工作机会</dd>
                    <dd>客户服务</dd>
                    <dd>帮助</dd>
                </dl>
            </div>
        </div>
    </div>


/*这里需要清除浮动，因为上面的box虽然没有设置浮动，但是它的元素都浮动了，又因为没有指定高度，所以高度为0，这个footer会跑到上面去*/
.footer{
    height: 415px;
    background-color: white;
}

/*如果设置margin-top这个地方会出现外边距合并的问题，因为w没有浮动，给w上外边距，那么footer也会有外边距,所以只设置了padding*/
.footer .w{
    padding-top: 35px;
}

.footer .copyright{
    float: left;
    margin-left: 20px;
    width: 450px;
}
.footer .copyright p{
    margin-top: 25px;
    font-size: 12px;
    color: #666666;
}
.footer .copyright a{
    display: block;
    margin-top: 15px;
    border: 1px solid #00a4ff;
    width: 120px;
    height: 35px;
    font-size: 16px;
    line-height: 35px;
    text-align: center;
    color: #00a4ff;
}

 .right dl{
    float: right;
}

.right dl dt{
    font-size: 16px;
    color: #666666;
}

.right dl dd{
    font-size: 12px;
    color: black;
}
.center{
    margin: 0 120px 0 120px;
}

​编辑

三.整体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../CSS/style.css">
</head>
<body>
    <div class="header w">
<!--        logo部分-->
        <div class="logo"><img src="../images/logo.png" alt=""></div>
<!--        导航栏-->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
<!--        搜索框部分-->
        <div class="search">
            <input type="text" value="输入关键字">
            <button></button>
        </div>
<!--        用户模块-->
        <div class="user">
            <img src="../images/user.png" alt="">
            大帅哥
        </div>
    </div>
    <div class="banner">
        <div class="w">
            <div class="sub-nav">
                <ul>
                    <li><a href="#">前端开发<span>&gt;</span></a></li>
                    <li><a href="#">后端移动<span>&gt;</span></a></li>
                    <li><a href="#">移动开发<span>&gt;</span></a></li>
                    <li><a href="#">人工智能<span>&gt;</span></a></li>
                    <li><a href="#">商业预测<span>&gt;</span></a></li>
                    <li><a href="#">云计算&大数据<span>&gt;</span></a></li>
                    <li><a href="#">运维&从测试<span>&gt;</span></a></li>
                    <li><a href="#">UI设计<span>&gt;</span></a></li>
                    <li><a href="#">产品<span>&gt;</span></a></li>
                </ul>
            </div>
            <div class="course">
                <h2>我的课程表</h2>
                <div class="bd">
                    <ul>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ul>
                    <a href="#">全部课程</a>
                </div>
            </div>
        </div>

    </div>
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">Spark</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Ajax</a></li>
        </ul>
        <a class="reset" href="#">修改兴趣</a>
    </div>
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="../images/b1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>  •  1125人在学习</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="../images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#">下载APP</a>
            </div>
            <div class="right">
                <dl>
                    <dt>合作伙伴</dt>
                    <dd>合作机构</dd>
                    <dd>合作导师</dd>
                </dl>
                <dl class="center">
                    <dt>新手指南</dt>
                    <dd>如何注册</dd>
                    <dd>如何选课</dd>
                    <dd>如何拿到毕业证</dd>
                    <dd>学分是什么</dd>
                    <dd>考试未通过怎么办</dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd>关于</dd>
                    <dd>管理团队</dd>
                    <dd>工作机会</dd>
                    <dd>客户服务</dd>
                    <dd>帮助</dd>
                </dl>
            </div>
        </div>
    </div>
</body>
</html>


*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #f3f5f7;
}

.w{
    width: 1200px;
    margin: 0 auto;
}

li{
    list-style: none;
}

.clearfix:before,.clearfix:after{
    content:"";
    display: table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}

a{
    text-decoration: none;
}

.header{
    height: 42px;
    margin: 30px auto;/*头部距离上下30px，左右auto，是为了避免header的margin覆盖掉w中的margin*/
}

/*header中的logo区域*/
.logo{
    /*跟布局相关的属性*/
    float: left;/*这个必须要加浮动，不然后面的元素设置浮动后并不会上来*/
    /*跟盒子相关的属性*/
    width: 198px;
    height: 42px;
}
/*导航栏区域*/
.nav{
    float: left;
    margin-left: 60px;
    /*没有给盒子宽度，盒子的大小由内容多少决定（设置了浮动有了行内块元素的特点）*/
}
/*导航栏中的每个列表项*/
.nav ul li{
    float: left;/*a本身是行内元素，但是由于在li中才垂直显示了，所以要将li设置为浮动*/
    margin: 0 15px;/*设置每个链接直接的距离*/
}
/*列表项中的链接*/
.nav ul li a{
    /*跟布局相关的属性*/
    display: block;/*目的是让链接能有大小，行内元素不能设置宽高*/
    /*跟盒子相关的属性*/
    height: 42px;
    padding: 0 10px;/*不方便给宽度，因为每个a标签内的字数不同，但又为了让a标签内的文字距离左右宽度相同*/
    /*跟文字相关的属性*/
    font-size: 18px;
    color:#050505;
}
/*列表项中链接的动态效果*/
.nav ul li a:hover{
    color:#00a4ff;
    border-bottom: solid 2px #00a4ff;
}

.search{
    float: left;
    width: 412px;
    height: 20px;
    margin-left: 70px; /*距离链接的距离*/
}

.search input{
    float: left;/*因为行内块元素之间默认是有空隙的，所以会和button之间有空隙把button挤下去，设置浮动就可以消除空隙*/

    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0;

    color: #bfbfbf;
    font-size: 14px;
    padding-left: 15px;/*把文本框中的字往右挤*/
}

.search button{
    float: left;/**/

    width: 50px;
    height: 41px;
    border: 0;

    background: url("../images/search.png");

}

.user{
    float: right;
    margin-right: 30px;

    font-size: 14px;
    color: #666;
    line-height: 42px;
}

.banner{
    height: 421px;
    background: #1c036c;
}

.banner .w{
    height: 421px;
    background: url(../images/banner.png) no-repeat top center;/*让图片不重复，垂直靠上，水平居中对齐*/
}

.banner .w .sub-nav{
    float: left;
    width: 190px;
    height: 421px;


    background: rgba(0,0,0,0.3);
}

.banner .w .sub-nav ul li{
    height: 46px;/*每一个链接的li指定高度,从上一个文字的底量到下一个元素的底是一个li的高度*/
    padding: 0 20px;
    line-height: 46px;
}

.banner .w .sub-nav ul li a{
    color: white;
}

.banner .w .sub-nav ul li a span{
    float: right;
}
.banner .w .sub-nav ul li a:hover{
    color: #00a4ff;
}

.banner .course{
    float: right;
    width: 230px;
    height: 300px;
    margin-top: 50px;
    background-color: #ffffff;
}
.banner .course .bd{
    padding: 0 20px;
}
.banner .course h2{
    height: 48px;

    font-size: 18px;
    text-align: center;
    line-height: 48px;
    color: white;

    background-color: #9bceea;
}

.banner .course .bd li{
    padding: 14px 0;
    border-bottom: 1px solid #efefef;
}
.banner .course .bd li h4{
    font-size: 16px;
    color: #4e4e4e;
}

.banner .course .bd li p{
    font-size: 12px;
    color: #a5a5a5;
}

.banner .course .bd  a{
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;

    text-align: center;
    line-height: 38px;
    font-size: 16px;
    font-weight: 700;
    color: #00a4ff;
    background-color: white;
}


.goods{
    height: 60px;
    margin-top: 10px;
    background-color: #fff;
    box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1);/*水平，垂直，模糊距离，模糊程度*/
}

.goods h3{
    float: left;
    margin:0 30px;
    line-height: 60px;
    font-size: 16px;
    font-weight: bold;
    color: #00a4ff;

}

.goods ul li {
    float: left;

}

.goods ul li a{
    padding:0 30px;
    border-left: 1px solid #bfbfbf;
    line-height: 60px;
    font-size: 16px;
    color: #4e4e4e;
}

.goods .reset{
    float: right;
    margin-right: 30px;
    line-height: 60px;
    font-size: 16px;
    color: #00a4ff;
}

.box{
    margin-top: 30px;
}

.box .box-hd{
    height: 45px;
    line-height: 45px;
}
.box .box-hd h3{
    float: left;
    font-size: 20px;
    font-weight: bold;
    color: black;
}

.box .box-hd a{
    float: right;
    margin-right: 30px;
    font-size: 12px;
    color: #4e4e4e;
}

/*把ul修改的最够宽，防止li在一行上装不开掉下来*/
.box .box-bd ul{
    width: 1300px;
    overflow: hidden; /*给浮动元素的父亲添加，去掉孩子浮动对下面元素造成的影响*/
}

.box .box-bd ul li{
    float: left;
    margin-left:15px;
    margin-bottom: 15px;
    width: 228px;
    height: 270px;
    background-color: white;
}

.box .box-bd ul li img{
    width: 100%;  /*将li上的图片修改为和li一样宽*/
}

.box .box-bd ul li h4{
    margin: 20px 20px 20px 25px;
    font-size: 14px;
}
.box .box-bd ul li p{
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}

.box .box-bd ul li p span{
    color: #ff7c4d;
}
/*这里需要清除浮动，因为上面的box虽然没有设置浮动，但是它的元素都浮动了，又因为没有指定高度，所以高度为0，这个footer会跑到上面去*/
.footer{
    height: 415px;
    background-color: white;
}

/*如果设置margin-top这个地方会出现外边距合并的问题，因为w没有浮动，给w上外边距，那么footer也会有外边距,所以只设置了padding*/
.footer .w{
    padding-top: 35px;
}

.footer .copyright{
    float: left;
    margin-left: 20px;
    width: 450px;
}
.footer .copyright p{
    margin-top: 25px;
    font-size: 12px;
    color: #666666;
}
.footer .copyright a{
    display: block;
    margin-top: 15px;
    border: 1px solid #00a4ff;
    width: 120px;
    height: 35px;
    font-size: 16px;
    line-height: 35px;
    text-align: center;
    color: #00a4ff;
}

 .right dl{
    float: right;
}

.right dl dt{
    font-size: 16px;
    color: #666666;
}

.right dl dd{
    font-size: 12px;
    color: black;
}
.center{
    margin: 0 120px 0 120px;
}

​编辑

链接：pan.baidu.com/s/1LNYixvu1… 
提取码：1234 
--来自百度网盘超级会员V1的分享 

​

avatar
文章
阅读
粉丝