水泵网站练习

最新推荐文章于 2023-08-27 11:32:47 发布

qq_28905427

最新推荐文章于 2023-08-27 11:32:47 发布

阅读量356

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_28905427/article/details/80701719

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML部分

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>练习</title>
    <link rel="stylesheet" type="text/css" href="demo_sub.css">

</head>

<body>

    <div class="bulk1">
        <div class="box1">
            <ul class="box-L1">
                <li>欢迎来到中国船用磅阀网</li>
                <li>登录 |</li>
                <li>注册</li>
            </ul>
            <ul class="box-R1">
                <li>设为首页 |</li>
                <li>加入收藏 |</li>
                <li>联系我们</li>
            </ul>
            <div class="ex1"></div>
        </div>
    </div>

    <div class="bulk2">
        <div class="box2">
            <img src="./image/demo1.jpg" alt="text">
            <div class="search1">
                <div class="search2">
                    <select class="search3">
                        <option>展会1</option>
                        <option>展会2</option>
                        <option>展会3</option>
                        <option>展会4</option>
                    </select>
                    <input class="input1" type="text" name="搜索框">
                    <input class="input2" type="submit" value="搜索">
                </div>
                <ul class="search4">
                    <li>热门搜索:</li>
                    <li>阀门 |</li>
                    <li>水蚌 |</li>
                    <li>点机 |</li>
                    <li>驱动装置</li>
                </ul>
            </div>



            <div class="box-R2">
                <img src="./image/demo2.jpg" alt="text">
            </div>
            <!-- <div class="ex1"></div> -->
        </div>
    </div>

    <div class="box3">
        <ul class="menu">
            <li>首页</li>
            <li>供应信息</li>
            <li>求购信息</li>
            <li>行业信息</li>
            <li>人才市场</li>
            <li>展会信息</li>
            <li>船阀标准</li>
            <li>公司库</li>
            <li>企业地图</li>
        </ul>
        <div class="ex1"></div>
    </div>
    </div>

    <div class="bulk3">
        <div class="box1">
            <ul class="ul1">
                <li class="li1">磅阀子站:</li>
                <li>水泵网 |</li>
                <li>阀门网 |</li>
                <li>管材管件网 |</li>
                <li>密封件网 |</li>
                <li>电机网 |</li>
                <li>污水泵网 |</li>
                <li>温州磅阀网 |</li>
                <li>泽国磅与电机网 |</li>
                <li>温岭泵 |</li>
                <li>海磅 |</li>
                <li>玉环 |</li>
                <li>环阀网</li>
            </ul>
            <div class="ex1"></div>
            <ul class="ul2">
                <li class="li2">热门产品专场:</li>
                <li>球阀 |</li>
                <li>闸阀 |</li>
                <li>蝶阀 |</li>
                <li>截止阀 |</li>
                <li>电磁阀 |</li>
                <li>止回阀 |</li>
                <li>调节阀 |</li>
                <li>安全阀 |</li>
                <li>消防泵 |</li>
                <li>隔膜泵 |</li>
                <li>离心泵 |</li>
                <li>化工泵 |</li>
                <li>给水泵 |</li>
                <li>自吸泵 |</li>
                <li>管道泵 |</li>
                <li>更多</li>
            </ul>
        </div>
    </div>


    <div class="box5">
        <img src="./image/demo3.jpg" alt="text">
        <ul class="ul3">
            <li>船用离心式喷射磅</li>
            <li>船用旋涡泵</li>
            <li>船用立式多级泵</li>
            <li>船用立式海水泵</li>
            <li>船用热水循环泵</li>
            <li>宣传位招商</li>
            <li>广告位招租</li>
            <li>求购渣江磅</li>
        </ul>
    </div>
    </div>

    <div class="bulk5">
        <div class="box6">
            <img src="./image/demo4.jpg" alt="text">
            <img src="./image/demo4.jpg" alt="text">
            <img src="./image/demo4.jpg" alt="text">
            <img src="./image/demo4.jpg" alt="text">
            <img src="./image/demo4.jpg" alt="text">
            <img src="./image/demo4.jpg" alt="text">
            <img src="./image/demo4.jpg" alt="text">
            <img src="./image/demo4.jpg" alt="text">
        </div>
    </div>


    <div class="bulk6">
        <div class="box7">
            <div class="boder1">
                <img src="./image/demo5.jpg" alt="text" style="display:block;margin-top:10px;">
                <div class="boder2">
                    <p class="text">涡轮传动通风蝶阀</p>
                    <ul class="ul4">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            </div>

            <div class="boder3">
                <div class="boder4">
                    <p class="text1">视频中心</p>
                    <a href="http://www.baidu.com/">更多>></a>
                    <div class="ex1"></div>
                </div>
                <div class="boder5">
                    <img src="./image/demo6.jpg" alt="text">
                </div>
            </div>
        </div>

        <div class="boder6">
            <div class="boder7">
                <h3 class="text2">行业新闻</h3>
                <h3 class="text3">焦点新闻</h3>
                <div class="ex1"></div>
            </div>
            <div class="boder8">
                <h4 class="text4">重庆吴家镇：百亿阀门产业转型升级</h4>
                <p class="text5">如何才能合理选用一款液压阀呢？对人格液压系统而言，正确选用液压阀，如何才能合理选用一款液压阀呢？对人格液压系统而言，正确选用液压阀如何才能合理选用一款液压阀呢？对人格液压系统而言，正确选用液压阀   <a class="text6" href="http://www.baidu.com/">[详情]</a></p>
                <ul class="ul5">
                    <li>
                        <a href="http://www.baidu.com/" target="_blank">新闻1 -点击跳转新闻1的链接</a>
                    </li>
                    <li>
                        <a href="http://www.baidu.com/" target="_blank">新闻2 -点击跳转新闻2的链接</a>
                    </li>
                    <li>
                        <a href="http://www.baidu.com/" target="_blank">新闻3 -点击跳转新闻3的链接</a>
                    </li>
                    <li>
                        <a href="http://www.baidu.com/" target="_blank">新闻4 -点击跳转新闻4的链接</a>
                    </li>
                    <li>
                        <a href="http://www.baidu.com/" target="_blank">新闻5 -点击跳转新闻5的链接</a>
                    </li>
                    <li>
                        <a href="http://www.baidu.com/" target="_blank">新闻6 -点击跳转新闻6的链接</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="boder9">
            <div class="boder10">
                <div class="boder11">会员登录</div>
                <div>
                    <form class="text7" action="">
                        用户名:
                        <input type="text" name="user" size="15">
                        <br>
                        <br> 密　码:
                        <input type="password" name="password" size="15">
                        <br>
                        <br>
                        <p class="text8">
                            <input type="submit" value="登录">
                            <input type="submit" value="注册">
                        </p>
                    </form>
                </div>
            </div>
            <ul class="ul6">
                <li>
                    <img src="./image/demo7.jpg" alt="text">
                    <li>
                        <li>
                            <img src="./image/demo7.jpg" alt="text">
                            <li>
                                <li>
                                    <img src="./image/demo7.jpg" alt="text">
                                    <li>
                                        <li>
                                            <img src="./image/demo7.jpg" alt="text">
                                            <li>
            </ul>
        </div>
    </div>


    <div class="bulk7">
        <div class="boder12">
            <div class="box8">
                <div class="text9">供求信息</div>
                <ul class="ul7">
                    <li>船用旋涡泵 |</li>
                    <li>船用旋涡泵 |</li>
                    <li>船用旋涡泵</li>
                </ul>
                <div class="ex1"></div>
            </div>



            <div class="box9">
                <div class="box10">
                    <div class="text11">
                        <div class="left1">供求信息</div>
                        <div class="right1">更多>></div>
                        <div class="ex1"></div>
                    </div>
                    <ul class="ul8">
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                    </ul>
                </div>
                <div class="box11">
                    <div class="text12">
                        <div class="left1">求购信息</div>
                        <div class="right2">更多>></div>
                        <div class="ex1"></div>
                    </div>
                    <ul class="ul9">
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                        <li>双龙ZSFD200消防信号蝶阀</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="boder13">
            <div class="box12">
                <div class="text14"> VIP会员</div>
                <div class="text15">更多>></div>
                <div class="ex1"></div>
                </div>
                <div class="box13">
                    <ul class="ul10">
                        <li>盐山昙明通电力设备制造有限公司</li>
                        <li>盐山昙明通电力设备制造有限公司</li>
                        <li>盐山昙明通电力设备制造有限公司</li>
                        <li>盐山昙明通电力设备制造有限公司</li>
                        <li>盐山昙明通电力设备制造有限公司</li>
                        <li>盐山昙明通电力设备制造有限公司</li>
                        <li>盐山昙明通电力设备制造有限公司</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ex1"></div>
    </div>

    <div class="bulk8">
        <img src="./image/demo8.jpg" alt="text">
    </div>


    <div class="bulk9">
        <div class="boder14">
            <ul class="ul11">
                <li>船用磅分类</li>
                <li>船用阀门分类</li>
                <li class="ex1"></li>
            </ul>
            <!-- <div class="ex1"></div> -->
        </div>
        <div class="boder15">
            <ul class="ul12">
                <li>船用离心式喷射泵</li>
                <li>船用离心式喷射泵</li>
                <li>船用离心式喷射泵</li>
                <li>船用离心式喷射泵</li>
                <li>船用离心式喷射泵</li>
                <li>船用离心式喷射泵</li>
                <li class="ex1"></li>
            </ul>
            
        </div>
        <div class="box14">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <img src="./image/demo9.jpg" alt="text">
            <div class="ex1"></div>
        </div>
    </div>

    <div class="bulk10">
        <img src="./image/demo10.jpg" alt="text">
        <div class="ex1"></div>
    </div>

    <div class="bulk20">
        <div class="boder20">
            <ul class="ul20">
                <li class="right20">友情链接</li>
                <li class="right21">更多>></li>
                <li class="ex1"></li>
            </ul>
        </div>
        <div class="boder21">
            <ul class="ul21">
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li>中国置业网 |</li>
                <li class="ex1"></li>
            </ul>
        </div>
    </div>

    <div class="bulk21">
        <ul class="ul22">
            <li>网站建设 -</li>
            <li>会员服务 -</li>
            <li>产品排名 -</li>
            <li>广告服务 -</li>
            <li>联系我们 -</li>
            <li>关于我们 -</li>
            <li>在线申请 -</li>
            <li>网站地图</li>
        </ul>
    </div>

    <div class="bulk22">
        <p>Copyinght@2017-2018 ALL Rights Reserved 中国船用磅阀网 版权所有</p>
        <p> 沪ICP备11011223号-3  www.mitbelan.gov.cn 运营单位：上海申花船用磅阀有限公司</p>
        <p>地址：上海浦东上海新区高东二路47弄千秋家园44号201 邮编：100026 电话：021-5356788</p>
        <div class="boder22">
            <img src="./image/demo11.jpg" alt="text">
        </div>
    </div>
