框架and布局

最新推荐文章于 2022-06-11 11:45:51 发布

孤༼Evil ༽止辞

最新推荐文章于 2022-06-11 11:45:51 发布

阅读量279

点赞数 1

分类专栏：静态网页文章标签：框架and布局

本文链接：https://blog.csdn.net/qq_45649374/article/details/103000158

版权

静态网页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先我们要了解到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!

孤༼Evil ༽止辞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
框架and布局

首先我们要了解到HTML框架是由几个不同部分的网页地址组成的。1 框架结构标签 <frameset>定义如何将窗口分割为框架。2 每个 frameset 定义了一系列行或列。3 rows / cols 的值规定了每行或每列占据屏幕的面积。要形成一个比较完整的网页就要有几个子网页共同构成一个主网页，而主网页中所填的地址是个个子网页网址。其中 frameborder=“0” 可...
复制链接

扫一扫

专栏目录