收藏
批改状态：合格
老师批语：
总结：
背景控制
background(背景图 背景色)
背景色(英文单词 16进制颜色 rgb颜色)
background:red
background: #C97474
background: rgb(129,44,44)
背景色透明度:
background: rgba(129,44,44,0.2);
背景色的线性渐变:
background: linear-gradient(方向,起始颜色,终止颜色)
例：hr{height: 10px;background: linear-gradient(to right,red,blue)}
no-repeat
背景图
background-image:url(图片地址) 可加no-repeat 不平铺
精灵图
(background-position:背景图片定位 x y坐标)
例background: url(static/images/p2.jpg) -100px 0
边框属性:border:宽度 样式 颜色; (样式:dotted:点线边框、dashed:虚线边框、solid:实线边框、double:两个边框)
border:1px dashed #ccc
设置单边边框: 例:
border-top:1px dashed #ccc
border-left:1px dotted #ccc
border-right:1px solid #ccc
border-bottom:3px double #ccc
边框阴影:box-shadow:x y 阴影宽度 阴影颜色
例：box-shadow: 2px 2px 20px #ccc
边框圆角: border-radius
border-radius: 10px
圆形
border-radius:50%
控制单边框圆角
border-top-left-radius: 20px
border-top-right-radius: 20px
border-bottom-right-radius: 20px
border-bottom-left-radius: 20px
表格:
表格由 <table> 标签来定义每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义） <th>表头
border-collapse: collapse 折叠边框 只有表格中会出现
合并列
例：<td colspan="4"></td>
合并行
<td rowspan="4"></td>
无序列表
无序列表由 <ul> 标签来定义 ,每个列表均有若干列表项（由 <li> 标签定义）
list-style: none 将列表项自带的样式清除
表单元素
表单用于收集不同类型的用户输入 <form>表单是一个包含表单元素的区域
<form action="url" method="get/post">
用户名:<input type="text"> 定义供文本输入的单行输入
密码: <input type="password" name="">定义密码字段
单选 radio 例：
<input type="radio" name="">男
<input type="radio" name="">女
多选框 checkbox 例：
<input type="checkbox" name="">php
<input type="checkbox" name="">web
<input type="checkbox" name="">sql
<textarea></textarea> 文本域
定义提交表单数据至表单处理程序的按钮 例：
<input type="submit" name="" value="提交">
<input type="button" name="" value="搜索"> 定义按钮
<button>提交</button> 用这个居多
<!DOCTYPE html>
<html>
<head>
<title>背景</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552449729848&di=e214378786f4f6fc66003bf39980c869&imgtype=0&src=http%3A%2F%2Fwww.uimaker.com%2Fuploads%2Fallimg%2F121227%2F1_121227103318_7.png">
<style type="text/css">
body{
background:rgba(50,80,70,0.9);
background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552453631242&di=7894aced917569a6484d852a1f9aec2e&imgtype=0&src=http%3A%2F%2Ff4.topitme.com%2F4%2F9e%2F0e%2F1124176533d0e0e9e4o.jpg) no-repeat;
background-size:100%;
}
hr{
height:20px;
background:linear-gradient(to left,pink,blue);
}
</style>
</head>
<body>
<hr>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<title>背景</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552449729848&di=e214378786f4f6fc66003bf39980c869&imgtype=0&src=http%3A%2F%2Fwww.uimaker.com%2Fuploads%2Fallimg%2F121227%2F1_121227103318_7.png">
<style type="text/css">
div{
width: 110px;
height: 110px;
}
.tz1{
background: url(http://file01.16sucai.com/d/file/2011/1125/20111125011332238.jpg) -415px -480px;
}
.tz2{
background: url(http://file01.16sucai.com/d/file/2011/1125/20111125011332238.jpg) -550px -650px;
}
</style>
</head>
<body>
<div class="tz1"></div>
<div class="tz2"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<title>边框</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552449729848&di=e214378786f4f6fc66003bf39980c869&imgtype=0&src=http%3A%2F%2Fwww.uimaker.com%2Fuploads%2Fallimg%2F121227%2F1_121227103318_7.png">
<style type="text/css">
div{
width: 200px;
height: 200px;
margin: 50px auto;
}
.tz1{
border: 1px solid black;
}
.tz2{
border-top: 10px dotted black;
border-right: 10px dashed black;
border-bottom: 10px solid black;
border-left: 10px double black;
}
p{
width: 200px;
height: 200px;
margin: 50px auto;
}
.tz3{
box-shadow: 2px 2px 20px black;
}
.tz4{
box-shadow: 2px 2px 20px black;
border-radius: 50%;
}
.tz5{
box-shadow: 2px 2px 20px black;
border-top-left-radius: 6%;
border-top-right-radius: 6%;
border-bottom-left-radius: 6%;
border-bottom-right-radius: 6%;
}
table{
width: 500px;
height: 30px;
margin: 20px auto;
border: 1px solid black;
border-collapse: collapse;
}
td{
border: 1px solid black;
text-align: center;
}
li
{
list-style: none;
}
</style>
</head>
<body>
<div class="tz1"></div>
<div class="tz2"></div>
<p class="tz3"></p>
<P class="tz4"></p>
<P class="tz5"></p>
<table>
</table>
<table>
<tr>
<td colspan="6">CA888</td>
</tr>
<tr>
<td rowspan="5">CA888</td>
</tr>
<tr>
<td>CA888</td>
<td>CA888</td>
<td>CA888</td>
<td>CA888</td>
<td>CA888</td>
</tr>
<tr>
<td>CA888</td>
<td>CA888</td>
<td>CA888</td>
<td>CA888</td>
<td>CA888</td>
</tr>
<tr>
<td>CA888</td>
<td>CA888</td>
<td>CA888</td>
<td>CA888</td>
<td>CA888</td>
</tr>
<tr>
<td>CA888</td>
<td>CA888</td>
<td>CA888</td>
<td>CA888</td>
<td>CA888</td>
</tr>
</table>
<ul>
<LI>CA888</LI>
<LI>CA888</LI>
<LI>CA888</LI>
<LI>CA888</LI>
<LI>CA888</LI>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<title>登录框</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552449729848&di=e214378786f4f6fc66003bf39980c869&imgtype=0&src=http%3A%2F%2Fwww.uimaker.com%2Fuploads%2Fallimg%2F121227%2F1_121227103318_7.png">
<style type="text/css">
body{
background:#460527;
}
div{
width: 500px;
height: 350px;
margin: 250px auto;
background:rgba(196,131,167,0.8);
border-radius: 10px;
text-align: center;
}
img{
width: 80px;
border-radius: 50%;
margin:30px;
}
input{
width: 250px;
height: 20px;
border-radius: 6px;
margin-top: 10px;
border:none;
padding: 10px;
}
button{
border:none;
width: 150px;
height: 30px;
margin-top: 30px;
border-radius: 6px;
background:#460527;
color:#FFFFFF;
}
</style>
</head>
<body>
<div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552472185079&di=a7ef0556159d2bd53142545760a1eadc&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201410%2F05%2F20141005190442_nuceP.thumb.700_0.jpeg">
<form action="url" method="get/post">
<input type="text" placeholder="请输出用户名...">
<br>
<input type="password" placeholder="请输入密码...">
<br>
<button>登录</button>
</form>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
