网站建设基础学习4——浮动和定位布局

一、学习名称：浮动和定位布局

二、学习目的

1、会使用HTML的基本标签，创建简单的HTML静态页面。

2、会使用div标签并布局

3、会使用css3为页面元素设置样式

三、仪器设备（含软件）：计算机、Sublime text 3

四、实验步骤：

1.编写HTML内容，使用div布局。

2.个div是banner，背景放置一张图片，加入文字，用css3为文字添加阴影效果。

3.第二行为导航，使用表格或列表均可，内容为超链接。

4.第三行的左边窄右边宽，左边主要为广告或导航，右边为主要内容

5.主要内容通过定位的方式，将电影图片和文字说明放在不同的div中，显示在同一行，可多放几部电影。

6.最后一行为footer。添加版权即可。代码如下：

7.样式设置如下：

a)导航中的宽度高度设置，超链接文字的设置，

b)当鼠标移动到导航栏上时，超链接的背景色变化

c)Banner的图片宽度完全匹配单元格。

最终效果如图所示：

感谢关注网站学习基础4，有任何问题请随时联系顺晟—北京网站建设公司客服~