近来发觉自己对于HTML的知识好像有所遗忘，所以开始准备复习HTML，想来想去最能锻炼HTML和CSS语法的无非是电商网站的静态页面，原本觉得没什么，可是当自己真正动手去写的时候才发现真的有点恶心，当自己一点一点开始动手的时候发觉，原来静态页面也不是那么容易，真的要考虑到很多方面，图片的截取，然后每张图片的宽高，浮动，内外边距，等等，不过也不是那么难，只要静下心，还是很容易的，也开始逐渐懂得"DIV+CSS"的含义，加油，首页做完了，之后还会陆续上传，其他页面的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/resect.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div class="headerBar"><!--顶部导航栏开始-->
<div class="topBar"><!--顶部导航栏的上部开始-->
<div class="comwidth">
<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">
<a href="#"><img src="img/icon/logo.gif" alt="logo" /></a>
</div>
<div class="search_box fl">
<input type="text" class="search_text fl"/>
<button class="search_btn fl">搜 索</button>
</div>
<div class="shopCar fl">
<span class="shoptext fl">购物车</span>
<span class="shopnum fl">10</span>
</div>
</div>
</div><!--顶部导航栏的中间部份结束-->
<div class="navBar"><!--顶部导航栏的底部开始-->
<div class="comwidth">
<div class="shopClass fl">
<h3>全部商品分类<i></i></h3>
<div class="shopClass_show">
<dl class="shopClass_item">
<dt><a href="#" >手机</a><a href="#">数码</a><a href="#" class="aLink b">合约机</a></dt>
<dd><a href="#" class="b">荣耀3K</a><a href="#" class="b">单反</a><a href="#" class="b">智能设备</a></dd>
</dl>
<dl class="shopClass_item">
<dt><a href="#" >手机</a><a href="#">数码</a><a href="#" class="aLink b">合约机</a></dt>
<dd><a href="#" class="b">荣耀3K</a><a href="#" class="b">单反</a><a href="#" class="b">智能设备</a></dd>
</dl>
<dl class="shopClass_item">
<dt><a href="#" >手机</a><a href="#">数码</a><a href="#" class="aLink b">合约机</a></dt>
<dd><a href="#" class="b">荣耀3K</a><a href="#" class="b">单反</a><a href="#" class="b">智能设备</a></dd>
</dl>
<dl class="shopClass_item">
<dt><a href="#" >手机</a><a href="#">数码</a><a href="#" class="aLink b">合约机</a></dt>
<dd><a href="#" class="b">荣耀3K</a><a href="#" class="b">单反</a><a href="#" class="b">智能设备</a></dd>
</dl>
<dl class="shopClass_item">
<dt><a href="#" >手机</a><a href="#">数码</a><a href="#" class="aLink b">合约机</a></dt>
<dd><a href="#" class="b">荣耀3K</a><a href="#" class="b">单反</a><a href="#" class="b">智能设备</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>
</ul>
</div>
</div><!--顶部导航栏的底部结束-->
</div><!--顶部导航栏结束-->
<div class="banner comwidth clearfix"><!--中间大图片部分开始-->
<div class="banner_bar banner_big">
<ul class="imgBox">
<li><a href="#" ><img src="img/banner/banner01.gif" alt="banner"/></a></li>
<li><a href="#"><img src="img/banner/banner02.gif" alt="banner"/></a></li>
</ul>
<div class="imgNum">
<a href="#" class="active"></a><a href="#"></a>
</div>
</div>
</div><!--中间大图片部分结束-->
<div class="shopTitle comwidth"><!--商品标题开始-->
<span class="icon"></span>
<h3>家用电脑</h3>
<a href="#" class="more">更多>></a>
</div><!--商品标题结束-->
<div class="shopList clearfix comwidth"> <!--家用电脑部分开始-->
<div class="leftArea">
<div class="banner_bar banner_small">
<ul class="imgBox">
<li><a href="#" ><img src="img/banner/banner_sm_01.gif" alt="banner"/></a></li>
</ul>
<div class="imgNum">
<a href="#" class="active"></a><a href="#"></a>
</div>
</div>
</div>
<div class="rightArea">
<div class="computer_top clearfix">
<div class="computer_top_item">
<div class="item_img">
<a href="#"><img src="img/banner/phon.gif" alt="手机"/></a>
</div>
<h3>华为navo1</h3>
<p>1899元</p>
</div>
<div class="computer_top_item">
<div class="item_img">
<a href="#"><img src="img/banner/phon.gif" alt="手机"/></a>
</div>
<h3>华为navo1</h3>
<p>1899元</p>
</div>
<div class="computer_top_item">
<div class="item_img">
<a href="#"><img src="img/banner/phon.gif" alt="手机"/></a>
</div>
<h3>华为navo1</h3>
<p>1899元</p>
</div>
<div class="computer_top_item">
<div class="item_img">
<a href="#"><img src="img/banner/phon.gif" alt="手机"/></a>
</div>
<h3>华为navo1</h3>
<p>1899元</p>
</div>
</div>
<div class="CT">
<div class="computer_bottom">
<div class="item_img leftArea">
<a href="#"><img src="img/banner/computer_bottom01.gif" alt="VR"/></a>
</div>
<div class="computer_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
<div class="computer_bottom">
<div class="item_img leftArea">
<a href="#"><img src="img/banner/computer_bottom01.gif" alt="VR"/></a>
</div>
<div class="computer_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
<div class="computer_bottom">
<div class="item_img leftArea">
<a href="#"><img src="img/banner/computer_bottom01.gif" alt="VR"/></a>
</div>
<div class="computer_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
<div class="computer_bottom">
<div class="item_img leftArea">
<a href="#"><img src="img/banner/computer_bottom01.gif" alt="VR"/></a>
</div>
<div class="computer_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
</div>
</div>
</div><!--家用电脑部分结束-->
<div class="shopTitle comwidth"><!--食品酒水标题开始-->
<span class="icon"></span>
<h3>食品酒水</h3>
<a href="#" class="more">更多>></a>
</div><!--食品酒水标题结束-->
<div class="shopList clearfix comwidth"> <!--食品酒水部分开始-->
<div class="leftArea">
<div class="banner_bar banner_small">
<ul class="imgBox">
<li><a href="#" ><img src="img/banner/banner_sm_02.gif" alt="banner"/></a></li>
</ul>
<div class="imgNum">
<a href="#" class="active"></a><a href="#"></a>
</div>
</div>
</div>
<div class="rightArea">
<div class="computer_top clearfix food">
<div class="computer_top_item">
<div class="food_img">
<a href="#"><img src="img/banner/foot.gif" alt="零食"/></a>
</div>
<h3>三月美食狂享购</h3>
<p>50元</p>
</div>
<div class="computer_top_item">
<div class="food_img">
<a href="#"><img src="img/banner/foot.gif" alt="零食"/></a>
</div>
<h3>三月美食狂享购</h3>
<p>40元</p>
</div>
<div class="computer_top_item">
<div class="food_img">
<a href="#"><img src="img/banner/foot.gif" alt="零食"/></a>
</div>
<h3>三月美食狂享购</h3>
<p>30元</p>
</div>
<div class="computer_top_item">
<div class="food_img">
<a href="#"><img src="img/banner/foot.gif" alt="零食"/></a>
</div>
<h3>三月美食狂享购</h3>
<p>20元</p>
</div>
</div>
<div class="CT">
<div class="computer_bottom">
<div class="item_img leftArea YP">
<a href="#"><img src="img/banner/YP.gif" alt="VR"/></a>
</div>
<div class="computer_text">
<p>康比特 维他保咀嚼片 60片</p>
<h3>￥600.00</h3>
</div>
</div>
<div class="computer_bottom">
<div class="item_img leftArea">
<a href="#"><img src="img/banner/YP.gif" alt="VR"/></a>
</div>
<div class="computer_text">
<p>康比特 维他保咀嚼片 60片</p>
<h3>￥600.00</h3>
</div>
</div>
<div class="computer_bottom">
<div class="item_img leftArea">
<a href="#"><img src="img/banner/YP.gif" alt="VR"/></a>
</div>
<div class="computer_text">
<p>康比特 维他保咀嚼片 60片</p>
<h3>￥600.00</h3>
</div>
</div>
<div class="computer_bottom">
<div class="item_img leftArea">
<a href="#"><img src="img/banner/YP.gif" alt="VR"/></a>
</div>
<div class="computer_text">
<p>康比特 维他保咀嚼片 60片</p>
<h3>￥600.00</h3>
</div>
</div>
</div>
</div>
</div><!--食品酒水部分结束-->
<div class="foot">
<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>Copyright © 2006 - 2014 慕课版权所有 京ICP备09037834号 京ICP证B1034-8373号 某市公安局XX分局备案编号：123456789123</p>
<p class="weblog"><a href="#"><img src="img/banner/weblog.gif"/></a><a href="#"><img src="img/banner/weblog.gif"/></a><a href="#"><img src="img/banner/weblog.gif"/></a><a href="#"><img src="img/banner/weblog.gif"/></a></p>
</div>
</body>
</html>
resect.js文件
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr, acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,
sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption, tbody,tfoot,thead,tr,th,td{border:0;outline:0;vertical-align:baseline; background:transparent;margin:0;padding:0;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
input,button{border: none;} /*清除边框*/
input,textarea,select{
background: none;
}
a {color: #ccc;}
/*清除浮动*/
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom:1;
}
.fl {
float: left;
}
.fr {
float: right;
}
main.js
/* 共用class */
.comwidth {
width:1000px;
margin-left: auto;
margin-right: auto;
}
.leftArea {
float: left;
}
.rightArea {
float: right;
}
/* 共用class */
.topBar {
height: 31px;
background-color: #F7F7F7;
line-height: 31px;
}
.collection {
background:url(../img/icon/wjx.gif) left center no-repeat;
padding-left: 20px;
}
.topBar a:hover {
color: aqua;
}
/*顶部导航栏的logo*/
.logoBar {
height: 85px;
background-color: #1d7ad9;
}
.logo {
padding-left: 36px;
padding-top: 7px;
}
/*搜索框部分*/
.search_box {
width: 430px;
padding-top: 27px;
margin-left: 180px;
}
.search_text {
width: 350px;
height: 35px;
line-height: 35px\9;
padding: 0 5px;
background-color: #FFF;
}
.search_btn {
width: 70px;
height: 35px;
font-size: 14px;
background-color: #ff8c00;
color: #fff;
}
/*购物车部分开始*/
.shopCar {
width: 145px;
height: 35px;
margin-top: 23px;
margin-left: 30px;
background-color: #ff8c00;
margin-left: 60px;
}
.shoptext {
font-size: 14px;
font-family: "微软雅黑";
height: 100%;
width: 87px;
border-right: 1px solid #E27A00;
line-height: 35px;
color: #FFF;
background: url(../img/icon/shopCar.gif) 10px center no-repeat;
text-indent: 40px;
}
.shopnum {
width: 27px;
height: 35px;
color: #FFFFFF;
border-left: 1px solid #FF9C01;
line-height: 35px;
color: #FFF;
background: url(../img/icon/shopNumList.gif) 33px center no-repeat;
text-align: right;
padding-right: 29px;
}
/*导航栏开始*/
.navBar {
height: 35px;
background-color: #1369C0;
color: #FFFFFF;
}
.shopClass {
width: 190px;
position: relative;
}
.shopClass h3 {
line-height: 35px;
text-align: center;
}
.shopClass i {
width: 11px;
height: 7px;
overflow: hidden;
background: url(../img/icon/shopClass.gif) left center no-repeat;
display: inline-block;
margin-left: 11px;
}
.shopClass,.nav {
font-family: "微软雅黑";
}
.nav {
line-height: 35px;
}
.nav li {
float: left;
}
.nav a{
height: 35px;
display: inline-block;
padding: 0 35px;
color: #FFFFFF;
}
.nav .active {
background-color: #4593FD;
}
/*商品弹出列表*/
.shopClass_show {
position: absolute;
width: 100%;
left: 0px;
top: 35px;
}
.shopClass_item .b {
font: 14px/1 "微软雅黑";
}
.shopClass_item a {
color: #FFFFFF;
display: inline-block;
margin-left: 8px;
}
.shopClass_item {
background-color: #4593FD;
padding: 14px 10px;
border-bottom: 1px solid #3487F2;
}
.shopClass_item .aLink {
height: 20px;
width: 48px;
background: url(../img/icon/aLink.gif) left center no-repeat;
line-height: 20px;
text-align: center;
}
.shopClass_item dt {
height: 22px;
background: url(../img/icon/leftList.gif) right center no-repeat;
}
/*banner开始*/
.banner {
margin-bottom: 15px;
}
.banner_bar {
float: right;
position: relative;
overflow: hidden;
}
.banner_big,.banner_big img {
width: 810px;
height: 326px;
}
.banner_big .imgBox {
width: 1620px;
height: 326px;
}
.imgBox {
position: absolute;
left: 0;
top: 0;
}
.imgBox li {
float: left;
}
.imgBox img {
display: block;
}
.imgNum {
position: absolute;
left: 0;
bottom: 15px;
width: 100%;
text-align: center;
}
.imgNum a {
background-color: #FFFFFF;
overflow: hidden;
height: 12px;
width: 12px;
border-radius: 50%;
display: inline-block;
margin: 0 3px;
}
.imgNum .active {
background-color:#FF8800;
}
.shopTitle {
height: 45px;
font-family: "微软雅黑";
line-height: 45px;
margin-bottom: 15px;
}
.shopTitle h3 {
font-size: 24px;
float: left;
font-weight: 400;
}
.shopTitle .icon {
height: 44px;
width: 43px;
background: url(../img/shopTitle.gif) left top no-repeat;
float: left;
padding-left: 15px;
}
.shopTitle .more {
float: right;
font-family: "宋体";
}
/*商品列表部分开始*/
.shopList {
margin-bottom: 15px;
}
.shopList .leftArea {
width: 190px;
}
.shopList .rightArea {
width: 810px;
}
.banner_small,.banner_small img {
width: 190px;
height: 400px;
}
.banner_small .imgBox {
width: 190px;
height: 400px;
}
/*商品列表右部的顶部始*/
.shopList .rightArea {
border-bottom: 3px solid #FF7201;
height: 397px;
}
.computer_top {
margin-right: -4px ;
}
.computer_top_item {
width: 202px;
height: 280px;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
font-family: "微软雅黑";
float: left;
}
.computer_top_item h3 {
display: inline-block;
margin-top: 23px;
}
.computer_top_item p {
line-height: 21px;
color: #FFB97F;
}
.CT {
margin-right: -4px ;
}
.computer_bottom {
height: 117px;
width: 202px;
border-right: 1px solid #ccc;
float: left;
}
.computer_bottom img,.computer_text {
margin-top: 20px;
margin-left: 5px;
}
.computer_bottom .item_img {
width: 75px;
}
.computer_text {
float: right;
width: 107px;
}
.computer_text p {
font-size: 12px;
color: #FF7300;
line-height: 20px;
}
.computer_text h3 {
font-size: 16px;
color: #181818;
line-height: 20px;
font-weight: 400;
}
/*食品酒水部分开始*/
.food_img {
margin-top: 50px;
}
/*底部开始*/
.foot {
background-color: #D4D4D4;
margin-top: 20px;
text-align: center;
line-height: 24px;
margin-top: 40px;
padding-top: 20px;
}
.foot i{
font-style: normal;
margin: 0 5px;
}
.foot a {
color: black;
}
.weblog img {
margin-right: 25px;
margin-top: 36px;
}
扫一扫
1090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
