DAY06

2018.07.16
绝对定位.PNG

1.相对定位

position:relative;
相对定位是相对于自己的位置而言,而且占据原来的位置;
相对定位.PNG

2.绝对定位

position:absolute;
绝对定位是相对于父级元素(父级元素必须有position,最好为position:relative;)的位置而言,而且不会占据原来的位置;
绝对定位.PNG

3.搜索框

搜索框.PNG
百度搜索框
百度搜索框.PNG

4.垂直水平居中

垂直水平居中.PNG
08.PNG
phone.PNG
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="base.css"/>
    <style>
        *{margin:0;padding:0}
        .logo{
            background:#70f3ff;
            line-height: 60px;
        }
        .logo img{
            display:block;
            margin-left: auto;
            margin-right: auto;
        }
         .header{background: rgba(128, 128, 128, 0.22)}
        .container{height:40px;width:1000px;text-align:center;
            line-height: 40px;
            margin-left:auto;
            margin-right:auto;
        }
        .start{float: left;;overflow:hidden}
        .end{float: right;overflow:hidden}
        .container a{margin-right:60px;text-decoration: none;font-size: 20px;color:#333;}
        .start>.icon{display: block;width:19px;height:19px;background:url("images4/location.png");
            position:absolute;top:50%;margin-top:-10px;margin-left:25px;

        }
        .start>.first{margin-left:60px;}
        .start,.end{position:relative}
        .end>.icon{
            top:50%;
            margin-top:-10px;
            position:absolute;width:19px;height:19px;
        }
        .end>.adm{
            padding-left:20px;
        }
        .start,.end{font-size: 12px;cursor:pointer}
        .middle{
            width: 1000px;
            height: auto;
            overflow: auto;
            margin-left: auto;
            margin-right: auto;
        }
        .middle1{
            height:auto;
            margin-left: auto;
            margin-right: auto;
            overflow: auto;
        }
        .middle11{
            float: left;
            padding-left: 10px;
            margin-top:10px;
            margin-bottom:10px;
        }
        .middle11:not(:last-child):after{
            content:">";
        }
        .middle2{
            width: auto;
            height: auto;
            overflow: auto;
            background: #f0f0f4;
        }
        .middle2>ul{
            list-style: none;
            overflow: auto;
        }
        .middle2>ul>li{
            display: block;
            overflow: auto;
        }
        .middle2>ul>li>div{
            float:left;
            margin: 10px;
            color:aqua;
         }
        .middle2>ul>li>ul{
            list-style: none;
            float:left;
        }
        .middle2>ul>li>ul>li{
            float:left;
            margin: 10px;
            border: 1px solid transparent;
        }
        .middle2>ul>li>ul>li:hover{
            border: 1px solid #ffb61e;
        }
        .middle3{
            text-align:center;
            background-color: rgba(128, 128, 128, 0.22);
            overflow: auto;
            padding-top: 10px;
            padding-bottom: 10px;
         }
         .middle3>div{
             display: inline-block;
         }
        .middle31{
            float:left;
            margin-left:10px;  
         }
        .middle32{
            overflow: auto;
            text-align: center;
            background-color: white;
            width: 240px;
        }
        .middle32>input{
            outline: none;/*隐藏input的边框*/
            border: none;
        }
        .middle321{
            display: inline-block;
        }
        .middle33{
            float:right;
            margin-right: 10px;
        }
        .middle33 a{
            color:aqua;
        }
        .middle33>a>img{
            position: relative;/*修改小人图片的位置*/
            top: 3px;/*下移*/
            right: 5px; /*左移*/
        }
        .middle4{
            width:auto;
            margin-left:auto;
            margin-right:auto;
         
           
        }
        .middle4>div{
            float:left;
            width:235px;
            height:300px;
            margin-bottom: 15px;
            padding: 15px;
            box-sizing: border-box;
            /* border:5px solid white; */
            /* background-color: rgb(239,239,239); */
            border: 1px solid black;
        }
        .row:after{
            content:"";display:table;clear:both;
        }
        .middle4>.middle41:not(:last-child){
            margin-right: 13.222222px;
        }
        .middle41>p{
            font-size: 12px;
        }
        .middle41>p:last-child>span{
            font-size: 12px;
        }
        .middle41>p:last-child{
            font-size: 16px;
            font-weight: bold;
            color: aqua;
        }
        .middle41:hover{
            color:#ffb61e;
        }
        .middle41:hover>p:last-child{
            color:#ffb61e;
        }
        .middle5{
            width:700px;
            text-align:center;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .middle51{
            width:auto;
            float:left;
            overflow: auto;
        }
        .middle511{
            background: rgba(128, 128, 128, 0.22);
            width:auto;
            float:left;
            margin-right:20px;
        }
        .middle512{
            display: inline-block;/*使12345上去*/
        }
        .middle512:last-child{
            margin-right:20px;
        }
        .middle512>a{
            color:black;
            text-decoration:none;
        }
        .middle512>a:hover{
            text-decoration:underline; 
            color:orange;
        }
        .middle513{
            background: rgba(128, 128, 128, 0.22);
            width:auto;
            float:right;
            margin-right:100px;
        }
        .middle52{
            float:left;
            margin-left: 150px;
            overflow: auto;
        }
        .middle52>a>button{
            background:orange;
            color:white;
            width:65px;
            height:25px;
            border:0px solid transparent;/*去除按钮边框*/
        }
        .middle52>a>input{
            height:20px;
            width:20px;
        }
        .middle6{
            text-align: center;
            margin-top:20px;
        }
        .middle6>img{
            height:70px;
            width: 70px;
            float:left;
         }
        .middle611{
            color:aqua;
            font-size: 20px;
            margin-top:20px;
            margin-bottom: 10px;
            text-align: left;
            text-indent: 20px;
        }
        .middle61>p{
            text-align:left;
            text-indent: 20px;/*设置文字与图片间的间距*/
        }
        .middle7{
            overflow: auto;
            background: #808080;
            margin-top:10px;
        }
        .middle71{
            width: 1000px;
            height: auto;
            margin-left: auto;
            margin-right: auto;
            overflow: auto;
        }
        .middle711{
            overflow: auto;
            border-bottom:1px solid whitesmoke;
            margin-right:20px;
        }
        .middle711 p{
            color:whitesmoke;
        }
        .middle7111{
            float:left;
            margin-right:60px;
            margin-bottom:10px;
        }
        .middle7111>a>img{
            height:20px;
            margin-bottom:5px;
        }
      
        
        .middle7112{
            float:left;
            margin-top:27px;
            margin-right:60px;
            margin-bottom:5px;
        }
        .middle7112>p{
            color:whitesmoke;
        }
        .middle7113{
            float:left;
            margin-right:60px;
            margin-top:27px;
            margin-bottom:5px;
        }
        .middle7113>p{
            color:whitesmoke;
        }
        .middle7114{
            float:left;
            margin-top:27px;
            margin-bottom:5px;
        }
        .middle7114>p{
            color:whitesmoke;
        }
        .middle7114>p>img{
            height:15px;

        }
        .middle712{
            overflow: auto;
            color:whitesmoke;
            margin-top:5px;
        }
    </style>
</head>
<body>
<div class="logo">
    <img src="images4/logo.png">
</div>
<div class="header">
    <div class=" center container">
        <a href="#">首页</a>
        <a href="#">咨询</a>
        <a href="#">测评</a>
        <a href="#">商城</a>
        <div class="start">
            <i class="icon"></i>
            <span class="text first">深圳</span>
            <span class="text">切换</span>
        </div>
        <div class="end">
            <span class="icon"></span>
            <span class="adm">个人中心</span>
        </div>
    </div>
</div>
<div class="middle">
   <div class="middle1">
       <div class="middle11">首页</div>
       <div class="middle11">预防装修污染</div>
       <div class="middle11">材料库</div>
   </div>
   <div class="middle2">
     <ul>
         <li>
             <div>类别</div>
             <ul>
                 <li>全部</li>
                 <li>地板</li>
                 <li>涂料</li>
                 <li>墙纸</li>
                 <li>瓷砖</li>
                 <li>粘胶剂</li>
                 <li>油漆</li>
                 <li>家具</li>
                 <li>板材</li>
                 <li>饰品</li>
             </ul>
         </li>
         <li>
            <div>类型</div> 
            <ul>
                <li>全部</li>
            </ul>
         </li>
         <li>
           <div>材质</div>
             <ul>
               <li>全部</li>
               <li>实木</li>
               <li>复合</li>
               <li>强化</li>
               <li>其他</li>
             </ul>
         </li>
         <li>
             <div>品牌</div>
             <ul>
                 <li>圣象</li>
                 <li>大自然</li>
                 <li>生活家</li>
                 <li>北美枫情</li>
                 <li>德尔</li>
                 <li>博典</li>
                 <li>船王</li>
             </ul>
         </li>
     </ul>
    </div>
    <br>
    <div class="middle3">
        <div class="middle31">
            <a>发布时间<img src="images4/downicon.png">价格<img src="images4/upicon.png">环保节能<img src="images4/upicon.png"></a>
        </div>
        <div class="middle33">
            <a><img src="images4/wenhao.png">了解家居医生建材环保评级标准</a>
        </div>
        <div class="middle32">
            <input type="text">
            <img src="images4/search.png">
            <div class="middle321">搜索</div>
        </div>
    </div>
    <br>
    <div class="middle4 row">
         <div class="middle41">
            <img src="images4/data_image.png">
            <p>德尔&nbsp;&nbsp;都市系列3001</p>
            <p>木地板&nbsp;复合地板</p>
            <p>单价:&nbsp;128/m<sup>2</sup> </p>
            <p>环保评级:&nbsp;B&nbsp;<span>(可以使用)</span></p>
        </div>
         <div class="middle41">
            <img src="images4/data_image.png">
            <p>德尔&nbsp;&nbsp;都市系列3001</p>
            <p>木地板&nbsp;复合地板</p>
            <p>单价:&nbsp;128/m<sup>2</sup> </p>
            <p>环保评级:&nbsp;B&nbsp;<span>(可以使用)</span></p>
        </div>
        <div class="middle41">
            <img src="images4/data_image.png">
            <p>德尔&nbsp;&nbsp;都市系列3001</p>
            <p>木地板&nbsp;复合地板</p>
            <p>单价:&nbsp;128/m<sup>2</sup> </p>
            <p>环保评级:&nbsp;B&nbsp;<span>(可以使用)</span></p>
        </div>
        <div class="middle41">
            <img src="images4/data_image.png">
            <p>德尔&nbsp;&nbsp;都市系列3001</p>
            <p>木地板&nbsp;复合地板</p>
            <p>单价:&nbsp;128/m<sup>2</sup> </p>
            <p>环保评级:&nbsp;B&nbsp;<span>(可以使用)</span></p>
        </div>
         
         <div class="middle41">
            <img src="images4/data_image.png">
            <p>德尔&nbsp;&nbsp;都市系列3001</p>
            <p>木地板&nbsp;复合地板</p>
            <p>单价:&nbsp;128/m<sup>2</sup> </p>
            <p>环保评级:&nbsp;B&nbsp;<span>(可以使用)</span></p>
        </div>
         <div class="middle41">
            <img src="images4/data_image.png">
            <p>德尔&nbsp;&nbsp;都市系列3001</p>
            <p>木地板&nbsp;复合地板</p>
            <p>单价:&nbsp;128/m<sup>2</sup> </p>
            <p>环保评级:&nbsp;B&nbsp;<span>(可以使用)</span></p>
        </div>
         <div class="middle41">
           <img src="images4/data_image.png">
            <p>德尔&nbsp;&nbsp;都市系列3001</p>
            <p>木地板&nbsp;复合地板</p>
            <p>单价:&nbsp;128/m<sup>2</sup> </p>
            <p>环保评级:&nbsp;B&nbsp;<span>(可以使用)</span></p>
        </div>
         <div class="middle41">
            <img src="images4/data_image.png">
            <p>德尔&nbsp;&nbsp;都市系列3001</p>
            <p>木地板&nbsp;复合地板</p>
            <p>单价:&nbsp;128/m<sup>2</sup> </p>
            <p>环保评级:&nbsp;B&nbsp;<span>(可以使用)</span></p>
        </div>
    </div>
    <div class="middle5">
        <div class="middle51">
            <div  class="middle511">上一页</div>
            <div  class="middle513">下一页</div>
            <div  class="middle512">
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
            </div>
        </div>
        <div class="middle52">
            <a>共有10页,去第<input type="text">页&nbsp;&nbsp;<button>确定</button></a>
        </div>
    </div>
    <div class="middle6">
        <img src="images4/small_weixin.png">
        <div  class="middle61">
            <p class="middle611">建材检测 需求反馈</p>
            <p>亲爱的用户,我们正在不断的完善和更新建材库,</p>
            <p>若没有找到您想要的材料信息,请将您想测的建材告诉我们。</p>
       </div>
    </div>
</div>
    <div class="middle7">
      <div class="middle71">
         <div class="middle711" >
            <div class="middle7111">
                <a href="#"><img src="images4/footerLogo.png"></a>
                <p>为室内环境健康把好每一关</p>
                <p>家居医生致力于中国人的家居健康问题,通过专业的技术研究</p>
                <p>和测评,倾力协助大众打造绿色、环保的人居生活环境</p>
            </div>
            <div class="middle7112">
                <p>关于我们</p>
                <p>联系我们</p>
                <p>加入我们</p>
            </div>
            <div class="middle7113">
                <p>版权说明</p>
                <p>用户隐私</p>
                <p>加入我们</p>
            </div>
            <div class="middle7114">
                <p><img src="images4/weixin2.png">官方微信</p>
                <p><img src="images4/tianmao.png">天猫旗舰店</p>
                <p><img src="images4/shop.png">有赞商城</p>
            </div>
        </div>
        <div class="middle712">
           <p>深圳建筑科学研究院股份有限公司&nbsp;&nbsp;家居医生网&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>粤ICP备08011321号 @Copyright All Rights Reserved</span></p>
         </div>
      </div>
    </div>
</body>
</html>

float和position是难点,我掌握的很不好,希望自己能多加练习。这个代码是我目前为止写的最长的代码,也许上面有很多错误,但我还是要发出来,因为做这个作业真的很艰难,但本着不放弃的原则,我还是做出来了,我觉得很有意义。以后遇到难题也不要怂,就是敲,不懂就问,相信自己。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,432评论 0 5
  • 作为一个懒到家的胖子及健身小白,我要开始健身了。TED有个演讲时说你有什么目标的时候就静静的去做就好了,不要和别人...
    佰洁桑的小确幸阅读 381评论 4 0
  • 作业1:好好回想一下,小时候呆呆看过什么。挑选一个印象或一幅画面写出来。 想起高二分班的时候,本来一心向“理”的我...
    丹Dane阅读 152评论 2 0
  • 众所周知,Xcode的插件能够极大地提高我们的开发效率,方便码代码,因此本人对于Xcode的插件也是情有独钟,但是...
    Ke_Wang阅读 14,883评论 43 21