HTML框架&CSS
2017-01-17 本文已影响45人
毛毛虫灾害
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文件
<link href="01.css" rel="stylesheet"/>
