布局需注意

布局小技巧

最外层分三个部分

  • 先初始化页面  *{margin:0;padding:0; }
  • 顶部:设置宽度100%,高度

  1. 使列表水平放置的方法:li{float:left/right;width:?px}拉开距离
  2. 使列表垂直居中于其父元素的方法:设置height=line-height


  • 中间内容:设置宽度,margin:0 auto来居中

注意:子元素会继承父元素的宽度,如果一样就不用设置
  1. 使图片旁边的字处于图片中间的方法:在对img标签设置vertical-align:middle(原理:middle把此元素放置在父元素的中部)
  2. 使两个块级元素居于一行的方法:float:left/right
  3. 比如列表水平放置和下面
  4. 解决上图搜索框的输入文字遮挡到“放大镜”背景图片方法:设置padding-right(原理:设置盒子内容与边框的距离)
  5. 要在页面中显示“<”或者“>”,用转义字符“&lt;”“&gt;”
  6. #xxx为颜色缩写
  7. 页码制作:a标签实现,+inline-block属性
  8. 引用视频:视频网站里的“分享给好友”,复制html链接,直接粘贴到div中
  9. 内容大小不确定,内容溢出解决方法:设置min-height(_height兼容ie6)
  10. 列表前面的logo移动时动态改变实现方法:a link和hover放置不同图片

  • 底部版权:设置宽度100%,高度,(!!!!clear:both来使中间内容不会遮挡到底部)


  1. 使列表能水平放置,子列表垂直放置的方法 li{float:left;width:?px}把宽度设置小一点就能把子列表挤成垂直

功能:

加入收藏/设为主页(只有部分浏览器兼容,低级别的ie)

引入setHomeSetFav.js

调用SetHome(window.location)方法

调用AddFavorite(window.location,document.title)方法


猜你喜欢

转载自blog.csdn.net/weixin_41824127/article/details/79596132
今日推荐