web——仿WIT

程序员文章站 2022-04-19 20:26:27

...

这是我仿写的一个WIT界面主要是对CSS的加强联系，初学者可以看看巩固知识

下面是HTML的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/index.css" />



    </head>
    <body>

        <!--顶部导航开始-->
        <div class="top">

            <img src="img/logo01.jpg" />

            <div>
                <a href="">首页</a>
                <a href="">IT服务介绍</a>
                <a href="">软件服务介绍</a>
                <a href="">WIT品牌</a>
                <a href="">公司新闻</a>
                <a href="">关于我们</a>
            </div>

        </div>
        <!--顶部导航结束-->

        <!--轮播开始-->
        <div class="demo lb">
            <img src="img/lb.jpg" width="100%" />
        </div>
        <!--轮播结束-->

        <!--软件服务开始-->
        <div class="demo rjfw">
            <div class="wz">WIT软件<font color="#FF0000">服务</font></div>
            <hr color="#CCCCCC" size="1"  />

            <div class="a">
            <div class="icon">
            </div>
            <div class="font">
                人事管理软件
            </div>
        </div>

        <div class="b">
            <div class="bicon">
            </div>
            <div class="bfont">
                IT资产管理软件
            </div>
        </div>

        <div class="c">
            <div class="cicon">
            </div>
            <div class="cfont">
                出境签证客户关系管理软件
            </div>
        </div>

        <div class="d">
            <div class="dicon">
            </div>
            <div class="dfont">
                生产线条码组装软件
            </div>
        </div>

        <div class="e">
            <div class="eicon">
            </div>
            <div class="efont">
                样品管理系统
            </div>
        </div>

        </div>
        <!--软件服务结束-->

        <!--IT服务开始-->
        <div class="demo itfw">
            <div class="wz">IT<font color="#FF0000">服务</font></div>
            <hr size="1" color="#BEBFC2" />
        </div>

            <div class="one">
                <img src="img/news01.jpg" width="300px"/>
            <div class="aaa">
                <h3>安卓苹果IOS开发顾问</h3>
            </div>
            WIT是全球首家在线IT服务的互联网平台，更集成了电商，团购及SNS于一身。

            </div>
            <div class="two">
                <img src="img/news02.jpg" width="300px"/>
                <div class="bbb">
                    <h3>移动办公专家</h3>
                </div>

                主导管理超过超过亿元跨国及全球IT项目，涉足的行业包括：医疗保健、IT电信、金融投资
            </div>
            <div class="three">
                <img src="img/news03.jpg" width="300px"/>
                <div class="ccc">
                    <h3>WIT电脑回收</h3>
                </div>

                回收笔记、回收旧电脑、回收电子设备及笔记本电脑维修的综合服务中心。
            </div>
            <div class="four">

                <img src="img/news04.jpg" width="300px"/>
                <div class="ddd">
                    <h3>各类软件系统文档撰写服务</h3>
                </div>

                充分利用云服务器来帮助用户实现外网对内网的访问，以及远程桌面管理，远程磁盘管理。
            </div>


        </div>
        <!--IT服务结束-->

            <!--新闻开始-->
        <div class="news">
            <div class="SC">
                <a>公司新闻</a>
                <div class="DL">
                    <img src="img/more.png" />
                </div>
                <div class="AG">
                    <img height="170px" width="363px" src="img/news11.jpg" /><br>
                    <p>上海无贤企业作为“上海市认证软件生产企业”</p>
                    <p>---------------------------------------------------</p>

                    <div class="NS">

                        <h6>
                        <a >国内知名金融投资公司融帮集团全Flash精品网站上线</a>

                    </h6>
                        <h6>
                        <a >美国通用电气GE柯福德产线条码扫描系统</a>
                    </h6>
                        <h6>
                        <a >全球首家IT服务B20和o2o平台上线</a>
                    </h6>
                    </div>

                </div>
            </div>

        </div>
        <div class="RQ">
            2014-08-05

        </div>
        <div class="R">
            2014-08-05

        </div>

        <div class="Q">
            2014-08-05

        </div>

        <div class="XY">
            <div class="WZ">
                <a>公司新闻</a>
                <div class="WD">
                    <img src="img/more.png" />
                </div>
                <div class="MH">
                    <img height="170px" width="363px" src="img/news12.jpg" /><br>
                    <p>全球质量认证巨头德国德凯(DEKRA)公司人事及OA系统上线</p>
                    <p>---------------------------------------------------</p>
                    <div class="T">

                        <h6>
                        <a >全国签证申请CRM管理系统成功上线</a>

                    </h6>
                        <h6>
                        <a >全球*奢侈品公司法国爱马仕全球IT资源管理系统</a>
                    </h6>
                        <h6>
                        <a >全球质量认证巨头荷兰凯码公司样品管理系统上线</a>
                    </h6>
                    </div>
                </div>
            </div>

        </div>

        <div class="p">
            2014-08-05

        </div>
        <div class="o">
            2014-08-05

        </div>

        <div class="rr">
            2014-08-05

        </div>
        <!--新闻结束-->

        <!--品牌开始-->
        <div class="pinp">
            <div class="w">
                <img src="img/tb01.jpg" />
            </div>
            <div class="h">
                <img src="img/tb02.jpg" />
            </div>
            <div class="y">
                <img src="img/fx_left.jpg" />
            </div>
            <div class="j">
                <img src="img/fx_right.jpg" />
            </div>

        </div>
        <!--品牌结束-->

        <!--底部开始-->
        <div class="bottom">

            <div class="F">
                <table>
                    <tr>
                        <td rowspan="7">
                            <div>
                                <img align="center" src="img/logo02.jpg" /><br />
                                <a class="V">400-665-9127</a>
                                <h6>
            <p align="center">周一至周五 8：30-11：30</p>
            </h6>

                                <p align="center">(仅收市话费)</p>
                            </div>
                        </td>

                        <td><img src="img/m_tb01.png" />
                            <font class="ww">关于WIT</font>
                        </td>
                        <td><img src="img/m_tb02.png" />
                            <font class="ww">公司新闻</font>
                        </td>
                        <td><img src="img/m_tb03.png" />
                            <font class="ww">联系我们</font>
                        </td>
                        <td><img src="img/m_tb04.png" />
                            <font class="ww">移动WTT</font>
                        </td>

                    </tr>
                    <tr>
                        <td align="center">
                            <font class="hh">WIT简介</font>
                        </td>
                        <td align="center">
                            <font class="hh">公司公告</font>
                        </td>
                        <td align="center">
                            <font class="hh">联系方式</font>
                        </td>
                        <td align="center">
                            <img src="img/weixin.png" />

                        </td>

                    </tr>
                    <tr>

                        <td align="center">
                            <font class="hh">WIT远景</font>
                        </td>
                        <td align="center">
                            <font class="hh">公司新闻</font>
                        </td>
                        <td align="center">
                            <font class="hh">在线留言</font>
                        </td>
                        <td rowspan="6"></td>

                    </tr>
                    <tr>
                        <td align="center">
                            <font class="hh">分支机构</font>
                        </td>
                        <td align="center">
                            <font class="hh">行业新闻</font>
                        </td>
                        <td rowspan="3"></td>

                    </tr>
                    <tr>
                        <td align="center">
                            <font class="hh">WIT远景</font>
                        </td>
                        <td rowspan="4"></td>

                    </tr>
                    <tr>
                        <td align="center">
                            <font class="hh">WIT管理</font>
                        </td>

                    </tr>
                    <tr>
                        <td align="center">
                            <font class="hh">WIT团队</font>
                        </td>

                    </tr>
                </table>
            </div>

        </div>
        <div class="foot">
            <font id="w">WIT&nbsp;&nbsp;B2B服务平台&nbsp;&nbsp;泸IPC备10200768 &nbsp;&nbsp;Copyright&nbsp;&nbsp;2012-2015&nbsp;51helpdesk.com&nbsp;&nbsp;版权所有

            </font><br />
            <font id="h">
                上海伍贤技术有限公司全资运营网站
            </font>
        </div>

        <!--底部结束-->

    </body>
