今天接着说test8的页面还原。

头部header和尾部footer

我一开始是想直接使用bootstrap的栅格系统来实现的。但是内容的定位出了不少麻烦。

那么就索性用原生html+css来还原页面了。

放上效果图

头部html代码

<div class="g-header w-100">
        <div class="h-row-1">
            <div class="w-80">
                <a href="">客服热线：010 594 78634</a>
                <span class="float-right">
                    <a href=""><img src="img/test8-1/weixinicon.jpg"></a>
                    <a href=""><img src="img/test8-1/qqicon.jpg"></a>
                    <a href=""><img src="img/test8-1/weiboicon.jpg"></a>
                </span>
            </div>
        </div>
        <div class="h-row-2">
            <div class="w-80">
                <a href="">首页</a>
                <a href="">职业</a>
                <a href="">推荐</a>
                <a href="">关于</a>
            </div>
        </div>
</div>

尾部html代码

<div class="g-footer">
    <div class="f-row-1">
        <div class="w-80">
            <div class="f-cess-1">
                <h5>技能树<span style="padding:0 0.3rem;">一</span>改变你我</h5>
                <ul>
                    <li>
                        <a href="">关于我们</a>
                    </li>
                    <li>
                        <a href="" class="f-a">联系我们</a>
                    </li>
                    <li>
                        <a href="">合作企业</a>
                    </li>
                </ul>


             </div>
            <div class="f-cess-2">
                <h5>旗下网站</h5>
                <ul>
                    <li>
                        <a href="">草船云孵化器</a>
                    </li>
                    <li>
                        <a href="">最强IT特训营</a>
                    </li>
                    <li>
                        <a href="">葡萄藤轻游戏</a>
                    </li>
                    <li>
                        <a href="">桌游精灵</a>
                    </li>
                </ul>


            </div>
            <div class="f-cess-3">
                <h5>微信公众平台</h5>
                <img src="img/test8-1/qrcode.png" class="s-icon-max-2">
            </div>
        </div>
    </div>

    <div class="f-row-2 ta-center">
        <div class="w-80">
            <span>Copyright<span>&copy;</span>2015技能树</span><span>wwww.jnshu.com</span>
            <span>All</span><span>Rights</span><span>Reserved</span>
            <span>京ICP备13005880号</span>
        </div>
    </div>
</div>

css代码

html{
    font-size:62.5%;
    height:100%;
    width:100%;
    /*将html 和 body 元素的高度设置为100%，使其充满整个屏幕。*/
    /*这里还要说明一下：html下的body一般会有或多或少的margin，body的高度不是100%的。*/
}
body{
    display:flex;
    flex-direction:column;
    height:100%;
    width:100%;
    /*将html 和 body 元素的高度设置为100%，使其充满整个屏幕。这里body：height：100%是继承html的高度*/
    /*将 body 的 display 属性设置为 flex, 然后将方向属性设置为列,*/
}
ul,li{
    margin:0;
    padding:0;
    list-style: none;
}
li{
    display: inline-block;

}

/*---框架设置---*/



/*我们希望 header 和footer 只占用他们应该占用的空间，将剩余的空间全部交给主体内容区域*/
.g-header{
    flex:0 0 auto;

}
.g-content{
    flex: 1 0 auto;
    /*将 flex-grow 设置为1，该元素会占用全部可使用空间*/
    /*而其他元素该属性值为0，因此不会得到多余的空间*/
    /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
    width:100%;
}

.g-footer{
    flex: 0 0 auto;
}
.g-footer-f{
    position: fixed;bottom:0;
    width:100%;
    min-height: 5rem;
    /*此方法通过position固定在浏览器下方，但是以一种浮动在上层的效果出现的。*/
    /*所以上一个紧挨的并列盒子，即g-content盒子的内容就会有一部分显示不全。被遮挡了。*/
    /*而这种特性也被用于实现footer底层样式透明，footer里的按钮不透明。*/
    /*而实现内容不遮挡，只要在g-content的底部新增一个含高度的空div就完成。*/
}
.footer-bg{
    height:5rem;
    /*只要再给一个层，然后给个跟父盒子一样高的高度就可以实现底层透明，上层不透明*/
    background:#29BDE0;
    filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;
    /*filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;实现透明效果*/
}


/*---具体的头部设置---*/

.h-row-1{
    min-height: 2rem;
    line-height: 2rem;
    border-top:0.1rem solid #fff;
}


.h-row-2{
    background:#20B176;
    min-height:4rem;
    line-height:4rem;
    text-align: right;
}
.h-row-1 a{
    color:#20B176;
}
.h-row-1 img{
    max-width: 1rem;
    margin:0 0.2rem;
}
.h-row-2 a{
    font-size:1.5rem;
    color:#fff;
    margin-left: 2.5rem;
}

