京东首页html+css1.0
2024-04-15 09:43:17
小菜鸟的学习记录，还望各位猿兄不吝赐教
文章目录
- 效果图
- 源码
- HTML文件
- css文件
效果图
源码
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相关推荐
- 扒皮下京东首页楼层图标的动画效果实现方式
京东首页的楼层图标默认是灰色的,但拉动滚动条,让该图标从下方挪动到屏幕正中的时候,该图标会显示出从上到下由灰变绿的动画效果,如下图 这种效果很有Lazyload的范,也是挺吸引眼球的交互方式,下面用J ...
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
2019独角兽企业重金招聘Python工程师标准>>> 直奔主题: 1.主要原理就是利用定时任务器定时切换ViewPager的页面. 2.里面用了一个读取网络图片的插件,做客户端使用 ...
- java京东左侧固定层_京东首页右侧固定层
需求说明 制作京东首页右侧的固定层,6个图标:京东会员.购物车.我的关注.我的足迹.我的消息和咨询JIMI 默认状态下仅显示图标,背景颜色为深灰色:当鼠标移至图标上时,背景颜色为深红色,并且显示文本 ...
- jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Android开发笔记（一百六十四）仿京东首页的下拉刷新
上一篇文章介绍了高仿京东的沉浸式状态栏,可是跟京东首页的头部轮播图相比,依然有三处缺憾: 1.京东的头部Banner上方,除了有悬浮着的状态栏,状态栏下面还有一行悬浮工具栏,内嵌扫一扫图标.搜索框,以 ...
- 移动端开发——京东首页制作（流式布局）
移动端开发--京东首页制作(流式布局) 项目准备 初始化基本文件夹 创建index.html 设置视口 引入基本公共样式 引入自己的css样 <!DOCTYPE html> <htm ...
- android 高仿京东首页,android 粗略的 仿京东首页 嵌套方式滚动
简单述说 最近没有什么事情,就看到了京东的首页,感觉还不错,但是我目前也只是粗略的模仿了出来. github 地址 V2版本 仿京东首页.gif 设计思路 简单画图.png 滚动黄色的recycleV ...
- HTML和CSS实现京东首页（html和css详解）
HTML和CSS实现京东首页,效果图如下: 基本代码如下:需要源代码和素材的评论区留言 (1)页面部分设计如下: <!DOCTYPE html> <html lang="e ...
- 京东首页之nav导航栏、banner广告部分、footer备案号
项目回顾:上一篇博文主要讲了如何实现京东首页的页面顶部和Logo&搜索框部分: 里面主要知识:利用列表作划分鲜明的文字部分,相对定位和绝对定位去实现弹框效果. 今天我们这篇博文主要是简单介绍京 ...
最新文章
- python sys.exit_Python程序退出方式(sys.exit() os._exit() os.kill() os.popen(...))
- Ubuntu 调试的时候，不能查看变量值
- python 获取闭包函数的参数
- redis3.2.3安装部署实战
- Java NIO3：缓冲区Buffer
- c语言全排列算法_一文学会回溯搜索算法解题技巧
- LeetCode 725. 分隔链表
- Ajax实践之用户是否存在
- 在Access中执行SQL语句
- libevent c++高并发网络编程_【多线程高并发编程】Callable源码分析
- 编程数学（A-2）-次方
- react ajax组件,javascript – 我可以将ajax放在React组件构造函数中吗？
- 新手在前期应该怎样发“外链”（4）之终级外链法
- 直播app开发怎么做，PHP直播源码是什么
- 房屋出租系统java版
- 基础用户登录测试用例-最全用例设计
- “企鹅号+时尚集团MCN”强强联手 打造19春夏时装周报道新模式
- ★另人无比怀念的90年代动画片★ ‖最终整理篇‖
- 实验三+070+胡阳洋
- 【洛谷 P5149】 会议座位【归并排序】