一个前端小白的进阶路程

说说我吧，从学校毕业出来进了一个做软件测试的公司干运维，恍恍惚惚就这样过了一年多，在这公司吧，事情比较轻松，965的工作让我就这样碌碌无为的混到现在，现在想换一门有挑战性的工作，当然了，像java后端这种我感觉我学不来，虽然我专业就是主攻java的但是为什么学不来就省略不说了，emmp之是因为有点基础在身所以选择了入手前端，到现在也是边看视频边复习以前的知识，就这样学了半个月左右了，这两天把这半个月总结了一下，做了个静态的小首页，感觉还不错！

linzhentao.3vhost.net

下面是效果图

下面是我的代码，大家可以看看

学成在线

微信

客服 反馈 维修 购物车

林镇涛

<!-- banner 广告栏开始 -->
<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">
            <h3>我的课程表 </h3>
            <ul>
                <li>
                    <h4>继续学习 程序语言设计</h4>
                    <p>正在学习-使用对象</p>
                </li>
                <li>
                    <h4>继续学习 程序语言设计</h4>
                    <p>正在学习-使用对象</p>
                </li>
                <li>
                    <h4>继续学习 程序语言设计</h4>
                    <p>正在学习-使用对象</p>
                </li>
            </ul>
            <button>全部课程</button>
        </div>
    </div>
</div>
<!-- banner 广告栏结束 -->

<!-- 精品推荐导航栏开始 -->
<div class="goods w">
    <h4>精品推荐</h4>
    <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="#">MySQL</a></li>
        <li><a href="#">JavaWeb</a></li>
    </ul>
    <a href="#" class="mod">修改兴趣</a>
</div>
<!-- 精品推荐导航栏结束 -->

<!-- 商品栏目开始 -->
<div class="box w">
    <div class="box-hd">
        <h3>精品推荐</h3>
        <span><a href="#">查看全部</a></span>
    </div>
    <div class="box-bd">
        <ul>
            <li>
                <em><img src="images/hot.png" alt=""></em>
                <img src="./images/sp.png" alt="">
                <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                <h5>高级</h5>
                <span> • 1125人在学习</span>
            </li>
            <li>
                <em><img src="images/hot.png" alt=""></em>
                <img src="./images/sp.png" alt="">
                <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                <h5>高级</h5>
                <span> • 1125人在学习</span>
            </li>
            <li>
                <img src="./images/sp.png" alt="">
                <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                <h5>高级</h5>
                <span> • 1125人在学习</span>
            </li>
            <li>
                <img src="./images/sp.png" alt="">
                <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                <h5>高级</h5>
                <span> • 1125人在学习</span>
            </li>
            <li class="clear">
                <img src="./images/sp.png" alt="">
                <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                <h5>高级</h5>
                <span> • 1125人在学习</span>
            </li>
            <li>
                <img src="./images/sp.png" alt="">
                <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                <h5>高级</h5>
                <span> • 1125人在学习</span>
            </li>
            <li>
                <img src="./images/sp.png" alt="">
                <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                <h5>高级</h5>
                <span> • 1125人在学习</span>
            </li>
            <li>
                <img src="./images/sp.png" alt="">
                <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                <h5>高级</h5>
                <span> • 1125人在学习</span>
            </li>
            <li>
                <em><img src="images/hot.png" alt=""></em>
                <img src="./images/sp.png" alt="">
                <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                <h5>高级</h5>
                <span> • 1125人在学习</span>
            </li>
            <li class="clear">
                <img src="./images/sp.png" alt="">
                <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                <h5>高级</h5>
                <span> • 1125人在学习</span>
            </li>
        </ul>
    </div>
</div>
<!-- 商品栏目结束-->

