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 ...
随机推荐
- 实现两个数字的交换（C语言）
int num1=10; int num2=20; //1.简单的数学方法实现数字交换 num1=num1+num2;//num1=30 num2=num1-num2;//num2=10 num1=n ...
- Mssql 查询某记录前后N条
Sqlserver 查询指定记录前后N条,包括当前数据 条件 [ID] 查询 [N]条 select * from [Table] where ID in (select top ([N]+1) ID ...
- 【并发编程】synchronized的使用场景和原理简介
1. synchronized使用 1.1 synchronized介绍 在多线程并发编程中synchronized一直是元老级角色,很多人都会称呼它为重量级锁.但是,随着Java SE 1.6对sy ...
- 领扣（LeetCode）对称二叉树 个人题解
给定一个二叉树,检查它是否是镜像对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的. 1 / \ 2 2 / \ / \ 3 4 4 3 但是下面这个 [1,2,2,null,3,nul ...
- 从surfaceflinger历史变更谈截屏
众所周知,有一个程序screencap可以截屏,这个程序十分简单,只是使用了surfaceflinger服务的截屏功能. 所以要了解截屏,看surfaceflinger服务的代码是不二首选.但是sur ...
- .NET进阶篇06-async异步、thread多线程3
知识需要不断积累.总结和沉淀,思考和写作是成长的催化剂 梯子 一.任务Task1.启动任务2.阻塞延续3.任务层次结构4.枚举参数5.任务取消6.任务结果7.异常二.并行Parallel1.Paral ...
- java运算符详解
java运算符: 定义:用来指明对于操作数的运算方式 按照操作数数目分类: 单目运算 数目运算 三目运算 a++ a+b (a>b) ? ...
- 使用MongoDB的Spring Boot和MongoTemplate教程
在本教程中,我们将构建一个Spring Boot应用程序,该应用程序演示如何使用MongoTemplate API访问MongoDB数据库中的数据. 对于MongoDB,我们将使用mLab,它提供了M ...
- [FPGA]Verilog利用PWM调制巧妙完成RGB三色彩虹呼吸灯(给简约的题目以美妙的解答)
概述 实现彩虹呼吸灯 题目就是这么简短,但这是目前我碰到的最有意思的一道题目,因为他有无数种解决方法,并且每一种都是那么高级或者巧妙,比如 可以利用3路不同初相的PWM调制信号驱动三颗RGB灯重叠呼吸 ...
- URL基本语法
1.URL全称为Uniform Resource Locator,即统一资源定位符.对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一 ...