框架+CSS选择器"/>
HTML框架+CSS选择器
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内嵌框架
<iframe>标签会创建包含另外一个html文件的内联框架(即行内框架),src属性来定义另一个html文件的引用地址, frameborder属性定义边框,scrolling属性定义是否有滚动条。
举栗:
<!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属性以及属性值
更多推荐
HTML框架+CSS选择器
发布评论