HTML页面:
1)border: 1px solid red; 画出div边距
2)overflow:hidden; 在父级加该属性可以防止浮动塌陷
3)font-size: 13px; 设置字体大小
4)body{
margin: 0px;
padding: 0px;
} //去除页面默认边距
5)ul{
list-style-type: none; 去点
padding:0; /*内外边距为0,去除ul前空格*/
margin:0;
}
6)在style(CSS样式)中 :
1.id选择器 #div{ }
2.类选择器 .div{ }
3.标签选择器 div{ }
7)<a>标签
<a href="地址" target="_blank(新开) 控制页面打开方式" title="鼠标移动上显示"></a>
8)<link rel="shortcut icon" href="img/logo.ico" type="image/x-icon"> 小图标引入
9)锚链接:
<a name="1f"></a> 锚点1
<a name="2f"></a> 锚点2
<a name="3f"></a> 锚点3
控制
<a href="#1f">1F</a>|<a href="#2f">2F</a>|<a href="#3f">3F</a>|<a href="#">回到顶部</a>
10)<meta http-equiv="refresh" content="3;https://www.baidu.com"> 在页面加载完成后3秒跳转到百度
11)去掉A链接下划线样式代码:a{text-decoration:none}
12)<input> (在from中使用)
button :普通按钮
checkbox :复选框
<input type="checkbox" name="fav" value="0" checked="checked"/>吃饭
<input type="checkbox" name="fav" value="1" checked/>睡觉
<input type="checkbox" name="fav" value="2"/>打豆豆
file :文件上传
hidden :隐藏域
image :图片按钮,有提交功能
password :密码
radio :单选框
<input type="radio" name="sex" value="0" checked="true"/>男
<input type="radio" name="sex" value="1"/>女
reset :重置
submit :提交
text :文本
下拉框:select
<select name="addr">
<option value="0">北京市</option>
<option value="1" selected="true">天津市</option>
<option value="2">上海市</option>
</select>
13)css <style>
#div1{
text-align: right;
}
a{
color: #333;
font-weight: 700;/*设置字形加粗*/
font-size: 13px;/*设置字体大小*/
margin-right: 20px;/*设置向右的外边距*/
margin-top: 20px;/*设置距离顶部的外边距*/
/*border: 1px solid gray;*//*设置元素边框*/
/*width: 100px;
height: 200px;*/
display: inline-block;/*将当前行内元素转换成行内块级元素*/
}
a:hover{
color:blue;
}
#div2{
text-align:center ;
}
#div2 img{
width: 270px;
margin-bottom: 35px;
}
.textCls{
width: 540px;
height: 36px;
background:url(img/bg-ico.png) no-repeat 507px ;
/*设置背景图片 背景不重复显示 背景位置*/
}
.btn{
width: 100px;
height: 42px;
border: none;/*去除边框*/
position:relative ;/*相对定位*/
top:2px;
background-color: #3385FF;
color: white;
font-family: "微软雅黑";/*设置字体*/
font-size: 15px;
letter-spacing: 1px;/*设置文字间距*/
}
</style>