0908期 HTML Frameset框架和选择器
frameset框架
frameset与body没法同时使用,frameset用来分割页面,frame在frameset用于引用其他网页
<frameset rows="100,*" frameborder="no"> --上下分,第一行100像素,剩余为第二行;rows换成cols,则上下分变为左右分。frameborder=“no”,去掉分割线。
<frame src="页面地址" noresize="noresize"> --noresize,禁止窗口调整大小
<frame src="" scrolling="no"> --scrolling="no",取消显示滚动条
</frameset>
iframe在原来页面嵌入小窗口显示其他页面
<iframe src="其他页面的地址" width="" height="" frameborder="" scrolling="no"></iframe>
frameborder,边线;scrolling,滚动条。如果设置高和宽为0,则不显示,但是在后台会存在这么一个页面,该页面会在后台刷取流量。
选择器
1、标签选择器。用标签名做选择器。
<style type= "text/css">
p //格式对p标签起作用
{
样式;
}
</style>
2、class选择器。都是“.”开头。
<head>
<style type="text/css">
.main /*定义样式*/
{
height:42px;
width:%;
text-align:center;
}
</style>
</head>
<body>
<div class="main"> <!--调用class样式-->
</div>
</body>
3、ID选择器。以“#”开头
<head>
<style type="text/css">
#main /*定义样式*/
{
height:42px;
width:%;
text-align:center;
}
</style>
</head>
<body>
<div id="main"> <!--调用id样式-->
</div>
</body>
4、复合选择器。
1)用“,”隔开,表示并列。
<style type="text/css">
p,span /*标签p、span两者同样的样式*/
{
样式;
}
</style>
2)用空格隔开,表示后代。
<style type="text/css">
.main p /*找到使用样式“main”的标签,在该标签里的P标签使用该样式*/
{
样式;
}
</style>
3)筛选“.”。
<style type="text/css">
p.sp /*在标签p中的class="sp"的标签,执行以下样式*/
{
样式;
}
</style>
随堂
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/css1.css" />
<style>
/*id选择器*/
#div1{
width: 100px;
height: 100px;
background-color: blue;
}
/*class选择器*/
.div2{
width: 100px;
height: 100px;
background-color: green;
}
/*标签选择器*/
div{
border: 5px solid #;
}
/*全局选择器*/
*{
margin: 0px;
padding: 0px;
}
/*复合选择器*/
/*子代选择器*/
.div3 span{
color: red;
}
/*并列选择器*/
.div3,.div4{
width: 100px;
} [shuxing=abc]{
width: 100px;
height: 100px;
} a{
color: black;
text-decoration: none;
} .div4:hover{
cursor: pointer;
transform: rotate(45deg);
transition: 1s;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: red;"></div>
<div id="div1"></div>
<div class="div2"></div>
<div class="div3">
<span>几个字</span>
</div>
<div class="div4">
<span>几个字</span>
</div>
<div shuxing="abc"></div>
<a href="http://www.baidu.com">超级链接</a>
</body>
</html>
选择器随堂
0908期 HTML Frameset框架和选择器的更多相关文章
- java:CSS(定位,组合选择符,边距,Float,Table的样式,显示和隐藏,换行,盒子模型,iframe和frameset框架)
1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- Frameset框架
总结一下.通过使用Frameset框架,可以在同一个浏览器窗口中显示不止一个页面. 先举个例子: <frameset rows="> <frame src="to ...
- 使用iframe 或frameset框架退出不成功
iframe .frameset框架有时登录界面加载在框架当中,但我们想直接到登录界面,这时我们可以使用js来实现.if(window!=top) { top.location.href=locati ...
- Frameset框架集的应用
Frameset框架集常用于写网站后台页面,大多数"T字型"布局后台页面,就是应用Frameset框架集来做的.Franeset框架集的优点是,他可以在同浏览器窗口显示不同页面内容 ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- Frameset 框架
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.c ...
- jquery查找frameset框架内iframe的元素
老系统还幸存有过时的frameset框架,维护升级工作需要对其内部的iframe中的元素进行相关操作.使用jquery查找子iframe页面内的元素时,总找不到目标元素.后来发现少了contents ...
- asp.net Frameset框架集的嵌套使用
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Frame.aspx.cs& ...
- Frameset框架,在同一个浏览器窗口中显示不止一个页面
总结一下.通过使用Frameset框架,可以在同一个浏览器窗口中显示不止一个页面. 先举个例子: 1 <frameset rows="100,*" cols="*& ...
随机推荐
- taglist-plus 安装使用
taglist 可以查看文件中的 类,函数,变量等信息. 在.vimrc中添加: Plugin 'taglist-plus' 然后打开vim编辑器 PluginInstall 使用: 打开taglis ...
- 还是 js 替代 vw vh 了
有个需求是要层叠两张图,就像你现在看到的:整个浏览器和html页面,内层图片要水平居中,等比例与源UI图适配不同设备 本来很简单的使用 vw vh了( 核心代码 top: 13 ...
- Mysql中FIND_IN_SET和REPLACE函数简介
一 FIND_IN_SET() SELECT * from u_user where FIND_IN_SET('32',tags) 上面的sql是精确查找,查找表中tags中含有32的记录(注意这里 ...
- java通过文件头来判断文件类型
import java.io.FileInputStream; import java.io.IOException; import java.util.HashMap; import java.ut ...
- 理解Javascript的Event Loop
一.单线程 js作为浏览器脚本语言,他的主要用途是与用户交互,以及操作DOM,这决定了它只能是单线程,为什么呢?因为假如js同时有两个线程,一个线程是在DOM上增加内容,另一个线程是删除这个节点,那么 ...
- js获取当前日期加上30天之后的日期
var date1 = new Date(); var date2 = new Date(date1); date2.setDate(date1.getDate() + 30); console.lo ...
- Alpha冲刺一 (9/10)
前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10034872.html 作业博客:https://edu.cnblogs.com/campus ...
- MAC 下编译 ANDROID P 源码 提示 internal error: Could not find a supported mac sdk: ["10.10" "10.11" "10.12" "10.13"]
MAC 下编译 ANDROID P 源码出现下面的问题: ninja: no work to do. [21/21] out/soong/.bootstrap/bin/soong_build out/ ...
- Linux系统下 MYSQL数据库中的数据库文件在本机内迁移 (需暂停服务的方式)
Linux系统下 MYSQL数据库中的数据库文件在本机内迁移 本机采用Ubuntu16.04系统,tar方式安装MySQL5.7.21 数据库安装文件夹为 /home/devil/mysql 现 ...
- [BZOJ5312]冒险
bzoj CSAcademy description 一个序列\(a_i\),支持区间与一个数,区间或一个数,求区间最大值. \(n,m\le2\times10^5\) sol 线段树每个节点上维护区 ...