京东首页html+css1.0
小菜鸟的学习记录，还望各位猿兄不吝赐教
效果图
源码
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;
}
京东首页html+css1.0的更多相关文章
- js 鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层异步加载模式
js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...
- 关于京东首页的制作以及切图软件fireworks推荐
这几天跟随老师给的视频学习制作京东首页 学到了很多 以下是相关代码和截图 html部分 <!DOCTYPE html><html lang="en">< ...
- jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- js模仿京东首页的倒计时功能
模仿京东首页的倒计时 我们学习了定时器,可以用定时器做一个倒计时,于是我模仿了京东首页倒计时. 先看看京东首页的倒计时. 思路: 如何倒计时? 给一个未来的时间.然后计算未来时间到现在的时间戳. 用定 ...
- 京东饭粒捡漏V1.0.8
20180617 更新 V1.0.81.捡漏策略更新:自动检测商品,有货后自动下单:2.加车自动使用最优满减券组合: 功能介绍1.京东商城专用,支持饭粒模式下单,自己获得京豆返利 2.捡漏模式:帮助用 ...
- 京东饭粒捡漏V1.0.7
20180614 更新 V1.0.71.修改捡漏策略 功能介绍1.京东商城专用,支持饭粒模式下单,自己获得京豆返利 2.捡漏模式:帮助用户监控抢购商品,有库存的时候进行抢单,主要是通过添加商品ID - ...
- css1.0~3.0背景图使用多张折叠的概念与方法
需求:使用多张图片作为页面的背景图: 首先需要了解background的属性以及细节知识:https://www.cnblogs.com/chenglj/p/7372996.html backgrou ...
- H5C3--仿京东首页（包含轮播图，倒计时）
!!!很抱歉,之前的域名已经过期了,已经被别人购买了拿去做菠菜了,现在的话,京东页面我重新发布一下代码 #请看注意事项,因为有模拟请求,请在本地服务器或者IDEA类编译器打开(2019年10月10日0 ...
- 京东首页如何实现pc端和移动端加载不同的html的？
进入www.jd.com后代码判断是手机的话就跳转m.jd.com let ua = window.navigator.userAgent.toLocaleLowerCase() let murl = ...
- CSS——京东首页实战总结
第一天成果 1.浮动的盒子不要给宽,内容撑起盒子的宽 在前端设计中,一般不给浮动的盒子设置宽,让其用内容撑起一个高度. 2.小三角的表示 ◇用一个盒子(盒子宽为字的宽,高度为字高度的一半)去截取这个菱 ...
随机推荐
- IDEA - 文件上方的文档注释如何自定义
1.在设置中打开文件和代码模板,根据描述中的参考信息进行自定义配置 File > Settings > Editor > File and Code Templates 2.配置完成 ...
- 基于Microsoft.Extensions.VectorData实现语义搜索
大家好,我是Edison. 上周水了一篇 Microsoft.Extensions.AI 的介绍文章,很多读者反馈想要了解更多.很多时候,除了集成LLM实现聊天对话,还会有很多语义搜索和RAG的使用场 ...
- 异步导入导出Excel方案
一.异步导出Excel文件 1.设计思想 用户无需在当前页面等待导出结果,点击导出按钮后服务端即可返回前端提示用户导出处理中请到下载中心查看结果. 具体业务文件导出实现由后台异步处理导出文件到腾讯CO ...
- 跨平台Windows和Linux（银河麒麟）操作系统OCR识别应用
1 运行效果 代码下载链接: https://pan.baidu.com/s/1NUfLTjk6kzXJKsaH7yo4qA?pwd=rk5c 提取码: rk5c. 在银河麒麟桌面操作系统V10(SP ...
- php连接sql server 2014踩坑及处理记录
1.PDOException: SQLSTATE[42S02]: [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]对象名 'dbotest' ...
- 一个生成随机颜色的js函数
function getRandomColor(){ let rgb = []; for(let i=0;i<3;++i){ let color = Math.floor(Math.random ...
- mac ping IP+端口的方法
nc -vz -w 2 192.168.1.104 3306
- nginx: [error] open() "/usr/local/nginx/nginx.pid" failed (2: No such file or directory)
nginx 启动出现错误 nginx: [error] open() "/usr/local/nginx/nginx.pid" failed (2: No such file or ...
- 编写你的第一个 Django 应用程序，第6部分
本教程从教程 5 停止的地方开始.我们已经构建了一个经过测试的网络投票应用程序,现在我们将添加一个样式表和一个图像. 除了服务器生成的 HTML 之外,Web 应用程序通常需要提供呈现完整网页所需的其 ...
- 编写你的第一个 Django 应用程序，第4部分
本教程从教程 3 停止的地方开始.我们是 继续民意调查应用程序,并将专注于表单处理和 减少我们的代码. 一.编写最小表单 让我们更新上一个教程的投票详细信息模板("polls/detail. ...