实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
<style type="text/css">
body{background: #333;}
div{background: #57faff;width: 450px;height: 280px;margin:200px auto;text-align: center;border-radius: 8px;}
img{width: 80px;height: 80px;border-radius: 50%;margin-top: 15px;}
input{width: 200px;height: 25px;border:none;margin-top: 10px;padding: 5px;border-radius: 8px;}
button{width: 120px;height: 30px;border:none;margin-top: 25px;background: #333;color: #fff;border-radius: 8px;}
</style>
</head>
<body>
<div>
<img src="http://img4.duitang.com/uploads/item/201207/04/20120704183722_wyHKT.thumb.700_0.jpeg">
<form action="" method="">
账号: <input type="text" name="" placeholder="请输入用户名"><br>
密码: <input type="possward" name="" placeholder="请输入密码"><br>
<button>登陆</button>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
笔记:
背景:
设置背景色:background-color
设置背景图片:background-image
设置图片定位:background-position(由于起始坐标是0,0,
所以往右往下处于第四象限,因此x,y的坐标都是负值)
复合写法直接写background即可
background: rgba(rgb,rgb,rgb,透明度); 设置背景颜色透明度,透明度数值在0-1之间
background: linear-gradient(方向,起始颜色,终止颜色); 背景的线性渐变
精灵图:由很多小图标组成,这么做为了使网页减少图片的请求次数,加快网页反应时间
边框
border: 宽度 样式 颜色; 样式:dotted:点线边框、dashed:虚线边框、solid:实线边框、double:两个边框
border-collapse: collapse; 折叠边框,只用于table标签
border-top 设置上边框
border-bottom 设置下边框
border-left 设置左边框
border-right 设置右边框
复合写法border 设置四边边框
box-shadow: x y 阴影宽度 阴影颜色;边框颜色
border-radius 设置圆角
border-top-left-radius 设置左上角圆角
border-top-right-radius 设置右上角圆角
border-buttom-right-radius 设置右下角圆角
border-buttom-left-radius 设置左下角圆角
表格:
表格由 <table> 标签来定义每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）
rowspan 行合并,colspan 列合并,都是用于td标签中
列表:
无序列表由 <ul> 标签来定义 ,每个列表均有若干列表项（由 <li> 标签定义）
有序列表由<ol>标签来定义,每个列表均有若干列表项（由 <li> 标签定义）
表单:
input 元素: 最重要的表单元素 该元素根据不同的 type 属性，可以变化为多种形态
type=text 代表的是输入文本框
type=password 代表的是输入密码框
type=radio 单选框
type=checkbox 多选框
<textarea> 定义提交表单数据至表单处理程序的按钮
按钮的三种定义方式:
第一种:<input type="submit" name="" value="提交">
第二种:<input type="button" name="" value="搜索">
第三种:<button>提交</button>
现在一般都是用第三种方式的按钮,因为第三种按钮包含第一种和第二种的特性,而且它还可以进行更好的控制
