京东商城简单布局

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

.disan ul{

list-style: none;

padding-top: 70px;

}

.taoer ul{

list-style: none;

}

.shouye{

width: 100%;

height: 40px;

background-color: red;

}

.dier{

padding-left: 180px;

width: 1300px;

height: 20px;

background-color: yellowgreen;

margin: 0 auto;

}

.disan{

width: 100%;

height: 100px;

background-color: orange;

}

.disi{

width: 1200px;

height: 632px;

/*background-color: skyblue;*/

margin: 0 auto;

}

/*.taoyi{

width:15%;

height: 632px;

background-color:#993300;

float: left;

}*/

.taoer{

width: 250px;

height: 632px;

background-color: red;

float: left;

}

.taosan{

width: 550px;

height: 632px;

background-color: yellow;

float: left;

}

.taosi{

width: 200px;

height: 632px;

background-color: red;

float: left;

}

.taowu{

width: 200px;

height: 632px;

background-color: yellowgreen;

float: left;

}

.diwu{

width: 1200px;

height: 844px;

background-color: #4ab14e;

margin: 10px auto;

}

.tao2yi{

width: 1200px;

height: 166px;

background-color: orange;

float:  left;

}

/* .nav{

list-style: none;

background-color: #bfa;

margin: 30px auto;

}*/

/* .lmk{

list-style: none;

background-color: #6495ed;

width: 1000px;

margin: 50px auto;

overflow: hidden;

}*/

li{

text-align: center;

width: 10%;

float: left;

}

.taoer p{

/* list-style: none;

padding-top: 70px

line-height:20px;*/

height: 40px;

margin-left: 40px;

/*添加行距离*/

}

.taoer a{

text-decoration: none;

/*去除下划线*/

}

.disna a{

text-decoration: none;

}

</style>

</head>

<body>

<div class = "shouye"></div>

<div class = "dier">

<!-- <ul>

<li><a href = "">秒杀</a></li>

<li><a href = "">优惠卷</a></li>

<li><a href = "">PLUS会员</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>

<div class = "disan">

<ul>

<li><a href = "">秒杀</a></li>

<li><a href = "">优惠卷</a></li>

<li><a href = "">PLUS会员</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>

<div class = "disi">

<div class = "taoyi"></div>

<div class = "taoer">

<ul>

<p><a href="">手机/运营商/数码</a></p>

<p><a href="">家用电器</a></p>

<p><a href="">电脑/办公</a></p>

<p><a href="">家具/家句/家装/厨具</a></p>

<p><a href="">男装/女装/童装/内衣</a></p>

<p><a href="">美妆/个人清理/宠物</a></p>

<p><a href="">女鞋/箱包/钟表/珠宝</a></p>

<p><a href="">男鞋/运动/户外</a></p>

<p><a href="">房产/汽车/汽车用品</a></p>

<p><a href="">母婴/玩具乐其</a></p>

<p><a href="">食品/酒类/生产/特鲜</a></p>

<p><a href="">艺术/礼品鲜花/浓汁驴子</a></p>

<p><a href="">医药保健/计生情趣</a></p>

<p><a href="">图文/文娱/电子书</a></p>

<p><a href="">机票/酒店/旅行/生活</a></p>

<p><a href="">工业品</a></p>

</ul>

</div>

<div class = "taosan">

<p><a href="#">

<img src="E:\1808前端\5bf25f8cN079d6326.jpg" alt="">

</a></p>

</div>

<div class = "taosi"></div>

<div class = "taowu"></div>

</div>

<div class = "diwu">

<div class = "tao2yi"></div>

</div>

</body>

</html>

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

推荐阅读更多精彩内容