html5 运用自适应真不戳！

最新推荐文章于 2023-10-27 16:08:22 发布

小f要努力啦

最新推荐文章于 2023-10-27 16:08:22 发布

阅读量242

点赞数 1

分类专栏： html5

本文链接：https://blog.csdn.net/m0_51172014/article/details/115497790

版权

html

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

h5 自适应原来这么好用，还不赶紧学起来！

今天做了一个网页的首页哦，熟练运用float，background，margin，font，div，id啦！

希望下次可以用class嘻嘻~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,ul,li {padding: 0px; margin: 0px}

        #container {
            width: 90%;
            height: 600px;
            margin: 0px auto;
        }

        #topper{
            width: 100%;
            height: 6%;
            background-color: #5b945b;
        }
        #ul1{
            list-style: none;
        }
        #li1{
            float: left;
            width: 7%;
            height:6%;
            text-align: center;
            line-height: 36px;
            font-size: 12px;
            border-right:1px solid white;
        }
        #li4{
            float: left;
            width: 7%;
            height:6%;
            text-align: center;
            line-height: 36px;
            font-size: 12px;
        }
        #li2{
            float: right;
            width: 6%;
            height:6%;
            text-align: center;
            line-height: 36px;
            font-size: 12px;
            border-right:1px solid white;
        }
        #li3{
            float: right;
            width: 6%;
            height:6%;
            text-align: center;
            line-height: 36px;
            font-size: 12px;
            margin-right: 6%;
        }


        #head{
            width: 100%;
            height: 12%;
            background-color: white;
        }
        #ul2{
            list-style: none;
        }
        #li5{
            float: left;
            width: 17%;
            height:12%;
            text-align: center;
            line-height: 72px;
            font-size: 40px;
            margin-left: 3%;
            font-weight: 600;
        }
        #li6{
            float: right;
            width: 6%;
            height:12%;
            text-align: center;
            line-height: 72px;
            font-size: 12px;
            font-weight: 600;
        }
        #li7{
            float: right;
            width: 6%;
            height:12%;
            text-align: center;
            line-height: 72px;
            font-size: 12px;
            margin-right: 6.5%;
            font-weight: 600;
        }


        #content{
            width: 100%;
            height: 46%;
            background-image: url("pic1.jpg");
            background-size: 100%;
        }
        #ul3{
            list-style: none;
        }
        #li8{
            height: 120px;
            text-align: center;
            line-height: 160px;
            font-size: 25px;
        }
        #li9{
            height:20px;
            text-align: center;
            line-height: 10px;
            font-size: 14px;
        }


        #menu{
            width: 100%;
            height: 25%;
            background-color: white;
        }
        #ul5{
            list-style: none;
        }
        #li15{
            float: left;
            width:10%;
            height: 90px;
            background-color: #009f5a;
            background-image: url(p1.png);
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            margin-left: 3%;
            margin-top: 30px;
        }
        #li11{
            float: left;
            width: 12.5%;
            height: 90px;
            background-color:#009f5a ;
            margin-top: 30px;
            line-height: 90px;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
        }
        #li16{
            float: left;
            width:10%;
            height: 90px;
            background-color: #cfcfcf;
            background-image: url(p2.png);
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            margin-left: 10px;
            margin-top: 30px;
        }
        #li12{
            float: left;
            width: 12.5%;
            height: 90px;
            background-color: #cfcfcf;
            margin-top: 30px;
            line-height: 90px;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
        }
        #li17{
            float: left;
            width:10%;
            height: 90px;
            background-color: #009f5a;
            background-image: url(p3.png);
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            margin-left: 10px;
            margin-top: 30px;
        }
        #li13{
            float: left;
            width: 12.5%;
            height: 90px;
            background-color:#009f5a ;
            margin-top: 30px;
            line-height: 90px;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
        }
        #li18{
            float: left;
            width:10%;
            height: 90px;
            background-color: #cfcfcf;
            background-image: url(p4.png);
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            margin-left: 10px;
            margin-top: 30px;
        }
        #li14{
            float: left;
            width: 12.5%;
            height: 90px;
            background-color: #cfcfcf;
            margin-top: 30px;
            line-height: 90px;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
        }



        #footer{
            width: 100%;
            height: 11%;
            background-color:#5b945b;
            border-bottom:2px solid black;
        }
        #ul4{
            list-style: none;
        }
        #li10{
            height:11%;
            text-align: center;
            line-height: 110px;
            font-size: 7px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="topper">
            <ul id="ul1">
                <li id="li1" style="color: white">社区</li>
                <li id="li1" style="color: white">助手</li>
                <li id="li1" style="color: white">动态</li>
                <li id="li4" style="color: white">云服务</li>
                <li id="li3" style="color: white">注册</li>
                <li id="li2" style="color: white">登录</li>
                <li id="li2" style="color: white">搜索</li>
            </ul>
        </div>
        <div id="head">
            <ul id="ul2">
                <li id="li5" style="color: #21762b">Logo</li>
                <li id="li7" style="color: black">服务</li>
                <li id="li6" style="color: black">体验店</li>
                <li id="li6" style="color: black">在线商城</li>
                <li id="li6" style="color: black">品牌</li>
                <li id="li6" style="color: black">产品</li>
                <li id="li6" style="color: black">首页</li>
            </ul>
        </div>
        <div id="content">
            <ul id="ul3">
                <li id="li8" style="color: white">发现生活的趣味和美好</li>
            </ul>
            <ul id="ul3">
                <li id="li9" style="color: white">旅行中、生活中，XXXX手机帮助您记录一个个精彩画面。感谢您的分</li>
                <li id="li9" style="color: white">享，在这里，您看到的都是XXXX手机拍摄的作品。</li>
            </ul>
        </div>
        <div id="menu">
            <ul id="ul5">
                <li id="li15"></li>
                <li id="li11" style="color: white"> 社区</li>
                <li id="li16"></li>
                <li id="li12" style="color: black">Color</li>
                <li id="li17"></li>
                <li id="li13" style="color: white">软件商店</li>
                <li id="li18"></li>
                <li id="li14" style="color: black">品牌中心</li>
            </ul>
        </div>
        <div id="footer">
            <ul id="ul4">
                <li id="li10" style="color: white">©2005-2016 XX市XXXX科技有限公司 版权所有 X ICP备00000000号-1</li>
            </ul>
        </div>
    </div>
</body>
</html>