Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第8期0905作业
Blogger Information
Blog 6
fans 0
comment 0
visits 3896
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第8期0905作业
宏利的博客
Original
667 people have browsed it

做的太慢了  下午有点事 先交了

实例

<!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>
&nbsp;|&nbsp;
<a href="javescript:;">我的订单</a>
</li>
<li>
&nbsp;|&nbsp;
<a href="javescript:;">我的京东 </a>
<span class="key">v</span>
</li>
<li>
&nbsp;|&nbsp;
<a href="javescript:;">京东会员</a>
</li>
<li>
&nbsp;|&nbsp;
<a href="javescript:; " style="color:red">企业采购 </a>
<span class="key">v</span>
</li>
<li>
&nbsp;|&nbsp;
<a href="javescript:;">客户服务</a>
<span class="key">v</span>
</li>
<li>
&nbsp;|&nbsp;
<a href="javescript:;">网站导航</a>
<span class="key">v</span>
</li>
<li>
&nbsp;|&nbsp;
<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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status：qualified

Teacher's comments：代码结构看上去还是不错的, css的类名有点长了, 多个单词, 要考虑使用缩写, 还有, 配一张效果图会更好
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post