</body>
</html>

css部分

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration:none;
}

.bulk1 {
    background-color: #206caa;
    width: 100%;
    min-width: 960px;
}

.box1 {
    width: 960px;
    margin: auto;
}

.box-L1 {
    float: left;
}

.box-L1 li {
    float: left;
    color: #FFFFFF;
    margin-left: 10px;
    font-size: small;
}

.box-R1 {
    float: right;
}

.box-R1 li {
    display: inline;
    margin-left: 10px;
    color: #FFFFFF;
    font-size: small;
}

.ex1 {
    clear: both;
}

.bulk2 {
    background-color: #0474B4;
    width: 100%;
    min-width: 960px;
    height: 97px;
}

.box2 {
    width: 960px;
    margin: auto;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.box2 img{
    height: 97px;
    width: auto;
}
.search1 {
    padding: 25px;
}

.search2 {
    background-color: #F5F5F5;
    /* border: 1px solid; */
    border-radius: 6px;
    float: left;
}

.search3 {
    border-right-style: solid;
    border-right-color: #FFFFFF;
    border-radius: 4px;
}
.input1{
    border-radius: 2px;
}
.input2{
    border-radius: 4px;
}
.search4 {
    /* float: left; */
    margin-left: 5px;
}

.search4 li {
    display: inline;
    color: #FFFFFF;
    font-size: small;
}

/* .box-R2 {
    float: right; 
    position: absolute;
    top: 0; 
    left: 875px;
} */

.box-R2 img {
    /* width: 82px;
    height: 100%; */
    /* display: block; */
}

.box3 {
    background-color: #358DCC;
    width: 960px;
    margin: auto;
    height: 60px;
}

.menu li {
    /* display: inline; */
    float: left;
    color: #FFFFFF;
    font-size: 120%;
    text-align: center;
    line-height: 60px;
    width: 10.8%;
}

.bulk3 {
    width: 100%;
    min-width: 960px;
    height: 50px;
}

.ul1 li {
    display: inline;
    text-align: center;
    line-height: 25px;
    margin-left: 5px;
    font-size: 80%;
}

.li1 {
    color: #19B48C;
}

.ul2 li {
    display: inline;
    text-align: center;
    line-height: 25px;
    margin-left: 5px;
    font-size: 80%;
}

.li2 {
    color: #19B48C;
}

.bulk4 {
    width: 100%;
    min-width: 960px;
}

.box5 {
    width: 960px;
    margin: auto;
    height: 36px;
    background-color: #F5F5F5;
    overflow: hidden;
}

.box5 img {
    height: 36px;
    width: auto;
    float: left;
}

.ul3 li {
    display: inline;
    line-height: 36px;
    text-align: center;
    margin: 2px;
    ;
}

.bulk5 {
    width: 100%;
    min-width: 960px;
}

.box6 {
    width: 960px;
    margin: auto;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
}

.box6 img {
    height: 70px;
    width: 210px;
    margin-top: 20px;
}

.bulk6 {
    width: 960px;
    margin: auto;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
}

.box7{
    width: 280px;
    margin-top:10px;
}

.boder1 img {
    width: 280px;
    height: 278px;
 
}
.boder2 {
    background-color: #000000;
    border-style: none;
    width: 280px;
    text-align: center;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
}
.text{
    float: left;
    color: #FFFFFF;
}
.ul4{
  margin-left:30px;
  float: right;
}
.ul4 li{
    display: inline;
    border: 1px solid #FFFFFF;
    background-color: #FFFFFF;
    
}
.ul4 li:hover{
    background-color: #19B48C;
    cursor:pointer;
}
.boder3{
    margin-top: 20px;
    border: 2px solid #000000;
    border-top-color: #19B48C;
    border-top-width:3px;
    height: 225px;
    
}
.boder4{
    border: 1px solid;
    padding: 5px;;
    
}
.text1{
    float: left;
    color:#358DCC;
    font-size: large;
    margin-left: 4px;
}
.boder4 a{
    float: right;
    font-size: small;
    padding: 2px;
} 
.boder5 img{
    width: 100%;
    height: 185px;
    /* margin: 4px; */
}

.boder6{
    border: 2px solid #F5F5F5;
    width:374px;
    margin-top:20px;
}
.boder7{
    height: 51px;
    background-color: #206caa;
    margin-bottom: 15px;
    width: 100%
}
.text2{
   width: 185px;
    float: left;
    
    text-align: center;
    line-height: 51px;
}
.text3{
    float: right;
    width: 185px;
   line-height: 51px;
   text-align: center;
}
.text2:hover{
    border-top:2px solid blue;
    cursor:pointer;
    background-color: #F5F5F5;
    color: #19B48C;
}
.text3:hover{
    border-top:2px solid blue;
    cursor:pointer;
    background-color: #F5F5F5;
    color: #19B48C;
}
.text4{
    text-align: center;
    color: red;
    margin-bottom: 10px;
}
.text5 {
    float: right;
    white-space:pre-wrap;
    text-indent:2em;
    margin-bottom: 10px;
}
.text6{
    font-size: small;
}
.ul5{
  margin: 30px;;
}
.ul5 li{
    margin: 10px;
    list-style-type:square;
}
.boder9{
    width: 252px;
}
.boder10{
    margin-top:20px;
    border: 2px solid #F5F5F5;
    border-top:2px solid blue;
    padding: 5px;
    margin-bottom:30px;
}
.boder11{
    border-bottom: 2px solid #F5F5F5;
    color: #0474B4;
    font-weight: bold;
    padding: 5px;
}
.text7{
    padding-top: 18px;
    text-align: center;
}
.text7 input{
    border-radius: 3px;
}
.text8{
    line-height: 25px;
    text-align: center;
}
.text8 input{
    margin: 15px;
    width: 60px;
    padding: 2px;
    background-color: #358DCC;
    color: #FFFFFF;
    border-radius: 6px;

}
.ul6 img{
    width: 252px;
}
.bulk7{
    width: 960px;
    margin: auto;
    margin-top:20px ;
}
.boder12{
    float: left;
    height: 380px;
    width: 680px;
    border: 1px solid #F5F5F5;
    border-top:2px solid #0474B4;
}
.box8{
    background-color: #cccccc;
    height: 40px;
}
.text9{
    float: left;
    font-size: large;
    color: #358DCC;
    line-height: 40px;
    padding-left: 20px;
}
.ul7{
    float: right;
    line-height: 40px;
    padding-right: 20px;
}
.ul7 li{
    display: inline;
}
.box10{
    float: left;
    padding-left:15px;
    width: 320px;

}
.text11{
    border-bottom:1px solid #358DCC; 
    padding-bottom: 5px;
    padding-top:5px ;
    margin-bottom:5px ;
}
.left1{
    float: left;
    font-weight: bold;
    color: #0474B4;
}
.right1{
    float: right;
    font-weight:lighter;
}
.ul8{
    line-height:200%;
    padding-left:20px ;
    /* text-align: center; */
    font-family: 'Courier New', Courier, monospace;
    /* width: 300px; */
    /* font-size: 90%; */
}
.box11{
    float: right;
    padding-right:15px;
    width: 320px;
}
.text12{
    border-bottom:1px solid #358DCC; 
    padding-bottom: 5px;
    padding-top:5px ;
    margin-bottom:5px ;
}
.left2{
    float: left;
    font-weight: bold;
    color: #0474B4;
}
.right2{
    float: right;
    font-weight:lighter;
}
.ul9{
    line-height:200%;
    padding-left: 20px ;
    /* text-align: center; */
    font-family: 'Courier New', Courier, monospace;
    /* font-size: small; */
}
.boder13{
    float: right;
    border: 2px solid #F5F5F5;
    border-top:2px solid #358DCC; 
    margin-left:20px ;
    width: 252px;
    height:380px;
}
.box12{
    height: 40px;
    border-bottom: 2px solid #F5F5F5;
    padding: 5px;
}
.box12 div{
    display: inline;
    line-height: 35px;
}
.text14{
    float: left;
    padding-left: 10px;
    font-weight: bold;
    color: blue;
}
.text15{
    float: right;
    padding-right:10px ;
    /* font-weight:lighter; */
    font-size:90%
}
.ul10{
    font-size: 90%;
    text-align:center;
    line-height: 48.5px;
}
.ul10 li{
    border-bottom: 1px solid #F5F5F5;
}
.bulk8{
    width: 960px;
    margin: auto;
}
.bulk8 img{
    margin-top: 20px;
    width: 100%;
}
.bulk9{
    width: 960px;
    margin: auto;
    border: 1px solid #F5F5F5;
    margin-top: 20px;
}
.boder14{
    border-bottom: 1px solid #F5F5F5;
}
.ul11{
    height: 52px;
    /* overflow: hidden; */
}
.ul11 li{
    line-height: 50px;
    float: left;
    width: 260px;
    border-right:1px solid #F5F5F5; 
    text-align: center;
    font-weight:bold;
}
.ul11 li:hover{
    border-top: 2px solid #0474B4; 
    background-color: #F5F5F5;
    color: #19B48C;
}
.boder15{
    height: 60px;
    border-bottom: 1px solid #F5F5F5;
    
}
.ul12{
    line-height: 50px;
}
.ul12 li{
    float: left;
  padding-left: 15px;
    color: #19B48C;
    font-weight:lighter;
}
.box14 img{
    float: left;
    width: 191.51px;
}

.bulk10{
    width: 960px;
    margin: auto;
    margin-top: 20px;
}
.bulk10 img{
    float: left;
    width: 100%;
}
.bulk20{
    width: 960px;
    margin: auto;
    border: 1px solid #F5F5F5;
    border-top: 1px solid #358DCC; 
    margin-top: 20px;
    margin-bottom: 20px;
}
.boder20{
    height: 40px;
    border-bottom: 1px solid #F5F5F5;
}
.ul120 li{
    /* display: inline; */
}
.right20{
    float: left;
    line-height: 40px;
    padding-left: 30px;
    
}
.right21{
    float: right;
    line-height: 40px;
    padding-right:30px;
    font-weight:lighter;
    
}
.ul21{
    /* padding-left:8px ; */
    padding: 8px;
    font-weight:lighter;
}
.ul21 li{
    display: inline;

}

.bulk21{
    width: 960px;
    margin: auto;
    background-color: #F5F5F5;
    border-top: 2px solid #19B48C;
}
.ul22{
    text-align: center;
    font-weight:lighter;
}
.ul22 li{
    display: inline;
    padding: 3px;
}
.bulk22{
    width: 960px;
    margin: auto;
    text-align: center;
    margin-top:20px ;
}
.bulk22 p{
    padding: 3px;
    font-weight:lighter;
}
.boder22{
    padding: 10px;
}

样式图

qq_28905427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
水泵网站练习

HTML部分&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;练习&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href=&
复制链接

扫一扫

专栏目录