HTML框架+CSS选择器

最新推荐文章于 2022-09-09 09:33:32 发布

270年前

最新推荐文章于 2022-09-09 09:33:32 发布

阅读量132

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_49344258/article/details/108885418

版权

margin:外边距

padding:内边距

<ul>：去掉<li>前面的实心圆点

<a>:text-decoration:none 去掉超链接下划线

<font-family>:字体/宋体、仿宋，隶书，楷书、小篆等等。受限于本地已安装字体

HTML框架（frameset)-不常用,用来锻炼逻辑

frameset标签替代了页面中的body标签

使用了frameset框架就替代了body，这个时候不能直接编写标签或者文本。此时应当给每一个横向或者纵向的框架添加src属性从而设置该模块框架要展示的页面，因框架是将网页分成几个框窗，所以需同时取得多个src，引入即可。注：所有的框架标记是要

通过framest将页面一分为二，分别为15%和70%，/frameborder（框架边框- 1 - 有边框/ 0 - 无边框 /默认值为1 ）

放在一个总的HTML文档中的，该文档只是记录框架如何划分，且不会显示任何资料，所有不用再里面放入任何标记。

举栗：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"><!--用于识别中文-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 这行代码 主要 用于移动端布局 -->
        <title>Frameset</title>
    </head>
    <frameset rows='15%,70%,*' frameborder='0'><!--页面布局-->
        <frame src='top.html' noresize='noresize' scrolling='no'>
        <frameset cols='20%,*'>
            <frame src='left.html' noresize='noresize'>
            <frame src='content.html' name='framesetContent' noresize='noresize'>
        </frameset>
        <frame noresize='noresize' src='foot.html'scrolling='no' >
    </frameset>
</html>

参数如何设置：

例如：COLS="90,*" 垂直切割画面(如分左右两个画面)，接受整数值、百分数， * 则代表占用馀下空间。

数值的个数代表分成的视窗数目且以逗号分隔。

例如 COLS="30,,50%" 可以切成三个视窗，第一个视窗是 30 pixels 的宽度，为一绝对分割，第二个视窗是当分配完第一及第三个视窗後剩下的空间，第三个视窗则占整个画面的 50% 宽度为一相对分割。您可自己调整数字。

ROWS="120," 就是横向切割，将画面上下分开，数值设定同上。

唯 COLS 与 ROWS 两参数尽量不要同在一个标记中 frameborder="0" 设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避免使用 yes 或 no ）

border="0" 设定框架的边框厚度，以 pixels 为单位。

bordercolor="#008000" 设定框架的边框颜色。

framespacing="5" 表示框架与框架间的保留空白的距离。

HTML内嵌框架

举栗：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="plum">
    <h3>右侧内容展示区域</h3>
    <!-- 内嵌框架 iframe -->
    <iframe src="./iframe.html" frameborder="1"></iframe>
</body>
</html>

内嵌框架是可以和a标签配合使用：a标签的<target>属性可以将链接到的页面直接显示在当前页面的iframe中

举栗：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body bgcolor="teal">
		<ul>
			<br>
			<br>
			<li><a href="right.html" target="myqc">医疗器材</a></li><br>
			<li><a href="right.html" target="myqc">进口药品</a></li><br>
			<li><a href="right.html" target="myqc">大型医疗设备</a></li><br>
			<li><a href="right.html" target="myqc">专业指导</a></li><br>
			<li><a href="right.html" target="myqc">门诊医疗</a></li><br>
			<li><a href="right.html" target="myqc">售后服务</a></li><br>
		</ul>
	</body>
</html>

CSS（层叠样式表）

HTML 网页的架构(结构) 骨架

CSS 对结构的美化肉体

JS 提供用户和界面交互行为灵魂

添加CSS的三种方式：

1.行内样式：将样式通过style属性添加到标签内;

例如：<div style:" width=100px height=100px";>

2.将样式通过style标签添加到 head中;

3.外联样式或外部样式：将样式封装在css文件中,然后在页面的head中引入 (link)

css有众多的选择器(内嵌和外部)

1.标签选择器：通过元素的标签名称获取元素标签名称{属性:属性值;属性1:属性值1....}

2.id选择器 #id的值{属性1:属性值1;属性2:属性值2....}

3.通配符选择器：*{}设置页面中的公共样式

4.类选择器/class选择器：给元素设置class属性以及属性值

270年前

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML框架+CSS选择器

margin:外边距padding:内边距<ul>：去掉<li>前面的实心圆点<a>:text-decoration:none 去掉超链接下划线<font-family>:字体/宋体、仿宋，隶书，楷书、小篆等等。受限于本地已安装字体HTML框架（frameset)-不常用,用来锻炼逻辑frameset标签替代了页面中的body标签使用了frameset框架就替代了body，这个时候不能直接编写标签或者文本。此时应当给每一个横向或者纵
复制链接

扫一扫