CSS网站布局实录笔记-Part1

1. 伪类

:link        a链接未被访问的样式

:hover     鼠标移上的样式

:active     被用户点击及被点击释放之间的样式

:visited     a链接对象被访问后的样式

:focus       对象成为输入焦点时的样式

:first-child  第一个子对象样式

:first           对于页面的第一页使用的样式

2. 伪对象

:after          设置某个对象之后的内容

:first-letter   对象内的第一个字符的样式设置

:first-line      对象内第一行的样式设置

:before         设置某个对象之前的内容

3. !important语法

可以提升某一句样式的重要性,使其优先执行这句语句

4. 一列固定宽度:给定具体宽度高度多少 px

一列宽度自适应:将宽度改为百分比值形式

一列固定宽度居中:使用margin:0 auto;

二列固定宽度:固定width,height, #left和#right都使用 float: left;

二列宽度自适应:width使用百分比,#left和#right都使用 float: left;

二列左栏固定宽度,右栏自适应:将左栏宽度设定为固定值和float: left, 右栏不设定任何宽度值,并且右栏不浮动即可。

二列固定宽度居中:设置外层div固定宽度为left+right和margin:0 auto   jsfiddle.net/u020xbpa/

三列浮动中间列宽度自适应:左栏固定宽度居左,右栏固定宽度靠右,中间栏根据左右栏间距自动适应

left和right使用绝对定位,left居左居上为0和right居右居上为0,center则只需要设定margin-left和margin-right

jsfiddle.net/u020xbpa/3/

高度自适应:一个对象的高度是否可以使用百分比显示,取决于对象的父级对象。给html, body, left都设置height:100%;jsfiddle.net/u020xbpa/4/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,654评论 1 41
  • 本文为阅读《Head First HTML 与 CSS》的css部分的读书笔记,方便回顾书上的知识,另一篇为Hea...
    兼续阅读 5,826评论 0 17
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,685评论 32 459
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,831评论 0 11