div塌陷，以及页面常用属性

Posted 2020-10-15 言_曦

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>