学成在线首页的学与悟

最新推荐文章于 2023-03-25 09:36:03 发布

巧克力小猫猿

最新推荐文章于 2023-03-25 09:36:03 发布

阅读量264

点赞数 1

分类专栏：前端三剑客文章标签： css css3 前端

本文链接：https://blog.csdn.net/zxdznyy/article/details/121107990

版权

前端三剑客专栏收录该内容

20 篇文章 3 订阅

订阅专栏

文章目录

前言
一、案例成品展示图片？
二、html代码
三，CSS代码
四，在写代码时遇到的问题及想法
反思总结

前言

学会用标准流与浮动复刻一个网页，可以很好的锻炼css性质的利用。学成在线是我写出的第一个界面，上手叫生疏，还是花4天时间敲完了。前面是和老师同步一起写的，后面是自己发挥。
这里提供psd链接
学成在线psd链接下载

一、案例成品展示图片？

在这里插入图片描述

二、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=b1.0">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <!--头部区域开始啦-->
    <div class="header w">
        <!--logo部分-->
        <div class="logo">
            <img src="./image/学成在线.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>
                <img src="./image/fa-search.png" alt="搜索按钮">
            </button>
        </div>
        <!--用户模块块-->
        <div class="user">
            <img src="./image/user.png" alt="头像">
            qq-lilei
        </div>
    </div>
    <!--头部区域结束啦-->
    <!--banner部分start-->
    <div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发<span>></span></a></li>
                    <li><a href="#">后端开发<span>></span></a></li>
                    <li><a href="#">移动开发<span>></span></a></li>
                    <li><a href="#">人工智能<span>></span></a></li>
                    <li><a href="#">商业预测<span>></span></a></li>
                    <li><a href="#">云计算&大数据<span>></span></a></li>
                    <li><a href="#">运维&大数据<span>></span></a></li>
                    <li><a href="#">UI设计<span>></span></a></li>
                    <li><a href="#">产品<span>></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="#" class="more">全部课程</a>
                </div>
            </div>
        </div>
    </div>
    <!--banner部分end-->

    <!--goods部分start-->
    <div class="w goods">
        <p class="recommend">精品推荐</p>
        <div class="idea">
            <p>JQuery</p>
            <p>Spark</p>
            <p>MySQL</p>
            <p>JavaWeb</p>
            <p>MySQL</p>
            <p>JavaWeb</p>
        </div>
        <p class="change">修改样式</p>
    </div>
    <!--goods部分end -->

    <!--精品推荐部分start-->
    <div class="w box">
        <div class="hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="bd">
            <ul>
                <li>
                    <img src="./image/图层133.png" alt="">
                    <p class="php">Think PHP 5.0 博客系统实战项目演练</p>
                    <p class="gj"><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="./image/图层135.png" alt="">
                    <p class="php">Android 网络图片加载框架详解 </p>
                    <p class="gj"><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="./image/图层136.png" alt="">
                    <p class="php">Angular 2 最新框架+主流技术+项目实战  </p>
                    <p class="gj"><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="./image/图层137.png" alt="">
                    <p class="php">Android Hybrid APP开发实战 H5+原生！</p>
                    <p class="gj"><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="./image/图层137.png" alt="">
                    <p class="php">Android Hybrid APP开发实战 H5+原生！</p>
                    <p class="gj"><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="./image/图层133.png" alt="">
                    <p class="php">Think PHP 5.0 博客系统实战项目演练</p>
                    <p class="gj"><span>高级</span>  •  1125人在学习</p>
                </li>
                <li> 
                    <img src="./image/图层135.png" alt="">
                    <p class="php">Android 网络图片加载框架详解 </p>
                    <p class="gj"><span>高级</span>  •  1125人在学习</p></li>
                <li>
                    <img src="./image/图层136.png" alt="">
                    <p class="php">Angular 2 最新框架+主流技术+项目实战  </p>
                    <p class="gj"><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="./image/图层137.png" alt="">
                    <p class="php">Android Hybrid APP开发实战 H5+原生！</p>
                    <p class="gj"><span>高级</span>  •  1125人在学习</p>
                </li>
                <li>
                    <img src="./image/图层137.png" alt="">
                    <p class="php">Android Hybrid APP开发实战 H5+原生！</p>
                    <p class="gj"><span>高级</span>  •  1125人在学习</p>
                </li>
            </ul>
        </div>
    </div>
    <!--精品推荐部分结束-->
    
    <!--编程入门部分开始-->
    <div class="w bc">
        <div class="bcnav">
            <p class="rumen">编程入门</p>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <p class="lookall"><a href="#">查看全部</a></p>
        </div>

        <div class="w bcthing">
            <div class="lbcthing">
                <img src="./image/椭圆6拷贝17.png" alt="">
            </div>
            <div class="rbcthing">
                <div class="stupy"><img src="./image/图层155.png" alt=""></div>
                <div class="stupyth">
                    <ul>
                        <li>
                            <img src="./image/图层145.png" alt="">
                            <p class="anzhuo">Android Hybrid APP开发实战 H5+原生！   </p>
                            <p class="gj1"><span>高级</span>  •  1125人在学习</p>
                        </li>
                        <li>
                            <img src="./image/图层146.png" alt="">
                            <p class="anzhuo">Kami2首页界面切换效果   </p>
                            <p class="gj1"><span>高级</span>  •  1125人在学习</p>
                        </li>
                        <li>
                            <img src="./image/图层144.png" alt="">
                            <p class="anzhuo">Unity Profiler入门      </p>
                            <p class="gj1"><span>高级</span>  •  1125人在学习</p>
                        </li>
                        <li>
                            <img src="./image/图层143.png" alt="">
                            <p class="anzhuo">Cocos2d-x 引擎源码中的纹理优化     </p>
                            <p class="gj1"><span>高级</span>  •  1125人在学习</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--编程入门部分结束-->

        <!--数据分析师师部分开始-->
        <div class="w bc">
            <div class="bcnav">
                <p class="countstu">数据分析师</p>
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">初级</a></li>
                    <li><a href="#">中级</a></li>
                    <li><a href="#">高级</a></li>
                </ul>
                <p class="lookall"><a href="#">查看全部</a></p>
            </div>
    
            <div class="w bcthing">
                <div class="lbcthing">
                    <img src="./image/椭圆6拷贝16.png" alt="">
                </div>
                <div class="rbcthing">
                    <div class="stupy"><img src="./image/python+人工智能打造您不一样的技术职场旅游.png" alt=""></div>
                    <div class="stupyth">
                        <ul>
                            <li>
                                <img src="./image/图层146.png" alt="">
                                <p class="anzhuo">Android Hybrid APP开发实战 H5+原生！        </p>
                                <p class="gj1"><span>高级</span>  •  1125人在学习</p>
                            </li>
                            <li>
                                <img src="./image/图层145.png" alt="">
                                <p class="anzhuo">Kami2首页界面切换效果   </p>
                                <p class="gj1"><span>高级</span>  •  1125人在学习</p>
                            </li>
                            <li>
                                <img src="./image/图层143.png" alt="">
                                <p class="anzhuo">Cocos2d-x 引擎源码中的纹理优化     </p>
                                <p class="gj1"><span>高级</span>  •  1125人在学习</p>
                            </li>
                            <li>
                                <img src="./image/图层144.png" alt="">
                                <p class="anzhuo">Unity Profiler入门    </p>
                                <p class="gj1"><span>高级</span>  •  1125人在学习</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--数据分析师部分结束-->
        
        <!--机器学习部分开始-->
        <div class="w Aibox">
            <div class="Ainav">
            <div class="bcnav">
                <p class="Aistu">机器学习工程师</p>
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">初级</a></li>
                    <li><a href="#">中级</a></li>
                    <li><a href="#">高级</a></li>
                </ul>
                <p class="lookall"><a href="#">查看全部</a></p>
            </div>
            </div>

            <div class="Aidownbox">
                <ul>
                    <li>
                        <img src="./image/图层145.png" alt="">
                        <p class="php">Android Hybrid APP开发实战 H5+原生！</p>
                        <p class="gj2"><span>高级</span>  •  1125人在学习</p>
                    </li>
                    <li>
                        <img src="./image/图层143.png" alt="">
                        <p class="php">Cocos2d-x 引擎源码中的纹理优化</p>
                        <p class="gj2"><span>高级</span>  •  1125人在学习</p>
                    </li>
                    <li>
                        <img src="./image/图层144.png" alt="">
                        <p class="php">Unity Profiler入门     </p>
                        <p class="gj2"><span>高级</span>  •  1125人在学习</p>
                    </li>
                    <li>
                        <img src="./image/图层142.png" alt="">
                        <p class="php">微软人工智能-数据分析平台</p>
                        <p class="gj2"><span>高级</span>  •  1125人在学习</p>
                    </li>
                    <li>
                        <img src="./image/图层146.png" alt="">
                        <p class="php">Kami2首页界面切换效果</p>
                        <p class="gj2"><span>高级</span>  •  1125人在学习</p>
                    </li> 
                </ul>
            </div>
        </div>
        <!--机器学习部分结束-->

        <!-- 前端开发工程师开始 -->
        <div class="w Aibox">
            <div class="Ainav">
            <div class="bcnav">
                <p class="Aistu">前端开发工程师</p>
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">初级</a></li>
                    <li><a href="#">中级</a></li>
                    <li><a href="#">高级</a></li>
                </ul>
                <p class="lookall"><a href="#">查看全部</a></p>
            </div>
            </div>

            <div class="Aidownbox">
                <ul>
                    <li>
                        <img src="./image/图层142.png" alt="">
                        <p class="php">Android Hybrid APP开发实战 H5+原生！</p>
                        <p class="gj2"><span>高级</span>  •  1125人在学习</p>
                    </li>
                    <li>
                        <img src="./image/图层144.png" alt="">
                        <p class="php">Cocos2d-x 引擎源码中的纹理优化</p>
                        <p class="gj2"><span>高级</span>  •  1125人在学习</p>
                    </li>
                    <li>
                        <img src="./image/图层143.png" alt="">
                        <p class="php">Unity Profiler入门     </p>
                        <p class="gj2"><span>高级</span>  •  1125人在学习</p>
                    </li>
                    <li>
                        <img src="./image/图层146.png" alt="">
                        <p class="php">微软人工智能-数据分析平台</p>
                        <p class="gj2"><span>高级</span>  •  1125人在学习</p>
                    </li>
                    <li>
                        <img src="./image/图层145.png" alt="">
                        <p class="php">Kami2首页界面切换效果</p>
                        <p class="gj2"><span>高级</span>  •  1125人在学习</p>
                    </li> 
                </ul>
            </div>
        </div>
        <!-- 前端开发工程师结束 -->
        
        <!--底部盒子开始-->
        <div class="footer">
            <div class="w footerbox">
                <div class="copyleft">
                    <div class="xuecheng">
                        <img src="./image/学成在线.png" alt="">
                    </div>
                    <div class="xuechengp">
                        <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</p>
                        <p>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                    </div>
                    <button class="download">下载APP</button>
                </div>

                <div class="copyright">
                    <div class="first">
                        <dl>
                            <dt>关于学成网</dt>
                            <dd>关于</dd>
                            <dd>管理团队</dd>
                            <dd>工作机会</dd>
                            <dd>客户服务</dd>
                            <dd>帮助</dd>
                        </dl>
                    </div>
                    <div class="second">
                        <dl>
                            <dt>新手指南</dt>
                            <dd>如何注册</dd>
                            <dd>如何选课</dd>
                            <dd>如何拿到毕业证</dd>
                            <dd>学分是什么</dd>
                            <dd>考试未通过怎么办</dd>
                        </dl>
                    </div>
                    <div class="third">
                        <dl>
                            <dt>合作伙伴</dt>
                            <dd>合作机构</dd>
                            <dd>合作导师</dd>
                        </dl>
                    </div>

                </div>
            </div>
        </div>
        <!--底部盒子结束-->
