软件测试学习-CSS基础
1.单选按钮
<input type="radio" name="xb" id="nan" checked="checked"/> <label for="nan">男</label>
注意 : 添加name属性实现单选效果
添加label标签实现选男也可以实现单选效果,前提是for属性与对应的单选按钮的id属性值一致
设置默认选中状态,要给单选按钮添加checked="checked"属性
2.下拉菜单
<select name="">
<optgroup label="鹤山">
<option>沙坪</option>
<option selected="selected">古劳</option>
</optgroup>
</select>
selected="selected"默认选中状态
3.文本域
<textarea width='' " height=" " placeholder=""></textarea >
注意不能用cols rows 来设置宽高,要用width,height设置 placeholder设置提醒文字
4.多选框
<input type="checkbox">
设置与单选框一致
5.按钮
<input type="reset">重置按钮
<input type="sumbit">提交按钮
设置autofocus="autofocus"设置第一个文本框上,默认选中状态
6.css基础语法
放在head标签之间
<style type="text/css">
标签选择器 p{Text-indent:2em;}
id选择器 #id名
类选择器 .class名(经常用,可以重用,并且可以可以添加多个样式)
选择器的权重 id选择器 >类选择器 >标签选择器
后代选择器 Div span
并级选择器 Div,span
标签选择器 div.类名
</style>
<div></div>大容器 (可以在一行显示)
<span></span>小容器 ( 可以在一行显示)
7.css的引入方式
内嵌式 电商首页必须用
外链式 使用<link />(标签) 实现代码分离
行内式(权重最高)
内嵌式和外链式权重一样,先写会被后写覆盖
8.css常用属性
font-weight 设置字体的粗细 normal 代表不加粗 bold代表加粗
font-style 设置字体倾斜 italic 代表倾斜 normal代表不倾斜
text-decoration 设置线 none 没有线 underline 下划线 overline 上划线
line-through 贯穿线 删除线
world-break:breal-all 强制换行
:hover 代表鼠标悬停状态的样式
line-height 行高
9.边框属性
Border:1px solid(实线) red; dashed(虚线) 四个方向border-left (right top right bottom )只有实线和虚线兼容
10.css盒子模型
padding 内边距 margin 外边距
11.html5 新标签 建议pc端不要用,手机段可以用
header 头部
nav 导航
aside 侧导航
article 文章块
footer 底部