/*---具体的脚步设置---*/
.g-footer{
    background:#20B176;
}
.f-row-2{
    min-height: 2rem;
    line-height: 2rem;
    border-top:0.1rem solid #fff;
}
.f-row-2 span{
    padding:0 0.2rem;
    font-size:1rem;
    color:#fff;
}
.f-row-2 span:nth-child(5){
    padding-right:0.5rem;
    border-right:0.1rem solid #fff;
}

.f-row-1{
    padding:1rem 0;
    margin:0 auto;
    min-height: 11rem;
}
.f-row-1>.w-80{
    display:flex;
    flex-wrap:nowrap;
    font-size: 1rem;
}
.f-row-1 h5{
    font-size: 1.5rem;
    color:#fff;
}
.f-row-1 a{
    padding:0 1rem;
    color:#fff;
}
.f-cess-1,.f-cess-2,.f-cess-3{
    position:relative;
    margin:0;
    /*border:0.1rem solid #ff0000;*/
}
.f-cess-1,.f-cess-2{
    width:40%;
}
.f-cess-3{
    width:20%;
    text-align:right;
    overflow: hidden;
}
.f-cess-1 ul{
    position: absolute;
    bottom:0;
    left:0;
    /*border:0.1rem solid #ff0000;*/
}
.f-cess-2 ul{
    position: absolute;
    bottom:0;
    left:0;
}
.f-cess-1 li{
    margin:1rem 0 0 -1rem;
    /*用于撑开链接的行高和去掉默认的左边10px间隙*/
}
.f-cess-2 li{
    margin:1rem 1rem 0 -1rem;
}
.f-cess-1 li:first-child{
    border-right:0.1rem solid #fff;
}
.f-cess-1 li:nth-child(2){
    border-right:0.1rem solid #fff;
}








/*---公用css调用---*/
.w-100{
    width:100%;

}
.w-80{
    width:80%;
    margin:0 auto;
    /*border:0.1rem solid #ff0000;*/
}
.float-right{
    float:right;
}
.ta-center{
    text-align: center;
}
.ta-right{
    text-align: right;
}

 友情链接的模块就比较简单的还原了（注意鼠标手势，和hover效果我还没弄上去）

    <div class="c-cell-5">
        <div class="w-80">
            <a href="" class=" ta-center" style="color:black"><h4>友情链接</h4></a>
            <ul>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手机软件</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教师招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手机软件</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教师招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手机软件</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教师招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手机软件</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教师招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手机软件</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教师招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手机软件</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教师招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手机软件</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教师招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>手机软件</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>教师招聘</a>
                </li>
                <li>
                    <a href=""><span>&bull;&ensp;</span>找工作<span>&emsp;</span></a>
                </li>

            </ul>
        </div>
    </div>
.c-cell-5 li{
    margin:1rem 2rem 1rem 0;
    /*border:0.1rem solid #ff0000;*/
}
.c-cell-5 li a{
    color:#989898;
}

其他内容块，我都是使用原生html+css实现的。

    <div class="c-cell-1">
        <div class="w-80">
            <div class="avator">
                <div class="morohology-3">
                    <img src="img/test8-1/rocket.png">
                    <h4><strong>高效</strong></h4>
                    <p>将五到七年的成长时间，缩短到一年到三年</p>
                </div>
                <div class="morohology-3">
                    <img src="img/test8-1/book.png">
                    <h4><strong>规范</strong></h4>
                    <p>标准的实战教程，不会走弯路</p>
                </div>
                <div class="morohology-3">
                    <img src="img/test8-1/connection.png">
                    <h4><strong>人脉</strong></h4>
                    <p class="">同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
                </div>
                <div class="morohology-3 c-title-3">
                    <span class="c-title-4">
                        <span class="glyphicon glyphicon-user color20B">12400</span>
                        <p>累计在线学习人数</p>
                        <span class="glyphicon glyphicon-user color20B">12400</span>
                        <p>学员已经找到满意工作</p>
                    </span>

                </div>
            </div>

        </div>
    </div>
