[HTML+CSS] 仿京东首页项目实战

/*清除元素默认的内外边距 */

• {

margin: 0;

padding: 0

}

/让所有斜体 不倾斜/

em,

i {

font-style: normal;

}

/去掉列表前面的小点/

li {

list-style: none;

}

/图片没有边框 去掉图片底侧的空白缝隙/

img {

border: 0; /ie6/

vertical-align: middle;

}

/让button 按钮 变成小手/

button {

cursor: pointer;

}

/取消链接的下划线/

a {

color: #666;

text-decoration: none;

}

a:hover {

color: #e33333;

}

button,

input {

font-family: ‘Microsoft YaHei’, ‘Heiti SC’, tahoma, arial, ‘Hiragino Sans GB’, \5B8B\4F53, sans-serif;

outline: none;

}

body {

background-color: #fff;

font: 12px/1.5 ‘Microsoft YaHei’, ‘Heiti SC’, tahoma, arial, ‘Hiragino Sans GB’, \5B8B\4F53, sans-serif;

color: #666

}

.hide,

.none {

display: none;

}

/清除浮动/

.clearfix:after {

visibility: hidden;

clear: both;

display: block;

content: “.”;

height: 0

}

.clearfix {

*zoom: 1

}

common.css

---

/公共样式/

.fl {

float: left;

}

.fr {

float: right;

}

