（八）html框架详解与框架布局实战

1.知识点详解：

2.作业，实现如下图

　　

3.代码

demo.html

 1 <html>
 2     <head>
 3         <title>html框架</title>
 4         <meta charset="utf-8">
 5         <frameset rows="90,*,90" border="1" frameborder="1">
 6         <frame name="top" src="top.html"/>
 7         <frameset cols="20%,80%">
 8         <frame name="left" src="left.html"/>
 9         <frame name="right" src="right.html"/>
10         </frameset>
11         <frame name="bottom" src="bottom.html"/>
12         </frameset>
13     </head>
14 </html>
View Code

top.html

1 <html>
2     <head>
3         <title>html框架</title>
4         <meta charset="utf-8">
5     </head>
6     <body bgcolor="greentop">
7         <center><h1><font size="10" >花花的网页</font></h1></center>
8     </body>
9 </html>
View Code

left.html

 1 <html>
 2     <head>
 3         <title>html框架</title>
 4         <meta charset="utf-8">
 5     </head>
 6     <body>
 7         <ur>
 8         <li><a href="demo.html" target="_blank">首页</a></li><br/>
 9         <li><a href="demo.html" target="_blank">新闻</a></li><br/>
10         <li><a href="demo.html" target="_blank">图片</a></li><br/>
11         <li><a href="demo.html" target="_blank">联系我们</a></li>br/>
12         </ur>
13     </body>
14 </html>
View Cod

right.html

 1 <html>
 2     <head>
 3         <title>html框架</title>
 4         <meta charset="utf-8">
 5     </head>
 6     <body>
 7         <table cellpadding="1" cellspacing="1">
 8         <tr>
 9             <td > <img src="1.png" width="90" height="90"/></td>
10             <td>课程描述：HTML+CSS是web前端开发基础课程，本章将由麦子学院资深web前端开发工程师为你全面讲解HTML和css的基本属性和用法，带你进入web前端开发的世界</td>
11         </tr>
12         <tr>
13             <td > <img src="1.png" width="90" height="90"></td>
14             <td>课程描述：HTML+CSS是web前端开发基础课程，本章将由麦子学院资深web前端开发工程师为你全面讲解HTML和css的基本属性和用法，带你进入web前端开发的世界</td>
15         </tr>
16         <tr>
17             <td > <img src="1.png" width="90" height="90"></td>
18             <td>课程描述：HTML+CSS是web前端开发基础课程，本章将由麦子学院资深web前端开发工程师为你全面讲解HTML和css的基本属性和用法，带你进入web前端开发的世界</td>
19         </tr><tr>
20             <td > <img src="1.png" width="90" height="90"></td>
21             <td>课程描述：HTML+CSS是web前端开发基础课程，本章将由麦子学院资深web前端开发工程师为你全面讲解HTML和css的基本属性和用法，带你进入web前端开发的世界</td>
22         </tr>
23         <tr>
24             <td > <img src="1.png" width="90" height="90"></td>
25             <td>课程描述：HTML+CSS是web前端开发基础课程，本章将由麦子学院资深web前端开发工程师为你全面讲解HTML和css的基本属性和用法，带你进入web前端开发的世界</td>
26         </tr>
27         <tr>
28             <td > <img src="1.png" width="90" height="90"></td>
29             <td>课程描述：HTML+CSS是web前端开发基础课程，本章将由麦子学院资深web前端开发工程师为你全面讲解HTML和css的基本属性和用法，带你进入web前端开发的世界</td>
30         </tr>
31         <tr>
32             <td > <img src="1.png" width="90" height="90"></td>
33             <td>课程描述：HTML+CSS是web前端开发基础课程，本章将由麦子学院资深web前端开发工程师为你全面讲解HTML和css的基本属性和用法，带你进入web前端开发的世界</td>
34         </tr>
35         <tr>
36             <td > <img src="1.png" width="90" height="90"></td>
37             <td>课程描述：HTML+CSS是web前端开发基础课程，本章将由麦子学院资深web前端开发工程师为你全面讲解HTML和css的基本属性和用法，带你进入web前端开发的世界</td>
38         </tr>
39         </table>
40     </body>
41 </html>
View Code

bottom.html

1 <html>
2     <head>
3         <title>html框架</title>
4         <meta charset="utf-8">
5     </head>
6     <body bgcolor="green">
7         <center><h1><font size="6" color="white">花花大学版权所有</font></h1></center>
8     </body>
9 </html>
View Code

 

posted @ 2015-12-22 10:53  花花妹子。  阅读(312)  评论(0)    收藏  举报