项目12-购物街网站制作

购物街网站制作项目要点网页结构的设置 01.02.内容和样式分离技能目标会设置通用样式01.02.能灵活运用浮动任务1设置通用样式任务1设置通用样式任务1设置通用样式命令行方式创建用户01首先要建立一个网站。站点文件夹名字为shoping，在站点文件夹创建首页index.html，创建文件夹css，放置我们的样式表文件main.css，创建文件夹image，放置我们所用到的网页图片。02首页是水平居中的。设置一个外层容器container，将它的max-width设置为1080px。如果浏览器窗口的宽度大于1080px，那么就显示为1080。如果浏览器的宽度小于1080，就以浏览器窗口大小进行显示。然后设置外层容器container的margin:0auto，这样网页内容水平居中。同时设置body的字体大小和颜色为body{font-size:14px;color:#444;}。任务1设置通用样式命令行方式创建用户03首页中导航栏左边有一部分内容，右边有一部分内容，因此设置左浮动和右浮动。作为通用样式设置放在样式的前面进行设置，.fl{float:left;}.fr{float:right;}。04发现外层容器container的高度变为零，是什么原因呢？主要是因为container容器的高度是由它内子元素的高度确定的。现在的两个元素都设置为浮动，因此高度就为零了。这个问题怎么解决呢？那就是清除浮动。如何清除呢？我们可以在fl的前面和fr的后面进行浮动元素的清除。也就是在第一个浮动元素之前和最后一个浮动元素之后进行浮动元素的清除，这时我们可以使用css当中的伪类的概念设置.clear-f:after,.clear-f:before{display:block;clear:both;}。任务1设置通用样式命令行方式创建用户05分析首页，很多元素是水平并列排列的，假设并列排列的元素有四个，他们平均分配我们的浏览器宽度的话，每一个就占25%，按照这个思路，设置column类，使其显示为块级元素，进行相对定位，最小高度是1像素，并且左浮动，之后分别定义col-1到col-9类，它们占总宽度的10%，20%，90%等。任务2设计网页结构任务2设计网页结构命令行方式创建用户分析页面的结构。最上面是一个导航栏，导航栏下面是一个搜索栏，搜索栏中有logo、搜索、购物车等内容。下面是主体内容区：主体的左边分类，中间轮播，轮播的下面是小广告，主体区的右边是登录注册以及公告等信息。主体区下面是不同区的促销，比如女装促销区、鞋帽促销区、化妆品的促销等等，网页的最下面就是页脚部分。这个实战我们没有添加具体图片，我们主要进行布局的设计，大家可以根据自己的需要进行实际图片的添加。任务3设计页面内容和样式任务3设计页面内容和样式命令行方式创建用户背景色都去掉，然后设置.top-nav的背景色为浅灰色.top-nav{background:#eee;}，设置超链接的样式无下划线a{text-decoration:none;}，页面其他位置也会出现其他链接，因此我们把top-nav块中的链接定义为.item，超链接本来是inline元素，将其设置为inline-block，然后设置padding，颜色#666。鼠标移到超链接上颜色设置为#333，也就是颜色设置深一点，有一个视觉反馈任务3设计页面内容和样式命令行方式创建用户top-nav的下面是header部分。最左边是一个logo，我们定义一个类名叫logo，里边放置LOGO图片，也可以是文字，我们把文字设置为35px，它的padding设置为上下20像素，左右0像素。搜索栏的边框设置类名search-bar，为其加一个边框：#dd182b,2px,solid，背景色也设置为#dd182b颜色。input宽度占80%，button宽度20%，各自显示block，左浮动。隐藏input和button的边框，将其属性border设置为0。设置button的背景颜色#dd182b。任务3设计页面内容和样式命令行方式创建用户主促销区main-promote，分为左中右三块。左边cat类，cat类的背景色#6e6568，文本颜色#fff。原来的内容“分类导航”使用下面的内容取代，类item的padding:12px20px;，鼠标移上去的时候，添加一个深一些颜色的类似遮罩的背景。部分代码如下。主促销区main-promote的中间部分是轮播广告区，因为我们还没有学习JavaScript，因此这里先放一张图片，等学习JavaScript之后，放置三张图片轮播显示。图片大小2000*900，因为图片比较大，所以设置其样式为img{max-width:100%;display:block;