使用HTML5写的第一个小网页

用课堂上学习的基础知识写了第一个网页，没有太多的花样。也是决定写的第一个博客，记录下自己以后的学习路程，同时也是对学习的一个总结。
首先是做的网页的截图:
总共可以分为四个部分。
第一个部分：就是最上面的那一部分，网页的开头，展示一些基本信息。

		

			
我的订单      
			
订单速查    
			
帮助中心    
			
手机版客户端    
			
积分兑换    
			
官方微博    
			
		
		

			
您好!欢迎来到阿拉德零食网
			
登录
			
注册
		
*{padding:0px;margin:0px;list-style: none;}
	#n1 {margin-top: -10px;background-color:#e0e0e0;width: 100%;height: 40px;}
	#n1 #d1{text-align: right;float: right;width: 60%;}
	#n1 #d1 p {margin: 0px;display: inline-block;line-height: 40px;color: black}
	#n1 #d1 p a{text-decoration: none;}
	#n1 #d1 p a:hover{color: green}
	#n1 #d2{text-align: center;width: 30%;float: left;}
	#n1 #d2 p{margin: 0px;display: inline-block;line-height: 40px;color: black}
	#n1 #d2 p:hover{cursor: pointer;color: blue}

第二部分：在左侧利用before-after伪元素在阿拉德零食网前面加上一个此网页的图片

header #div1{margin:10px;margin-left: -50px}
				header #div1::before{
				content:url(biaoti.png);
				position:relative;
				bottom:-10px;
				left:-10px;
			}

其次，在中间添加一个搜索框，当然了，暂时能力还不够，所以只是有搜索框的样子，并没有真正可以搜索的功能。

当然了，我们还需要修改一下它的参数，以便达到我们预期位置的要求。

Header	#div2	#input1	{
width:	40%;	height:30px;
font-size:30px;	float:center;
position: relative;top: -45px;
left: 220px
}
	header #div2 #input2{
width:	15%;height:34px;	
background-color:crimson;
font-size: 20px;color: white;
border: 5px;float: right;
position: relative;top: -42px;
left: 6px
}
	header #div2 #input2:hover{
background-color: #00db00;cursor: pointer;
}

此时完成了一二部分，效果图为
第三部分可以分为左边，右上和右下三个部分，但是右上和第一部分基本类似，所以主要就是看左边的垂直下拉菜单和右边的图片切换部分。
垂直下拉菜单：当鼠标滑动到方格时，右边可以显示出二级菜单。这是二级菜单的部分代码:

#a1{background: white;
			width:17.5%;
			height:600px;
			float:left;
			margin-right: 5px;
			position:relative;
	}
	nav{}
	ul li{position:relative;}
	ul li a{display:block;
			background: #696969;
			height:42px;
			line-height:42px;
			width:236px;
			color:white;
			text-decoration: none;
			text-align:center;
			border-bottom: 1px solid white;
	}
	ul li a:hover{background: #f90;}
	ul li ul{position:absolute;top:0px;left:237px;display:none;}
	ul li:hover ul{display:block;z-index: 1
}

		

	

		
所有零食
			

				
按销量排位搜索
				
按新品分类搜索
				
按价格排位搜索
				
			
		

		
坚果炒货
			

				
瓜子
				
花生
				
板栗
	
			
		

		
饼干糕点
			

				
饼干
				
威化饼
				
曲奇
				
涂层饼干
				
中式糕点
			
		

当时在写这一部分的时候，出现了一个问题，

二级菜单被覆盖了，解决的办法就是

ul li:hover ul{display:block;z-index: 1

接下来就是右边的图片展示：

#a4{background: cyan;
		margin-top: -25px;
		  width:80%;
		  height:350px;
		  float:left;
		}
	#img1{
		width:100%;
		  height:550px;
		}
	#img2{
		margin-top: -100px;
	}
#ul1{
		width: 30%;
		height: 100%;
		float: right;
		position: relative;
		top: -158%;
	}
	#ul1 li{
		width: 100%;
		height: 183px;

	}
	#ul1 li:hover{
		cursor: pointer;
	}

			
		

			

			
			
			

			
			
			

			
			
		

但是，这样只是实现了图片的显示功能，利用js可以实现图片的切换功能。

最终的目标是在右侧显示三张垂直的小照片，通过点击不同的图片来显示不同的画面，

#img1{
		width:100%;
		  height:550px;
		}
	#img2{
		margin-top: -100px;
	}
	.img3{
		width: 100%;
		height: 183px;
		opacity:0.4;
	}
	.img3:hover{
		opacity:1;
	}

效果图为：

第四部分：美工的话，自己完成不了，就偷了个懒，找的图片，手动捂脸。。。。。
刚开始写这个网页的时候感觉比较困难，写完之后再回头总结一下，发现把整体拆分之后，并没有太多的东西。。。。
第一次写博客，就这样把，零零散散，也许有错误的地方，欢迎大佬们指正.