首先我们要了解到HTML框架是由几个不同部分的网页地址组成的。
1 框架结构标签 <frameset>
定义如何将窗口分割为框架。
2 每个 frameset 定义了一系列行或列。
3 rows / cols 的值规定了每行或每列占据屏幕的面积。
要形成一个比较完整的网页就要有几个子网页共同构成一个主网页,而主网页中所填的地址是个个子网页网址。其中 frameborder=“0” 可以将可见边框线去掉,
这里我就例举个简单的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset frameborder="0" rows="20%,*">
<frame src="file:///E:/html/框架2.html">
<frameset frameborder="0" cols="25%,*">
<frame src="file:///E:/html/框架3.html">
<frame src="file:///E:/html/%E6%A1%86%E6%9E%B64.html" name="show">
<frame src="file:///E:/html/%E6%A1%86%E6%9E%B65.html" name="show">
</frameset>
</frameset>
</html>
效果如下
注意标签<frameset>
不能与<body>
连用
接下来就是布局,有HTML布局和CSS布局两种(其实这两钟也有许多的共同之处)。一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。都需要用到标签如: header、 nav、 section、 footer
<head>
<style>
#header {
background-color:red;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:yellow;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:green;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="nav">
nav1<br>
nav2<br>
</div>
<div id="section">
<p>section</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</body>
效果如下
注意,我这里用的 id命名就需要加 **#**加上命名 ,如果是用 class 命名就需要用 . 加上命名。
补充说明:CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
CSS3:
在 CSS3 中 border-radius 属性被用于创建圆角
<head>
<style>
div
{
border: 1px; solid:red;
padding: 20px 50px;
width: 200px;
height: 50px;
border-radius: 25px;
background: black;
box-shadow: 20px 20px 10px grey;
}
</style>
</head>
<body>
<div style="color: white;">
HAHAHAHAHAHA
</div>
</body>
border-radius 属性允许您为元素添加圆角边框。
其中 box-shadow 属性被用来添加阴影 box-shadow: 20px 20px(阴影下边) 10px(模糊程度) grey。
效果如下
到此结束,Thanks!