项目12 购物街网站制作.pptxVIP

购物街网站制作

任务1设置通用样式

任务1设置通用样式

任务1设置通用样式1、首先要建立一个网站。站点文件夹名字为shoping，在站点文件夹创建首页index.html，创建文件夹css，放置的样式表文件main.css，创建文件夹image，放置所用到的网页图片。首先制作首页，然后制作文章内容的分支页。2、首页是水平居中的。设置一个外层容器container，将它的max-width设置为1080px。如果浏览器窗口的宽度大于1080px，那么就显示为1080。如果浏览器的宽度小于1080，就以浏览器窗口大小进行显示。然后设置外层容器container的margin:0auto，这样网页内容水平居中。同时设置body的字体大小和颜色为body{font-size:14px;color:#444;}。

任务1设置通用样式3、首页中导航栏左边有一部分内容，右边有一部分内容，因此设置左浮动和右浮动。作为通用样式设置放在样式的前面进行设置，.fl{float:left;}.fr{float:right;}4、发现外层容器container的高度变为零，是什么原因呢？主要是因为container容器的高度是由它内子元素的高度确定的。现在的两个元素都设置为浮动，因此高度就为零了。这个问题怎么解决呢？那就是清除浮动。如何清除呢？可以在fl的前面和fr的后面进行浮动元