知识点总结

最新推荐文章于 2022-08-29 11:40:04 发布

sinat_34301608

最新推荐文章于 2022-08-29 11:40:04 发布

阅读量245

点赞数

本文链接：https://blog.csdn.net/sinat_34301608/article/details/53129357

版权

<html></html>代码必须放在html中，标准模板

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		
	</style>
</head>
<body>


</body>
</html>

<p></p>标签里添加文本，<div></div>块级元素，<table><tr><td></td></tr></table>表格 table属性 cellpadding：“10”增加内边距为10px; cellspacing=""增加单元格与单元格的间距，border-call例

<table border="1">
<tr>
<td></td>
<td>陈兰</td>
<td>刘攀登</td>
<td>袁翔</td>
<td>李鑫</td>
<td rowspan="3">走<br />廊</td>


<td>谢华强</td>
<td>焦浩</td>
<td>李亚丹</td>
<td>韩婷婷</td>
<td></td>

</tr>
</table>

<input type ="button" value ="开始">添加button按钮，

type=text添加文本框，

type=radio 单选按钮；

type=checkbox 多选框；

value值；

设置checked=checked 表示默认选中；

同一组单选框/复选框按钮name取值一定一致；

下拉列表<select>

</select>

例：

<select>
				<option>郑州</option>
				<option>北京</option>
				<option>上海</option>
			</select>

li 是独立的块级元素
无序列表：

<ul>
				<li>资讯|口碑神作《你的名字。》定档12.2</li>
				<li>资讯 | 《神奇动物在哪里》主创下周来华</li>
				<li>看《但丁密码》，大家帮助大家</li>

			</ul>

有序列表

<ol type="1" class="text-c">
				<li>鹬<hr></li>
				<li>奇异博士<hr></li>
				<li>驴得水<hr></li>
				<li>洪水泛滥之前<hr></li>
				<li>将来的事<hr></li>
				<li>被挠<hr></li>
				<li>蜡笔小新<hr></li>
				<li>请叫我英雄<hr></li>
			</ol>

其中有序列表的type设置的是他序号类型；

<img src="weibo.png">img图片；

<h1></h1> ...<h6></h6>设置他的标题从大到小；

<span>豆瓣</span>行内元素；可以放比较短小的文本；

<i><em>斜体，《strong></strong><b></b>加粗，

选择器：

标签选择器：

ul li{
			font-size: 14px;
			color: rgb(51,119,172);
		}

类选择器：

.inputr{
			float: right;
			width: 200px;
			color: rgb(102,102,106);
			font-size: 12px;
		}

id选择器：

#Main{
			width: 800PX;
			margin: 20px auto;

子代选择器：加>符号表示第一代子代

ol>li { width:500px; border-right: 2px solid gold; }

兄弟选择器加 ➕符号

b+i { color:yellowgreen;  }

混合选择器：

ol+p>i+strong+strong { color:greenyellow; }

属性选择器：

li[name=老司机][jialing="10"] { color: #B23AEE; }

权重：标签0001，类与伪类与属性0010；id： 0100；浏览器可以根据权重来优先选择哪个选择器；

<meta charset="UTF-8">
	<title>样式的优先级顺序</title>
	<style>
		/* 0100 */
		#d1 { color:orange; } 
		/* 0110 */
		/*div .c1 { color:red; }*/
		/*#d0 .c1 { color:red; }*/
		/* 0030 */
		.c0 .c2 .c1 { color:red; }
	</style>	
</head>
<body>
	<div class="c0">
	<div class="c2">
	<div id="d0">
		<div id="d1" class="c1">鹿死谁手？</div>
	</div>

伪类就是在元素后面加HOVER其实不是真的类；但能实现鼠标放上去的效果；例如在伪类里加个背景颜色background-color；鼠标放上去他的背景颜色就变颜色了，放下来还是他原来的颜色。hover：里面放图片，content URL（）；

例

.hot-r:hover{
			background-color:gray;
			color: white;
		}

浮动：

float：left;左浮动；

float：reight右浮动；

块级元素是独占一行的；要想让他们在一行显示；要用到浮动；

清除浮动：

第一种方法是加个父元素，给他一个高度，让他能把原来的高度撑开，把下面不必要浮动的清下去。

sinat_34301608

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
知识点总结

代码必须放在html中，标准模板标签里添加文本，块级元素，表格例陈兰刘攀登袁翔李鑫走廊谢华强焦浩李亚丹韩婷婷添加button按钮，type=text添加文本框，type=radio 单选按钮；type=checkbox 多选框；value值；设置checked=checked 表示默认选中；同
复制链接

扫一扫