div
(无语义)ur/ol/li
p
h1-h6
dl/dt/dd
margin: 0 auto;
width
, height
, margin
上下,padding
上下]
span
(无语义)a
src
可以为空,但一定要写font-size
设置为0,子级单独设置font-size
width
,使用在父级元素设置text-alian : center
的解决方案display: inline-block
;float
属性也会将元素转换为内联块fix
, absolute
都可以将元素转换为内联块盒子图
reset.css
)
h1,h2,h3,h4,h5,h6,p,body,ul,ol,dl,dd,dt,input{ /*去掉默认样式*/ margin: 0; padding: 0; } ul,ol{ /*去掉左边的点或者数字*/ list-style: none; } a{ /*去掉下划线*/ text-decoration: none; } em,i{ /*去掉斜体*/ font-style: normal; } b,strong{ /*去掉加粗*/ font-weight: normal; } /*清除浮动影响 和清除margintop塌陷 合在一起的写法*/ .clearfix:before,.clearfix:after{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix{ /*兼容ie*/ zoom:1; }
action
<form action="localhost:8000/index5" method="get"></form>
label
(注意拼写)[关联对应的id]
for
="某input
的id
"
<label for="user_name">用户名</label>
input
type
<input type="text" id="user_name">
<input type="password" id="passwd" name="user_passwd">
html <input type="checkbox" name= "hobby" value= "work">工作 <input type="checkbox" name= "hobby" value = "learn">学习 <input type="checkbox" name= "hobby" value="play">娱乐
<input type="file">
<input type="submit" value="注册">
<input type="reset" value="重置">
textarea
(多行输入框)
<textarea name="" id="" cols="30" rows="5">个人介绍</textarea>
select
<select name="loc">
<option value="1">北京<option>
<option value="2">上海<option>
<option value="3">广州<option>
</select>
一点体会:
提交表单时,只会识别到标签以内的内容,所以,多选框 多选框,下拉框一定要添加value,且值必须唯一
<ol>
<li>第一季</li>
<li>第二季</li>
<li>第三季</li>
</ol>
<ul>
<li>百度</li>
<li>腾讯</li>
<li>阿里</li>
</ul>
list-style:none;
position: relative;
left: 50px;
top: 50px;
说明: 针对自身设置相对定位 有上左,上右,下左,下右,四种定位方式 元素自身未脱离文档流,依然占据了原位置
position: relative;
absolute
,fix
能把元素变成内联块position
还有一个默认值为static
<div style="color:red;width:100px;"></div>
<link rel="stylesheet" href="..css/index.css">
div p{}
p{}
p,span{}
.bilibili > p{}
.bilibili{}
.bilibili:hover{}
!important
style
:hover
div.p
color: red;
text-decoration:none;
line-height: 24px;
font-family:"Microsoft Yahei";
font-size: 20px;
font-weight: bold;
letter-spacing:10px;
border: 1px solid red;
display: inline;
display: inline-block;
display: block;
display: none;
HTML CSS导图