【连载~前端学习日志】网站首页HTML+CSS实践02~

经过这半个多月对HTML和CSS的学习和CODING，做出了基于样式，标签的网站页面的设计。好吧。不多说了，先把老师布置的作业展示下：

1）这是要模仿的网站首页：



2）这是我做的一个设计：（部分截图）



3）

在设计时，需要注意的几个点，我认为如下：

1.顶部位置：先加顶部块DIV，再继续划分为三个小DIV，分为左，中，右。需要注明的是，网站LOGO和其他小图标都放在同一个图片上，因此需要使用定位的方式。定位技巧代码如下：

width:

height:

background:url(网址) no-repeat 加上定位的位置

以上步骤由于限制了宽度和高度，并定位了图标的起始位置，因此可以得到部分区域图。

如果位置还是不满意，继续应用相对定位的方式，技巧如下：

posotion:relative;

left:

top:

使用相对定位方式，需要在父元素上加上position:absolute;

这样，就能够把logo图片放好。logo图片如果需要链接，则不能应用背景图片的方式，需要直接插入尺寸的图片加上a标签。

会员左边的小图标，也是应用了插入背景+定位的方式去实现。但问题是图标无法点击。因此在插入div的方式，然后在div上一级，加上a标签加上链接的功能，即可实现图标+文字能同时链接到同一个地方。

2 中部的输入搜索框。使用field标签来实现外框功能，把两个input的外边框设置为：

搜索框中间有一个图标。可以用a标签实现。需要把a标签:display:inline-block;的方式块状化并调节方位。

border:none;

这个需要一定的技巧，不断的调试像素达到重合的效果。其实，这个效果还可以加上li标签，有一个下拉：搜索商品或者店铺。这也是需要学习及注意的。

3  右侧div：

上面是图标，下边是文字。可以使用定位+li标签。

4中部的大图。设置宽度为100%占满屏幕。

在图片下部，有多个图片，同样是使用了定位+透明标签结合的方式。outline和border：当鼠标聚焦到某个图片时可以实现图片边框显示的功能。这样的效果在2C电商网站比如美丽说上有实践。作用是：可以让用户有一个聚焦的作用。