</body>

</html>

三，CSS代码

* {
    margin: 0;
    padding: 0;
}
/* 这个页面的版心是1200像素 ，每个版心都要水平居中对齐，可以定义版心为公共类 */
/*.w是版心的意思*/
.w {
    width: 1200px;
    margin: auto;
}
body {
    background-color: #f3f5f7;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
/* 注意，这个margin也要加auto，因为上面已经加了auto*/
.header {
    height: 42px;
    /* background-color: pink; */
    margin: 24px auto;
}
.logo {
    float: left;
    width: 196px;
    height: 42px;
    /* background-color: purple; */
}
.nav {
    float: left;
    margin-left: 60px;
}
.nav ul li {
    float: left;
    margin: 0 15px;
}
.nav ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;
}
.nav ul li a:hover {
    border-bottom: 2px solid rgb(0,164,255);
}
.search {
    float: left;
    height: 42px;
    width: 412px;
    background-color: skyblue;
    margin-left: 70px;
}
.search input {
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid rgb(0,164,255);
    font-size: 14px;
    color: #bfbfbf;
    padding-left: 15px;
    border-right: 0;
}
.search button {
    float: left;
    width: 50px;
    height: 40px;
    /* background-color: blue;; */
    border: 0;
    /* 按钮默认有一个边框需要去掉，注意，表单是行内块元素，按钮也是，中间两个在一起会有一个默认的空隙 */
}
.user {
    float: left;
    line-height: 42px;
    margin-left: 30px;
    font-size: 14px;
    color: #666;
}

