CSS_实现京东购物车静态页面
主页面分配：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>京东购物车</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/jd.css" />
<link rel="stylesheet" href="icon/iconfont.css" />
</head>
<body>
<!--描述：导航栏开始-->
<div class="nav">
<div class="warp">
<ul class="nav_ul1">
<li><a href="http://www.jd.com" target="_blank"><i class="iconfont"></i>京东首页</a></li>
<li><a href="">配送至：北京</a></li>
</ul>
<ul class="nav_ul2">
<li><a href="">洋洋宝贝</a><span>|</span></li>
<li><a href="">我的订单</a><span>|</span></li>
<li><a href="">我的京东</a><span>|</span></li>
<li><a href="">京东会员</a><span>|</span></li>
<li><a href="">企业采购</a><span>|</span></li>
<li><a href="">京东手机</a><span>|</span></li>
<li><a href="">关注京东</a><span>|</span></li>
<li><a href="">客户服务</a><span>|</span></li>
<li><a href="">网站导航</a></li>
</ul>
</div>
</div>
<!--描述：导航栏开始-->
<!--描述：搜索框开始-->
<div class="search">
<div class="warp">
<img src="img/logo.jpg" />
<div class="search_div">
<input type="text" class="search_text"/>
<input type="button" value="搜索" class="search_button"/>
</div>
</div>
</div>
<!--描述：搜索框结束-->
<!--描述：标题开始-->
<div class="title warp">
<h3>全部商品</h3>
<div class="">
<span>配送至：</span>
<select>
<option value="">昌平区</option>
<option value="">大兴区</option>
<option value="">朝阳区</option>
</select>
</div>
</div>
<!--描述：标题结束-->
<!--描述：显示菜单开始-->
<div class="tips warp">
<ul>
<li>
<input type="checkbox" name="" id="" value="" />
全选
</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
<!--描述：显示菜单结束-->
<!--描述：商品详情展示开始-->
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox"value="" /></li>
<li class="info_2"><img src="img/img1.jpg" width="80px"/></li>
<li class="info_3" ><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
<li class="info_4"><a>颜色：灰色+粉红</a></li>
<li class="info_5">￥182.5</li>
<li class="info_6">
<button>-</button>
<input value="1" />
<button class="but">+</button>
</li>
<li class="info_7">￥182.5</li>
<li class="info_8">
<a href="">删除</a>
<a href="">移到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox"value="" /></li>
<li class="info_2"><img src="img/img2.jpg" width="80px"/></li>
<li class="info_3" ><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
<li class="info_4"><a>颜色：灰色+粉红</a></li>
<li class="info_5">￥182.5</li>
<li class="info_6">
<button>-</button>
<input value="1" />
<button class="but">+</button>
</li>
<li class="info_7">￥182.5</li>
<li class="info_8">
<a href="">删除</a>
<a href="">移到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox"value="" /></li>
<li class="info_2"><img src="img/img3.jpg" width="80px"/></li>
<li class="info_3" ><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
<li class="info_4"><a>颜色：灰色+粉红</a></li>
<li class="info_5">￥182.5</li>
<li class="info_6">
<button>-</button>
<input value="1" />
<button class="but">+</button>
</li>
<li class="info_7">￥182.5</li>
<li class="info_8">
<a href="">删除</a>
<a href="">移到我的关注</a>
</li>
</ul>
</div>
<!--描述：商品详情展示结束-->
<!--描述：商品结算开始-->
<div class="balance warp">
<ul class="balance_ul1">
<li><input type="checkbox"/>
全选
</li>
<li><a href="">删除选中商品</a></li>
<li><a href="">移到我的关注</a></li>
<li><a href="">清除下柜商品</a></li>
</ul>
<ul class="balance_ul2">
<li>已经选择<span>1</span>件商品</li>
<li>总价<span>￥12</span></li>
<li>
<button class="butt">去结算</button>
</li>
</ul>
</div>
<!--描述：商品结算结束-->
</body>
</html>
分步CSS操作：
.nav{
height: 30px;
background-color: #f1f1f1;
}
.warp{
width: 1000px;
margin: 0px auto;
}
.nav_ul1{
float: left;
}
.nav_ul1 li{
float: left;
line-height: 30px;
margin-right: 20px;
}
.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{
color: gray;
font-size: 13px;
}
.nav_ul2{
float: right;
}
.nav_ul2 li{
float: left;
margin-left: 10px;
line-height: 30px;
}
.nav_ul2 span{
margin-left: 10px;
line-height: 30px;
}
a:hover{
color: red;
}
/*搜索框开始*/
.search{
margin-top: 20px;
}
.search img{
clear: both;
float: left;
}
.search_div{
float: right;
margin-top: 25px;
}
.search_text{
width: 265px;
height: 21px;
border: 3px solid #c91623;
position: relative;
left: 4px;
top: -1px;
}
.search_button{
width: 51px;
height: 29px;
background-color:#c91623;
border: 0px;
color: white;
}
/*搜索框结束*/
/*标题开始*/
.title{
margin-top: 130px;
}
.title h3{
float: left;
font-size: 23px;
color: #c91623;
}
.title div{
float: right;
color: gray;
}
/*标题结束*/
/*描述：显示菜单开始*/
.tips{
width: 1000px;
height: 50px;
background-color: #f1f1f1;
margin-top: 165px;
border: 1px solid #e9e9e9;
}
.tips li{
float: left;
line-height: 50px;
font-size: 13px;
color: gray;
}
.tips li:nth-child(1){
width: 90px;
border-top: 3px solid #c91623;
}
.tips li:nth-child(2){
margin-left: 80px;
}
.tips li:nth-child(3){
margin-left: 430px;
}
.tips li:nth-child(4){
margin-left: 70px;
}
.tips li:nth-child(5){
margin-left: 110px;
}
.tips li:nth-child(6){
margin-left: 50px;
}
/*描述：显示菜单结束*/
/*描述：商品详情展示开始*/
.info{
width: 1000px;
height: 125px;
background-color: #fff4e8;
border: 1px solid gray;
margin-top: 25px;
}
.info li{
float: left;
margin-top: 20px;
}
.info_1{
margin-left:22px;
}
.info_2{
margin-left:15px;
border: 1px solid gray;
}
.info_3{
width: 260px;
height: 20px;
}
.info_4{
margin-left:45px;
}
.info_5{
margin-left:70px;
}
.info_6{
margin-left:40px;
}
.info_6 input{
width: 30px;
height: 12px;
position: relative;
text-align: center;
top: -2px;
left: -5px;
}
.but{
position: relative;
left: -10px;
}
.info_6 button{
width: 30px;
height: 18px;
}
.info_7{
margin-left:15px;
}
.info_8{
margin-left:15px;
}
.info a{
font-size:12px;
color: #33333;
}
/*描述：商品详情展示结束*/
/*描述：商品结算开始*/
.balance{
width: 1000px;
height: 50px;
border: 1px solid gray;
margin-top: 20px;
}
.balance li{
float: left;
line-height: 50px;
margin-left: 22px;
}
.balance_ul2{
float: right;
}
.balance_ul2 span{
font-size: 25px;
color: #C91623 ;
font-weight: bold;
}
.balance_ul2 button{
width: 100px;
height: 50px;
background-color: brown;
border: 1px solid #c91623;
font-weight: bold;
font-size: 20px;
color: white;
}
button:hover{
background-color:#C91623 ;
}
/*描述：商品结算结束*/
主体页面控制：
body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin: 0px; padding: 0px;}
body{text-align: center;font-size:14px;}
a{text-decoration: none;}
li{list-style: none;}
实现效果图：
由于是对CSS知识点的回顾练习，左移没有用到js等。
CSS_实现京东购物车静态页面的更多相关文章
- 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面
一.引言 接着上一篇,京东个人中心的所有功能数据分析完成之后,现在需要把静态页面完成,实现过程中要用到的技术有:Bootstrap.html5表单新特性等.除此之外,还要利用Node.js的Expre ...
- 京东购物车的 Java 架构实现及原理！
今天来写一下关于购物车的东西, 这里首先抛出四个问题: 1)用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后 不登录用户名和密码 问:购物车商品还在吗? 2)用户登陆了用户名密码,添加商品,关闭 ...
- H5商城，纯前端静态页面
发布时间:2018-09-28 技术:jquery1.10.1+swipeSlide+jquery.mmenu+jquery.touchSwipe+cityinit 概述 纯手写H5商城,2年 ...
- Django之使用celery和NGINX生成静态页面实现性能优化
性能优化原理: 当我们要给client浏览器返回一个页面时,我们需要去数据库查询数据并将数据和基本页面模板渲染形成页面返回给客户端,但如果每一个用户访问时都去查询一次首页的的数据时,当日访问量很大时那 ...
- 《京东上千页面搭建基石——CMS前后端分离演进史》阅读笔记
一.背景 CMS即内容管理系统,目的是用于快速进行网站建设或者网页开发. 对于京东网站部门来说,CMS核心目的是用来快速开发和上线各种页面,诸如各种垂直频道页. 二.CMS核心目的 进行数据和模板的统 ...
- 京东购物车的Java架构实现及原理！
今天来写一下关于购物车的东西, 这里首先抛出四个问题: 1)用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后 不登录用户名和密码 问:购物车商品还在吗? 2)用户登陆了用户名密码,添加商品,关闭 ...
- 使用Git Bash远程添加分支和简单部署你的静态页面
新建一个分支:git branch mybranch(mybranch你的分支名字) 切换到你的新分支: git checkout mybranch 将新分支发布在github上: git push ...
- 浅谈php生成静态页面
一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...
- 浅谈在静态页面上使用动态参数，会造成spider多次和重复抓取的解决方案
原因: 早期由于搜索引擎蜘蛛的不完善,蜘蛛在爬行动态的url的时候很容易由于网站程序的不合理等原因造成蜘蛛迷路死循环. 所以蜘蛛为了避免之前现象就不读取动态的url,特别是带?的url 解决方案: 1 ...
随机推荐
- python——函数的形参和实参、参数
python的参数分类 python参数可以分为两类:1.定义时的参数--形参(形式参数).2.调用时的参数--实参(实际参数,传参) 实参的规则 实参就是在函数调用的时候,通过函数后面的括号传递给函 ...
- layaair和egret的区别
egret缺点1 编译速度非常慢 2 就是强类型转换非常的麻烦 3 只能用ts 所以只能用他们的IDE 不能用sublime layaair唯一不足的就是 insepct太垃圾 占用游戏界面 所以建议 ...
- day7-集合
一.定义变量是为了吹处理状态的变化,定义变量名是为了获取变量值.字符串.数字.列表.元组.字典都是为了更好的描述变量的状态1.可变不可变:变量名不变时,里面内容是否可以变化# 可变:列表.字典.修改变 ...
- ADO.NET学习心得《一》
大家好,我是代号六零一,很高兴又开始重启博客了,为了更好的加深自己的记忆和复习,今天开始坚持写写心得体会,刚开始学习ADO.NET的时候也是一脸懵逼的,代码只有动手敲打才会知道其实并不难,只要多敲几遍 ...
- Python 常用模块系列学习（1）--random模块常用function总结--简单应用--验证码生成
random模块--random是一个生成器 首先: import random #导入模块 print (help(random)) #打印random模块帮助信息 常用function ...
- nyoj 811-变态最大值 (max)
811-变态最大值 内存限制:64MB 时间限制:1000ms 特判: No 通过数:6 提交数:15 难度:1 题目描述: Yougth讲课的时候考察了一下求三个数最大值这个问题,没想到大家掌握的这 ...
- Sequelize小记
http://docs.sequelizejs.com/ 官方英文 Object-Relational Mapping 增 Model.create({field1:'a', field2:'b' ...
- spring security进阶 使用数据库中的账户和密码认证
目录 spring security 使用数据库中的账户和密码认证 一.原理分析 二.代码实现 1.新建一个javaWeb工程 2.用户认证的实现 3.测试 三.总结 spring security ...
- 记一次LDAP主从同步配置
LDAP主从同步 OpenLDAP在2.3版本之前的同步复制带有一系列缺点如只支持一主多从模式等,在此缺点就不多说,下文着重介绍一下OpenLDAP V2.4以后的同步负复制功能 同步功能 2.4版最 ...
- java变量与常量
常量: 定义:程序运行过程中,不能再次该表的指 作用: 1.固定的值,代表计算过程中经常用到的值,便于计算 2.用来代表一个含义 键盘:8代表up 4代表left 6代表right 5代表down ...