作业暂时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>


<div class="parent">
<div class="child">
<div class="part_one">



<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>

<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>

<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 class="huanbao">环保评级：B (可以使用)</span></li>
</ul>
</div>
</div>
<div class="child">
<div>



<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>

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标
    各种纯css图标 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比...
    剑残阅读 9,700评论 0赞 8
  • 迅雷页面
    不会用代码框，所以看着有些乱套，，，，html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 1,564评论 0赞 0
  • Web端---常用的特效
    1. tab列表折叠效果 html: 能源系统事业部 岗位名称： 工作地点 岗位名...
    lilyping阅读 1,902评论 0赞 1
  • 我一出生，四面高墙
    我一出生，四面高墙。 我不知道墙外有什么，会发生什么。我仅仅明白一件事，自己一来到世上就成了孤儿。我没有一点哪怕是...
    秀你一周天阅读 456评论 0赞 0
  • 糖尿病的早期症状有哪些呢？
    糖尿病是一种常见慢性疾病，相信很多朋友对于糖尿病并不陌生，在现在生活中这种疾病也是非常的普遍。要知道早期的糖尿病是...
    夏日的小三阅读 159评论 0赞 1