</html>

CSS的代码：

.demo{

    margin:20px auto;
}

body{
    margin: 0;
    padding: 0;
}
/*顶部导航*/
.top{
    height: 80px;

}

.top img{
    display: block;
    float: left;
    margin-top:5px;
    margin-left:27% ;
    margin-right: 10%;
}

.top a{
    display: block;
    float: left;
    height: 80px;
    line-height: 80px;
    margin: 0px 30px;
    font-family: "微软雅黑";
    font-size: 18px;
    font-weight: bold;
    color: #3E3E3E;
    text-decoration: none;
    border: 2px double #FFFFFF;
}

.top a:hover{
    color: red;
    border-bottom:1px double red;
}

/*图片轮播*/
.lb{

    height: 690px;
}

/*软件服务*/


    .a {
        /*border: 0px solid #ffffff;*/

        width: 100px;
        height: 100px;
        text-align: center;
        float: left;
        margin-top:100px;
        margin-left:18% ;
        margin-right: 8%;
        white-space: nowrap;

    }

    .icon {
        width: 60px;
        height: 56px;
        background: url(../img/tb01.png) no-repeat;
        margin: 10px auto;
    }

    .a:hover {
        border: 0px solid red;
        cursor: pointer;
    }

    .a:hover .icon {
        background: url(../img/tb02.png) no-repeat;
    }

    .font{
        color: #999999;
        font-weight: bold;
    }
    .a:hover .font {
        color: red;
    }

        .b {
        /*border: 1px solid #ffffff;*/
        width: 120px;
        height: 120px;
        text-align: center;
        float: left;
        margin-top:100px;
        margin-right: 8%;
        white-space: nowrap;
    }

    .bicon {
        width: 60px;
        height: 56px;
        background: url(../img/tb11.png) no-repeat;
        margin: 10px auto;
    }

    .b:hover {
        border: 0px solid red;
        cursor: pointer;
    }

    .b:hover .bicon {
        background: url(../img/tb12.png) no-repeat;
    }
    .bfont{
        color: #999999;
        font-weight: bold;
    }
    .b:hover .bfont {
        color: red;
    }

        .c {
        /*border: 1px solid #ffffff;*/
        width: 120px;
        height: 120px;
        text-align: center;
        float: left;
        margin-top:100px;
        margin-right: 8%;

    }

    .cicon {
        width: 60px;
        height: 56px;
        background: url(../img/tb21.png) no-repeat;
        margin: 10px auto;
    }

    .c:hover {
        border: 0px solid red;
        cursor: pointer;
    }

    .c:hover .cicon {
        background: url(../img/tb22.png) no-repeat;
    }
    .cfont{
        color: #999999;
        font-weight: bold;
    }
    .c:hover .cfont {
        color: red;
    }

        .d {
        /*border: 1px solid #ffffff;*/
        width: 100px;
        height: 100px;
        text-align: center;
        float: left;
        margin-top:100px;
        margin-right: 8%;

    }

    .dicon {
        width: 60px;
        height: 56px;
        background: url(../img/tb31.png) no-repeat;
        margin: 10px auto;
    }

    .d:hover {
        border: 0px solid red;
        cursor: pointer;
    }

    .d:hover .dicon {
        background: url(../img/tb32.png) no-repeat;
    }
    .dfont{
        color: #999999;
        font-weight: bold;
    }
    .d:hover .dfont {
        color: red;
    }

        .e {
        /*border: 1px solid #ffffff;*/
        width: 100px;
        height: 100px;
        text-align: center;
        float: left;
        margin-top:100px;
        margin-right: 20%;
        white-space: nowrap;
    }

    .eicon {
        width: 60px;
        height: 56px;
        background: url(../img/tb41.png) no-repeat;
        margin: 10px auto;
    }

    .e:hover {
        border: 0px solid red;
        cursor: pointer;
    }

    .e:hover .eicon {
        background: url(../img/tb42.png) no-repeat;
    }
    .efont{
        color: #999999;
        font-weight: bold;
    }
    .e:hover .efont {
        color: red;
    }


