前端学习笔记

最新推荐文章于 2024-08-09 10:42:44 发布

不吭儿

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量289

点赞数 3

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

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

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

day05 css+h5设计的页面2
在这里插入图片描述

<!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/demo3.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4548663_w3f2lkmjmc.css">
</head>
<body>
    <div class="header">
        <div class="headlogo"><img src="../img/headerlogo .jpg" alt=""></div>
        <div class="rl"><ul><li>会员登录</li>
            <li id="rl">会员注册</li></ul></div>
    </div>
    <div class="daohanglan">
        <div class="ldaohang">
            <ul>
                <li>首页</li>
                <li>生活方式</li>
                <li>生活方式</li>
                <li>生活方式</li>
                <li>生活方式</li>
                <li>生活方式</li>
            </ul>
           </div><div class="rdaohang" ><input type="text">
        </div>
    </div>
    <div class="lunbotu"><img src="../img/lunbtu.jpg"></div>
    <div class="nav">
        <div class="mbox">
            <h3>全国代理</h3>
            <p>JDJDDJFKFDSIO</p>
           <div class="sbox" ><img src="../img/left.jpg"></div>
        </div>
        <div class="mbox">
            <h3>全国代理</h3>
            <p>JDJDDJFKFDSIO</p>
           <div class="sbox" ><img src="../img/left.jpg"></div>
        </div>
        <div class="mrbox">
            <h3>全国代理</h3>
            <p>JDJDDJFKFDSIO</p>
           <div class="sbox" ><img src="../img/left.jpg"></div>
        </div>
    </div>
    <div class="dibu">
        <div class="yiji">
            <ul>
                <li><a>生活方式</a>
                    
                <ul><li><a>家具tejia</a></li></ul></li>
                <li><a>生活方式</a>
                    <ul><li><a>家具tejia</a></li>
                        <li><a>家具tejia</a></li>
                        <li><a>家具tejia</a></li>
                        <li><a>家具tejia</a></li>
                        <li><a>家具tejia</a></li>
                        <li><a>家具tejia</a></li>
                        <li><a>家具tejia</a></li>
                        <li><a>家具tejia</a></li></ul></li>
                <li><a>生活方式</a>
                     <ul><li><a>家具tejia</a></li>
                        <li><a>家具tejia</a></li>
                        <li><a>家具tejia</a></li>
                        <li><a>家具tejia</a></li></ul></li>
                <li><a>生活方式</a>
                    <ul><li><a>家具tejia</a></li>
                <li><a>生活方式</a>
                    <ul> <li><a>家具tejia</a></li></ul></li>
                   <li><a>家具tejia</a></li>
                        <li><a>家具tejia</a></li></ul></li>
            </ul>
        </div>
        <div class="footerlogo"><img src="../img/footerlogo.jpg">
        <h3>联系热线：123456798</h3><em><i class="iconfont icon-weibo"></i></em><em><i class="iconfont icon-weixin"></i></em></div>

    </div>
    <footer ><span>@sdsad eefaofjdaf</span><div class="footerright">
        <ul>
            <li>流量统计</li>
            <li>流量统计</li>
            <li>流量统计</li>
            <li id="aaa">流量统计</li>
        </ul>
    </div></footer>
</body>
</html>

```html
*{
    margin: 0;
    padding: 0;
}
.header{
    width:1440px;
    height: 80px;
    margin: 0 auto;
}
.headlogo{
    width: 140px;
    height: 40px;
    margin-left: 580px;
    margin-top: 10px;
    float: left;
    margin-top: 20px;
}
.rl{
    float: right;
    margin-right: 200px;
    margin-top: 55px;
}
.rl>ul>li{
    display: inline-block;
    list-style-type: none;
    border-right: 1px solid black;
    margin-bottom: 20px;
}
#rl{
    border-right: none;
}
.daohanglan{
    width: 1440px;
    height: 60px;
    margin: 0 auto;
    border-top: 1px solid rgb(192,163,151) ;
    border-bottom: 1px solid rgb(192,163,151) ;
}
.ldaohang{
    float: left;
    margin-left: 215px;
    margin-top: 12px;
    margin-bottom: 10px;
}
.ldaohang>ul>li{
    display: inline-block;
    list-style-type: none;
    margin-right: 50px;  
}
.rdaohang{
    float: right;
    margin-right: 220px;
}
input{
    height: 176px;
    height: 26px;
}
.lunbotu{
    margin: 0 auto;
    width: 1008px;
    height: 550px;
    border-bottom: 10px solid rgb(192,163,152);
}
.lunbotu img{
    width: 1008px;
    height: 540px;
    margin: 0 auto;
    margin-top: 11px;
}
.nav{
    width: 1008px;
    height: 300px;
    margin: 0 auto;
}
.mbox{
    float: left;
    width: 269px;
    height: 202px;
    margin-top: 43px;
    text-align: center;
    margin-right: 100px;
 
}
.mbox img{
    width:269px;
    height: 202px;
}
.mbox>h3{
    font-size:8px;

}
p{
    font-size: 8px;
}
.sbox{
    width: 269px;
    height: 202px;
    border: 5px solid rgb(192,163,152);
    margin-top: 10px;
}
.mrbox{
    float: right;
    width: 269px;
    height: 202px;
    margin-top: 43px;
    text-align: center;
    
 
}
.mrbox img{
    width:269px;
    height: 202px;
}
.mrbox>h3{
    font-size:8px;

}

.dibu{
    width:1440px;
    height: 280px;
    background-color: rgb(246,241,239);
    margin: 0 auto;
}
.yiji{
    float: left;
    width: 751px;
    height: 200px;
    margin-left: 180px;
    margin-top: 13px;
}
.yiji>ul>li{
    list-style: none;
    float: left;
    width: 20%;
    height: 50%;
    text-align: center;
    font-size: 15px;
}
li>ul>li{
    list-style: none;
    margin:10px 0;
}
.footerlogo{
    width: 200px;
    height: 203px;
    margin-top: 20px;
    float:left;
}
.footerlogo img{
    width: 200px;
    height: 63px;
}
.footerlogo>h3{
    width: 200px;
    margin:10px;
    font-size: 15px;
    font-weight: normal;
}
em{
    margin-left: 20px;
}
footer{
    width: 1440px;
    height: 60px;
    background-color: rgb(71,43,32);
    margin: 0 auto;
}
footer>span{
    margin-left: 200px;
    font-size: 20px;
    line-height: 60px;
}
.footerright{
    float: right;
    width: 400px;
    height: 40px;
    margin-top: 20px;
}
.footerright>ul>li{
    list-style-type: none;
    float: left;
    margin-left: 10px;
    padding-right: 5px;
    color:rgb(175,141,98) ;
    border-right: 1px solid rgb(175,141,98);  
}
#aaa{
    border-right: none;
}

不吭儿

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记

day05 css+h5设计的页面2<!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="styl
复制链接

扫一扫