H5学习小结——div+css创建电子商务静态网页

使用Sublime Text软件编写电子商务类网站静态形式首页

   经过差不多一星期的学习，基本掌握了div+css的用法之后，开始了实战练习。首先要做的就是要练习一下一般电子商务网页的编写，我做的是下图效果的网页，是一个关于台湾特产的网页。如图：

     拿到图片之后，首先要分析一下整个网页的结构，上图所示的网页稍微分析一下就可以看出具体分为四个部分，为头部header，中间的广告ad_img，中间的主体内容main和底部的footer，当然具体的还可以分成很多部分，这里主要看个人的习惯，所以在这就不一一写出来了，具体的会在后面的代码部分展示出来。

     个人感觉写代码不怎么难，主要是你做一个网页的时候用到的方法和思路，思路正确的话你的速度会大大的增加，这里我可是吃了很多的教训，由于急于完成这个项目，我就思考了一下具体的布局就开始写代码了，闷头苦写了半天之后，突然发现和要求那真是相差十万八千里，于是又开始埋头苦改，改了半天也没改出要求的那种效果。多亏了一位大神的指点，他说在拿到项目之后不要急着去做，而是要分析一下具体的布局和思路，把大致的轮廓做出来，然后再一步一步的写。还真是，第二遍重新做的时候，速度大大的加快，不到一会就把这个网页做出来了，收获蛮多的，以后继续加油。！下面为具体的代码部分，网页的各种素材可以去我的百度网盘下载：网页资料下载

css样式部分	
*{margin:0px;padding: 0px;
	}
	html,body{font-family: "微软雅黑";
	font-size: 14px;
	text-decoration: none;
}
	.all{
		width: 100%;
		min-width: 1000px;
	}
	.header{
        width: 100%;
        border-bottom: 4px solid #176fbb;
	}
    .header .head{
        width: 1000px;
        margin:0 auto;
        overflow: hidden;
    }
	.head #logo{
		width: 140px;
		height: 113px;
		float: left;
        background:url(images/logo.png) 8px 14px no-repeat;
	}
	.head #indexlogo{
		width: 21px;
		height: 21px;
		float: left;
		margin-left: 56px;
		margin-top: 83px;
		background-image: url(images/indexlogo.png);
	}
	.head #phone{
		width: 141px;
		height: 22px;
		float: left;
        margin-left: 196px;
        margin-top: 19px;
		background-image: url(images/telephone.png);
	}
	.head_nav{
        float: left;
		height: 19px;
		list-style: none;
		margin-top: 20px;
        margin-left: 14px;
	}
	
	.head .head_nav a{
 		color: #3d3d3d;
 		line-height: 19px;
 		text-align: center;
 		text-decoration: none;
	}
	.head_nav li{
		border-left:2px solid black;
		float: left;
        padding:0 15px;
    }
    .head_nav .li3{
        padding: 0 14px 0 0;
    }
    .head_nav .li3 img{
        float: left;
        margin-left: 15px;
        margin-top: -5px;
    }
    .head_nav .li3 a{
        float: left;
        margin-left: 7px;
    }
	.head_nav .li3 span{
		font-size: 12px;
        color:white;
        float: left;
        line-height: 19px;
        margin-left: -19px;
	}

    .head .search{
        float: left;
    	border:1px solid black;
    	width: 181px;
    	height: 27px;
    	margin-top: 16px;
    	border-radius: 0px 14px 14px 0px;
    }
    .head .search img{
        float: right;
        margin-top: 4px;
        margin-right: 10px;
    }
    .head .search .input1{
    	width: 146px;height: 27px;outline: 0;
        border:0;border-right: 1px solid black;
    }
    .headmenu{
        font-weight: bold;
        margin-top: 42px;
        margin-left: 38px;
    	height:30px;
    	list-style: none;
        float: left;
    }
    .headmenu li{
    	float: left;
    	margin-right: 37px;
    	height:21px;

    }
    .headmenu li a{
    	font-size: 18px;
		line-height: 21px;
		color: #3d3d3d;
		text-decoration: none;
    }
    .headmenu li a:hover{
    	font-size: 18px;
    	display: block;
		line-height: 21px;
		color: rgb(23,111,187);
    }
    .adress{
    	height: 53px