小米商城首页布局分解(3)

原创 2018-12-24 17:20:15 316
摘要:<!DOCTYPE html><html><head>    <meta charset="utf-8"> <title>小米商城</title>        <link rel="shortcut icon"

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>小米商城</title>    

    <link rel="shortcut icon" type="image/x-icon" href="static/img/footlogo.png"/>

<link rel="stylesheet" type="text/css" href="static/css/style.css">

    <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">

<script type="text/javascript" src="static/layui/layui.js"></script>

</head>

<body>

<!-- 头部 -->

<div class="header">

<div class="menu"></div>

</div>

    <!-- 主体部分 -->

<div class="contents">

<div class="content">

<div class="contentMenu"></div>

<div class="contentPic">

<div class="contentPic_l"></div>

<div class="contentPic_r"></div>

</div>

<div class="clear"></div>

<div class="contentPic_ul">

<div class="contentPic_ul_1"></div>

<div class="contentPic_ul_0" style="background:url(static/img/midAD1.jpg);"></div>

<div class="contentPic_ul_0" style="background:url(static/img/midAD2.jpg);"></div>

<div class="contentPic_ul_0" style="background:url(static/img/midAD3.jpg);"></div>

</div>

<!-- 小米闪购 -->

<div class="contentShop">

<h1>小米闪购</h1>

<div class="contentShop_1" style="margin-right:10px;border-top:1px solid red;"></div>

<div class="contentShop_1" style="margin-right:10px;border-top:1px solid yellow;"></div>

<div class="contentShop_1" style="margin-right:10px;border-top:1px solid green;"></div>

<div class="contentShop_1" style="margin-right:10px;border-top:1px solid blue;"></div>

<div class="contentShop_1" style="border-top:1px solid pink;"></div>

</div>

<div class="clear"></div>

<div class="contentImg" style="background:url(static/img/longAD1.jpg);"></div>

<div class="contentUL">手机</div>

<div class="contentPhone"></div>

<div class="contentImg" style="background:url(static/img/longAD2.jpg);"></div>

<div class="contentUL">智能</div>

<div class="contentPhone"></div>

<div class="contentImg" style="background:url(static/img/longAD3.jpg);"></div>

<div class="contentUL">家电</div>

<div class="contentPhone"></div>

<div class="contentImg" style="background:url(static/img/longAD4.jpg);"></div>

</div>


</div>

    <!-- 底部 -->

<div class="footers">

<div class="footer">网页底部</div>

</div>    

    

</body>

</html>


发布手记

热门词条