经过这半个多月对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电商网站比如美丽说上有实践。作用是:可以让用户有一个聚焦的作用。