homework05.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/homework05.css">
    <title>Document</title>
</head>

<body>
    <div class="top"></div>
    <!-- 导航栏 -->
    <div class="header">
        <div class="navbar">
            <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="container">
        <p>首页>预防装修污染>材料库</p>
        <div class="nav">
            <table>
                <tr>
                    <td>类别</td>
                    <td>全部</td>
                    <td>地板</td>
                    <td>涂料</td>
                    <td>墙纸</td>
                    <td>瓷砖</td>
                    <td>粘胶剂</td>
                    <td>油漆</td>
                    <td>家具</td>
                    <td>板材</td>
                    <td>饰品</td>
                    <td><img src="images/indexSelect.png" alt=""></td>
                </tr>
                <tr>
                    <td>类型</td>
                    <td>全部</td>
                </tr>
                <tr>
                    <td>材质</td>
                    <td>全部</td>
                    <td>实木</td>
                    <td>复合</td>
                    <td>强化</td>
                    <td>其他</td>
                </tr>
                <tr>
                    <td>品牌</td>
                    <td>全部</td>
                    <td>圣象</td>
                    <td>大自然</td>
                    <td>生活家</td>
                    <td>北美枫情</td>
                    <td>德尔</td>
                    <td>博典</td>
                    <td>船王</td>
                </tr>
            </table>
        </div>

        <div class="search">
            <div class="sort">
                <div class="sort-left">
                    <a href="#">发布时间&nbsp;&nbsp;</a>
                    <img src="images/downicon.png" alt="">
                    <a href="#">&nbsp;&nbsp;&nbsp;价格&nbsp;&nbsp;</a>
                    <img src="images/upicon.png" alt="">
                    <a href="#">&nbsp;&nbsp;&nbsp;环保节能&nbsp;&nbsp;</a>
                    <img src="images/upicon.png" alt="">
                </div>
                <div class="sort-middle">
                    <input class="inp" type="text">
                    <img src="images/search.png" alt="">
                    <button class="search-input">&nbsp;搜索&nbsp;</button>
                </div>
                <div class="sort-right">
                    <img src="images/wenhao.png" alt="">
                    <a href="#">了解家居医生建材环保评级标准</a>
                </div>
            </div>
        </div>
        <div class="list">
            <div><img src="images/data_image.png" alt="">
                <div><b>德尔</b>&nbsp;&nbsp;都市系列 3001</div>
                <div>木地板 - 复合地板</div>
                <div>单价：128元/m²</div>
                <div class="special"><b>环保评级：B</b>(可以使用)</div>
            </div>
            <div><img src="images/data_image.png" alt="">
                <div><b>德尔</b>&nbsp;&nbsp;都市系列 3001</div>
                <div>木地板 - 复合地板</div>
                <div>单价：128元/m²</div>
                <div class="special"><b>环保评级：B</b>(可以使用)</div>
            </div>
            <div><img src="images/data_image.png" alt="">
                <div><b>德尔</b>&nbsp;&nbsp;都市系列 3001</div>
                <div>木地板 - 复合地板</div>
                <div>单价：128元/m²</div>
                <div class="special"><b>环保评级：B</b>(可以使用)</div>
            </div>
            <div><img src="images/data_image.png" alt="">
                <div><b>德尔</b>&nbsp;&nbsp;都市系列 3001</div>
                <div>木地板 - 复合地板</div>
                <div>单价：128元/m²</div>
                <div class="special"><b>环保评级：B</b>(可以使用)</div>
            </div>
            <div><img src="images/data_image.png" alt="">
                <div><b>德尔</b>&nbsp;&nbsp;都市系列 3001</div>
                <div>木地板 - 复合地板</div>
                <div>单价：128元/m²</div>
                <div class="special"><b>环保评级：B</b>(可以使用)</div>
            </div>
            <div><img src="images/data_image.png" alt="">
                <div><b>德尔</b>&nbsp;&nbsp;都市系列 3001</div>
                <div>木地板 - 复合地板</div>
                <div>单价：128元/m²</div>
                <div class="special"><b>环保评级：B</b>(可以使用)</div>
            </div>
            <div><img src="images/data_image.png" alt="">
                <div><b>德尔</b>&nbsp;&nbsp;都市系列 3001</div>
                <div>木地板 - 复合地板</div>
                <div>单价：128元/m²</div>
                <div class="special"><b>环保评级：B</b>(可以使用)</div>
            </div>
            <div><img src="images/data_image.png" alt="">
                <div><b>德尔</b>&nbsp;&nbsp;都市系列 3001</div>
                <div>木地板 - 复合地板</div>
                <div>单价：128元/m²</div>
                <div class="special"><b>环保评级：B</b>(可以使用)</div>
            </div>
        </div>
        <!-- 分页 -->
        <div class="page">
            <div>上一页</div>
            <div>1 <span>2</span> 3 4 5 </div>
            <div>下一页</div>
            <div>共有10页，去第<input type="text">页</div>
            <button>确定</button>
        </div>
        <!-- 反馈二维码 -->
        <div class="feedback">
            <img src="images/small_weixin.png" alt="">
            <div>
                <p>建材检测 需求反馈</p>
                <p>亲爱的用户，我们正在不断完善和更新建材库，</p>
                <p>若没有找到您想要的材料信息，请将您想测的建材告诉我们。</p>
            </div>

        </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
        <div class="foot-content">
            <img src="images/footerLogo.png" alt="">
            <div>
                <div>
                    <p><b>为室内环境健康把好每一关</b></p><br>
                    <p>家居医生致力于中国人的家居健康问题，通过专业的技术研究</p>
                    <p>和测评，倾力协助大众打造绿色、环保的人居生活环境。</p>
                </div>
                <div>
                    <table>
                        <tr>
                            <td>关于我们</td>
                            <td>版权说明</td>
                            <td><img src="images/weixin2.png" alt="">官方微信</td>
                        </tr>
                        <tr>
                            <td>联系我们</td>
                            <td>用户隐私</td>
                            <td><img src="images/tianmao.png" alt="">天猫旗舰店</td>
                        </tr>
                        <tr>
                            <td>加入我们</td>
                            <td>免责申明</td>
                            <td><img src="images/shop.png" alt="">有赞商城</td>
                        </tr>
                    </table>
                </div>
            </div>
            <hr>
            <div>
                <p>深圳建筑科学研究院股份有限公司&nbsp;&nbsp;家居医生网</p>
                <p>粤ICP备08011321号&copy;Copyright All Rights Reserveed</p>
            </div>
        </div>
    </div>
</body>

</html>