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="*& ...
 
随机推荐
- UOJ #122 【NOI2013】 树的计数
			
题目链接:树的计数 这道题好神啊……正好有人讲了这道题,那么我就写掉吧…… 首先,为了方便考虑,我们可以把节点重标号,使得\(bfs\)序变成\(1,2,3,\dots,n\),那么显然树的深度就是\ ...
 - codeforces 98 div2 C.History 水题
			
C. History time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
 - 安装 bochs-x
			
sudo apt-get install bochs-x
 - QWebView_QWebEngineView
			
1.http://stackoverflow.com/questions/29055475/qwebview-or-qwebengineview “ QWebView uses WebKit as t ...
 - DB.使用Oracle时的遇到的问题
			
1.(20190225)ojdbc14.jar 来自“E:\ZC_DB\_Connector\Oracle\10g\Oracle Database 10g Release 2 (10.2.0.4) J ...
 - CF86D
			
题解: 莫队分块 分块大小为sqrt(n) 代码: #include<bits/stdc++.h> using namespace std; ; typedef long long ll; ...
 - myeclipse10修改全局jsp编码格式为gbk
			
myeclipse10修改全局jsp编码格式为gbk: window->prefenrence->general->content types-> 展开:text->j ...
 - css3动画的原理 及 各种效果制作
			
1. 制作小球弹动效果 在这篇文章中,我们将会去探究一下浏览器是如何去处理CSS Animations和CSS Transitions的, c 以便使你在写一些动画效果之前就可以对该动画在浏览器中 ...
 - ps/sql developer 登录远程服务器
			
Ref PLSQL Developer远程登录的方法
 - bug 报告
			
准备工作:首先我下载了Git Bash这个软件,利用了老师所给的git命令,批量的pull所有同学第二次作业的代码.截图如下: 一.被测试程序的作者:方铭 程序git地址:https://coding ...