Web前端开发技术——实验三（按照老师的素材和要求做网页）

1.先放一张静态网络页面

 再放一张我自己模仿的页面

 2.来写一下这个网页的制作思路

首先是头部导航框，靠左部是一张logo图片，靠右是ul和li的字体导航，最右边是图标分享.因为字体导航和图片分享都要求点击跳转，因此要用a超链接。字体导航要求鼠标悬停之后显示和第一个home一样有下部边框和浅灰色背景。

下部分banner区以一个银色背景以闭合浮动撑开整个区域，之后就是插图片，左下方四个方块区域注意是白色边框，第一个要求内部橙色，本来要求轮转播放，更改后方图片要用到js，老师没要求，后面在加即可。

之后icons区是有一个布绒背景之后标题，段落

buynow区和email区有伪元素来设置左边橙色边框部分，email右边有一个梯形图案，要使用伪元素

做完前面部分后面就可信手沾来，勤加练习即可

现在放部分伪元素的代码：

 .bird::before{
	  content: "";
	  width: 16px;
	  height:12px ;
	  position: absolute;
	  background: url(../img/images/tw.png) no-repeat -1px -3px;
	  top:8px;
	  display: block;
  }

伪元素都类似，找准定位设置好伪元素内容即可

至于网页源代码，我在稍后上传资源。或者私信我即可。