/* banner开始了 */
.banner {
    height: 421px;
    background-color: #1c036c;
}
.banner .w {
    background-image: url(./image/banner2.png);
    background-repeat: no-repeat top center;
    /* 让大的背景图不重复并水平居中 */
    height: 421px;
    width: 1200px;;
}
.subnav {
    float: left;
    height: 413.5px;
    width: 190px;
    padding-top: 7.5px;
    background-color: rgba(0,0,0,.4);
}
.subnav ul li {
   height: 45px;
   padding: 0 20px;
   line-height: 45px;
}
.subnav ul li a {
    font-size: 14px;
    color: #ffff;
}
.subnav ul li a span {
    float: right;
}
.subnav ul li a:hover {
    color: #00b4ff;
}

/* 右边选课部分 */
.course {
    float: right;
    height: 300px;
    width: 230px;
    margin-top: 50px;
    background-color: #ffffff;
}
.course h2{
    height: 50px;
    width: 230px;
    text-align: center;
    font-size: 18px;
    line-height: 50px;
    color: #ffff;
    background-color: #9bceea;
}
.course .bd {
    padding: 0 20px;
}
.bd ul li {
    padding: 14px 0;
    border-bottom: 1px solid #cccccc;
}
.bd ul li h4 {
    font-size: 16px;
    color: #4e4e4e;
}
.bd ul li p {
    font-size: 12px;
    color: #bdbdbd;
}
.bd .more {
    display: block;
    margin-top: 5px;
    height: 38px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-size: 16px;
    font-weight: 700;
}
/* 精品推荐页面 */
.goods {
    height: 60px;
    margin-top: 10px; 
    background-color: #ffffff;
    box-shadow: 0 4px 3px 3px rgba(0,0,0,.1);
}
.goods .recommend {
    float: left;
    height: 20px;
    width: 124px;
    margin-top: 20px;
    border-right:1px solid #bfbfbf;
    font-size: 16px;
    font-weight: 700;
    color:#00a4ff;
    text-align: center;
    background-color: #ffffff;
}
.idea p {
    float: left;
    height: 20px;
    width: 124px;
    margin-top: 20px;
    border-right: 1px solid #bfbfbf;
    background-color: #ffffff;
    font-size: 16px;
    color: black;
    text-align: center;
}
.change {
    float: right;
    width: 56px;
    height: 60px;
    margin-right: 30px;
    font-size: 14px;
    color: #00a4ff;
    line-height: 60px;
    background-color: #ffffff;
}
/* box精品推荐图片部分 */
.box {
    width: 1200px;
    height: 610px;
    margin-top: 30px;
    background-color: #f3f5f7;
}
.box .hd {
    height: 45px;
    background-color: #f3f5f7;
}
.box .hd h3 {
    float: left;
    height: 45px;
    font-size: 20px;
    line-height: 45px;
    color: #494949;
}
.box .hd a {
    display: block;
    float: right;
    margin-right: 35px;
    height: 45px;
    font-size: 12px;
    line-height: 45px;
    color: #a5a5a5;
}
.box .bd {
    width: 1225px;
}
.box .bd ul li {
    float: left;
    width: 228px;
    height: 270px;
    margin-right: 15px;
    margin-bottom: 12px;
    background-color: #ffffff;
}
.box .bd ul li img {
    width: 100%;
}
.box .bd ul li .php {
    height: 40px;
    margin-top: 30px;
    padding: 0 25px;
    font-size: 14px;
    color: #050505;
}
.box .bd ul li .gj {
    height: 15px;
    margin-top: 15px;
    padding: 0 25px;
    font-size: 12px;
    color: #999999;
}
.gj span {
    color: #ff7c2d;
}
/* 编程入门部分 */
.bc {
    height: 450px;
    margin-top: 85px;
    background-color: pink;
}
.bc .bcnav {
    height: 45px;
    background-color: #f3f5f7;
}
.rumen {
    float: left;
    width: 80px;
    height: 45px;
    margin-right: 350px;
    font-size: 20px;
    color: #494949;
}
.bcnav li a {
    display: block;
    float: left;
    width: 45px;
    height: 45px;
    margin-right: 60px;
    font-size: 16px;
    line-height: 45px;
    color: #868686;
}
.bcnav li a:hover {
    color: #66bcfd;
}
.bcnav .lookall a {
    display: block;
    float: right;
    width: 55px;
    height: 39px;
    padding-top: 6px;
    margin-right: 30px;
    margin-left: 260px;
    font-size: 12px;
    color: #b1b1b1;
}
.bcnav .lookall a:hover {
    color: #66bcfd;
}
.bcthing {
    height: 405px;
    background-color: #f3f5f7;
}
.bcthing .lbcthing {
    float: left;
    width: 230px;
    height: 100%;
    margin-right: 5px;
}
.lbcthing img {
    height: 100%;
}
.bcthing .rbcthing {
    float: left;
    width: 955px;
    height: 405px;
    background-color: #f3f5f7;
}
.rbcthing .stupy {
    width: 955px;
    height: 100px;
    margin-bottom: 20px;
    background-color: #f3f5f7;
}
.rbcthing .stupyth {
    width: 955px;
    height: 285px;
    background-color: #f3f5f7;
}
.stupyth ul li {
    float: left;
    width: 228px;
    height: 285px;
    margin-left: 10px;
    margin-bottom: 12px;
    background-color: #ffffff;
}
.stupyth ul li img {
    width: 100%;
}
.stupyth ul li .anzhuo {
    height: 40px;
    margin-top: 30px;
    padding: 0 25px;
    font-size: 14px;
    color: #050505;
}
.stupyth ul li .gj1 {
    height: 15px;
    margin-top: 15px;
    padding: 0 25px;
    font-size: 12px;
    color: #999999;
}
.stupyth ul li .gj1 span {
    color: #ff7c2d;
}
/* 数据分析师部分开始 */
.countstu {
    float: left;
    width: 100px;
    height: 45px;
    margin-right: 335px;
    font-size: 20px;
    color: #494949;
}
/* 数据分析师部分结束 */