<!-- 热门商品开始 -->
<div class="brick-box w">
    <div class="box-hd">
        <h3>数据分析师</h3>
        <ul>
            <li><a href="#" class="info">热门</a></li>
            <li><a href="#">初级</a></li>
            <li><a href="#">中级</a></li>
            <li><a href="#">高级</a></li>
        </ul>
        <span><a href="#">查看全部</a></span>
    </div>
    <div class="brick-box-bd">
        <div class="box-bd-left">

        </div>
        <div class="box-bd-right">
            <div class="box-right-hd">
                <img src="./images/logo1.png" alt="">
            </div>
            <div class="box-bd">
                <ul>
                    <li>
                        <em><img src="images/hot.png" alt=""></em>
                        <img src="./images/sp.png" alt="">
                        <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                        <div class="ceshi">
                            <span>高级</span>
                            <P>• 1125人在学习</P>
                        </div>
                    </li>
                    <li>
                        <img src="./images/sp.png" alt="">
                        <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                        <div class="ceshi">
                            <span>高级</span>
                            <P>• 1125人在学习</P>
                        </div>
                    </li>
                    <li>
                        <img src="./images/sp.png" alt="">
                        <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                        <div class="ceshi">
                            <span>高级</span>
                            <P>• 1125人在学习</P>
                        </div>
                    </li>
                    <li class="clear">
                        <img src="./images/sp.png" alt="">
                        <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                        <div class="ceshi">
                            <span>高级</span>
                            <P>• 1125人在学习</P>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</div>
<!-- 热门商品结束 -->

<!-- 底部开始 -->
<div class="footer">
    <div class="w">
        <!-- 版权 -->
        <div class="copyright">
            <img src="images/logo.png" alt="">
            <p>
                学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
                © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
            </p>
            <button>下载APP</button>
        </div>
        <!-- 友情链接 -->
        <div class="links">
            <dl>
                <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>
            <dl>
                <dt>合作伙伴</dt>
                <dd>合作机构</dd>
                <dd>合作导师</dd>
            </dl>
        </div>
    </div>
</div>
<!-- 底部结束 -->

