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 ...
随机推荐
- [springboot 开发单体web shop] 6. 商品分类和轮播广告展示
商品分类&轮播广告 因最近又被困在了OSGI技术POC,更新进度有点慢,希望大家不要怪罪哦. 上节 我们实现了登录之后前端的展示,如: 接着,我们来实现左侧分类栏目的功能. ## 商品分类|P ...
- vue 实现单选/多选效果
转:https://blog.csdn.net/Number7421/article/details/81002729 不过我以前都写过这三种方法了,很pang额,怕之后忘记了,偷个懒拿别人的,以免以 ...
- 【笔记】vue和ssm开发接口联调跨域问题
爬了两个小时的大坑 前端在github上拉了个vue项目,由于从来没正式学过vue,跨域这个问题一直困扰了很久. 目前暂时能用的解决方案(开发环境)就是: 前端在vue.config.js中加入代理. ...
- Arduino 处理JSON格式的数据
Arduino 处理JSON格式的数据 1.安装 ArduinoJson这个包 2.程序代码 # include <ArduinoJson.h> #define ALINK_BODY_FO ...
- pat 1046 Shortest Distance（20 分） (线段树)
1046 Shortest Distance(20 分) The task is really simple: given N exits on a highway which forms a sim ...
- 发送大数据时，PDU的问题？
昨天发现通过 Ice发送请求传递一个大块数据时,当请求的体积大于1.2M后,直接抛出异常Connection Lost,对方peer或是断开了.通过防火墙配置排查,以及对同一网络同一机器的php服务p ...
- Javascript脚本语言
找组件用 id (唯一) 2.name 样式 使用分类 1 页面中 2 建JS文件 可以放在head也可以在body 工作区可以有 1 全局变量 2 由多个函数构成 标签编辑器 onChange 改变 ...
- Linux系统中文件行末尾出现^M的原因及解决办法
不同系统,有不同的换行符号: 在windows下的文本文件的每一行结尾,都有一个回车('\n')和换行('\r') 在linux下的文本文件的每一行结尾,只有一个回车('\n'); 在Mac下的文本文 ...
- PostGIS 递归方法
在Oracle数据库中,有可以实现递归的函数 select * from table_name start with [condition1] connect by [condition2] 最近发现 ...
- PHP 模板引擎
PHP模板引擎的由来 ● 为了解决当时混合开发WEB应用出现的一系列问题:代码难维护,代码不可重用,程序员要求知识广等问题 ● 实现后端与前端不完全分离,开发与美工可以分工合作,提高效率 PHP模板引 ...