/* 机器学习部分开始 */
.Aibox {
    height: 320px;
    margin-top: 35px;
    background-color: pink;
}
.Ainav {
    height: 45px;
    background-color: #f3f5f7;
}
.Aistu {
    float: left;
    width: 145px;
    height: 45px;
    margin-right: 290px;
    background-color: #f3f5f7;
    font-size: 20px;
    color: #494949;
}
.Aidownbox {
    height: 275px;
    background-color: #f3f5f7;
}
.Aidownbox ul li img {
    width: 100%;
}
.Aidownbox ul li {
    float: left;
    width: 228px;
    height: 285px;
    margin-right: 10px;
    margin-bottom: 12px;
    background-color: #ffffff;
}
.Aidownbox ul li .php {
    height: 40px;
    margin-top: 30px;
    padding: 0 25px;
    font-size: 14px;
    color: #050505;
}
.gj2 {
    height: 15px;
    margin-top: 15px;
    padding: 0 25px;
    font-size: 12px;
    color: #999999;
}
.gj2 span {
    color: #ff7c2d;
}
/* 机器学习工程师结束 */
/* 前端开发工程师开始 */
/*前端开发工程师结束*/

/* 底部盒子开始 */
.footer {
    height: 415px;
    margin-top: 40px;
    background-color: #ffffff;
}
.footer .footerbox {
    width: 1200px;
    height: 400px;
    margin-top: 30px;
    background-color: #ffffff;
}
.copyleft {
    float: left;
    width: 450px;
    height: 300px;
    background-color: #ffffff;
}
.copyright {
    float: right;
    width: 540px;
    height: 185px;
    background-color: #ffffff;
}
.xuecheng {
    width: 200px;
    height: 60px;
    margin-top: 30px;
    margin-left: 20px;
}
.xuechengp {
    width: 430px;
    height: 40px;
    margin-top: 20px;
    margin-left: 20px;
}
.xuechengp p {
    font-size: 12px;
    color: #666666;
}
.download {
    display: block;
    width: 120px;
    height: 35px;
    margin-top: 25px;
    margin-left: 20px;
    background-color: #ffffff;
    border: 1px solid #00a4ff;
    font-size: 16px;
    color: #00a4ff;
}
.first {
    float: left;
    width: 90px;
    height: 140px;
    margin-top: 30px;
    margin-right: 100px;
    background-color: #ffffff;
}
dt {  
    font-size: 16px;
    margin-bottom: 15px;
    color: #333333;
}
dd {
    font-size: 12px;
}
.second {
    float: left;
    width: 130px;
    height: 140px;
    margin-top: 30px;
    margin-right: 100px;
    background-color: #ffffff;
}
.third {
    float: right;
    width: 85px;
    height: 80px;
    margin-top: 30px;
    background: #ffffff;
}
/* 底部盒子结束 */

