选择器和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>
转载：https://blog.csdn.net/qq_41083450/article/details/101381518
查看评论