版权声明:随意 https://blog.csdn.net/caokangnsd/article/details/82561318
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 字符集 -->
<title>WEB</title>
<!-- 标题 -->
<link rel="stylesheet" href="css.css">
<style type="text/css">
body>div {
border: 1px solid gray;
}
#one {
border: 1px solid gray;
margin: 10px auto;
width: 1000px;
height: 1000px
}
.same {
border: 1px solid gray;
width: 249px;
height: 200px;
}
#three:link {
color: black;
text-decoration: none;
}
#three:visited {
color: yellow;
}
#three:hover {
color: pink;
}
#four:focus {
background-color: pink;
}
#four:active {
background-color: pink;
}
#five {
font-family: 黑体;
font-weight: bold;
font-size: 20px;
text-align: cennter;
color: red;
line-height: 50px;
text-indent:;
}
#six>ol {
list-style-type: none;
}
#six>ul {
list-style-type: none;
}
#seven {
display: block;
float: right;
}
#one>div {
float: left;
}
#one {
position: fixed;
top: 50px;
}
#eight {
position: absolute;
top: 100px;
}
#nine {
position: relative;
left: 10px;
}
</style>
</head>
<body>
<h1>这是一个复习网页</h1>
<a href="#" name="锚点"></a>
<div>
<h1>这是一个用来让css操作的div</h1>
<div id="one">
<div class="same" id="two">
选择器<br> <a href="www.baidu.com" id="three" target="_blank">百度一下</a>
<input type="text" id="four" />
</div>
<div class="same" id="five">
文本<br>
<p id="seven">随便写一点</p>
</div>
<div class="same" id="nine">
box<br>
</div>
<div class="same" id="eight">
其他<br>
</div>
</div>
</div>
<div>
<h2>段落和行内元素</h2>
<p>
这是一个很无聊的段落,我尽可能的写的长一点,因为我需要用到很多的行内元素,必须写一个较长的段落
这里我回了一个车,所以有了一个折叠的空格,就像我空了 5个空格一样,<b>我想要加粗,</b><i>我想要倾斜,</i><strong>我想要着重,</strong><span
id="" style="color: red;">我想要一个可以定义的行内元素</span><img src=""
alt="未加载到图片">
</p>
</div>
<div>
<h2>实体引用</h2>
<p>很多时候需要实体引用,主要是为了合理的显示,例如与html的标签容易混合的场合<>'" & <>'" &</p>
</div>
<div id="six">
<h2>列表</h2>
<p>列表的使用非常的简单</p>
<ol>
<li>鸣人</li>
<li>佐助</li>
<li>卡卡西</li>
<li>自来也</li>
</ol>
<ul>
<li>鸣人</li>
<li>佐助</li>
<li>卡卡西</li>
<li>自来也</li>
</ul>
</div>
<div>
<h2>表格</h2>
<p>表格的使用也不复杂,但是有一些格式的操作</p>
<table border=1 cellspacing=0 height="100" width="100">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr rowspan="2">
<td>D</td>
<td colspan="2">E</td>
</tr>
<tr>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</table>
</div>
<div>
<h2>表单</h2>
<p>表单有9+2种,先要有一个form用来提交数据</p>
<form action="/demo" method="post">
<p>
<input type="text" readonly maxlength="10" placeholder="???" /> <label>text</label>
<input type="password" /> <label>password</label>
</p>
<p>
<input id="nan" type="radio" name="check" checked /><label
for="nan">男</label> <input id="nv" type="radio" name="check" /><label
for="nv">女</label>
</p>
<p>
<input type="checkbox" />OK
</p>
<p>
<input type="file" />
</p>
<p>
<input id="hidden" type="hidden" /><label for="hidden">你看不见我但是可以选择我</label>
</p>
<p>
<input type="submit" /> <input type="button" value="按钮" /> <input
type="reset" />
</p>
<p>
<select>
<option>A</option>
<option>B</option>
<option selected>C</option>
<option>D</option>
</select>
</p>
<p>
<textarea cols="30" rows="10">textarea</textarea>
</p>
</form>
</div>
<a href="#锚点">回到顶部</a>
</body>
</html>
补充:iframe内联
IFRAME:
属性 | 值 | 描述 |
---|---|---|
align |
|
不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 |
frameborder |
|
规定是否显示框架周围的边框。 |
height |
|
规定 iframe 的高度。 |
longdesc | URL | 规定一个页面,该页面包含了有关 iframe 的较长描述。 |
marginheight | pixels | 定义 iframe 的顶部和底部的边距。 |
marginwidth | pixels | 定义 iframe 的左侧和右侧的边距。 |
name | frame_name | 规定 iframe 的名称。 |
sandbox |
|
启用一系列对 <iframe> 中内容的额外限制。 |
scrolling |
|
规定是否在 iframe 中显示滚动条。 |
seamless | seamless | 规定 <iframe> 看上去像是包含文档的一部分。 |
src | URL | 规定在 iframe 中显示的文档的 URL。 |
srcdoc | HTML_code | 规定在 <iframe> 中显示的页面的 HTML 内容。 |
width |
|
定义 iframe 的宽度。 |
内联外部内部
选择器,样式声明
继承,层叠,优先级(就近原则)
元素选择器,类选择器,id选择器,选择器组,派生选择器,伪类选择器
样式单位:
% in cm mm pt px em
颜色设置
#rrggbb,#ff0000
#rgb
rgb(255,0,0)
rgb(10%,20%,10%)
border&box
border:1px solid gray;
border-left:
border-right:
border-top:
border-bottom:
width:
height:
padding:5px;
padding-left:
margin-right:
展示
display:
none;block;inline;inline-block;
浮动,绝对(祖先定位),相对,固定定位
z-index:堆叠
.img{
position:absolute;
z-index:3;
}
.img{
position:relative;
top:10px;
left:200px;
}
.img{
position:fixed;
}
内容溢出处理:
overflow:
visible;
hidden;
scroll;
auto;
其它参照其它文Z