作业暂时day03

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}

    body {
        color: #333;
    }

    body a {
        color: #333;
    }

    a {
        text-decoration: none
    }

    /*设置toptpop背景及宽度*/
    .toptop {
        background: #19bebe;
        height: 50px;
    }

    /*设置toptop内图片的位置*/
    .im {
        height: 50px;
        margin-right: auto;
        margin-left: auto;
        display: block;

    }

    /*设置整个top位置背景及高度*/
    .top {
        background-color: #f0f0f0;
    }

    /*设置左边start元素*/
    .start {
        float: left;
        font-size: 12px;
    }

    /*设置中间container*/
    .container {
        text-align: center;
        line-height: 40px;
        width: 1000px;
        font-size: 20px;
        margin-left: 400px;
    }

    /*设置top模块end元素的参数*/
    .end {
        float: right;
        font-size: 12px;
    }

    /*设置container元素内四个a标签的位置*/
    .container a {
        margin-right: 60px;
        text-decoration: none;
        font-size: 20px;
        color: #333;
    }

    /*设置start模块内icon元素的参数*/
    .start > .icon {
        display: block;
        width: 19px;
        height: 19px;
        background: url(img/location.png);
        position: absolute;
        top: 50%;
        margin-top: -10px;

    }

    .start > .first {
        margin-left: 30px;
    }

    .start, .end {
        position: relative
    }

    /*设置end模块内icon元的参数*/
    .end > .icon {
        top: 50%;
        margin-top: -10px;
        margin-left: -30px;
        position: absolute;
        width: 20px;
        height: 20px;
        background: url(img/adm.png);
    }

    .content {
        margin-left: auto;
        margin-right: auto;
        width: 1000px;
        margin-top: 20px;
    }

    .icon {
        font-size: 18px;
    }

    .head {
        width: 1000px;
        background-color: #ebebeb;
    }

    .head ul {
        overflow: hidden;
        list-style: none
    }

    .head li {
        float: left;
        margin: 10px;
    }

    .head li a {
        border: 1px solid transparent;
        padding: 3px;
    }

    .head li a:hover {
        background-color: #fff;
        border: 1px solid #ffa700
    }

    ul li span.index {
        display: block;
        width: 20px;
        height: 20px;
        margin-left: -10px;
        background: #ebebeb url(img/indexSelect.png) no-repeat center center;
    }

    .searchWrap {
        width: 1000px;
        height: 60px;
        line-height: 60px;;
        margin-left: auto;
        margin-right: auto;
        display: block;
        background-color: #f0f0f0;
        margin-top: 20px;
    }

    .searchStart {
        float: left;
        font-size: 5px;
        position: relative;
        overflow: hidden;
    }

    .searchStart li {
        float: left;
        margin-right: 8px;
        list-style: none;
    }

    .searchEnd {
        float: right;
        position: absolute;
        margin-left: 800px;
    }

    .searchContent {
        position: absolute;
        margin-left: 400px;
    }

    /*searchContnet设置结束*/

    /*设置parent八个模块图片框*/
    .parent {
        font-size: 14px;
        width: 1000px;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto
    }

    .parent > div {
        width: 238px;
        border: 1px solid #dedede;
        height: 344px;
        float: left
    }
    .searchEnd a{color:#f7cd91;}
    .parent>div.child{color:#f7cd91;}
    .parent > .child {
        margin-right: 13px;
    }

    .parent > .two {
        margin-right: 14px;
    }

    .parent {
        width: 1000px;
        overflow: hidden;
        margin-top: 50px;
    }

    .parent > div {
        width: 238px;
        border: 1px solid #dedede;
        height: 344px;
        float: left;
        background: #dedede;
        overflow: hidden;
        text-align: center;
    }

    .parent span.huanbao {
        font-weight: bold;
        font-size: 16px;
    }

    .parent > .child {
        margin-right: 13px;
    }

    .parent > .two {
        margin-right: 14px;
    }

    .parent ul.wrapOne {
        text-align: left !important;
        text-indent: 10px;;
    }

    img.pic {
        margin-top: 20px;

    }

    .parentOne {
        font-size: 14px;
        width: 1000px;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto
    }

    .parentOne > div {
        width: 238px;
        border: 1px solid #dedede;
        height: 344px;
        float: left
    }

    .parentOne > .child {
        margin-right: 13px
    }

    .parentOne > .two {
        margin-right: 14px;
    }

    .parentOne {
        width: 1000px;
        overflow: hidden;
        margin-top: 50px;
    }

    .parentOne > div {
        width: 238px;
        border: 1px solid #dedede;
        height: 344px;
        float: left;
        background: #dedede;
        overflow: hidden;
        text-align: center;
    }

    .parentOne span.huanbao {
        font-weight: bold;
        font-size: 16px;
    }

    .parentOne > .child {
        margin-right: 13px;
    }

    .parentOne > .two {
        margin-right: 14px;
    }

    .parentOne ul.wrapOne {
        text-align: left !important;
        text-indent: 10px;;
    }

    /*设八个图片框结束*/
    /*设置尾部结束界面*/
    .footer_end{
        text-align: center;
        margin-right: auto;
        margin-left: auto;
        width: 1000px;
        height:30px
    }
    .down {
        height: 30px;
        background: white;
        margin-top: 20px;
        list-style: none;
        overflow: hidden;
        font-size: 5px;
        position: relative;
        line-height: 10px;
    }

    .down_one {
        float: left;
        margin-left: 100px;
        position: absolute;
    }

    .down_three {
        float: right;
        margin-right: 300px;
        margin-top: -15px;
        background-color:#f7cd91;
    }
    .last{overflow: hidden;
        height:80px;
        width: 500px;
        position: relative}
    .last_one{float: left;
        position: absolute}

</style>

</head>
<body>
<div class="toptop">

</div>
<div class="top">

<div class="container">

    <div class="start">
        <i class="icon"></i>
        <span class="text first">深圳</span>
        <span class="text">切换</span>
    </div>

    <a href="#">首页</a>
    <a href="#">资讯</a>
    <a href="#">测评</a>
    <a href="#">商城</a>

    <div class="end">
        <span class="icon"></span>
        <span>个人中心</span>
    </div>
</div>

</div>

<div class="content">
<span class="icon">首页> 预防装修材料 >材料库</span>

<div class="head">
    <ul>
        <li><a href="#">类别</a></li>
        <li><a href="#">全部</a></li>
        <li><a href="#">地板</a></li>
        <li><a href="#">涂料</a></li>
        <li><a href="#">墙纸</a></li>
        <li><a href="#">瓷砖</a></li>
        <li><a href="#">粘胶剂</a></li>
        <li><a href="#">油漆</a></li>
        <li><a href="#">家具</a></li>
        <li><a href="#">板材</a></li>
        <li><a href="#">饰品</a></li>
        <li><span class="index"></span></li>
    </ul>
    <ul>
        <li><a href="#">类型</a></li>
        <li><a href="#">全部</a></li>
    </ul>
    <ul>
        <li><a href="#">材质</a></li>
        <li><a href="#">全部</a></li>
        <li><a href="#">实木</a></li>
        <li><a href="#">复合</a></li>
        <li><a href="#">强化</a></li>
        <li><a href="#">其他</a></li>
    </ul>
    <ul>
        <li><a href="#">品牌</a></li>
        <li><a href="#">全部</a></li>
        <li><a href="#">圣象</a></li>
        <li><a href="#">大自然</a></li>
        <li><a href="#">生活家</a></li>
        <li><a href="#">北美枫情</a></li>
        <li><a href="#">德尔</a></li>
        <li><a href="#">博典</a></li>
        <li><a href="#">船王</a></li>
    </ul>
</div>
<!--startSearch-->
<div class="searchWrap">
    <ul class="searchStart">
        <li><a href="#">发布时间</a><span></span></li>
        <li><a href="#">价格</a><span></span></li>
        <li><a href="#">环保节能</a><span></span></li>
    </ul>

    <div class="searchContent">
        <input type="text" placeholder="搜索"/>
        <a></a>

        <span></span>
    </div>

    <div class="searchEnd">
        <span></span>
        <a href="#">了解家居医生建材环保</a>
    </div>

</div>
<!-- endSearch-->

</div>

<ul class="wrapOne">
<li> 德尔都市系列3001</li>
<li>木地板复合地板</li>
<li> 单价：128元/㎡</li>
<li><span class="huanbao">环保评级：B (可以使用)</span></li>
</ul>
</div>
</div>
<div class="child">
<div>

<ul class="wrapOne">
<li> 德尔都市系列3001</li>
<li>木地板复合地板</li>
<li> 单价：128元/㎡</li>

<ul class="wrapOne">
<li> 德尔都市系列3001</li>
<li>木地板复合地板</li>
<li> 单价：128元/㎡</li>
<li><span>环保评级：B (可以使用)</span></li>
</ul>
</div>
</div>
<div>
<div>

<ul class="wrapOne">
<li> 德尔都市系列3001</li>
<li>木地板复合地板</li>
<li> 单价：128元/㎡</li>
<li><span class="huanbao">环保评级：B (可以使用)</span></li>
</ul>
</div>
</div>

</div>
<div class="parentOne">
<div class="child">
<div class="part_one">

<ul class="wrapOne">
<li> 德尔都市系列3001</li>
<li>木地板复合地板</li>
<li> 单价：128元/㎡</li>
<li><span>环保评级：B (可以使用)</span></li>

</ul>
</div>
</div>
<div class="two">
<div>

<ul class="wrapOne">
<li> 德尔都市系列3001</li>
<li>木地板复合地板</li>
<li> 单价：128元/㎡</li>
<li><span>环保评级：B (可以使用)</span></li>
</ul>
</div>
</div>
<div>
<div>

</div>
<div class="footer_end">
<ul class="down">
<li class="down_one">
<a href="#">上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">下一页</a>
</li>
<li class="down_two"><a href="#">共有十页去第</a>
<input class="sex" type="text"/>
<a href="#">页</a>
</li>
<li class="down_three"><a href="#">确定</a></li>

</ul>

</div>
<div class="last">
<div class="last_one">
![](img/small_weixin.png alt=)
</div>
<div class="last_two">
<p>建材检测需求反馈</p>
<p>亲爱的用户，我们正在不断的完善和更新建材库</p>
<p>若没有找到你想要的材料信息，请将你想要的建材信息告诉我们。</p>
</div>
</div>

</body>
</html>

最后编辑于：2017.12.08 07:26:18

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,324评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,303评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,192评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,555评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,569评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,566评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,927评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,583评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,827评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,590评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,669评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,365评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,941评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,928评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,159评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,880评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,399评论 2赞 342

作业暂时day03

推荐阅读更多精彩内容