首页 > 代码库 > html 伪选择器与布局
html 伪选择器与布局
1、伪选择器
a:link {color: red} /* 未访问的链接 */
a:visited {color: yellow} /* 已访问的链接 */
a:hover {color: break} /* 鼠标移动到链接上 */
a:active {color: green} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
uppercase : 转换成大写
lowercase : 转换成小写
text-decoration:none 表示链接不显示下划线
2、布局
<frameset rows="30%,*">
<frame name="top" src="http://www.mamicode.com/top.htm" noresize="noresize"/>
<frameset cols="20%,*">
<frame name="left" src="http://www.mamicode.com/left.htm" noresize="noresize"/>
<frame name="main" src="http://www.mamicode.com/main.htm" noresize="noresize"/>
</frameset>
</frameset>
//noresize 让框架不能拖动
框架页里不能有body。
嵌套页面<iframe src="http://www.mamicode.com/index.htm" width="100" height="100"></iframe>
当width="0" height="0"隐藏网页。
3、div、css
element（元素）
元素到边框的距离：padding（内边距）
内边框到边框（border）的距离：margir（外边距）
float 浮动
margin-right: 50px; 2个元素右边产生间距
position ：absolute 绝对位置
fixed （固定位置）生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 相对位置（默认）
word-break:break-all; /*强制英文换行*/
overflow:auto; 溢出后，自动加滚动条
《html》<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href=http://www.mamicode.com/"css/test.css" rel="stylesheet" /></head><body> <div id="wrap"> <div id="head"> <div id="logo"> <img src=http://www.mamicode.com/"images/11.jpg" height="50px"width=50px /></div> <div id="menu"> <ul> <li>首页</li> <li>博客</li> <li>相册</li> <li>帮助</li> </ul> </div> </div> <div id="body"> <div id="nav"> <ul> <li>good good study</li> <li>day day up</li> <li>known</li> <li>so easy</li> <li>better</li> </ul> </div> <div id="content">内容</div> </div> <div id="footer">版权</div> </div></body></html>《test.css》#body { height:800px; background-color:white;}#body #nav{ background-color:yellow; width:200px; float:left; overflow:auto; /*溢出后显示滚动条*/ /*word-break:break-all; /*强制换行*/ } #body #nav ul { padding-top:20px; } #body #nav li { list-style-type:none; height:30px; padding-left:30px; }#body #concent { background-color:green; }
html 伪选择器与布局