1.背景控制
background(背景图 背景色)
背景色(英文单词/16进制颜色/rgb颜色)
background: red;
background: #343D46;
background: rgb(67,139,193);
背景色的透明度 两个参数,第一个是rgb的颜色值,第二个是透明度,范围在0-1之间rgba(rgb颜色值,0-1)
background: rgba(67,139,193,0.3);
背景图 background:url(图片地址) no-repeat no=repeat是不平铺的意思 background-size:100% 控制北京图片的大小与屏幕相同
background: url(http://www.vsread.com/iconograph/2014-09-27/43210c41deb2622c08f07b6ee8252e35.jpg) no-repeat;
background-size: 100%;
/*背景色的线性渐变 background:linear-gradient(方向,起止颜色,终止颜色)*/
background: linear-gradient(to right,red,blue);
/*去掉内部间距*/
*{margin: 0;padding: 0;}
/*边框属性 border:宽度 样式 颜色;(样式:dotted:点线边框、dashed:虚线边框、solid:实线边框、double:两个边框)*/
border: 2px solid #ccc;
/*设置单边边框*/
/*设置上边边框*/
border-top: 2px dotted red;
/*设置左边边框*/
border-left: 2px dashed blue;
/*设置右边边框*/
border-right: 2px solid yellow;
/*设置下边边框*/
border-bottom: 5px double #ccc;
/*边框阴影:box-shadow: x y 阴影宽度 阴影颜色;*/
box-shadow: 2px 2px 5px blue;
/*边框圆角 border-radius:10px;*/
/*border-radius:10px;*/
/*圆形 制作原理:圆形设置仅需要设置当前正方形宽度的一半就可以变成圆形了.比如当前正方形的宽度是200px,仅需要设置成100px就可以完成圆形,可以写像素也可以写百分比50%*/
/*border-radius: 100px;*/
/*控制单边框圆角*/
/*控制左上角变圆角*/
border-top-left-radius: 10px;
/*控制右上角变圆角*/
border-top-right-radius: 10px;
/*控制左下角变圆角*/
border-bottom-left-radius: 10px;
/*控制右下角变圆角*/
border-bottom-right-radius: 10px;
/*折叠边框*/
border-collapse: collapse;
/*清除掉无序列表前面的小黑点*/
list-style: none;
<!-- 无序列表由<ul>标签来定义,每个列表均由有若干列表项(由<li>标签定义) -->
<ul>
<li>apple</li>
<li>apple</li>
<li>apple</li>
</ul>
<!-- 表单用于收集不同类型的用户输入,<form>表单是一个包含表单元素的区域 -->
<form action="url" method="get/post">
<!-- <input>元素,最重要的表单元素 -->
用户名:<input type="text" name=""><!-- text:定义供文本输入的单行输入 -->
密码:<input type="password" name=""><!-- password:定义密码字段 -->
<!-- 单选 -->
<input type="radio" name="">男
<input type="radio" name="">女
<!-- 多选框 -->
<input type="checkbox" name="">php
<input type="checkbox" name="">java
<input type="checkbox" name="">javascript
<!-- 文本域 -->
<textarea></textarea>
<!-- 定义提交表单数据至表单处理程序的按钮 -->
<input type="submit" name="" value="提交">
<input type="button" name="" value="搜索">
<button>按钮</button>
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style type="text/css">
/*去掉内部间距*/
*{margin: 0;padding: 0;}
/*1.背景控制*/
/*background(背景图 背景色)*/
/*背景色(英文单词/16进制颜色/rgb颜色)*/
body{
/*background: red;*/
/*background: #343D46;*/
/*background: rgb(67,139,193);*/
/*背景色的透明度 两个参数,第一个是rgb的颜色值,第二个是透明度,范围在0-1之间rgba(rgb颜色值,0-1)*/
/*background: rgba(67,139,193,0.3);*/
/*背景图 background:url(图片地址) no-repeat no=repeat是不平铺的意思 background-size:100% 控制北京图片的大小与屏幕相同*/
/*background: url(http://www.vsread.com/iconograph/2014-09-27/43210c41deb2622c08f07b6ee8252e35.jpg) no-repeat;
background-size: 100%;*/
}
hr{
height: 10px;
/*背景色的线性渐变 background:linear-gradient(方向,起止颜色,终止颜色)*/
background: linear-gradient(to right,red,blue);
}
div{
width: 80px;
height: 80px;
}
.pic1{background: url(images/p2.jpg) -100px 0;}
.pic2{background: url(images/p2.jpg) -210px -245px;}
p{
width: 20px;
height: 20px;
background: url(images/p1.jpg) -10px -30px;
}
</style>
</head>
<body>
<hr>
<div class="pic1"></div>
<div class="pic2"></div>
<p></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框</title>
<style type="text/css">
/*去掉内部间距*/
*{margin: 0;padding: 0;}
/*边框属性 border:宽度 样式 颜色;(样式:dotted:点线边框、dashed:虚线边框、solid:实线边框、double:两个边框)*/
div{
width: 200px;
height: 200px;
margin: 50px auto;
border: 2px solid #ccc;
/*设置单边边框*/
/*设置上边边框*/
border-top: 2px dotted red;
/*设置左边边框*/
border-left: 2px dashed blue;
/*设置右边边框*/
border-right: 2px solid yellow;
/*设置下边边框*/
border-bottom: 5px double #ccc;
}
p{
width: 200px;
height: 200px;
margin: 50px auto;
/*边框阴影:box-shadow: x y 阴影宽度 阴影颜色;*/
box-shadow: 2px 2px 5px blue;
/*边框圆角 border-radius:10px;*/
/*border-radius:10px;*/
/*圆形 制作原理:圆形设置仅需要设置当前正方形宽度的一半就可以变成圆形了.比如当前正方形的宽度是200px,仅需要设置成100px就可以完成圆形,可以写像素也可以写百分比50%*/
/*border-radius: 100px;*/
/*控制单边框圆角*/
/*控制左上角变圆角*/
border-top-left-radius: 10px;
/*控制右上角变圆角*/
border-top-right-radius: 10px;
/*控制左下角变圆角*/
border-bottom-left-radius: 10px;
/*控制右下角变圆角*/
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<hr>
<div></div>
<p></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格与列表</title>
<style type="text/css">
/*去掉内部间距*/
*{margin: 0;padding: 0;}
table{
width: 500px;
margin: 50px auto;
border:2px solid #cccc;
/*折叠边框*/
border-collapse: collapse;
}
td{
border:1px solid #cccc;
}
li{
/*清除掉无序列表前面的小黑点*/
list-style: none;
}
</style>
</head>
<body>
<table>
<tr>
<td>第一列</td>
<td>第一列</td>
<td>第一列</td>
</tr>
<tr>
<td>第一列</td>
<td>第一列</td>
<td>第一列</td>
</tr>
<tr>
<td>第一列</td>
<td>第一列</td>
<td>第一列</td>
</tr>
</table>
<!-- 无序列表 -->
<!-- 无序列表由<ul>标签来定义,每个列表均由有若干列表项(由<li>标签定义) -->
<ul>
<li>apple</li>
<li>apple</li>
<li>apple</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素</title>
<style type="text/css">
/*去掉内部间距*/
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<!-- 表单用于收集不同类型的用户输入,<form>表单是一个包含表单元素的区域 -->
<form action="url" method="get/post">
<!-- <input>元素,最重要的表单元素 -->
用户名:<input type="text" name=""><!-- text:定义供文本输入的单行输入 -->
密码:<input type="password" name=""><!-- password:定义密码字段 -->
<!-- 单选 -->
<input type="radio" name="">男
<input type="radio" name="">女
<!-- 多选框 -->
<input type="checkbox" name="">php
<input type="checkbox" name="">java
<input type="checkbox" name="">javascript
<!-- 文本域 -->
<textarea></textarea>
<!-- 定义提交表单数据至表单处理程序的按钮 -->
<input type="submit" name="" value="提交">
<input type="button" name="" value="搜索">
<button>按钮</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style type="text/css">
/*去掉内部间距*/
*{margin: 0;padding: 0;}
body{
background: #151517;
}
div{
width: 400px;
height: 400px;
margin: 200px auto;/*上下200像素左右居中*/
background:rgba(188,185,198,0.4);
border-radius: 10px;
text-align: center;
}
img{
width: 80px;
margin-top: 50px;
border-radius: 50%;
}
input{
width: 300px;
height: 30px;
margin-top: 15px;
border-radius: 6px;
border: none;/*去掉元素自带边框*/
padding-left: 15px;/*设置左边的内边距*/
}
button{
border:none;
width: 200px;
height: 35px;
border-radius: 6px;
background: #151517;
color: #fff;
margin-top: 30px;
}
</style>
</head>
<body>
<div>
<img src="https://img03.sogoucdn.com/app/a/100520093/11388287d0e56ad7-53b51a5be5b5a2db-9e20f21c3413f36b211a6543ad164d1f.jpg"><br>
<input type="text" name="" placeholder="请输入用户名..."><br>
<input type="password" name="" placeholder="请输入密码..."><br>
<button>登录</button>
</div>
</body>
</html>