重温html5+css3新特性第五天：6月8日小结

底部区域footer的制作:写一个div放footer，写高度和背景色等，然后写一个前面的初始化的类样式放一个版心，在版心里面再小一点的div，div里面放ul li排版，然后加给li加浮动使得它们水平排列，指定pl左边距，li里面放个h标签（前面提到的注意事项中就有一般假图片都是先放个h标签，在h里面再放图标img ），每个li旁边放一个div，div里面上部分放一个h（看字体），下面放个p，这时候因为块级元素独占一行，按理来说应该转行内块在设置高度和宽度（行内元素无法设置宽高），但是由于浮动最初的设计就是为了字体环绕效果，此处也可以用到，给左边放图片的h标签加个浮动就行了；然后图标有点小复杂用精灵图比较合适，精灵图的加法就是background的复合写法，background：url（…/imges/logo.jpg）no-repeat -252px -25px ；后面的li写法和前面一样，直接把签名的li复制一下就好，样式的话需要改的就只有精灵图的坐标；底部区域的帮助模块还是再版心里面弄，在版心中第一个盒子下方再加一个div，然后设置div的高度，加一个下边框；然后在div里面加dt和dd，在dd里面加a链接，这里的dl dt其实就相当于ul li，dl设置个浮动即可，最后一个dt的样式比较特别，可以用前面提到的那个last-child属性值来实现，然后单独设置高度，设置文字居中；最底部的小区域用ul li设置一堆a链接就行
Main主题区域： 整一个版心，然后把图片大盒子设置一个ml值把它往右边挤，mian盒子里面包括两个盒子，一个焦点图盒子给宽高和左浮动，右侧的快报模块给宽高和背景色（给背景色是为了布局的便利，后面删掉就好了）；轮播图模块给ul li 里面加图片img；右边的快报模块先从垂直方向看分了三个div，分别是新闻模块，生活服务模块和广告模块，给三个模块背景色和高度，广告模块直接加个图片就行，细心的话给一个mt值；品优购快报模块分为两部分，上部分中包含一个h和一个a和一个伪元素小三角；下部分用ul li来实现；最后是最下面的生活服务模块，给这个div一个宽高，还有边框线，然后开始装ul li，因为li会垂直显示，直接给个左浮动就可以排列显示，但是每行最后一个盒子会掉下来，解决方式是把li的父级元素ul变宽；每个li里面会装一个图和几个文字，所以在li里面放个i和p，然后给i转换为行内块元素才能设置宽高，设置完以后给个mt和背景色；要使li里面的元素居中的话就要给li设置一个tac；要给i里面放图片，因为是个比较复杂的图就用到精灵图；
今日推荐模块：先加一个版心盒子，在版心左侧放一个盒子里面装图片，再放一个盒子里面放物品区域，物品区域也是图片，图片右侧都有一个小竖线，可以用伪元素来做；然后需要绝对定位，子绝父相
猜你喜欢模块：和上面差不多
楼层区域制作：不能给高度，内容有多少算多少，从垂直方向上来看分为上下两部分，先给一个版心
家用电器模块：头部小区域的左边h标题左浮动，右边链接用ul li右浮动；给右边链接的整体部分一个右浮动和行高，然后给里面的li设置浮动和宽高；给家用电器这个版心一个mt值；
Tab栏切换需求，tab-list放选项卡，tab-content放内容，
Tab-list里面放ul li a，tab-content里面放div，然后给div浮动以后分别设置宽高，后面。。。。。。（这个案例学不到东西了到此结束）
一般情况下，a如果包含图片都要转换为块级元素
一般在html里面写a链接加样式时，a链接的href就写个#占位就行
注册界面比较隐私，不需要做优化，怎么简单怎么写
Label标签也是可以给宽度的
常用表单一行显示一般用三个标签：label+input+span
Vertical-align：center可以使图片和右边的文字垂直居中
现在放小背景图都是通过给个li或者div，给里面加一个background：url（地址）no-repeat来实现
Div的上下间距通过mt调整一下就行
Li里面也可以放东西，一般放小的东西就用i或者em就行

Web服务器：把自己写的网站放到服务器上，也称为主机，配置高的电脑
Web服务器就是网站服务器
远程服务器就是别的公司为我们提供的一台电脑，就是域名
本地服务器主要针对局域网
Html+css没有逻辑可言，就是搭积木摆盒子
Css3 2d转换：transform包括很多属性值如下
Translate（x; y:）和相对定位很像，不会影响其他元素的位置
Translatex（10%）这里的百分比是相对于自身的宽度和高度来说的，这个效果对行内是没有效果的
Transform2d转换里面有很多属性
rotate（旋转角度）单位是deg
Css3可以直接通过旋转和伪元素得到小三角那个图标，给伪元素一个下边框和一个右边框
2d转换中心点transform-origin，默认是百分之50正中心旋转
Margin：0 auto盒子居中
2d转换之缩放：scale（x，y），不会影响其他盒子位置，放大镜效果，以中心点实现缩放