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 ...
随机推荐
- PHP根据ip获取地理位置(通过高德地图接口)
PHP根据ip获取地理位置(通过高德地图接口)<pre>//restapi.amap.com/v3/ip?key=2004f145cf3a39a72e9ca70ca4b2a1dc& ...
- 2019年PHP最新面试题（含答案）
1. 数据库设计经验,为什么进行分表?分库?一般多少数据量开始分表?分库?分库分表的目的?什么是数据库垂直拆分?水平拆分?分区等等 一:为什么要分表 当一张表的数据达到几百万时,你查询一次所花的时间会 ...
- ThinkPHP 怎样让URL访问的时候省略 index.php
ThinkPHP 怎样让URL访问的时候省略 index.php Nginx 服务器配置 修改 nginx.conf 文件 location / { // …..省略部分代码 if (!-e $req ...
- 搭建Nginx七层反向代理
基于https://www.cnblogs.com/Dfengshuo/p/11911406.html这个基础上,在来补充下七层代理的配置方式.简单理解下四层和七层协议负载的区别吧,四层是网络层,负载 ...
- ThreadLocal原理分析与代码验证
ThreadLocal提供了线程安全的数据存储和访问方式,利用不带key的get和set方法,居然能做到线程之间隔离,非常神奇. 比如 ThreadLocal<String> thread ...
- Redux中间件Redux-thunk的配置
当做固定写法吧 截图里少一个括号,已代码为主 import {createStore,applyMiddleware,compose} from 'redux' import thunk from ' ...
- python+appium搭建的测试环境
: 1,安装jdk JDK下载好jdk直接点下一步就可以了,然后开始配置变量classpath, path, Java_home:再运行cmd,并输入Java和javac看输出判断环境变量是否配好了. ...
- ArcGIS 用QueryTask查询上限1000的问题
1.打开ArcGIS Server找到自己发布的服务,右键Service Properties,左侧点击Parameters,右侧有一个Maximum number of records return ...
- Python-beautifulsoup库
#beautifulsoup库的安装 pip install beautifulsoup4 python -m pip install --upgrage pip from bs4 import Be ...
- C博客作业00—我的第一篇博客
C博客作业00-我的第一篇博客 1. 你对网络专业或者计算机专业了解是怎样? 泛泛了解 - 原先只知道网络工程隶属于计算机工程学院,与院中其他专业一样,同样都需要学习大量的计算机基础知识,然后再分支学 ...