一，HTML&CSS

<!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的标签容易混合的场合<>'"   & &lt;&gt;&apos;&quot;&nbsp;&nbsp;&nbsp;&amp;</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	left right top middle bottom	不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder	1 0	规定是否显示框架周围的边框。
height	pixels %	规定 iframe 的高度。
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight	pixels	定义 iframe 的顶部和底部的边距。
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	规定 iframe 的名称。
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	启用一系列对 <iframe> 中内容的额外限制。
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定 <iframe> 看上去像是包含文档的一部分。
src	URL	规定在 iframe 中显示的文档的 URL。
srcdoc	HTML_code	规定在 <iframe> 中显示的页面的 HTML 内容。
width	pixels %	定义 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

猜你喜欢