<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>
<option value="值" >文本</option>
</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右浮动;
块级元素是独占一行的;要想让他们在一行显示;要用到浮动;
清除浮动:
第一种方法是加个父元素,给他一个高度,让他能把原来的高度撑开,把下面不必要浮动的清下去。