布局小技巧
最外层分三个部分
- 先初始化页面 *{margin:0;padding:0; }
- 顶部:设置宽度100%,高度
- 使列表水平放置的方法:li{float:left/right;width:?px}拉开距离
- 使列表垂直居中于其父元素的方法:设置height=line-height
- 中间内容:设置宽度,margin:0 auto来居中
注意:子元素会继承父元素的宽度,如果一样就不用设置
- 使图片旁边的字处于图片中间的方法:在对img标签设置vertical-align:middle(原理:middle把此元素放置在父元素的中部)
- 使两个块级元素居于一行的方法:float:left/right
- 比如列表水平放置和下面
- 解决上图搜索框的输入文字遮挡到“放大镜”背景图片方法:设置padding-right(原理:设置盒子内容与边框的距离)
- 要在页面中显示“<”或者“>”,用转义字符“<;”“>;”
- #xxx为颜色缩写
- 页码制作:a标签实现,+inline-block属性
- 引用视频:视频网站里的“分享给好友”,复制html链接,直接粘贴到div中
- 内容大小不确定,内容溢出解决方法:设置min-height(_height兼容ie6)
- 列表前面的logo移动时动态改变实现方法:a link和hover放置不同图片
- 底部版权:设置宽度100%,高度,(!!!!clear:both来使中间内容不会遮挡到底部)
- 使列表能水平放置,子列表垂直放置的方法 li{float:left;width:?px}把宽度设置小一点就能把子列表挤成垂直
功能:
加入收藏/设为主页(只有部分浏览器兼容,低级别的ie)
引入setHomeSetFav.js
调用SetHome(window.location)方法
调用AddFavorite(window.location,document.title)方法