大家好，作为一名互联网行业的小白，写博客只是为了巩固自己学习的知识，但由于水平有限，博客中难免会有一些错误出现，有不妥之处恳请各位大佬指点一二！
博客主页：链接: https://blog.csdn.net/weixin_52720197?spm=1018.2118.3001.5343

1.先分析网页

可以把网页划分为7部分

2.拿取网页的素材

笔记本-Fn+F12

用ctrl+s可以把网页上显示的图片都保存下来

3.创建文件

3.1.引入样式

Rest.css样式

body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin: 0px; padding: 0px;}
/* 整个文本默认居中 */
body{text-align: center;font-size:14px;}
/* 所有的a标签都要去掉下划线 */
a{text-decoration: none;}
li{list-style: none;}

jd.css样式

4.在标签中写代码

4.1.导航框整体

<!--导航开始--><div class="nav">
<!--导航结束-->

在jd.css中，加入样式

.nav{/* 高度30 */height: 30px;/* 背景颜色 */background-color: #F7F7F7;}

4.1.1.导航框左边部分

jd.css


.warp{/* 大概在宽度1000 左右*/width: 1000px;margin: 0px auto;}.nav_ul1 {float: left;
}.nav_ul1 li{float: left;/* 行高 */line-height: 30px;
}

但是字体颜色不对

.nav_ul1 a{font-size:12px ;color: #666;
}

4.1.1.导航框右边部分

京东.html

```python
<ul class="nav_ul2"><li><a href="">wakcdfzfofgx  退出</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>

jd.css```html
.nav{/* 高度30 */height:30px;/* 背景颜色 */background-color: #F7F7F7;}.warp{/* 大概在宽度1000 左右*/width: 1000px;margin: 0px auto;}.nav_ul1, .nav_ul2 li{float: left;
}.nav_ul1 li{float: left;/* 行高 */line-height: 30px;margin-right: 15px;
}.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{font-size:12px ;color: #666;
}.nav_ul2 {float: right;
}.nav_ul2 li,.nav_ul2 span{line-height: 30px;margin-left: 20px;}

鼠标放上去会显示红色

.nav a:hover{color: red;
}

4.2.添加小图标

4.2.1.新建目录icon

把下载的全部复制过去

在中写入

<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>

在中

<i class="iconfont">图标编码;</i>

打开demon_index.html,并运行

就会出现图标编码

 <ul class="nav_ul1"><li><a href=""><i class="iconfont"></i>收藏京东</a></li></ul>

 <li><a href=""><i class="iconfont"></i>手机京东</a><span>|</span></li>

4.3.搜索框整体

4.3.1.搜索框开始与结束

jd.css

```html
/*搜索框开始*/
.search{margin-top: 20px;
}
.search img{/* 清楚之前的所有样式 */clear: both;float: left;
}
.search_div{float: right;/* 距上面20px */margin-top: 20px;
}
/* 搜索框的大小 */
.search_text{width: 265px;height: 21px;border: 3px solid #c91623;position: relative;left: 4px;top: -1px;
}
/* 搜索框按键的大小 */
.search_but{width: 51px;height: 29px;background-color: #c91623;border: opx;/* 无色#FFFFFF */color: #FFFFFF;
}
/*搜索框结束*/


京东.html
```html
<!--搜索框开始--><div class="search"><div class="warp"><img src="img/logo-201305.png" alt="" /><div class="search_div"><input type="text" class="search_text" /><input type="button" value="搜索" class="search_but" /></div></div></div><!--搜索框结束-->

4.4.搜索框整体

jd.css

/*标题开始*/
.title{margin-top: 130px;}
.title  h3{float: left;font-size: 23px;color:  #666;
}
.title  div{float: right;font-size: 14px;color: rgb(153, 153, 153);
}
/*标题结束*/

京东.html

<!--标题开始--><div class="title warp"><h3>数字商品购物车</h3><div><li><i class="iconfont"></i>不支持7天无理由退换；不提供源文件，仅支持在京东提供的相关软件中阅读</li></div></div><!--标题结束-->

4.5.显示菜单

京东.html

<!--显示菜单的开始--><div class="tips warp"><ul><li>商品名称</li><li>京东价</li><li>商品数量</li><li>操作</li></ul></div><!--显示菜单的结束-->

jd.css

/*显示菜单的开始*/
.tips{width: 1000px;height: 50px;background-color: #F1F1F1;/* 距最上面165px */margin-top: 165px;border: 1px solid #e9e9e9;
}
.tips li{float: left;line-height: 50px;font-size: 12px;color: gray;
}.tips li:nth-child(1){width: 490px;
}
.tips li:nth-child(2){margin-left: 100px;
}
.tips li:nth-child(3){margin-left: 100px;
}
.tips li:nth-child(4){margin-left: 100px;
}/*显示菜单的结束*/

4.5.商品详情展示

一共有5个列表

jd.css

/*商品详情展示开始*/
.info{/* 显示信息的方框宽度和高度 */width: 1000px;height: 100px;background-color: #e8ffe3;border: 1px solid #666;/* 距上面高度30px */margin-top: 30px;border-top: 3px solid #666;
}
/* 让方框内的信息 */
.info li{/* 向左浮动 */float: left;/* 距方框上面20px */margin-top: 10px;
}
.info a{font-size: 12px;color: #333333;
}
.info_1{margin-left: 20px;
}
.info_2{margin-left: 15px;/* 给图片加一个边框 */border: 1px solid gray;
}
.info_3{margin-left: 230px;width: 170px;height: 10px;
}
.info_4{margin-left: 45px;
}
.info_5{margin-right: 20px;
}
/*商品详情展示结束*/

京东.html

<!--商品详情展示开始--><!-- 第一个商品 --><div class="info warp"><ul><li class="info_1"><img src="img/1.jpg" width="80px" alt="" /></li><li class="info_2"><a>【Python编程:从入门到实践(第2版)</a></li><li class="info_3"><a>￥41.00</a></li><li class="info_4">1</li><li class="info_5"><a>删除</a></li></ul></div><!-- 第二个商品 --><div class="info warp"><ul><li class="info_1"><img src="img/2.jpg" width="80px" alt="" /></li><li class="info_2"><a>【穿越计算机的迷雾（第2版）</a></li><li class="info_3"><a>￥18.00</a></li><li class="info_4">1</li><li class="info_5"><a>删除</a></li></ul></div><!-- 第三个商品 --><div class="info warp"><ul><li class="info_1"><img src="img/3.jpg" width="80px" alt="" /></li><li class="info_2"><a>Python数据分析从入门到实践(全彩版)</a></li><li class="info_3"><a>￥34.30</a></li><li class="info_4">1</li><li class="info_5"><a>删除</a></li></ul></div><!--商品详情展示结束-->

4.6.商品结算

jd.css

/*结算模块开始*/
.balance{width: 1000px;height: 50px;border: 1px solid #666;margin-top: 30px;
}.balance_ul1,.balance_ul1>li,.balance_ul2>li{float: left;line-height: 50px;margin-left: 14px;
}
.balance_ul2{float: right;
}
.butt{width: 100px;height: 50px;background-color: #C91623;border: 0px;color: #FFFFFF;font-size: 20px;font-weight: bold;
}
.balance span{font-size: 25px;color: #C91623;font-weight: bold;
}
.balance_ul2 li:nth-child(1){width: 120px;}
.balance_ul2 li:nth-child(2){width: 150px;}
/*结算模块结束*/

京东.html

<!--结算开始--><div class="balance warp"><ul class="balance_ul1"><li><i class="iconfont"></i>清空购物车</li>  </ul><ul class="balance_ul2"><li>总计<span id="sum">¥93.30</span></li><li>返现<span id="zongjia">- ¥45.00</span></li><li><button class="butt">去结算</button></li></ul></div><!--结算结束-->

最后结果

仍有一些不足，希望大家指点一二

CSS学习笔记——搭建京东购物车网页相关推荐

Web前端 html css学习笔记（更新）
HTML CSS学习笔记 2021/9/29 网页简介 HTML简介第一个网页自结束标签和注释文档声明进制字符编码完整的文档结构 2021/9/30 VScode安装及使用实体 meta ...
京东购物车网页(静态)搭建
按照报告的形式写一个项目一.项目名称完成京东购物车网页搭建二.项目环境 1.软件环境:Win10+HBuilder+Chrome浏览器 2.项目思路 : 根据需要实现的效果,自上而下,依次实现导 ...
Metro UI CSS 学习笔记之一：简介和Metro UI CSS 环境搭建
简介: Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式. 这组风格被开发成一个独立的解决方案.Metro UI CSS包含两种类型的许可证: MIT和 ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
CSS学习笔记——精灵图(sprite)
CSS学习笔记目录一.什么是精灵图? 二.精灵图的优点三.精灵图的基本用法 1.打开ps导入精灵图 2.测量字母的大小及坐标 3.效果图 4.代码实现总结一.什么是精灵图? 所谓精灵图就是图片 ...
CSS学习笔记-—学会用PS切图和取色—day03(基本用法)
CSS学习系列文章目录 HTML和CSS学习笔记--day01 HTML.CSS学习笔记--day02 css4.2.4参考手册.zip(免费下载) 文章目录 CSS学习系列文章目录一.PS测量图片 ...

CSS学习笔记——搭建京东购物车网页

1.先分析网页

2.拿取网页的素材

3.创建文件

3.1.引入样式

4.在标签中写代码

4.1.导航框整体

4.1.1.导航框左边部分

4.1.1.导航框右边部分

4.2.添加小图标

4.2.1.新建目录icon

4.3.搜索框整体

4.3.1.搜索框开始与结束

4.4.搜索框整体

4.5.显示菜单

4.5.商品详情展示

4.6.商品结算

CSS学习笔记——搭建京东购物车网页相关推荐

最新文章

热门文章