.wz{
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    line-height: 80px;
    }


.rjfw{

    height: 400px;
}

/*IT服务*/
.itfw{
    height: 500px;
    background: url(../img/background-image.jpg) no-repeat ;
    background-size: 100%;
}
    .one{
        border: 8px solid #FFFFFF;
        width: 300px;
        height: 400px;
        text-align: center;
        margin-left: 250px;
        margin-top: -200px;
    }
    .one:hover{
        border: 8px solid red;

    }       

    .one:hover .aaa{
        color: red;
    }

    .two{
        border: 8px solid #FFFFFF;
        width: 300px;
        height: 400px;
        text-align: center;
        margin-left: 600px;
        margin-top: -416px;
    }
    .two:hover{
        border: 8px solid red;
    }
    .two:hover .bbb{
        color: red;
    }

    .three{
        border: 8px solid #FFFFFF;
        width: 300px;
        height: 400px;
        text-align: center;
        margin-left: 950px;
        margin-top: -416px;
    }
    .three:hover{
        border: 8px solid red;
    }       
    .three:hover .ccc{
        color: red;
    }

    .four{
        border: 8px solid #FFFFFF;
        width: 300px;
        height: 400px;
        text-align: center;
        margin-left: 1300px;
        margin-top: -416px;
    }
    .four:hover{
        border: 8px solid red;
    }
    .four:hover .ddd{
        color: red;
    }





/*新闻*/

.news {
    /*background-color: #F8F8F8;*/
    border: 0px solid white;
    margin-right: 31px;
    margin-left: 453px;
}

.SC {
    margin-right: 30px;
    margin-top: 20px;
    margin-left: 60px;
    font-family: "微软雅黑";
    font-weight: bold;
}

.AG {
    margin-right: 40px;
    margin-top: 12px;
    margin-left: -5px;
    size: 60px;
}

.DL {
    margin-right: 40px;
    margin-top: -21px;
    margin-left: 315px;
    width: 20px;
}

