做的太慢了 下午有点事 先交了
实例
<!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">
<title>京东商城首页</title>
<link rel="stylesheet" href="/public/static/index/css/dd?a={:time()}">
</head>
<style>
* a {
text-decoration: none;
}
* ul {
list-style: none;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: #F4F4F4;
}
.flo .top {
/* width: 1800px; */
overflow: hidden;
/* height: 500px; */
background: pink;
}
.top-a {
display: block;
height: 80px;
width: 100%;
background: #FCDFB3;
position: relative;
}
.top-advertising {
background-image: url("//img10.360buyimg.com/da/jfs/t1/70963/12/9300/81149/5d6f6c55E6eb9846e/4a3d2e7ef773d906.jpg");
background-repeat: no-repeat;
height: 100%;
margin: 0 auto;
}
.main-width {
width: 60%;
}
.top-a .top-advertising .close {
position: relative;
top: 0;
left: 101%;
height: 20px;
width: 20px;
color: #fff;
font-size: 1.5rem;
display: inline-block;
background: #2d2d2d;
opacity: 0.2;
line-height: 20px;
}
.shortcut {
background: #E3E4E5;
}
.shortcut-main {
height: 30px;
margin: 0 auto;
line-height: 30px;
}
.shortcut-main .site {
/* line-height: 30px; */
color: #999999;
font-size: 0.9rem;
float: left;
}
.clear {
clear: both;
}
.right {
float: right;
overflow: hidden;
}
.right ul>li {
float: left;
color: red;
}
.right ul li {
color: #CCCCCC;
font-size: 0.2rem;
margin: 0px 8px;
}
.right ul li a {
font: 0.4em sans-serif;
color: #999;
height: 30px;
line-height: 30px;
}
.key {
font-size: 0.2 rem;
}
.seek {
height: 140px;
background: #fff;
}
.clear {
clear: both;
}
.seek-main {
position: relative;
overflow: hidden;
margin: 0 auto;
}
.seek-main .content {
width: 100%;
box-sizing: border-box;
padding: 0 200px;
height: 140px;
float: left;
background: #fff;
}
.seek-main .left {
float: left;
width: 190px;
margin: 10px 0px 10px -100%;
}
.seek-main .right {
float: left;
background: url("https://img10.360buyimg.com/babel/jfs/t1/42975/36/13847/40109/5d6f5ee4E7814b16b/c75a9f22eb2943d5.png");
/* margin-left: -190px; */
width: 190px;
height: 120px;
margin: 10px 0px 10px -190px;
}
.seek-main .left img {
height: 120px;
margin: 0 auto;
display: inline-block;
}
.content-top {
padding: 20px 0px 15px 40px;
box-sizing: border-box;
/* background: #FFF; */
/* margin-left: 20px; */
width: 100%;
overflow: hidden;
}
.content-top-left {
overflow: hidden;
float: left;
}
.content-top .search {
height: 30px;
width: 500px;
border: solid 2px #E1251B;
padding: 0px 55px 0px 0px;
float: left;
}
.content-top .submit {
height: 30px;
width: 55px;
background-color: #E1251B;
color: white;
text-align: center;
line-height: 30px;
margin: 2px 0px 0px -55px;
float: left;
}
.content-top .submit:hover {
background-color: #B90F08;
}
.content-top-right {
margin-left: 20px;
margin-top: 2px;
height: 30px;
width: 120px;
border: 1px solid #EEE;
float: left;
line-height: 30px;
text-align: center;
font-size: 0.5rem;
color: #E1251B;
}
.content-top-right:hover {
border: 1px solid #E1251B;
}
.bottom-nav {
overflow: hidden;
}
.bottom-nav .bottom-nav-item {
color: #999;
float: left;
margin: 10px 10px 0 0px;
}
.bottom-nav .bottom-nav-item:hover {
color: #E1251B;
}
.content-nav {
overflow: hidden;
padding-top: 15px;
}
.content-nav .content-nav-item {
float: left;
color: #333;
margin: 0 8px 0px;
}
.content-nav .content-nav-item:hover {
color: #E1251B;
}
.main {
margin: 0 auto;
}
.main .main-nav {
height: 470px;
margin-top: 20px;
overflow: hidden;
width: 100%;
background: #FFF;
}
.main-nav-content {
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 0 200px;
float: left;
background: #F4F4F4;
overflow: hidden;
}
.main-nav-left {
width: 190px;
float: left;
/* padding: 10px; */
margin-left: -100%;
height: 100%;
box-sizing: border-box;
background: #FFF;
}
.main-nav-right {
width: 190px;
box-sizing: border-box;
float: left;
padding: 10px;
margin-left: -190px;
background: green;
height: 100%;
}
.main-nav-left-ul .main-nav-item {
padding: 3.1px 10px;
font-size: 0.95rem;
}
.main-nav-left-ul .main-nav-item a {
color: #333333;
}
.main-nav-left-ul .main-nav-item:hover {
background: #D9D9D9;
}
.main-nav-content-left {
float: left;
margin-right: 10px;
width: 100%;
padding-right: 170px;
box-sizing: border-box;
}
.main-nav-content-parent {
overflow: hidden;
height: 100%;
width: 100%;
}
.main-nav-content-left img {
width: 100%;
}
.main-nav-content-right {
float: left;
width: 150px;
margin-left: -170px;
}
.main-nav-content-right img {
height: 150px;
}
</style>
<body>
<div class="top">
<!-- 头部广告 -->
<a class="top-a " href="https://ccc-x.jd.com/dsp/cpd?ext=aHR0cHM6Ly9wcm8uamQuY29tL21hbGwvYWN0aXZlLzNlSHVCQ2JkZHhKZUZVR1htNFdDc1R2dTZzR3IvaW5kZXguaHRtbA&log=JF5rMUAKXlLMuE_-1qw2RKwu9W82n03RnztIpYfC-NVWZuaHLhAWyfY2fGI8hkyp2JVw8AFodFw3IH_HgPSq0OMhbufWTozldvvCntoStoeFhAKPqaj777PGenrF7DUxkPSNmqwd1NeYvDOUCpwJ5AboLrti5O2l-bQdrFNac6Ona4ULDJ_Pf9_RUn0Tb2I4u-P40QOBhpsIdvyQxabLHlb7wFI8u83WCrGjaicY59MNWxChHQwI1WpRTn3-qhIUQlKLk4OuTiDE3q28e2vOkyAOm7ohPnc_LkbBCOwWjLz-Ea9Q0W5-SGyQNh70yPaPDTtl9tERTzD0wivsT9o2Cy3nB85FRIomNHTxPklZGKy3uACzcRrLxxzHkU6UI_xXFy8-OwLkq9CQYcFTy85w8rU6RPcAGS7iiqhZeF0AOyUaOT-tfg_QDV-l7TRvXZaA6yohYisY6339ifYPmYT0cDKn8gxzC4EXet4OHuewVHy6OQ05uKL-3erlUjaKeHoM1F2eoyONON9AofmuAGrMnx0EQTely2ebniY_EeoL8omga6IOxa-j1d5YWjAbCozeOOldYEL78MqdZyl_vbsFGINGphaH2Y4SKubuil4GrSD01PkiwOUID4lZQwmNVUpuTVVvsps88fjs6XCUym2KCmfjXQiGdsvRRa3h9n62pLmDPLPi5fJv2DBNvYMBwhC1BZBKQZlQcDMvo3f4C2fDVDOVWdP6-K2F8zr8pbgUTXk8ALHtFQQZ3rUacEGviiVIDTJ1WTkJSTx5ErF6Nl-ECw">
<div class="top-advertising main-width">
<div class="close" onclick="closeAdvertising(this)">×</div>
</div>
</a>
<div class="shortcut ">
<div class="main-width shortcut-main">
<div class="site">河南</div>
<div class="right">
<ul>
<li><a href="javescript:;"><span>你好,请登录</span></a><a href="javescript:;"><span style="margin-left:10px;color:red;">免费注册</span></a></li>
<li>
|
<a href="javescript:;">我的订单</a>
</li>
<li>
|
<a href="javescript:;">我的京东 </a>
<span class="key">v</span>
</li>
<li>
|
<a href="javescript:;">京东会员</a>
</li>
<li>
|
<a href="javescript:; " style="color:red">企业采购 </a>
<span class="key">v</span>
</li>
<li>
|
<a href="javescript:;">客户服务</a>
<span class="key">v</span>
</li>
<li>
|
<a href="javescript:;">网站导航</a>
<span class="key">v</span>
</li>
<li>
|
<a href="javescript:;">手机京东</a>
<span class="key">v</span>
</li>
</ul>
</div>
</div>
</div>
<div class="seek">
<div class="seek-main main-width">
<div class="content">
<div class="content-top">
<div class="content-top-left">
<input class="search" type="text">
<div class="submit">搜索</div>
</div>
<div class="content-top-right">我的购物车</div>
<div class="bottom-nav clear">
<ul>
<li><a href="" class="bottom-nav-item" style="color:#E1251B;">手机特价选</a></li>
<li><a href="" class="bottom-nav-item">时尚盛宴</a></li>
<li><a href="" class="bottom-nav-item">手机热卖</a></li>
<li><a href="" class="bottom-nav-item">特惠家电</a></li>
<li><a href="" class="bottom-nav-item">无抗养殖</a></li>
<li><a href="" class="bottom-nav-item">家居服</a></li>
<li><a href="" class="bottom-nav-item">礼盒5折</a></li>
<li><a href="" class="bottom-nav-item">家装节</a></li>
</ul>
</div>
</div>
<div class="content-nav">
<ul>
<li>
<a href="" class="content-nav-item" style="color:#E1251B;">秒杀</a>
</li>
<li>
<a href="" class="content-nav-item" style="color:#E1251B;">优惠券</a>
</li>
<li>
<a href="" class="content-nav-item">PLUS会员</a>
</li>
<li>
<a href="" class="content-nav-item">***闪够</a>
</li>
<li>
<a href="" class="content-nav-item">拍卖</a>
</li>
<li>
<a href="" class="content-nav-item">京东时尚</a>
</li>
<li>
<a href="" class="content-nav-item">京东超市</a>
</li>
<li>
<a href="" class="content-nav-item">京东生鲜</a>
</li>
<li>
<a href="" class="content-nav-item">海囤全球</a>
</li>
<li>
<a href="" class="content-nav-item">京东金融</a>
</li>
</ul>
</div>
</div>
<div class="left">
<img src="//img10.360buyimg.com/img/jfs/t1/50663/2/9680/61478/5d6dd218E6a706cba/27548bf029abdc15.png" alt="京东logo">
</div>
<div class="right">
</div>
</div>
</div>
<div class="main main-width">
<div class="main-nav">
<!-- 中间内容 -->
<div class="main-nav-content">
<div class="main-nav-content-parent">
<div class="main-nav-content-left">
<ul>
<li>
<a href=""><img src="//img14.360buyimg.com/pop/s590x470_jfs/t1/80222/28/279/323605/5ce7baf0E951593ad/1fdb05cc380b831f.jpg.webp" alt=""></a>
</li>
</ul>
</div>
<div class="main-nav-content-right">
<ul>
<li>
<a href=""><img src="//img12.360buyimg.com/babel/s380x300_jfs/t1/52906/36/9506/63934/5d6f86efE547ce232/17221ec6b771991e.jpg" alt=""></a>
</li>
<li>
<a href=""><img style="margin: 6px 0" src="//img11.360buyimg.com/babel/s380x300_jfs/t1/56040/10/9162/74675/5d68bfa6E7626d534/25eb42792fa10860.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="//img12.360buyimg.com/babel/s380x300_jfs/t1/75894/3/9009/54218/5d6d01c6E6ca8f70d/7065708cd0e1abe4.jpg" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
<!-- 左边导航 -->
<div class="main-nav-left">
<ul class="main-nav-left-ul">
<li class="main-nav-item"><a href="">家用电器</a></li>
<li class="main-nav-item"><a href="">手机/<a href="">运营商</a>/数码</a>
</li>
<li class="main-nav-item"><a href="">电脑/办公</a></li>
<li class="main-nav-item"><a href="">家居</a>/家具/家装/厨具</li>
<li class="main-nav-item"><a href="">***</a>/***/***/内衣</li>
<li class="main-nav-item"><a href="">美妆/个人清洁/宠物</a></li>
<li class="main-nav-item"><a href="">***/箱包/钟表/珠宝</a></li>
<li class="main-nav-item"><a href="">***/运动/户外</a></li>
<li class="main-nav-item"><a href="">房产/汽车/汽车用品</a></li>
<li class="main-nav-item"><a href="">母婴/玩具乐器</a></li>
<li class="main-nav-item"><a href="">食品/酒类/生鲜/特产</a></li>
<li class="main-nav-item"><a href="">艺术/礼品鲜花/农资绿植</a></li>
<li class="main-nav-item"><a href="">医******/计生情趣</a></li>
<li class="main-nav-item"><a href="">图书/文娱/电子书</a></li>
<li class="main-nav-item"><a href="">机票/酒店/旅游/生活</a></li>
<li class="main-nav-item"><a href="">理财/众筹/白条/保险</a></li>
<li class="main-nav-item"><a href="">安装/维修/清洁/二手</a></li>
<li class="main-nav-item"><a href="">工业品</a></li>
</ul>
</div>
<!-- 右边详情 -->
<div class="main-nav-right">
<h1>没时间了 先不做了</h1>
</div>
</div>
</div>
</div>
</body>
<script>
function closeAdvertising(data) {
data.parentNode.parentNode.style.display = 'none';
data.parentNode.parentNode.href = "javescript:;"
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例