自适应html，在调整一下html，做成淘宝

来源：互联网发布：linux 一键还原编辑：程序博客网时间：2024/06/05 17:29
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>    </title>    <style>        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:0; padding:0; }        body { font-size:12px; color:#666; font-family:Verdana, Microsoft YaHei, Simsun; background:#fff; line-height:24px; }        fieldset, img { border:0; }        ol, ul { list-style:none; }        h1, h2, h3, h4, h5, h6{ font-size:100%; }        em { font-style:normal; }        input, button, select, textarea { outline:none; }        textarea { resize:none; } //禁用了文本的拖拉，尤其在谷歌下                                    p{ text-align:justify; text-justify:distribute;} //为了使文本段落左右两边对齐                                                                                       a { color: #666; text-decoration:none; }        a:hover { color: #f60; text-decoration:none;        }        body{            margin: 0;;            width: 100%;            height: 100%;            background-color: #ff6600;        }        .headborder{            width:60%;            height:40em;            margin:0 auto;            background-color: #00cccd;        }        .title{         position: relative;            top: 5em;            width: auto;            height: 2em;            background-color: #c1ff00;        }        .WeX5{            width:60%;            height:40em;            margin:0 auto;            background-color: #000000;        }         .title .titleTexture{                    position: absolute;                    right:13em;                    top:-2.8em;                    float: left;                    display: inline;                    width: 24em;                    height:8em;                    background-color: #f9fa58;                    background-repeat: no-repeat;                    background-position:55%;                    background-size: 100%;                    background-image: url("http://img.blog.csdn.net/20151126152030594?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center");                    background-color: #f9fa58;                }        .pading1{            position: absolute;            float: left;            line-height:2em;            text-decoration: none;            margin-left: 15em;            font-size: 100%;            white-space:nowrap;        }        .pading2{            position: absolute;            float: left;            line-height:2em;            font-size: 100%;            text-decoration: none;            margin-left: 23em;            white-space:nowrap;        }        .pading3{            position: absolute;            float: left;            line-height:2em;            font-size: 100%;            text-decoration: none;            margin-left: 31em;            white-space:nowrap;        }        .pading4 {            position: relative;            float: right;            line-height: 2em;            font-size: 100%;            text-decoration: none;            margin-right: 3em;            white-space:nowrap;        }        .title .titieICON{            position: relative;            left:4em;            top:-2.8em;            float: left;            display: inline;            width: 8em;            height:8em;            background-color: #c1ff00;        }        .sexHero{            position: relative;            top:30%;            left:5%;            width: 220px;            height:300px;            background-image: url("http://img.blog.csdn.net/20151126150642051?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center");            background-color: #f9fa58;        }    </style>    <script>        function alertWindow (){            alert("Hello Teacher love you");        }    </script><body>   <div class="headborder">       <div class="title">              <div class="titieICON"></div>              <div class="titleTexture"></div>              <ul>                  <li class="pading1">首页</li>                  <li class="pading2">商店</li>                  <li class="pading3">开发中...</li>                  <li class="pading4">注册</li>                  <li class="pading4">登陆</li>              </ul>             <!-- <a href="" class="pading1">首页</a>              <a href="" class="pading2">商店</a>              <a href="" class="pading2">开发中...</a>              <a href="" class="pading3">登陆</a>              <a href="" class="pading3">注册</a>-->       </div>       <div class="sexHero"></div>   </div>   <div class="WeX5">       <input id = "submitJS" type="button" value="苍老师有话说请点击" onclick="alertWindow()">   </div></body></html>
0 0