.c-cell-1{

}
.c-cell-1 img{
    max-width: 2.5rem;
    max-height: 2.5rem;
}
.color20B{
    color:#20B176;
}
.c-title-3{
    border-left:0.1rem dashed #989898;
}
.c-title-4{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
 <div class="c-cell-2">
        <div class="w-80">
            <a href="" class="ta-center c-title"><h4>如何学习</h4></a>
            <div class="avator-1">
                <div class="morohology-4">
                    <span class="list-1 float-left">1</span><span class="inline-block float-left">匹配你现在的个人情况寻找适合自己的岗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block float-left">
                </div>
                <div class="morohology-4">
                    <span class="list-1">2</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
                <div class="morohology-4">
                    <span class="list-1">3</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
                <div class="morohology-4">
                    <span class="list-1">4</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
                <div class="morohology-4">
                    <span class="list-1">5</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
                <div class="morohology-4">
                    <span class="list-1">6</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
                <div class="morohology-4">
                    <span class="list-1">7</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
                <div class="morohology-4">
                    <span class="list-1">8</span><span class="inline-block">匹配你现在的个人情况寻找适合自己的岗位</span>
                    <img src="img/test8-1/triangle1.png" class="list-2 inline-block">
                </div>
            </div>



        </div>
    </div>
.c-cell-2{
    min-height: 25rem;
}
.list-1{
    display:inline-block;
    padding:2rem;
    background:url("../img/test8-1/roundness.png") no-repeat 50% 50%;
    background-size: contain;
    font-size:2rem;
    color:#20B176;
}
.list-2{
    display:inline-block;
    padding:0.5rem;
    background:url("../img/test8-1/triangle3.png") no-repeat 50% 50%;
    background-size: contain;
}
.inline-block{
    display: inline-block;
}
.morohology-4{
    position:relative;
    /*flex: 0 0 24%;*/
    float:left;
    width:23%;
    margin:1.5rem 1rem 1.5rem 0;
    display:flex;
    justify-content: center;
    align-items: center;
    /*padding:2rem 5rem 2rem 5rem;*/
    /*border:0.1rem solid #ff0000;*/
}
.float-left{
    float:left;
}
.avator-1{
    overflow: hidden;
}
<div class="c-cell-3">
        <div class="w-80">
            <a href="" class="ta-center c-title"><h4>优秀学员展示</h4></a>
            <div class="avator">
                <div class="morohology-3 min-height bgcolorfff">
                    <img src="img/test8-1/Avatar3.png">
                    <h4>技术顾问：罗大佑</h4>
                    <p>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
                </div>
                <div class="morohology-3 min-height bgcolorfff">
                    <img src="img/test8-1/Avatar2.png">
                    <h4>技术顾问：罗大佑</h4>
                    <p>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
                </div>
                <div class="morohology-3 min-height bgcolorfff">
                    <img src="img/test8-1/Avatar.png">
                    <h4>技术顾问：罗大佑</h4>
                    <p>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
                </div>
                <div class="morohology-3 min-height bgcolorfff">
                    <img src="img/test8-1/Avatar4.png">
                    <h4>技术顾问：罗大佑</h4>
                    <p>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
                </div>
            </div>
            <div class="ta-center">
                <span class="c-title-2">&bull;</span><span class="c-title-2">&bull;</span>
                <span class="c-title-2">&bull;</span><span class="c-title-2">&bull;</span>
            </div>
        </div>

    </div>
.c-cell-3{
    min-height: 25rem;
}
.avator{

    display: flex;
    justify-content: space-around;
    overflow: hidden;
}
.morohology-3{
    position: relative;
    /*width:20%;*/
    flex: 0 0 20%;
    padding:1rem;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.min-height{
    min-height: 25rem;
}
.bgcolorfff{
    background: #fff;
}
.morohology-3>p{
    color:#989898;
}
.c-title-2{
    font-size:5rem;
}
<div class="c-cell-4">
        <div class="w-80">
            <a href="" class="ta-center c-title"><h4>战略合作企业</h4></a>
            <div class="ta-center">
                <img src="img/test8-1/alibaba.jpg">
                <img src="img/test8-1/jinshanyun.jpg">
                <img src="img/test8-1/huanxin.jpg">
                <img src="img/test8-1/qiniu.jpg">
            </div>

        </div>

    </div>
.c-cell-4 img{
    max-width: 15rem;
    margin:2rem 0;
    padding:2rem;
    background:#fff;
}
.c-cell-5 li{
    margin:1rem 2rem 1rem 0;
    /*border:0.1rem solid #ff0000;*/
}
.c-cell-5 li a{
    color:#989898;
}
.c-cell-5{
    background:#fff;

}
.c-title{
    color:black;
    cursor:pointer;
}

这里主要分析一下：html+css布局中，

高效模块含有flex的column内嵌套postion定位

如何学习模块flex布局

优秀学员这块模块的代码在c-cell-1中得到了重用。

明天尝试加入bootstrap栅格系统，做对比

 

内容来源于网络如有侵权请私信删除
标签： HTML CSS HTML5 CSS3
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！

相关课程

HTML5网页标签
3979 0元 限免
云知梦-HTML5网页标签
4635 0元 限免