html+css购物网的实现
html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的网页</title>
<link type="text/css" rel="stylesheet" href="style/reset.css" />
<link type="text/css" rel="stylesheet" href="style/main.css" />
</head>
<body>
<div class="headerBar">
<div class="topBar">
<div class="comWidth"><!-- 该div仅仅是为了提供和其他盒子一样的class名，方便在css中设定一样的长度-->
<div class="leftArea">
<a href="#" class="collection">收藏慕课</a>
</div>
<div class="rightArea">
欢迎来到慕课网！<a href="#">[登陆]</a><a href="#">[免费注册]</a>
</div>
</div>
</div>
<div class="logoBar">
<div class="comWidth">
<div class="logo fl"><!--进行左右浮动的简单方法，但class名还是logo-->
<a href="#"><img src="data:images/logo.jpeg" alt="慕课网" /></a>
</div>
<div class="search_box fl">
<input type="text" class="search_text fl" />
<input type="button" value="搜 索" class="search_btn fr"/>
</div>
<div class="shopCar fr">
<span class="shopText fl">购物车</span>
<span class="shopNum fl">0</span>
</div>
</div>
</div>
<div class="navBox">
<div class="comWidth">
<div class="shopClass fl">
<h3>全部产品分类<i></i></h3>
<div class="shopClass_show">
<dl class="shopClass_item">
<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
<dd><a href="#">荣耀3x</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
</dl>
<dl class="shopClass_item">
<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
<dd><a href="#">荣耀3x</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
</dl>
<dl class="shopClass_item">
<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
<dd><a href="#">荣耀3x</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
</dl>
<dl class="shopClass_item">
<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
<dd><a href="#">荣耀3x</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
</dl>
<dl class="shopClass_item">
<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
<dd><a href="#">荣耀3x</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
</dl>
</div>
</div>
<ul class="nav fl">
<li><a href="#" class="active">数码城</a></li>
<li><a href="#">天黑黑</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">发现</a></li>
<li><a href="#">二手特卖</a></li>
<li><a href="#">名品会</a></li>
</ul>
</div>
</div>
</div>
<div class="banner comWidth clearfix"><!--因为banner是浮动的，他没有宽度，它里面的div有宽度，所以会产生浮动，要进行清浮动clearfix-->
<div class="banner_bar banner_big">
<ul class="imgBox">
<li><a href="#"><img src="data:images/banner/banner_01.jpg" alt="图片" /></a></li>
<li><a href="#"><img src="data:images/banner/banner_02.jpg" alt="图片" /></a></li>
</ul>
<div class="imgNum">
<a href="#" class="active"></a> <a href="#"></a> <a href="#"></a>
</div>
</div>
</div>
<div class="shopTit comWidth">
<span class="icon"></span>
<h3>家用电脑</h3>
<a href="#" class="more">更多>></a>
</div>
<div class="shopList comWidth clearfix">
<div class="leftArea">
<div class="banner_bar banner_small">
<ul class="imgBox">
<li><a href="#"><img src="data:images/banner/banner_01.jpg" alt="图片" /></a></li>
<li><a href="#"><img src="data:images/banner/banner_02.jpg" alt="图片" /></a></li>
</ul>
<div class="imgNum">
<a href="#" class="active"></a> <a href="#"></a> <a href="#"></a>
</div>
</div>
</div>
<div class="rightArea">
<div class="shopList_top clearfix">
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="data:images/banner/shopimg.jpg" alt="图片"/></a>
</div>
<h3>小米M3</h3>
<p>1100元</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="data:images/banner/shopimg02.jpg" alt="图片"/></a>
</div>
<h3>小米M4</h3>
<p>1350元</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="data:images/banner/shopimg03.jpg" alt="图片"/></a>
</div>
<h3>小米M4</h3>
<p>1580元</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="data:images/banner/shopimg.jpg" alt="图片"/></a>
</div>
<h3>小米M3</h3>
<p>1100元</p>
</div>
</div>
<div class="shopList_sm clearfix">
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="data:images/banner/shopimg.jpg" alt="图片"/></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>售价：1100</h3>
</div>
</div>
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="data:images/banner/shopimg.jpg" alt="图片"/></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>售价：1100</h3>
</div>
</div>
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="data:images/banner/shopimg.jpg" alt="图片"/></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>售价：1100</h3>
</div>
</div>
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="data:images/banner/shopimg.jpg" alt="图片"/></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>售价：1100</h3>
</div>
</div>
</div>
</div>
</div>
<div class="shopTit comWidth">
<span class="icon"></span>
<h3>家用电脑</h3>
<a href="#" class="more">更多>></a>
</div>
<div class="shopList comWidth clearfix">
<div class="leftArea">
<div class="banner_bar banner_small">
<ul class="imgBox">
<li><a href="#"><img src="data:images/banner/banner_01.jpg" alt="图片" /></a></li>
<li><a href="#"><img src="data:images/banner/banner_02.jpg" alt="图片" /></a></li>
</ul>
<div class="imgNum">
<a href="#" class="active"></a> <a href="#"></a> <a href="#"></a>
</div>
</div>
</div>
<div class="rightArea">
<div class="shopList_top clearfix">
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="data:images/banner/shopimg.jpg" alt="图片"/></a>
</div>
<h3>小米M3</h3>
<p>1100元</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="data:images/banner/shopimg02.jpg" alt="图片"/></a>
</div>
<h3>小米M4</h3>
<p>1350元</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="data:images/banner/shopimg03.jpg" alt="图片"/></a>
</div>
<h3>小米M4</h3>
<p>1580元</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="data:images/banner/shopimg.jpg" alt="图片"/></a>
</div>
<h3>小米M3</h3>
<p>1100元</p>
</div>
</div>
<div class="shopList_sm clearfix">
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="data:images/banner/shopimg.jpg" alt="图片"/></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>售价：1100</h3>
</div>
</div>
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="data:images/banner/shopimg.jpg" alt="图片"/></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>售价：1100</h3>
</div>
</div>
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="data:images/banner/shopimg.jpg" alt="图片"/></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>售价：1100</h3>
</div>
</div>
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="data:images/banner/shopimg.jpg" alt="图片"/></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>售价：1100</h3>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p><a href="#">小米手机简介</a><i>|</i><a href="#">手机广告</a><i>|</i><a href="#">诚信卖机</a><i>|</i><a href="#">联系我们</a><i>|</i>客服热线：400-675-1234</p>
<p>fCopyright © 2016 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
<p class="web">
<a href="#"><img src="data:images/banner/footer.jpg" alt="图片" /></a>
<a href="#"><img src="data:images/banner/footer.jpg" alt="图片" /></a>
<a href="#"><img src="data:images/banner/footer.jpg" alt="图片" /></a>
</p>
</div>
</body>
</html>
main.css文件
@charset "utf-8";
/* CSS Document */
/*公用的*/
.comWidth{margin-left:auto;margin-right:auto;width:1000px;}/*左右外边距都居中，处于水平位置*/
.leftArea{float:left;}
.rightArea{float:right;}
/*topBar*/
.topBar{height:31px; background-color:#F7F7F7; line-height:31px;}/*line-height表示行高，这样设置可以让字体处于中间位置*/
.collection{background:url(../images/icon/collection.png) left center
no-repeat; padding-left:23px; font-weight:bold;}/*left 表示背景图片的x坐标靠最左，center表示y坐标居中，bold表示字体加粗*/
.topBar a:hover{color:blue;}/*让所有超链接的字体，只要鼠标放上去颜色就会产生变化*/
/*logoBar*/
.logoBar{height:85px; background-color:#1D7AD9;}
.logo{padding-left:41px; padding-top:13px; }/*设定内边距*/
/*search*/
.search_box{width:430px; padding-top:23px; padding-left:185px;}
/*.search_text{width:350px;height:14px;line-height:14px;padding:11px 5px 10px; background-color:#FFF;}这是第一种解决IE6中的问题*/
.search_text{width:350px; height:35px; line-height:35px/9; padding:0 5px; background-color:#FFF;}/*这是第二种，/9是指在所有IE阅览器中适用*/
.search_btn{width:70px; height:35px; font-size:14px; font-family:"MicrosoftYaHei", "微软雅黑"; background-color:#FF8C00; color:#FFF;}
/*购物车*/
.shopCar{width:145px; height:35px; background-color:#FF8C00; margin-top:23px; font-size:14px; font-family:"MicrosoftYaHei", "微软雅黑"; color:#FFF; display:inline; }
.shopText{ height:100%; width:87px; line-height:35px; border-right:#E27A00 solid 1px; background:url(../images/icon/shopCar.png) 5px center no-repeat; text-indent:40px; }
.shopNum{width:27px; height:35px; border-left:#E27A00 solid 1px; line-height:35px; background:url(../images/icon/sanjiao.jpg) 33px center no-repeat; text-align:right; padding-right:29px;}
/*导航*/
.navBox{height:35px; background-color:#1369C0; color:#FFF;}
.shopClass{width:190px; position:relative;}/*overflow:hidden可以将超出该区域的内容隐藏掉*/
.shopClass h3{ text-align:center; line-height:35px; }
.shopClass i{width:22px; height:7px; overflow:hidden; background:url(../images/icon/fenlei.png) left center no-repeat;
display:inline-block; margin-left:5px;}
.nav,.shopClass{font-family:"MicrosoftYaHei", "微软雅黑"; }
.nav{line-height:35px;}
.nav li{float:left;}
.nav a{padding:0 35px; height:35px; display:inline-block; color:#FFF;}/*让a超链接有一个区域块，而不是仅仅是文字*/
.nav .active{background-color:#4593FD;}
/*商品弹出列表*/
.shopClass_show{background-color:#4593FD; position:absolute; left:0; top:35px; width:100%;}
.shopClass_item{padding:14px 10px; border-bottom:#3487F2 solid 1px; border-top:#5AA1FE solid 1px;}
.shopClass_item dt{height:24px; background:url(../images/icon/fenlei1.png) right center no-repeat;}
.shopClass_item .b{/*font-family:"MicrosoftYaHei", "微软雅黑"; font-size::14px; 其中1表示行高line-height：1px*/font:14px/1 "MicrosoftYaHei", "微软雅黑"; font-weight:bold; }
.shopClass_item a{color:#FFF;}
.shopClass_item .aLink{width:48; height:20px; background-color:#06C; display:inline-block; line-height:20px; text-align:center; text-decoration:underline;}
/*banner部分*/
.banner{margin-bottom:15px;}
.banner_bar{ float:right; position:relative; overflow:hidden; }
.imgBox{ position:absolute; left:0; top:0;}
.imgBox li{float:left;}
.imgBox img{ display:block;}
.imgNum{position:absolute; left:0; bottom:20px; width:100%; text-align:center;}
.imgNum a{width:20px; height:5px; display:inline-block ;overflow:hidden; background:#FFF; margin:0 3px;}
.imgNum .active{background-color:#FC0;}
.banner_big,
.banner_big img{width:810px; height:355px;}
.banner_big .imgBox{width:1620px; height:355px;}
.banner_small,/*注意后面那个逗号不能掉*/
.banner_small img{width:190px; height:400px;}
.banner_small .imgBox{width:380px; height:400px;}
/*商品标题*/
.shopTit{height:44px; font-family:"MicrosoftYaHei", "微软雅黑"; line-height:44px; margin-bottom:15px;}
.shopTit h3{font-size:24px; float:left; font-weight:normal;/*把加粗干掉*/}
.icon{height:44px; width:44px; background:url(../images/icon/shopTit.jpg) left top no-repeat; float:left; padding-left:15px;}
/*浮动了以后内嵌元素就支持宽高了，就没必要用display：inline-block；*/
.more{float:right; font-family:"宋体";}
.more:hover{color:blue; text-decoration:underline;}/*这个元素是对超链接，当鼠标移动到超链接时会发生的变化*/
/*商品列表*/
.shopList{margin-bottom:30px;}
.shopList .leftArea{width:190px;}
.shopList .rightArea{width:808px; border:#999 solid 1px; border-bottom:#F90 solid 3px; height:396px; overflow:hidden;}
/*商品列表右侧*/
.shopList_top{margin-right:-4px;}
.shop_item{width:202px; height:279px; border-right:#999 solid 1px; border-bottom:#999 solid 1px; text-align:center; font-family:"MicrosoftYaHei", "微软雅黑"; float:left; }
.shop_img{ height:218px;}
.shop_img img{height:218px; width:100%; display:block;}
.shop_item h3{font-size:16px; font-weight:bold; }
.shop_item p{font-size:14px; color:#F00; line-height:21px; }
/*商品列表右侧小*/
.shopList_sm{margin-right:-4px;}
.shopItem_sm{width:202px; height:116px; border-right:#999 solid 1px; border-bottom:#999 solid 1px; text-align:center; font-family:"MicrosoftYaHei", "微软雅黑"; float:left;}
.shopItem_smImg{width:95px; height:95px; text-align:center; float:left; padding-top:10px;}
.shopItem_smImg img{width:95px; height:95px; display:inline-block;}
.shopItem_text{padding-top:28px; float:left; width:100px;}
.shopItem_text h3{font-family:"MicrosoftYaHei", "微软雅黑"; font-size:16px; font-weight:normal; color:#181818; line-height:30px;}
.shopItem_text p{color:#FF7300;}
/*网页脚部*/
.footer{ background-color:#D4D4D4; text-align:center; line-height:24px; padding:50px 0; font-family:"宋体";}/*text-align:center父类的div样式不能作用到子类的div样式中*/
.footer i{font-style:normal; margin:0 5px;}
.footer a{color:#000;}
.footer a:hover{color:blue; }
.web img{ width:50px; height:50px; margin:10px 10px;}
reset.css文件
@charset "utf-8";
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;border:none;background:none;}
textarea{resize:none;}
a{text-decoration:none;color:#656565;}/*这个color是将所以的超链接的字体都变成该颜色*/
/*清除浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}/*直接在表签class名空格一个后加他，可以进行左右浮动，更加省事，不用一个个的写进行左右浮动*/
html+css购物网的实现相关推荐
- HTML期末作业-绿色果蔬商城购物网模板(HTML+CSS+JavaScript)
HTML期末作业-绿色果蔬商城购物网模板(HTML+CSS+JavaScript) 商城购物网HTML模板,(HTML+CSS+JavaScript)布局,全套模板,包括商城首页.特色产品.产品详情. ...
- web前端之锋利的jQuery十一：综合开发，编写购物网首页
web前端之锋利的jQuery十一:综合开发,编写购物网首页 这章主要介绍如何搭建一个前端网页,文章最后面有完整的代码,前面的主要是说明 第一步:搭建网页结构 购物网站基本上可以分为以下几部分: 头部 ...
- Java Web实训项目：西蒙购物网（Simonshop）
一.功能需求 1.只有注册用户成功登录之后才可查看商品类别,查看商品,选购商品,生成订单.查看订单. 2.只有管理员才有权限进入购物网后台管理,进行用户管理.类别管理.商品管理与订单管理. 二.设计思 ...
- php商城的购物车功能,php实现购物车功能（以大苹果购物网为例）
首先是几个简单的登录页面 登录 用户名: 密 码: 登录页面写好之后,需要进入处理页面,从数据库中调出用户名和密码: session_start(); //开启session 必须要写到第一行 hea ...
- SSM框架笔记16：EASYUI_SSM框架西蒙购物网
EASYUI_SSM框架西蒙购物网 功能需求: 1.只有注册用户成功登录之后才可查看商品类别,查看商品,选购商品,生成订单.查看订单. 2.只有管理员才有权限进行购物网后台管理(用户管理+类别管理+商 ...
- SSM框架笔记15：SSM框架西蒙购物网（XML配置方式）
SSM框架西蒙购物网(XML配置方式) 功能需求: 1.只有注册用户成功登录之后才可查看商品类别,查看商品,选购商品,生成订单.查看订单. 2.只有管理员才有权限进行购物网后台管理(用户管理+类别 ...
- 牛腩购物网 8 整合用户留言 重装系统之后iis7.5 sql2008 vs2010安装顺序,AspNetPager 控件的使用,为什么 anp.StartRecordIndex 总是为1...
今天新装了系统,从windows server 2003 换到 windows server 2008 企业版,总体来说还是蛮好的,就是需要对2008系统进行优化. 我担心的软件问题不是问题,因为在8 ...
- 山东建筑大学校内购物网（SdaiBuy.com ）V1.2 Beta
名称:山东建筑大学校内购物网(SdaiBuy.com ) 开发:赵光(JesseZhao) 邮箱:jessz@live.com 版本:V1.2 Beta 开源协议:GPL协议 演示地址:http:// ...
- HTML+CSS实现网易云音乐首页的主播电台页面
HTML+CSS实现网易云音乐首页的主播电台页面 这个页面首先使用了css的定位(postion)属性.弹性盒子(display)属性以及VM与REM,图标使用了阿里巴巴矢量图标库的矢量图标.下面让我 ...
最新文章
- 用x86的模拟器内核记得安装intel的haxm
- 在C#后端处理一些结果然传给前端Javascript或是jQuery
- 【设计模式】外观模式 ( 概念 | 适用场景 | 优缺点 | 代码示例 )
- Spring Boot: Tuning your Undertow application for throughput--转
- 万字长文了解模拟退火算法原理及求解复杂约束问题（源码实现）
- python学习笔记（10）--组合数据类型(序列类型)
- (需求实战_01) SpringBoot2.x 整合RabbitMQ_生产端
- mysql 5.6 外键_mysql 5.6外键约束错误;没有发生在5.5
- Makefile自动生成：cmake
- 基于MATLAB的语音信号设计,基于MATLAB的语音信号处理系统设计
- 获取微信公众号关注页链接
- 基于 mini2440 电阻式触摸屏（四）：mini2440触摸屏驱动分析
- 智能营销增益（Uplift Modeling）模型——pylift库的使用（二）
- Photoshop | 快速抠头发（调整边缘/选择并遮住）
- 万维钢：我怎样管理信息
- 基于语音的情绪识别系统（Python）
- [WinError 10054] 远程主机强迫关闭了一个现有的连接
- 朋友去华为面试，轻松拿到26K的Offer，羡慕了......
- 延迟补偿在C/S架构游戏协议设计和优化中的应用
- JAVA与PHP之间进行aes加密解密