HTML框架&CSS

html负责页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>

</head>
<!--
1）一个页面就包含在一个frame标签中
2）有两个或两个以上的frame就需要放在frameset（框架集中）
frameset框架集
属性：
cols:按照列的方向来划分框架
rows:按照行的方向来划分框架
以上两个属性的值填每个框架的比例和长度
* 表示其他框架分配完之后剩下的比例

-->
<frameset rows="10%,*,10%">
    <frame src="头部页面.html">
    <frameset cols="20%,*">
        <frame src="左边页面.html">
        <frame name="main" src="中间主页面.html">
    </frameset>
    <frame src="底部页面.html">
</frameset>

<body>

</body>
</html>

屏幕快照 2017-01-17 下午2.32.32.png

css负责页面的美观

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css入门</title>
<style type="text/css">
    a{
        font-size:24px;
        color:#0F0;
    }
</style>
</head>

<body>
<a href="xxxx" >超链接</a><br/>
<a href="xxxx" >超链接</a><br/>
<a href="xxxx" >超链接</a><br/>
<a href="xxxx" >超链接</a><br/>
</body>
</html>

css的使用方式
1）行内样式
注意：
1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式
<a href="xxxx" style="font-size:24px;">超链接</a>
2）内部样式
注意：
1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用
<style type="text/css">
a{
font-size:24px;
color:#0F0;
}
</style>

3）外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件

HTML框架&CSS

推荐阅读更多精彩内容