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.效果展示

目录
相关文章
|
10天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
33 1
[HTML、CSS]细节与使用经验
|
12天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
26 1
[HTML、CSS]知识点
|
7天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
|
3天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
27 1
|
8天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
19 3
|
15天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
40 2
|
18天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
|
18天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。