文章目录
定位静态定位(static)相对定位(relative)绝对定位(absolute)固定定位(fixed)设置元素的层叠顺序表单设置光标样式透明度opacity属性定义元素的不透明度IE的半透明滤镜外边线作业定位
定位相关属性用于设置目标组件的位置,常用的定位相关属性如下。
静态定位(static)
静态定位就是元素标准流的显示方式(默认定位)。
相对定位(relative)
说到相对定位,首先我们需要明确一个概念,相对定位是相对于元素原来的位置进行定位。可以通过TRBL来移动元素的位置,元素在视觉上相对原来的位置移动了,实际上该元素依然占据文档中原有的位置。具体案例如下:
1、元素使用相对定位时,无论是否进行移动,元素仍然占据原来的空间
2、使用相对定位的元素进行移动时,以自己原本的位置作为为参照
3、使用相对定位的元素不能进行元素的模式转换
4、子元素设置绝对定位,父元素设置相对定位
绝对定位(absolute)
1、当给一个单独的元素设置绝对定位时,元素会以浏览器左上角(body)为基准进行定位。
2、当元素发生嵌套关系的时候,如果祖先元素没有设置定位,设置绝对定位的子元素会以浏览器左上角为基准进行定位。
3、当元素发生嵌套关系的时候,如果祖先元素设置了定位,设置绝对定位的子元素会以父盒子左上角为基准进行定位。
4、设置了绝对定位的元素不占位置(脱离文档流)
5、给行内元素设置绝对定位后,该元素会转化为行内块元素
固定定位(fixed)
1、固定定位不占位置(脱离标准文档流)
2、将行内元素转化为行内块元素
设置元素的层叠顺序
z-index
属性指定元素显示的层叠顺序,属性的值是数值,且允许取负值。值越小,在层叠顺序中就越靠后。这个属性只有在元素重叠的情况下才会派上用场。
表单
定义表单
表单是用于收集用户输入的,网页中常见的表单有,登录表单,注册,调查问卷。
<form>
元素定义 HTML 表单:
<form> . form elements . </form>
输入文本的表单域
输入类型:text
<input type="text">
定义供文本输入的单行输入字段:
<form> 用户名:<br> <input type="text" name="username"> <br> </form>
定义表单域的标签
想要把<label>
与<input>
元素关联起来,只需要把for
属性的值设置为<input>
元素的id
属性的值。
<form> <label for="uname">用户名:</label> <br> <input type="text" name="username" id="uname"> <br> </form>
也可以写成这样:
<form> <label>用户名:<br><input type="text" name="username"></label> <br> </form>
输入密码的表单域
输入类型:type="password"
定义密码字段:
<form><label for="pwd">密码:</label> <br> <input type="password" name="password" id="uname"> <br> <label for="prompt_pwd">确认密码:</label> <br> <input type="password" name="promptPassword" id="prompt_pwd"> <br> </form>
文件选取域
输入类型:type="file"
定义文件选取按钮。
<form><p><label for="avatar">上传头像:</label><input type="file" name="avatar" id="avatar"></p></form>
单选按钮
输入类型:type="radio"
定义单选按钮。
<form> 性别:<br><label><input type="radio" name="sex" value="male" checked>男<br> <label><input type="radio" name="sex" value="female">女</label></form>
复选按钮
输入类型:type="checkbox"
定义复选按钮。
<form> 爱好:<br><label><input type="checkbox" name="hobby" value="delicacy">美食</label><br> <label><input type="checkbox" name="hobby" value="tour">旅游</label><br> <label><input type="checkbox" name="hobby" value="read">阅读</label><br> <label><input type="checkbox" name="hobby" value="game">游戏</label><br> <label><input type="checkbox" name="hobby" value="sleep">睡觉</label><br> </form>
下拉列表
<select>
元素定义下拉列表
<option>
元素定义下拉列表中的列表项
<form> 居住城市:<br><select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="tianjin">天津</option> <option value="zhengzhou">郑州</option> </select></form>
多行表单域
<textarea>
元素定义多行文本域:
<form> 详细地址:<br><textarea name="address" rows="10" cols="30"></textarea></form>
将表单元素分组
<fieldset>
元素组合表单中的相关数据
<legend>
元素为<fieldset>
元素定义标题。
<form action="action_page.php"> <fieldset> <legend>账户信息:</legend> <p><label for="uname"> 用户名:</label><input type="text" name="username" id="uname"></p><p><label for="pwd">  密码:</label><input type="password" name="password" id="uname"></p><p><label for="prompt_pwd">确认密码:</label><input type="password" name="promptPassword" id="prompt_pwd"></p></fieldset><fieldset> <legend>个人信息:</legend><p><label for="avatar">上传头像:</label><input type="file" name="avatar" id="avatar"></p><p>性别:<label><input type="radio" name="sex" value="male" checked>男 <label><input type="radio" name="sex" value="female">女</label></p><p>爱好:<label><input type="checkbox" name="hobby" value="delicacy">美食</label><label><input type="checkbox" name="hobby" value="tour">旅游</label><label><input type="checkbox" name="hobby" value="read">阅读</label><label><input type="checkbox" name="hobby" value="game">游戏</label><label><input type="checkbox" name="hobby" value="sleep">睡觉</label></p><p>居住城市:<select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="tianjin">天津</option> <option value="zhengzhou">郑州</option> </select></p><p><label for="address">详细地址:</label></p><p><textarea name="address" rows="10" cols="30" id="address"></textarea></p></fieldset> </form>
提交按钮和重置按钮
输入类型:type="submit"
定义提交表单数据至表单处理程序的按钮。
<form action="action_page.php"> <p><input type="reset"><input type="submit"></p></form>
如果我们省略了提交按钮的value
属性,那么该两个按钮将获得默认文本。
定义可点击的普通按钮
输入类型:type="button"
定义按钮。
<input type="button" value="点击我">
<button>
元素定义可点击的按钮:
<button type="button">按钮</button>
定义图片按钮
输入类型:type="image"
定义按钮。
<input type="image" src="./img/image_btn.png" alt="图片按钮">
我们最终的表单:
<form action="action_page.php"> <fieldset> <legend>账户信息:</legend> <p><label for="uname"> 用户名:</label><input type="text" name="username" id="uname"></p><p><label for="pwd">  密码:</label><input type="password" name="password" id="uname"></p><p><label for="prompt_pwd">确认密码:</label><input type="password" name="promptPassword" id="prompt_pwd"></p></fieldset><fieldset> <legend>个人信息:</legend><p><label for="avatar">上传头像:</label><input type="file" name="avatar" id="avatar"></p><p>性别:<label><input type="radio" name="sex" value="male" checked>男 <label><input type="radio" name="sex" value="female">女</label></p><p>爱好:<label><input type="checkbox" name="hobby" value="delicacy">美食</label><label><input type="checkbox" name="hobby" value="tour">旅游</label><label><input type="checkbox" name="hobby" value="read">阅读</label><label><input type="checkbox" name="hobby" value="game">游戏</label><label><input type="checkbox" name="hobby" value="sleep">睡觉</label></p><p>居住城市:<select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="tianjin">天津</option> <option value="zhengzhou">郑州</option> </select></p><p><label for="address">详细地址:</label></p><p><textarea name="address" rows="10" cols="30" id="address"></textarea></p><p><input type="reset"><input type="submit"></p><p><button type="button">按钮</button></p><p><input type="image" src="./img/image_btn.png" alt=""></p></fieldset> </form>
设置光标样式
cursor
属性用来改变贯标的外形。下表总结了一些常用的属性值:
当鼠标划过被设置样式的元素时,cursor属性的不同取值告诉浏览器显示不同的光标形状。下面的例子演示了该属性的用法:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>设置光标样式</title></head><body><ul><li style="cursor: default;">默认光标</li><li style="cursor: pointer;">小手</li><li style="cursor: wait;">等待效果</li><li style="cursor: help;">问号</li><li style="cursor: text;">文本指示</li><li style="cursor: crosshair;">十字状</li></ul></body></html>
透明度
opacity属性定义元素的不透明度
语法:opacity: number(0-1之间的数值)
opacity
的值为1的元素是完全不透明的反之,值为0的是完全透明的。
opacity: 0.8;
IE的半透明滤镜
语法:filter:alpha(opacity=number);
number
的取值为100-0
之间的数值
因为ie不支持opacity
,只支持自己的滤镜filter:alpha(opacity=50);
外边线
outline-width
outline-style
outline-color
outline
作业
水平二级导航
涉及到的知识点:
定位光标样式
注册界面
涉及到的知识点:
表单外边线
HTML+CSS---定位(相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度(opacity属性定义元素的不透明度--IE的半透明滤镜)---外边线