小菜鸟的学习记录，还望各位猿兄不吝赐教
效果图
源码
HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>京东(JD.COM)盗版高价</title>
<link rel="icon" href="jingdongicon.jfif" type="image/x-icon"/>
<link rel="stylesheet" href="jingdong.css" type="text/css"/>
<base target="_blank"/>
</head>
<body>
<div class="index">
<div class="top"><!--顶部开始-->
<div class="top_content">
<ul>
<li>
你好，请
<a href="#">
<font id="land">登录</font>
</a>
</li>
<li class="words">
<a href="#">| 我的订单</a>
</li>
<li class="words">
<a href="#">| 我的京东</a>
</li>
<li class="words">
<a href="#">| 京东会员</a>
</li>
<li class="words">
<a href="#">| 企业采购</a>
</li>
<li class="words">
<a href="#">| 客服服务</a>
</li>
<li class="words">
<a href="#">| 网站导航</a>
</li>
<li class="words">
<a href="#">| 手机京东</a>
</li>
</ul>
</div>
</div><!--顶部结束-->
<div class="wrap"><!--主体开始-->
<div class="header">
<div class="logo">
<a href="#" class="logo_content">京东</a>
</div>
<div class="search">
<div class="search_content">
<span class="camera"></span>
<input type="text" name="search" id="tosearch" placeholder="《围城》精装版"/>
<button type="submit"></button>
</div>
</div>
<div class="mycar">
<div class="mycar_content">
<i class="shopping_car"></i>
<a href="#">我的购物车</a>
<font id="number">0</font>
</div>
</div>
<div class="ads">
<a href="#" id="hot">抢百元神券</a>
<a href="#">生发剂</a>
<a href="#">防猝死</a>
<a href="#">除皱霜</a>
<a href="#">不加班</a>
<a href="#">买一赠一</a>
<a href="#">面经五折</a>
<a href="#">春茶上新</a>
<a href="#">0元预约</a>
</div>
<div class="navigation">
<ul>
<li>
<a href="#">秒杀</a>
</li>
<li>
<a href="#">优惠券</a>
</li>
<li>
<a href="#">PLUS会员</a>
</li>
</ul>
<div class="space"></div>
<ul>
<li>
<a href="#">拍卖</a>
</li>
<li>
<a href="#">京东时尚</a>
</li>
<li>
<a href="#">京东生鲜</a>
</li>
<li>
<a href="#">京东超市</a>
</li>
</ul>
<div class="space"></div>
<ul>
<li>
<a href="#">海囤市场</a>
</li>
<li>
<a href="#">京东金融</a>
</li>
</ul>
</div>
</div>
<div class="medium"><!--中部信息展示部分开始-->
<div class="left_menu"><!--中部——左边菜单栏开始-->
<div class="menu_content">
<ul>
<li>
<a href="#">家用电器</a>
</li>
<li>
<span>
<a href="#">图书/</a>
、
<a href="#">童书</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">电子书/</a>
、
<a href="#">网络文学</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">创意文具/</a>
、
<a href="#">拍卖</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">服饰/</a>
、
<a href="#">内衣</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">鞋靴/</a>
、
<a href="#">箱包</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">户外运动/</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">孕/</a>
、
<a href="#">婴/</a>
、
<a href="#">童</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">家具/</a>
、
<a href="#">家纺</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">图书/</a>
、
<a href="#">童书</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">电子书/</a>
、
<a href="#">网络文学</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">创意文具/</a>
、
<a href="#">拍卖</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">服饰/</a>
、
<a href="#">内衣</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">鞋靴/</a>
、
<a href="#">箱包</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">户外运动/</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">孕/</a>
、
<a href="#">婴/</a>
、
<a href="#">童</a>
</span>
<span class="flag"></span>
</li>
<li>
<span>
<a href="#">家具/</a>
、
<a href="#">家纺</a>
</span>
<span class="flag"></span>
</li>
</ul>
</div>
</div><!--中部——左边菜单栏结束-->
<div class="mid_ad">
<div class="mid_ad_content">
<ul>
<li>
<a href="#">
<image src="jingdong_ad1.png"/>
</a>
</li>
</ul>
</div>
</div>
</div><!--中部信息展示部分结束-->
<div class="mid_ad2"><!---广告栏2开始-->
<div class="ad2">
<div class="ad2_content">
<div class="item1">
<a href="#">
<div class="item_content">
<img src="ad2_one.jfif"/>
</div>
</a>
</div>
<div class="item1">
<a href="#">
<div class="item2_content">
<img src="ad2_two.jfif"/>
</div>
</a>
</div>
<div class="item1">
<a href="#">
<div class="item3_content">
<img src="ad2_three.jfif"/>
</div>
</a>
</div>
</div>
</div>
</div><!--广告栏2结束-->
<!--
<div class="rightbody">
<div class="user">
<div class="user_content">
<a href="#">
<img src="no_login.jfif"/>
</a>
</div>
</div>
<div class="showtext">
<p>hey~欢迎来到京东</p>
<p>
<a class="user_login" href="#">登录</a>
<a class="user_reg" href="#">注册</a>
</p>
</div>
</div>-->
</div><!--主体结束-->
</div>
</body>
</html>
css文件
/*总体规范*/
html{
min-width:990px;
margin:0;
padding:0;
}
body{
font:12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b体,sans-serif;
color:#666;
background-color: #E1FFFF;
}
.index{
}
a{
text-decoration:none;
}
/*顶部*/
.top_content{
margin: -15.6px -11.7px auto;
height: 42.4px;
font-size: 14.6px;
border-bottom: 2px solid #87CEEB;
background-color:#AFEEEE;
display: inline-block;
width: 101.3%;
}
#land{
font-weight:bold;
color:#DB7093;
}
.top_content ul{
float:right;
margin-right: 246.4px;
}
.top_content ul li{
line-height:30px;
list-style-type:none;
display:inline-block;
line-height:27px;
margin-left:5px;
}
.top_content ul li a{
text-decoration:none;
color:#999;
}
.top_content ul li a:hover{
color:red;
}
.top_content ul li a:active{
color:blue;
}
/*主体部分*/
.wrap{
width:1000px;
margin:0 auto;
}
/*主体部分——头部——图标*/
.header{
position:relative;
height:140px;
width:990px;
margin:auto;
}
.logo{
position:absolute;
left:0;
top:-40.7px;
width:190px;
height:170px;
box-shadow:0 -12px 10px rgba(0,0,0,0.2);
background-color:#fff;
border-bottom:1px solid #ededed;
}
.logo_content{
background-image:url(sprite.head.png);
background-repeat:no-repeat;
background-position:0 0;/*该属性用于设置背景图像的起始位置*/
overflow:hidden;
display:block;
width:190px;
height:170px;
font-size:0;
}
.logo_content a{
color:#666;
}
.logo_content:hover{
background-image:url(replace.gif);
}
/*主体部分——头部——搜索框*/
.search{
position:relative;
height:60px;
}
.search_content{
left:270px;
width:400px;
position:absolute;
top:25px;
height:35px;
border: 1px solid;
}
#tosearch{
width:340px;
left:0;
padding:4px 44px 4px 4px;
height:25px;
border:1px solid transparent;
line-height:25px;
font-size:14px;
color:#333;
position:absolute;
top:0;
outline:none;
}
.camera{
display: block;
width: 24.3px;
height: 16.7px;
background: url(sprite-photo-search.png) no-repeat;
position: absolute;
right: 54.6px;
top: 9.7px;
overflow: hidden;
z-index: 999;
}
button,input{
font-family: Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\5b8b体,sans-serif;
}
button{
border-radius:0;
right:0;
width:50px;
height:35px;
line-height:35px;
border:none;
background-color:red;
font-size:20px;
font-weight:700;
color:#fff;
position:absolute;
top:0;
outline:none;
cursor: pointer;
}
/*主体部分——头部——购物车*/
.mycar{
position:absolute;
right:99px;
top:25px;
}
.mycar_content{
position:relative;
overflow:hidden;
float:left;
width:188px;
height:40.1px;
background-color:#fff;
text-align:center;
line-height:33px;
border:1px solid #e3e4e5;
background: url(icon_cart.png) 18.7px 0.2px no-repeat red;
font-size: 14.6px;
padding-right: -12px;
}
.shopping_car{
display:none!important;
font-style:normal;
position:absolutel;
top:5px;
left:140px;
right:auto;
display:inline-block;
padding:1px;
font-size:12px;
line-height:12px;
}
#number{
color:white;
font-weight:bold;
}
.ads{
left:270px;
width:400px;
overflow:hidden;
position:absolute;
top:65px;
height:20px;
line-height:20px;
}
.ads a{
float:left;
margin-right:10px;
white-space:nowrap;/*如何处理元素空白*/
color:#999;
}
#hot{
color:red;
width:70px;
text-overflow:ellipsis;
}
.ads a:hover{
color:red;
}
.navigation{
overflow:hidden;
position:absolute;
left:200px;
bottom:0;
width:790px;
padding-top:20px;
margin-left: -35.3px;
}
.navigation ul{
float:left;
}
.navigation ul li{
margin-left: 11.5px;
display: inline-block;
}
.navigation ul li a{
position:relative;
display:block;
height:40px;
line-height:40px;
font-size:14px;
color:#333;
}
.space{
overflow: hidden;
margin-top: 23px;
margin-left: 25.2px;
margin-right: -34.1px;
width: 1.9px;
height: 19px;
background-color: #ccc;
float: left;
}
/*主体部分——中部信息展示——左边菜单列表*/
.medium{
width:990px;
height:480px;
background-color:#f0f3ef;
position:relative;
}
.left_menu{
float:left;
height:480px;
margin-right:10px;
width:190px;
}
.menu_content{
position:relative;
}
.menu_content ul{
padding:6px 0;
height:468px;
overflow:hidden;
background-color:#fefefe;
color:#636363;
margin-top: 0;
}
.menu_content ul li{
height:26px;
line-height:26px;
overflow:hidden;
padding-left:25.4px;
font-size:0;
transition: background-color .2s ease;
margin-bottom: 10px;
}
.menu_content ul li a{
font-size:14px;
color:#626262;
}
.flag{
padding:0 2px;
font-size:12px;
}
.mid_ad{
overflow:hidden;
}
.mid_ad_content{
opacity:1;
width:5900px;
transform:translate3d(0px, 0px, 0px);
transition:none 0s ease 0s;
height:470px;
}
.mid_ad_content ul li{
float:left;
position:relative;
transition:opacity 500ms ease-in-out 0s;
width:590px;
left:0px;
background-color:#fff;
height:470px;
min-height:1px;
}
.mid_ad_content ul li a:hover{
}
.mid_ad2{
width:190px;
height:480px;
float:left;
}
.ad2{
width:190px;
}
.item1{
width:190px;
height:150px;
margin-top:10px;
}
.item1 a{
display:block;
background:#fff;
width:190px;
height:150px;
color:#666;
}
.item_content{
background: transparent;
position: relative;
overflow: hidden;
margin-top: -479px;
margin-right: 31.2px;
right: -830.8px;
}
.item_content img{
opacity:1;
width:100%;
height:100%;
-webkit-backface-visibility: hidden;
border: 0;
vertical-align: middle;
}
.item2_content{
background: transparent;
position: relative;
overflow: hidden;
margin-top: -5.8px;
margin-right: 31.2px;
right: -830.8px;
}
.item3_content{
background: transparent;
position: relative;
overflow: hidden;
margin-top: 2.7px;
margin-right: 31.2px;
right: -830.8px;
}
/*使所用图片保持原比例*/
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.rightbody{
float:right;
width:190px;
height:480px;
}
.user{
background: #fff;
margin-top: 10px;
text-align: center;
position: relative;
padding-top: 62px;
height: 78px;
top: -490.4px;
right: -180px;
width: 150px;
}
.user_content{
position: absolute;
left: 50%;
top: -10px;
margin-left: -34px;
width: 65px;
height: 65px;
}
.user_content img{
display: block;
width: 55px;
height: 55px;
border: 5px solid #e3e1df;
border-radius: 50%;
overflow: hidden;
}
.showtext{
padding:0 10px;
width: 55px;
height: 55px;
}
.showtext p{
overflow: hidden;
line-height: 20px;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
color: #888;
}
.user_login, .user_reg {
padding: 0 2px;
}