四，在写代码时遇到的问题及想法

1.body默认有一个外边距，如何判断是否引入css文件成功？
–清除内外边距后测试，如果没有外边距紧贴边缘则引入成功

2.css属性书写规律（重点）
–建议遵循以下顺序：
----布局定位属性： display/position/float/clear/visbility/overflow 建议display第一个写
----自身属性： width/height/margin/padding/border/background
----文本属性： color/font/text-decoration/text-align/vertical-align/white-space/break-word
----其他属性： content/cursor/border-radius/box-shadow/text-shadow/background: linear-gradient…

3.页面布局的整体思路
–1.先确定页面的核心区域，为版心，我们通过测量可以知道（确定版型多宽‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’
–2.分析页面的行模块（标准流），以及每一行中列模块（浮动）
–3.制作html结构，我们还是遵循，现有结构，后有样式的准则，结构永远是最重要
–4.一定先理清楚布局结构，再去写代码

4.导航栏
–实际开发中，我们不会直接用链接a而是用li包含链接（li+a的）的做法
–1.li+a语义更清晰，一看这就是有条理的列表型内容
–如果直接用a，搜索引擎容易辨别为有堆砌关键字现已（故意堆砌关键字容易被搜索引擎有降权的风险）从而影响网站排名

–关于多个列如果想要在一行显示浮动即可,而且只要有一个孩子浮动，其他孩子都需要加浮动
–注意：
----1.让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示
----2.这个nav导航栏可以不给宽度，将来可以继续添加其余文字
----3.因为导航栏里面文字不一样的多，所以最好给链接a左右padding撑开盒子而不是指定宽度
----4.用户块不给宽度，因为不知道名字多长