.XY {
    margin-right: 31px;
    margin-left: 600px;
}

.WZ {
    margin-right: 30px;
    margin-top: -465px;
    margin-left: 389px;
    font-family: "微软雅黑";
    font-weight: bold;
}

.MH {
    margin-right: 40px;
    margin-top: 12px;
    margin-left: -5px;
    size: 60px;
}

.WD {
    margin-right: 40px;
    margin-top: -21px;
    margin-left: 315px;
    width: 20px;
}

.NS a {
    color: #A9A9A9;
}

.NS a:hover {
    color: red;
    border-bottom: 2px double red;
}

.RQ {
    border: 2 solid blue;
    height: 60px;
    margin-left: 814px;
    margin-right: 20px;
    margin-top: -137px;
    color: #A9A9A9;
}

.R {
    border: 2 solid blue;
    height: 60px;
    margin-left: 814px;
    margin-right: 20px;
    margin-top: -14px;
    color: #A9A9A9;
}

.Q {
    border: 2 solid blue;
    height: 60px;
    margin-left: 814px;
    margin-right: 20px;
    margin-top: -18px;
    color: #A9A9A9;
}

.T a {
    color: #A9A9A9;
}

.T a:hover {
    color: red;
    border-bottom: 2px double red;
}

.p {
    border: 2 solid blue;
    height: 60px;
    margin-left: 1259px;
    margin-right: 20px;
    margin-top: -137px;
    color: #A9A9A9;
}

.o {
    border: 2 solid blue;
    height: 60px;
    margin-left: 1259px;
    margin-right: 20px;
    margin-top: -14px;
    color: #A9A9A9;
}

.rr {
    border: 2 solid blue;
    height: 60px;
    margin-left: 1259px;
    margin-right: 20px;
    margin-top: -18px;
    color: #A9A9A9;
}

h6:hover {
    cursor: pointer;
}


/*品牌*/

.pinp {
    height: 100px;
}

.pinp img {
    display: block;
    float: left;
    height: 80px;
    line-height: 100px;
}

.pinp .w {
    margin-top: 10px;
    margin-left: 16%;
}

.pinp .h {
    margin-top: 10px;
    margin-left: 10%;
}

.pinp .y {
    margin-top: 5px;
}

.pinp .j {
    margin-top: 5px;
}


/*底部*/

.bottom {
    text-align: center;
    width: 1400px;
    background-color: #EEEEEE;
    border: 2 solid blue;
    margin-left: 270px;
    margin-right: 433px;
    margin-top: 3px;
    height: 324px;
}

.F {
    margin-left: 170px;
    margin-right: 32px;
    margin-top: -16px;
    height: 255px;
    width: 1200px;
}

.F td {
    text-align: center;
    width: 202px;
    height: 37px;
}

.V {
    font-size: 27px;
    color: red;
    padding-top: 5px;
}

.ww {
    font-weight: 600;
    color: #666666;
    font-size: 16px;
}

.hh {
    color: #656565;
    font-size: 12px;
}

.foot {
    left: -400px;


    width: 2000px;
    height: 45px;
    position: absolute;
    background-color: #3E3E3E;
    font-family: "宋体";
}

.foot,
#w {
    padding-top: 15px;
    margin-left: 300px;
    font-size: 18px;
    color: white;
}

.foot,
#h {
    padding-top: 25px;
    padding-left: 220px;
    margin-left: 20%;
    font-size: 18px;
    color: white;
}

web——仿WIT

相关标签：界面仿写 web css html

上一篇： vue 使用浏览器自带打印机打印功能

下一篇：微信小程序与内嵌网页交互实现支付功能

web——仿WIT

手机web app开发笔记

Android仿微信底部菜单栏效果

学习 Laravel - Web 开发实战入门笔记(1)

python探索之BaseHTTPServer-实现Web服务器介绍

【代码笔记】Web-HTML-颜色

详解Python计算机视觉图像扭曲（仿射扭曲）

在python的WEB框架Flask中使用多个配置文件的解决方法

Python Web服务器Tornado使用小结

纯js仿淘宝京东商品放大镜功能

SSH项目搭建（五）——web.xml文件配置

web——仿WIT

手机web app开发笔记

Android仿微信底部菜单栏效果

学习 Laravel - Web 开发实战入门笔记(1)

python探索之BaseHTTPServer-实现Web服务器介绍

【代码笔记】Web-HTML-颜色

详解Python计算机视觉 图像扭曲（仿射扭曲）

在python的WEB框架Flask中使用多个配置文件的解决方法

Python Web服务器Tornado使用小结

纯js仿淘宝京东商品放大镜功能

SSH项目搭建（五）——web.xml文件配置

详解Python计算机视觉图像扭曲（仿射扭曲）