前端学习笔记

最新推荐文章于 2024-07-12 16:27:40 发布

不吭儿

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量686

点赞数 14

分类专栏：前端文章标签：前端学习笔记

本文链接：https://blog.csdn.net/weixin_45249092/article/details/138973254

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

day05
这两天做的一些css+h5的页面设计1 在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/demo2.css">
</head>
<body>
    <div class="header"><img src=""></div>
    <div class="daohanglan">
        <ul>
            <li>解决方案</li>
            <li>产品</li>
            <li>服务与支持</li>
            <li>关于广联达</li>
        </ul>
    </div>
    <div class="lunbotu"><img src=""></div>
    <div class="bbox">
        <div class="box">
            <h3>成功案例</h3>
            <hr>
            <ul>
                <li>光大银行后台服务器</li>
                <li>光大银行后台服务器</li>
                <li>光大银行后台服务器</li>
                <li>光大银行后台服务器</li>
                <li>光大银行后台服务器</li>
            </ul>
        </div>
        <div class="box">
            <h3>成功案例</h3>
            <hr>
            <ul>
                <li>光大银行后台服务器</li>
                <li>光大银行后台服务器</li>
                <li>光大银行后台服务器</li>
                <li>光大银行后台服务器</li>
                <li>光大银行后台服务器</li>
            </ul>
        </div>
    </div>
    <div class="hbox">
    <div  class="lbox">
        <h3>产品解决方案</h3>
        <div class="mbox1">
            <div class="sbox"></div>
            <h3>集团上市公司方案解决方案</h3>
            <p></i>2017-05-27</p>
            <p>集团上市公司网站建设解决方室</p>
        </div> 
        <div class="mbox1">
            <div class="sbox"></div>
            <h3>集团上市公司方案解决方案</h3>
            <p></i>2017-05-27</p>
            <p>集团上市公司网站建设解决方室</p>
        </div> 
       <div class="mbox2">
            <div class="sbox"></div>
            <h3>集团上市公司方案解决方案</h3>
            <p></i>2017-05-27</p>
            <p>集团上市公司网站建设解决方室</p>
        </div> 
    </div>

</div>
<footer >@sdsad eefaofjdaf&nbsp;&nbsp;bkahfbagravg&nbsp;&nbsp;ehrbfhbdhbhbgbgh&nbsp;&nbsp;bfafafa</footer>
</body>
</html>

*{
    padding: 0;
    margin: 0;
}
.header{
    margin: 0 auto;
    width: 1008px;
    height: 59px;
    background-color: rgb(246,246,246);
}
.daohanglan{
    width: 1008px;
    height: 40px;
    margin: 0 auto;
    background-color: rgb(225,225,225);
    line-height: 40px;
}
.daohanglan>ul{
    margin-left: 75px;
}
.daohanglan>ul>li{
    list-style-type: none;
    display: inline-block;
    margin-left: 23px;
    margin-right: 23px;
    

}
.lunbotu{
    width: 1008px;
    height: 400px;
    margin:0 auto;
}
.lunbotu img{
    width: 1008px;
    height: 400px;
}
.bbox{
    width: 1008px;
    height: 191px;
    background-color: rgb(241,241,241);
    margin: 0 auto;
}
.box{
    width: 482px;
    height: 160px;
    background-color: white;
    float: left;
    margin-right: 8px;
    margin-left: 12px;
    margin-top: 13px;
}
.box>h3{
    font-weight: normal;
    margin-left: 21px;
    margin-top: 12px;
    font-size: smaller;
}
.box>hr{
    list-style-type: square;
    border: dashed 1px rgb(223,223,223);
    margin-left: 21px;
    margin-right: 21px;
    
}
.box>ul{
    margin-top: 20px;

}
.box>ul>li{
    font-size: 10px;
    margin-left: 36px;
    list-style-type: square;
    color:rgb(223,223,223) ;
    margin-top: 5px;

}
.hbox{
    width: 1008px;
    height: 198px;
    background-color: rgb(233,233,233);
    margin: 0 auto;
}
.lbox{
    
    width: 978px;
    height: 174px;
    
    
}
.mbox1{
    width: 299px;
    height:61px;
    
    float: left;
    margin-right:28px;
    padding-top: 32px;
    padding-bottom: 22px;
    padding-left: 6px;
}
.mbox2{
    width: 299px;
    height:61px;
    
    float: left;
    padding-top: 32px;
    padding-bottom: 22px;
    padding-left: 6px;
   
}
.mbox1>h3{
    
    font-size: 10px;

}
.mbox1>p{
    font-size: 10px;
}
.mbox2>h3{
    
    font-size: 10px;

}
.mbox2>p{
    font-size: 10px;
}
.sbox{
    width: 60px;
    height: 60px;
    
    float: left;
    background-image: url("../img/2.jpg");

}
.sbox img{
    width: 60px;
    height: 60px;
}
.mbox1>p{
    margin-top:10px;
}
.mbox2>p{
    margin-top:10px;
}
footer{
    margin: 0 auto;
    width: 1008px;
    height:22px;
    
    background-color: rgb(33, 4, 108);
    text-align: center;
    padding-top: 42px;
    font-size: 10px;
}