pc端的企业网站（IT修真院test8）详解1-2

今天接着说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栅格系统，做对比

时间： 2024-07-30 10:46:20

pc端的企业网站（IT修真院test8）详解1-2的相关文章

pc端的企业网站（IT修真院test8）详解1-4

今天完成的事情:(1,伪元素:before,:after的使用.2.table的使用(collapse的使用)3rgba的高级运用) 今天我主要完成test8-3的页面. header和footer都是前两个页面用到的.直接搬过来就好. 一.实现nav导航.我自己尝试使用伪元素:before,:after的使用,觉得好好玩.要多点使用,加深熟悉度. 可以看到我使用:before弄了格文字在ul盒子前面.当然我又要:after清除浮动影响. 对于超链接,我觉得它就是一个"宅男".怎么我要

pc端的企业网站（IT修真院test8）详解1-1

这任务需求我们使用推特的前端框架bootstrap来实现.先放psd图. 上传这些图片也蛮大的.为此我使用office picture manager压缩了图片. 方法:alt+p+o,然后tab+下方按钮选中用于网页,点击保存就ok 一.还原含有"50万年薪"的psd静态页面先思考: 发现1.三张psd图的头部尾部的设定是一样的,可以抽离出来,弄成 g-header,g-content,g-footer 这命名符合我另外一篇文章:css样式书写规范+特殊符号http://www.c

19款高端大气企业网站模版

下载地址:点击下载 1. css3简洁时尚商务整站企业模板 2. 暗红色游戏动漫设计公司html模板 3. 简洁的摩托车企业网站模板 4. 简洁干净的企业HTML5网页模板 5. 简洁极致小清新作品展示灰色整站模板 6. 简洁设计师作品展示响应式模板下载 7. 简洁时尚大气的商业网站模板 8. 简洁素雅扁平化插画设计师网页模板 9. 焦点大图摄影行业网站模板 10. 咖啡大图新闻杂志类网站模板 11. 宽屏大气的互联网科技公司css3企业模板 12.

DNN7网站系统需求及部署指南详解

此安装指南适用于DNN6.x和DNN7.x在本地测试及主机的安装.最近QQ群里不少朋友问我关于DotNetNuke的安装和运行的问题. 为了让大家更清楚地了解DNN的安装方式,我在这里对DotNetNuke的系统需求,和在不同环境下的安装和运行方式做一个全面地介绍.个人经验来看,DNN7的运行内存最好保证有1G以上,否则会频繁的回收. 运行DotNetNuke (DNN)所需的环境: Web服务器: IIS5, IIS6, IIS7, Visual Studio内置Web服务器服务器系统: W

VS2010 Chart控件（一）Chart控件在ASP.NET网站中的应用示例详解（C#语言）

步骤如下: 1. Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" title="VS2010 Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" action-data="http%3A%2F%2Fs8.sinaimg.cn%2Fmw690%2F6988593etx6DhZWSOATc7%26690" action-type="show-slide" style=&

企业邮箱迁移、搬家功能详解

邮件系统搬迁功能,作为使用企业邮箱服务的公司来说,提到企业邮箱搬迁(搬家)都非常谨慎,担心是否容易出现问题,那么,如何搬迁才能更安全. 例如,某公司原来使用自建邮局或其他运营商的企业邮箱,有[email protected].[email protected] begood.com两个员工,现在转用TOM企业邮箱,还希望使用[email protected].[email protected]这两个帐号,且保留曾经已收到的邮件,则通过TOM企业邮箱技术可以实现.同时,员工a和b无需做任何额外操作

[转帖]PC虚拟化主流：KVM、XEN、OpenVZ详解

PC虚拟化主流:KVM.XEN.OpenVZ详解 https://zhuanlan.zhihu.com/p/90920566 1.pc虚拟化——KVM KVM是完整的硬件虚拟化,可以在Windows / Linux来完美运行操作系统,并且使用virtio驱动程序可以获得接近本机的性能,一些实验表明,在理想情况下本机硬件的损失仅为3%. 它确实支持从ISO进行安装,也支持基于模板的安装,在隐私方面具有良好的隔离性,在重负载下会遭受I / O延迟. 每个用户(VM)在主机节点上均作为进程运行,这非常

【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）--转

前言 javascript事件基础事件捕获/冒泡事件对象事件模拟移动端响应速度 PC与移动端鼠标事件差异 touch与click响应速度问题结论 zepto事件机制注册/注销事件 zepto模拟tap事件 tap事件的问题一览点透问题 fastclick思想提升点击响应实现原理鬼点击 ios与android鼠标事件差异事件捕获解决鬼点击结语前言这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高如果你是javascript菜

网站的UV和PV详解

PV(page view),即页面浏览量,或点击量;通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标. 高手对pv的解释是,一个访问者在24小时(0点到24点)内到底看了你网站几个页面.这里需要强调:同一个人浏览你网站同一个页面,不重复计算pv量,点100次也算1次.说白了,pv就是一个访问者打开了你的几个页面. PV之于网站,就像收视率之于电视,从某种程度上已成为投资者衡量商业网站表现的最重要尺度. pv的计算:当一个访问者访问的时候,记录他所访问的页面和对应的IP,然后确定这个IP