HTML 选择器、div标签、frame

最新推荐文章于 2021-06-15 21:18:52 发布

：十点差三分

最新推荐文章于 2021-06-15 21:18:52 发布

阅读量449

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_41083450/article/details/101381518

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

选择器和div标签

可在head子标签中写选择器（id选择器、class选择器、标签选择器、通配符选择器、分组选择器、后代选择器）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>/*里面只写选择器：浏览器选择匹配的标签向其施加相应样式，如找A、B、span等*/
			/*优先级从大到小*/
			
			/*1、id选择器 id值不允许重复*/
			#A{
				color: red;
			}
			/*2、class选择器*/
			.B{
				color: black;
			}
			/*3、标签选择器*/
			span{
				color: blueviolet;
			}
			
			/*分组选择器 只要是选择器就ok*/
			th,td{
				border: red 1px solid;
			}
			#A,del{
				color: purple;
			}
			/*通配符选择器*/
			*{
				margin: 0px;
				padding: 0px;
			}
			
			p{
				border: pink 1px solid;
			}
			/*后代选择器*/
			html body #A{
				color: aquamarine;
			}
			html body .B{
				color: brown;
			}
			a{
				text-decoration: none;
    			background: pink;
    			border: purple 3px solid;
			}
			/*hover:悬停*/
			a:hover{
				text-decoration: underline;
				color: #00c
			}
			/*indent:缩进*/
			input{
    			text-indent: 20px;
			}
			a{
				font: 宋体 300px;
			}
			a{
				display: inline-block;
				width: 200px;
			}
			.in{
				width: 200px;
				height: 100px;
			}
			.out{
				border: black 1px solid;
			}
		</style>
	</head>
	<body>
		<span>李庚威</span>
		<span id="A">李庚威</span>
		<b class="B">李庚威</b>
		<i class="B">老国王</i>
		<del>啊嘞</del>
		<p id="A">呀嘞</p>
		<a href="http://news.baidu.com/">新闻</a>
		<input />
		<!--division：分区-->
		<div style="background: salmon;" class="out">
			<div style="background: deeppink; float: left;" class="in"></div>
			<div style="background: peru; float: right;" class="in" ></div>
		</div>
	</body>
</html>

在这里插入图片描述
再加一个不飘的分区

或加一个向右飘的分区

		<div style="background: salmon;" class="out">
			<div style="background: deeppink; float: left;" class="in"></div>
			<div style="background: peru; float: right;" class="in" ></div>
			<div style="background: beige" class="in" ></div>
		</div>

在这里插入图片描述

frame

index.html
首先是一个frameset分为上下两部分
再嵌套一个frameset将中部分为左右两部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>教务管理系统</title>
		<frameset rows="30%,*">
			<frame src="top.html" />
			<frameset cols="20%,*">
				<frame src="left.html" />
				<frame src="right.html"  name="right" />
			</frameset>
		</frameset>
	</head>
</html>

left.html
在左边设置超链接，分别在新标签页打开、在本页面打开、在自定义target（右分区）打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>sasdad</title>
		<style>
			body{
				background-color: brown;
			}
		</style>
		
	</head>
	<body>
		<a href="http://www.baidu.com">_self</a>
		<a href="http://www.qq.com" target="_blank">_blank</a>
		<a href="http://www.iqiyi.com" target="_top">_top</a>
		<a href="http://www.iqiyi.com" target="right">right</a>
	</body>
</html>

right.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>cccc</title>
		<style>
			body{
				background-color: wheat;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

top.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>saf</title>
		<style>
			body{
				background-color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="//i.tianqi.com/index.php?c=code&id=12&icon=1&num=5&site=12"></iframe>
	</body>
</html>