5.侧边栏
–1.如果有距离可以通过外边距或内边距来实现
–2.小三角：可以在盒子a中放入一个span，然后再给span加上一个右浮动

6.我的课程
–1.必须都加上浮动，如果不加上浮动的话，则右边的盒子将无法正常浮动。因为没有加上浮动左边的盒子是标准流，而标准流只能在一行
–2.做不出来的时候要有清晰的思路
–3.浮动的盒子不会有外边距合并的问题
–4.文字块的水平居中不一定非要设置内边距，使用text-align: 也可以轻松设置内部文字

8.精选课程栏
–1.只要我们的父亲足够宽，就不会出现盒子浮动掉下去的情况
–2.测量一定要小心谨慎，否则小问题可能会变成大问题
–3.图一定要和父盒子一样宽
–4.图片没有办法修改宽高，但是可以强制把高度或者宽度修改百分数比如百分之百

9.编程入门栏
–1.有时候不一定是样式写错了，而是选择器名字太多写错了，所以一定要仔细检查，抓住问题
–2.注意，有时候一个元素莫名其妙多了上框原因可能是在它上面的元素用了padding而忘记减少它的高度了

反思总结

虽然页面写出来了，但很多地方的应用我还是不太熟练，比如浮动的运用，padding与margin遇到的特殊情况，以及权重，这些东西都需要慢慢体味，最后变成自己的。
同时，在写代码时写到后面其实速度也会越来越快。我坚信这就是学习的过程，在辛苦的同时也让我感受到了快乐与成就感。
希望大家和我一起努力！一起实现自己的梦想！！

巧克力小猫猿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
学成在线首页的学与悟

文章目录前言一、案例成品展示图片？二、html代码总结三，CSS代码四，在写代码时遇到的问题及想法反思总结前言学会用标准流与浮动复刻一个网页，可以很好的锻炼css性质的利用。学成在线是我写出的第一个界面，上手叫生疏，还是花4天时间敲完了。前面是和老师同步一起写的，后面是自己发挥。这里提供psd链接学成在线psd链接下载一、案例成品展示图片？二、html代码总结提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我
复制链接

扫一扫

专栏目录