@font-face {

font-family: ‘icomoon’;

src: url(‘…/fonts/icomoon.eot?7kkyc2’);

src: url(‘…/fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’),

url(‘…/fonts/icomoon.ttf?7kkyc2’) format(‘truetype’),

url(‘…/fonts/icomoon.woff?7kkyc2’) format(‘woff’),

url(‘…/fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

.fr .icomoon {

font-family: ‘icomoon’;

font-size: 14px;

}

/版心/

.w {

width: 1200px;

margin: 0 auto;

}

/顶部快捷导航/

.shortcut {

height: 31px;

background-color: #f1f1f1;

line-height: 31px;

}

.shortcut li {

float: left;

}

.style-red {

color: red;

}

/小竖线/

.spacer {

width: 1px;

height: 12px;

background-color: #666;

margin: 9px 12px;

}

.header {

position: relative;

height: 105px;

}

.logo {

position: absolute;

top: 25px;

left: 0;

width: 175px;

height: 56px;

}

.logo a {

display: block;

width: 175px;

height: 56px;

background: url(…/images/logo.png) no-repeat;

font-size: 0;

}

.search {

position: absolute;

top: 25px;

left: 348px;

}

.text {

float: left;

width: 445px;

height: 32px;

border: 2px solid #b1191a;

color: #999;

padding-left: 10px;

}

.btn {

float: right;

width: 82px;

height: 36px;

background-color: #b1191a;

border: 0;

font-size: 16px;

color: #fff;

}

.hotwords {

position: absolute;

top: 65px;

left: 348px;

}

.hotwords a {

margin: 0 11px;

}

.shopcar {

position: absolute;

top: 25px;

right: 64px;

width: 138px;

height: 34px;

border: 1px solid #dfdfdf;

background-color: #f7f7f7;

line-height: 34px;

text-align: center;

}

.car {

font-family: ‘icomoon’;

color: #da5555;

}

.arrow {

font-family: ‘icomoon’;

margin-left: 5px;

}

.count {

/不要给行宽,用padding撑开盒子/

position: absolute;

top: -5px;

/应该是左侧对齐，文字才会往右走/

left: 100px;

background-color: #e60012;

height: 14px;

padding: 0 3px;

line-height: 14px;/因为继承了父亲行高34px所以要调整/

color: #fff;

/border-radius: 左上角 右上角 右下角 左下角;/

border-radius: 7px 7px 7px 0;

}

.nav {

height: 45px;

border-bottom: 2px solid #b1191a;

}

.dropdown {

width: 209px;

height: 45px;

}

.dropdown .dt {

width: 100%;

height: 100%;

background-color: #b1191a;

font-size: 16px;

color: #fff;

text-align: center;

line-height: 45px;

}

.dropdown .dd {

height: 465px;

background-color: #c81623;

margin-top: 2px;

}

.menu_items {

height: 31px;

line-height: 31px;

padding: 0 8px;

transition: all 0.5s;

}

.menu_items:hover {

padding-left: 20px;

}

.menu_items:hover {

background-color: #fff;

}

.menu_items a {

font-size: 14px;

color: #fff;

}

.menu_items:hover a {

color: #c81623;

}

.menu_items i {

float: right;

font-size: 18px;

color: #fff;

}

.navitems {

margin-left: 10px;

}

.navitems ul {

display: flex;

}

.navitems li a {

display: block;

height: 45px;

padding: 0 25px;

line-height: 45px;

font-size: 16px;

}

/footer部分/

.footer {

height: 386px;

padding-top: 30px;

background-color: #f5f5f5;

}

.mod_service {

height: 79px;

border-bottom: 1px solid #ccc;

}

.mod_service ul {

display: flex;

}

.mod_service ul li {

flex: 1;

}

.mod-service-icon {

float: left;

height: 50px;

width: 50px;

margin-left: 35px;

}

.mod_service_zheng {

background: url(…/images/icons.png) no-repeat -253px -3px;

}

.mod_service_tit {

float: left;

margin-left: 5px;

}

.mod_service_tit h5 {

margin: 5px 0;

}

.mod_service_kuai {

background: url(…/images/icons.png) no-repeat -255px -54px;

}

.mod_service_bao {

background: url(…/images/icons.png) no-repeat -257px -105px;

}

.mod_service_1 {

background: url(…/images/icons.png) no-repeat -259px -155px;

}

.mod_service_2 {

background: url(…/images/icons.png) no-repeat -255px -208px;

}

.mod_help {

display: flex;

height: 187px;

border-bottom: 1px solid #ccc;

}

.mod_help_item {

flex: 1;

padding: 20px 0 0 50px;

}

.mod_help_item dt {

height: 25px;

font-size: 16px;

}

.mod_help_item dd {

height: 22px;

}

.mod_help_app dt,

.mod_help_app p {

padding-left: 15px;

}

.mod_help_app img {

margin: 7px;

}

.mod_copyright_first {

margin: 20px 0 16px 100px;

}

.mod_copyright ul {

display: flex;

}

.mod_copyright ul li {

padding: 0 15px;

border-left: 2px solid #999;

}

.mod_copyright_info {

margin: 0 0 3px 240px;

}

.mod_copyright_second {

margin-left: 469px;

}

index.html

---

<meta name=“description” content="品优购JD.CON-专业的综合网上购物商城,销售家

电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便

捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

<meta name=“Keywords” content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,V

CD,DV,相机,数码,配件,手表,存储卡,品优购"/>

• 品优购欢迎您！

• 请登录

  免费注册
• 我的订单

• 我的品优购

  

• 品优购会员
• 企业采购

• 关注品优购

  

• 客户服务

  

• 网站导航

  

  品优购

  搜索

  优惠购首发

  亿元优惠

  9.9团购

  每满99减30

  办公用品

  电脑

  通信

   我的购物车

  8

  全部商品分类
• 家用电器 >

• 手机、

  数码、

  通信

  >

• 电脑、

  办公

  >

• 家居、

  家具、

  家装、

  厨具

  >

• 男装、

  女装、

  童装、

  内衣

  >

• 个护化妆、

  清洁用品、

  宠物

  >

• 鞋靴、

  箱包、

  珠宝、

  奢侈品

  >

• 运动户外、

  钟表

  >

• 汽车、

  汽车用品

  >

• 母婴、

  玩具乐器

  >

• 食品、

  酒类、

  生鲜、

  特产

  >

• 医药保健

  >

• 图书、

  音响、

  电子书

  >

• 彩票、

  旅行、

  充值、

  票务

  >

• 理财、

  众筹、

  白条、

  保险

  >
• 服装城
• 美妆馆
• 传智超市
• 全球购
• 闪购
• 团购
• 拍卖
• 有趣
• <

  >
• 
• 品优购快报

  更多 >

  [特惠]备战开学季全民半价购数码

  [快告]品优稳占家电网购六成份额

  [特惠]百元中秋全品类礼券限里领

  [忪告]上品优生鲜享阳澄胡大闸蟹

  [特惠]每日享折扣品优品质游

• 话费

• 机票

• 话费

• 话费

• 话费

• 话费

• 话费

• 话费

• 话费

• 话费

• 话费

• 话费

  
  

  今日推荐
• 
• 
• 
• 

  家用电器
• 热门|
• 大家电|
• 生活电器|
• 厨房电器|
• 个护健康|
• 应季电器|
• 空气/净水|
• 新奇特|
• 高端电器
• 节能补贴
• 4k电视
• 空气净化器
• IH电饭煲
• 滚筒洗衣机
• 电热水器
• 
• 
• 
  
• 
• 
  

  手机通讯
• 热门|
• 大家电|
• 生活电器|
• 厨房电器|
• 个护健康|
• 应季电器|
• 空气/净水|
• 新奇特|
• 高端电器
• 节能补贴
• 4k电视
• 空气净化器
• IH电饭煲
• 滚筒洗衣机
• 电热水器
• 
• 
• 
  
• 
• 
  

  家用电器
• 热门|
• 大家电|
• 生活电器|
• 厨房电器|
• 个护健康|
• 应季电器|
• 空气/净水|
• 新奇特|
• 高端电器
• 节能补贴
• 4k电视
• 空气净化器
• IH电饭煲
• 滚筒洗衣机
• 电热水器
• 
• 
• 最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  class=“tab-con-item”>

  

  家用电器
• 热门|
• 大家电|
• 生活电器|
• 厨房电器|
• 个护健康|
• 应季电器|
• 空气/净水|
• 新奇特|
• 高端电器
• 节能补贴
• 4k电视
• 空气净化器
• IH电饭煲
• 滚筒洗衣机
• 电热水器
• 
• 
• 最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-FDbHcPj4-1715717629377)]

  [外链图片转存中…(img-8X0eamJU-1715717629377)]

  [外链图片转存中…(img-B1KXuStY-1715717629377)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！