html 伪选择器与布局

浏览数：34 / 时间：2015年06月09日

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="top.htm" noresize="noresize"/>
<frameset cols="20%,*">
<frame name="left" src="left.htm" noresize="noresize"/>
<frame name="main" src="main.htm" noresize="noresize"/>
</frameset>
</frameset>
//noresize 让框架不能拖动
框架页里不能有body。
嵌套页面<iframe src="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="css/test.css" rel="stylesheet" />
</head>
<body>
    <div id="wrap">
        <div id="head">
            <div id="logo">
                <img src="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;
    
}