HTML+CSS仿京东购物车页面静态页面

简介: HTML+CSS仿京东购物车页面静态页面

1 用到的知识

资源下载地址:https://download.csdn.net/download/ZGL_cyy/19861440

1.1 无序标签的使用

1.2 浮动的使用

float: right;

1.3 伪类的使用

.nav a:hover{

   color: red;

}

1.4 清除原有浮动所占位置

clear: both;

1.5 边框背景盒子布局div文字属性等等          

2 HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/jd.css"/>
    <link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
  </head>
  <body>
    <!--导航开始-->
      <div class="nav">
         <div class="warp">
            <ul class="nav_ul1">
              <li><a href=""><i class="iconfont">&#xe6d3;</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_but"/>
              </div>
          </div>
      </div>
    <!--搜索框结束-->
    <!--标题开始-->
      <div class="title warp">
          <h3>全部商品</h3>
          <div>
             <span>配送到</span>
            <select>
              <option>昌平区</option>
              <option>顺义区</option>
              <option>大兴区</option>
              <option>朝阳区</option>
              <option>昌平区</option>
            </select>
          </div>
      </div>
    <!--标题结束-->
    <!--显示菜单的开始-->
      <div class="tips warp">
         <ul>
          <li>
            <input type="checkbox" />
            全选
          </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" /> </li>
            <li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
            <li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
            <li class="info_4"><a>颜色:灰色+粉红</a> </li>
            <li class="info_5">¥182.5</li>
            <li class="info_6">
              <button>-</button>
              <input type="text" name="" id="" value="1" />
              <button class="bot">+</button>
            </li>
            <li class="info_7">¥182.5</li>
            <li>
              <a>删除</a><br />
              <a>已到我的关注</a>
            </li>
          </ul>
      </div>
     <div class="info warp">
          <ul>
            <li class="info_1"><input type="checkbox" /> </li>
            <li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
            <li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
            <li class="info_4"><a>颜色:灰色+粉红</a> </li>
            <li class="info_5">¥182.5</li>
            <li class="info_6">
              <button>-</button>
              <input type="text" name="" id="" value="1" />
              <button class="bot">+</button>
            </li>
            <li class="info_7">¥182.5</li>
            <li>
              <a>删除</a><br />
              <a>已到我的关注</a>
            </li>
          </ul>
      </div>
       <div class="info warp">
          <ul>
            <li class="info_1"><input type="checkbox" /> </li>
            <li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
            <li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
            <li class="info_4"><a>颜色:灰色+粉红</a> </li>
            <li class="info_5">¥182.5</li>
            <li class="info_6">
              <button>-</button>
              <input type="text" name="" id="" value="1" />
              <button class="bot">+</button>
            </li>
            <li class="info_7">¥182.5</li>
            <li>
              <a>删除</a><br />
              <a>已到我的关注</a>
            </li>
          </ul>
      </div>
    <!--商品详情展示结束-->
    <!--结算开始-->
     <div class="balance warp">
         <ul class="balance_ul1">
          <li>
            <input type="checkbox" name="" id="" value="" />
            全选
          </li>
          <li><a>删除选中商品</a></li>
          <li><a>移到我的关注</a></li>
          <li><a>清除下柜商品</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>

3 CSS代码

3.1 预处理css

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;}

3.2 jd购物车页面的css

.nav{
  height: 30px;
  background-color: #f1f1f1;
}
.warp{
  width: 1000px;
  margin: 0px auto;
}
.nav_ul1,.nav_ul2 li{
  float: left;
}
.nav_ul1 li{
  float: left;
  line-height: 30px;
  margin-right: 20px;
}
.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{
  font-size: 12px;
  color: gray;
}
.nav_ul2{
  float: right;
}
.nav_ul2 li,.nav_ul2 span{
  line-height: 30px;
  margin-left: 15px;
}
.nav 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_but{
  width: 51px;
  height: 29px;
  background-color: #c91623;
  border: 0px;
  color: #FFFFFF;
}
/*搜索框结束*/
/*标题开始*/
.title{
  margin-top: 130px;
}
.title h3{
  float: left;
  font-size: 23px;
  color:#c91623 ;
}
.title div{
  float: right;
  font-size: 14px;
  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: 12px;
  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: 30px;
  border-top: 3px solid  gray;
}
.info li{
    float:  left; 
    margin-top: 20px;
}
.info a{
  font-size: 12px;
  color: #333333;
}
.info_1{
  margin-left: 23px;
}
.info_2{
  margin-left: 15px;
  border: 1px  solid gray;
}
.info_3{
    width: 270px;
    height: 20px;
}
.info_4{
   margin-left: 45px;
}
.info_5{
  margin-left: 70px;
}
.info_6{
   margin-left: 40px;
}
.info_6 input{
  width: 30px;
  height: 12px;
  text-align: center;
  position: relative;
  top: -2px;
  left: -5px;
}
.info_6 button{
   width: 30px;
   height: 18px;
}
.bot{
   position: relative;
  left: -10px;
}
.info_7{
   margin-left: 40px;
}
/*商品详情展示结束*/
/*结算模块开始*/
.balance{
  width: 1000px;
  height: 50px;
  border: 1px  solid  gray;
  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;
}
/*结算模块结束*/

4.效果展示

目录
相关文章
|
12天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
11天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
55 6
|
8天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
27 2
|
12天前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
41 2
|
1月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
32 1
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
43 6
|
19天前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
52 0

热门文章

最新文章