##CSS：页面美化和布局 1. 概念：Cascading Style Sheets 层叠样式表 * 层叠：多个样式可以作用在同一个html的元素上，同时生效 2. 好处： 1. 功能强大 2. 将内容展示和样式控制分离。 * 降低耦合度。 解耦 * 让分工协作更容易。（两个人分别开始写html和css，写完后，组合一下，就完成了） * 提高了开发效率 3.CSS的使用： 1. 内联样式（只能控制当前所在标签行的标签样式） * 如标签内使用style属性指定的css代码 * 如：
hell css 2. 内部样式(只能控制当前页面的某个或某几个标签样式) * 在head标签内，定义style标签，style标签的标签体内容就是css代码 * 如： 4. css语法： * 格式 选择器{ 属性名1：属性值1； 属性名2：属性值2； ··· } * 选择器：筛选具有相似特征的元素 * 注意： * 每一对属性需要使用;隔开，最后一对属性可以不加； 5. 选择器 *分类 1. 基础选择器 1. id选择器：选择具体的id属性值的元素。建议在一个html页面内id值唯一 * 语法：#id属性值{} 2. 元素选择器 * 语法：标签名称{} 3. 类选择器 * 语法：.classs属性值{} 4. 选择器优先级 * id选择器 > 类选择器 > 元素选择器 2. 扩展选择器 1. 选择所有元素： * 语法： *{} 2. 并集选择器： * 语法： 选择器1，选择器2{} 3. 子选择器：筛选选择器1元素下的选择器2元素 * 语法： 选择器1 选择器2{} 4. 父选择器：筛选选择器2的父元素选择器1 * 语法： 选择器1 > 选择器2{} 5. 属性选择器(一般用于input标签)：选择元素名称，属性名=属性值的元素 *语法： 元素名称[属性名="属性值"]{} 如： * input[type="text"]{ boder: 5px solid; } * <input type="text"> 6. 伪类选择器：选择一些元素具有的状态 * 语法：元素：状态{} * 如：<a> * 状态： * a:link：初始化的状态 * a:visited：被访问过的状态 * a:active：正在访问状态 * a:hover ：鼠标悬浮状态 6. 属性 1. 字体、文本 1. font-size：字体大小 2. color：文本颜色 3. text-align：文本对齐方式 4. line-height：行高 2. 背景 1. background：设置背景颜色、图片等等（复合属性） *如： background： url("img/1.jpg") no-repeat center; 3. 边框 1. border：设置边框，复合属性 * 如：border：1px solid red；此处有三个border属性，用空格隔开书写 4. 尺寸 1. width：宽度 2. height：高度 5. 盒子模型:控制布局 * margin：外边距 * padding：内边距 *默认情况下内边距padding会影响整个盒子的大小 解决办法：设置盒子属性，让width和height就是最终盒子的大小 box-sizing： border-box； * foloat：浮动 * left： * right：##案例—>注册页面
注册页面 <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <!--定义表单--> <form action="#" method="post"> <table> <tr> <td class="td_left"><label for="username">用户名</label></td> <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td> </tr> <tr> <td class="td_left"><label for="password">密码</label></td> <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td> </tr> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="text" name="email" id="email" placeholder="请输入Email"></td> </tr> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="text" name="my name" id="name" placeholder="请输入真实姓名"></td> </tr> <tr> <td class="td_left"><label for="tel">手机号</label></td> <td class="td_right"><input type="tel" name="my phone" id="tel" placeholder="请输入您的手机号"></td> </tr> <tr> <td class="td_left"><label for="s">性别</label></td> <td class="td_right"><input type="radio" name="Gender" value="male" id="s">男 <input type="radio" name="Gender" value="female" id="s">女 </td> </tr> <tr> <td class="td_left"><label for="birthday">出生日期</label> <td class="td_right"><input type="date" name="birthday" value="" id="birthday"></td> </tr> <tr> <td class="td_left"><label for="checkcode">验证码</label> <td class="td_right"><input type="text" name="验证码" id="checkcode" placeholder="请输入验证码"> <input type="image" name="checkcode" value="checkcode" > <img src="image/6.png" alt="校验码" id="img_checkcode"> </td> </tr> <!-- <tr>--> <!-- <td><label for="">注册</label>--> <!-- <td><input type="image" name="birthday" value=""></td>--> <!-- </tr>--> <tr> <td colspan="2" align="center"><input type="submit" value="注册" id="btn-sub"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <P>已有账号? <a href="#">立即登录</a></P> </div> </div>