使用HTML5写的第一个小网页
用课堂上学习的基础知识写了第一个网页，没有太多的花样。也是决定写的第一个博客，记录下自己以后的学习路程，同时也是对学习的一个总结。
首先是做的网页的截图:
总共可以分为四个部分。
第一个部分：就是最上面的那一部分，网页的开头，展示一些基本信息。
第二部分：在左侧利用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;
}
效果图为：
第四部分：美工的话，自己完成不了，就偷了个懒，找的图片，手动捂脸。。。。。
刚开始写这个网页的时候感觉比较困难，写完之后再回头总结一下，发现把整体拆分之后，并没有太多的东西。。。。
第一次写博客，就这样把，零零散散，也许有错误的地方，欢迎大佬们指正.