02html和css

 

/* 1.文字居中 默认left*/
　　　　　　text-align: center;

　　　　　　font-size: 20px;
/* 2.首行缩进 px em */几个字
　　　　　　text-indent: 4em;

/* 3.是否斜体 */
　　　　　　font-style: italic;

/* 4.是否加粗 normal*/默认的
　　　　　　font-weight: bold;

/* 5.font的属性连写:按照顺序写*/
/* 斜体 粗体 字体大小 行高 字体 */
/* font: italic bold 20px/50px "Microsoft Yahei"; */
font: 20px/50px "Microsoft Yahei";没有的可以不写，最好写上normal

/* 6.元素溢出 */

/* //默认 */
/* overflow: visible; */

/* 隐藏超出的内容 没有了 */
/* overflow:hidden; */

/* 滚动查看溢出的内容 */
/* overflow: scroll; */ 滚动条 有的会出横条
overflow:auto; 就不出横条了 好用

选择器
/* 1.ID选择器 id唯一; js的时候使用*/
#three{

color: gold;
}

/* 2.并集选择器,组选择器
strong 语言含义:重要的内容;默认加粗

*/
span,strong{

color: green;
}

/* 3.伪类选择器 */
a{
text-decoration: none;
}
格式：名：属性

/* 鼠标悬浮状态 hover */
a:hover{
　　color: orange;
}

/* 给当前内容的前面 加东西 */
a:before{
　　content: "前面的";
}
/* 给当前内容的后面 加东西 */
a:after{

　　content: "后面的";
}

<!-- 1.有序列表 ol li
ol orderlist
li list
type="A" a i I
-->
<ol type="A">
<li>高级会员</li>
<li>中级会员</li>
<li>初级会员</li>
</ol>

<!-- 2.无序列表 经常使用
ul unorder list
li list

disc circle
-->
<ul type="circle" class="list">
<li>1.高级会员</li>
<li>2.中级会员</li>
<li>3.初级会员</li>
</ul>
/* 取消左侧的小圆点 */
list-style: none

<!-- 定义列表 defination list
dl defination list
dd defination description
dt defination title
-->

<dl>
<dt>高级会员</dt>
<dd>无限量大片免费</dd>
<dd>无限量文章免费</dd>
<dd>滨崎步签名照</dd>
</dl>

<!-- 表单
form :用来提交用户输入的数据
action:提交的网址: 默认就是当前网址
method:提交方式: 默认是get :不安全
post:相对安全
-->

h1>个人信息注册</h1>
<form action="" method="get">

<!-- 1.用户名
lable 标注信息
-->
<p> name表示提交的字段
<lable>用户名:</lable>
<input type="text" placeholder="请输入用户名" name="username">
</p>
<!-- 2.密码 -->
<p>
<lable>密&nbsp;&nbsp;&nbsp;码:</lable>
<input type="password" name="pwd">
</p>
<!-- 3.性别 -->
<p>
<lable>性&nbsp;&nbsp;&nbsp;别:</lable>
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女
</p>
<!-- 4.爱好 -->
<p>
<lable>爱&nbsp;&nbsp;&nbsp;好:</lable>
<input type="checkbox" name="like" value="0" >睡觉
<input type="checkbox" name="like" value="1" >学习
<input type="checkbox" name="like" value="2" >看视频
<input type="checkbox" name="like" value="3" >健身
</p>
<!-- 5.玉照 -->
<p>
<lable>玉&nbsp;&nbsp;&nbsp;玉:</lable>
<input type="file" name="file">
</p>

<!-- 6.下拉列表 -->
<p>
<lable>籍&nbsp;&nbsp;&nbsp;贯:</lable>
<select name="address" >
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2" selected="selected">广州</option> 默认选
<option value="3">深圳</option>
</select>
</p>

<!-- 7.个人描述 -->
<p>
<lable>个人描述:</lable>
<!-- 文本域 cols="30" rows="40"-->
<textarea name="info" id="" ></textarea>
</p>

<!-- 9.隐藏域 -->不会显示，自己默认设置记录呢
<input type="hidden" name="isVip" value="YES">

<!-- 10.普通按钮 -->
<input type="button" value="普通按钮">

<!-- 7.个人描述 -->
<input type="submit" value="注册">

<!-- 8.重置 -->
<input type="reset">

</form>

/* 2.内边距 */
/* padding-left:20px;
padding-right:20px; */

/* 3外边距 */
/* margin-top:100px; */

/* 边框和内边距的改变 会改变盒子的真实宽高 */
/* 盒子的真实高度== border的上下+padding的上下;
盒子的真实宽度== border的左右+padding的左右; */

/* //水平居中 */
margin: 0 auto 0;
}

 

/* //固定值计算 window变小变大不能适配 */
/* margin-left:540px; */

/* margin负值 边框合并 */
margin: -10px auto 0;

/* 垂直外边距发生合并: 谁大取谁 */
margin-bottom: 10px;

/* 解决塌陷问题
1.设置父元素的border
2.设置父元素的overflow:hidden;
3.使用伪类:一般都使用第三种

*/

/* border: 1px solid peru; */
/* overflow:hidden; */

}

.clearfix:before{
content:"";
display: table;
}
.smallbox{

200px;
height: 200px;
background-color:rgb(120, 110, 119);

/* 盒子嵌套的时候, 设置内部盒子的margin-top 有塌陷的现象 */
margin-top:100px;