* { margin: 0; padding: 0; } .w { width: 1200px; margin: 0 auto; } body { background-color: #f3f5f7; } /* 字体图标规范 */ @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?l7mb0g'); src: url('fonts/icomoon.eot?l7mb0g#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?l7mb0g') format('truetype'), url('fonts/icomoon.woff?l7mb0g') format('woff'), url('fonts/icomoon.svg?l7mb0g#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } a { text-decoration: none; } li { list-style: none; } .nav { /* 粘性定位 */ /* position:sticky; z-index: 1; top: 0px; */ height: 42px; margin: 30px auto; } .logo{ float: left; height: 42px; width: 200px; margin-right: 70px; } .nav ul { float: left; } .nav ul li { /* display: inline-block; */ float: left; margin-left: 30px; } .nav ul li a { display: block; height: 40px; line-height: 40px; padding: 0 10px; color: #050505; font-size: 18px; } .nav ul li a:hover { color: #00a4ff; border-bottom: 2px solid #00a4ff; } .search { float: left; width: 412px; height: 42px; margin-left: 70px; background-color:red; } .search input { float: left; width: 343px; height: 40px; /* background-color: gold; */ border: 1px solid #00a4ff; border-right: 0; padding-left: 17px; } .search button { float: left; width: 51px; height: 42px; border: 0; background-image: url(../images/btn.png); /* background-color:red; */ /* background-image: url(images/btn.png); */ } .user { float: right; margin-right: 25px; height: 42px; line-height: 42px; font-size: 14px; color: #666666; } .user>img { position: relative; top:10px; border-radius: 50%; } .banner { height: 420px; background-image: url(../images/banner.png); background-repeat: no-repeat; background-position: center; background-color: #1c036c; } .subnav { float: left; width: 190px; height: 420px; background-color: #13014b; } .subnav ul li a{ /* float: left; */ display: block; padding-left: 18px; line-height: 45px; font-size: 14px; color: #ffffff; } .subnav ul li a span { float: right; margin-right: 20px; } .subnav ul li a:hover { color: #00a4ff; } .course { float:right; margin-top: 50px; width: 230px; height: 300px; text-align: center; background-color: #ffffff; } .course h3 { height: 50px; line-height: 50px; background-color: #9bceea; color: #f9fcfe; } .course ul li { margin: 0 auto; width: 190px; padding: 14px 0; border-bottom: solid 1px #d8d8d8; } .course h5 { font-size: 16px; font-weight: 400; } .course p { font-size: 12px; color: #d8d8d8; } .course button { margin-top: 6px; width: 200px; height: 40px; font-size: 16px; color: #00a4ff; border: solid 1px #00a4ff; background-color: #ffffff; } .goods { margin-top: 10px; height: 60px; box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* box-shadow: 10px 10px -4px #000; */ color:#00a4ff; /* background-color:pink; */ } .goods h4 { float: left; height: 60px; line-height: 60px; margin:0 30px; } .goods ul li { float: left; /* height: 60px; */ /* line-height: 60px; */ /* border-left: 1px solid #d8d8d8; */

} .goods ul li a{ padding: 0 30px; /* height: 60px; / line-height: 60px; border-left: 1px solid #d8d8d8; color: #050505; } .goods ul li a:hover { color: #00a4ff; } .mod { float: right; line-height: 60px; margin-right: 20px; font-size: 14px; color: #00a4ff; } .box { margin-top: 30px; height: 620px; / background-color: red; / } .box-hd { / margin-top: 20px; / height: 50px; / background-color: pink; */

} .box-hd h3 { float: left; font-size: 20px; font-weight: 400; line-height: 50px; color: #494949; } .box-hd span a{ float: right; margin-right: 30px; font-size: 12px; line-height: 50px; color: #d8d8d8 } .box-bd { /* float: right; / height: 540px; / margin-bottom: 20px; / / background-color:pink; / } .box-bd ul li { / 加个相对定位 / position: relative; float: left; margin: 15px; margin-left: 0; width: 228px; height: 270px; background-color:#ffffff; } .box-bd ul li em{ / 给图标加绝对定位 / position: absolute; top: 4px; right: -4px; } .box-bd ul li>img { width: 100%; } .box-bd h4 { margin-top: 20px; padding: 0px 20px; font-size: 14px; font-weight: 400; color: #050505; } .box h5 { float: left; margin: 20px 20px; font-size: 12px; color: #ff7c2d; } .box-bd span { float: left; margin: 20px 0; font-size: 12px; color: #999999; } .box-bd .ceshi span { float: left; margin: 20px 20px; font-size: 12px; color: #ff7c2d; } .box-bd .ceshi p{ float: left; margin: 20px 0; font-size: 12px; color: #999999; } .box-bd .clear { margin-right: 0; } .box-bd ul li:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.2); } .box-hd ul { margin-left: 300px; } .box-hd ul li{ float: left; padding: 0 35px; line-height: 50px; / margin-top: 20px; / } .box-hd ul li a { font-size: 16px; color: #868686; } .box-hd ul .info { font-size: 16px; color: #00a4ff; } .brick-box { margin-top: 30px; height: 440px; / background-color:pink; / } .box-bd-left { float: left; width: 228px; / background-color:blue; / height: 390px; background-image: url(../images/cbl.png); } .box-bd-right { margin-left: 14px; float: left; width: 958px; height: 390px; / background-color: aqua; / } .box-bd-right img { width: 100%; } .footer { background-color: #ffffff; height: 430px; margin-top: 30px; } .copyright { float: left; margin-top: 20px; margin-left: 20px; width: 432px; height: 185px; / background-color: red; / } .copyright p { color: #666666; font-size: 12px; margin-top: 30px; } .copyright button { margin-top: 6px; width: 120px; height: 40px; font-size: 16px; color: #00a4ff; border: solid 1px #00a4ff; background-color: #ffffff; } .links { float: right; overflow: hidden; / width: 50px; height: 50px; / margin-top: 20px; margin-right: 30px; / background-color: red; / } .links dl { float: left; margin-left: 140px; } .links dl dt { font-size: 16px; color: #333333; margin-bottom: 15px; } .links dl dd { / padding-top: 15px; / font-size: 12px; color: #333333; margin-bottom: 2px; } / 两边版心固定定位 / .fixed-left { position: fixed; z-index: 1; margin-left: 624px; margin-top: 50px; width: 82px; height: 420px; background-color: #fff; top: 50%; left: 50%; } .fixed-left>a { display: block; height: 84px; text-align: center; line-height: 84px; border-top: solid #f3f5f7 1px; font-family: 'icomoon'; } .fixed-left>:hover { color: orange; } .fixed-left .code { position: relative; } .fixed-left .code span{ display: none; position: absolute; width: 84px; height: 84px; top: 0; left: 100px; background-color: #fff; / background-color: red; / } .fixed-left .code span>img { width: 100%; height: 100%; } .fixed-left .code:hover span { display: block; } / .code>p { font-size: 13px; } / / .fixed-right { position: fixed; margin-right:625px; width: 200px; height: 300px; top: 400px; right: 50%; background-color: pink;

} */