总结当日所学知识点,没有用到表单,精灵图等知识点,但是也自己联系掌握了,这是今天的笔记
03-12
02:背景,边框,表格与列表,表单元素,登录页面
2-1:背景控制,使用background来控制背景图,背景
色,背景色的设置分为三种(英文单词,16进制颜
色,rgb颜色)
例:background:red;
background:#c97474;
background:rgb(129,44,44)
2-2:背景色透明度
例:background:rgba(129,44,44,0.2)
2-3:背景色线性渐变:
backgound:linear-gradient(方向,起始颜色,终
止颜色)
例:background:linear-gradient(to
right,red,blue)
2-4:背景图片 不平铺,放大
例:background:url(图片地址) no-repeat;
background-size:100%;
2-5:精灵图
background-position:背景图片定位x y坐标
例:background:url(图片地址) -10px -30px;
2-6:边框属性
border:宽度 样式 颜色; 这属于复合写法
例:border:1px solid #ccc
2-7:边框样式:
dotted:点线边框 dashed:虚线边框 solid:实线
边框 double:双线边框
2-8:单边边框
上:border-top:1px dashed #ccc;
左:border-left:1px dotted #ccc;
右:border-right:1px solid #ccc;
下:border-bottom:3px double #ccc;
2-9:边框阴影
box-shadow:x y阴影宽度 阴影颜色;
例:box-shadow:2px 2px 20px #ccc;
2-10:边框圆角
border-radius;
例:border-radius:10px;
2-11:圆形
border-radius:50%;给半径px或者百分比50%
2-12:控制单边圆角:
左上:border-top-left-radius:20px;
右上:border-top-right-radius:20px;
左下:border-bottom-left-radius:20px;
右下:border-bottom-right-radius:20px;
2-13:表格
表格由<table></table>标签来定义,每个表格均有
若干行(由<tr></tr>标签定义),每行被分隔为若干
单元格(由<td></td>标签来定义)
2-14:表格特有属性:折叠边框
border-collapse:collapse;
2-15:合并行
在td标签中添加属性:<td rowspan="数量">
2-16:合并列
在td标签中添加属性:<td colspan="数量">
2-17:无序列表
由<ul></ul>标签与<li></li>标签组成
去除标签格式 list-style:none
2-18:表单元素
表单用于收集不同类型的用户输入<form>表单是一
个包含表单元素的区域
<form action="跳转的页面" method="get/post传
值方式">
2-19:input
<input>元素,是最重要的表单元素,该元素根据不同
的type属性,可以变化为多种形态
1:供文本输入的单行输入
<input type="text">
2:定义密码字段
<input type="password">
3:单选框
<input type="radio">
4:多选框
<input type="checkbox">
2-20:文本域
<textarea></textarea>
2-21:按钮
1:定义提交表单数据至表单处理程序的按钮 通
常使用较少
<input type="submit" value="提交">
2:定义按钮
<input type="button" value="搜索">
3:最常用的按钮
<button>提交</button>
