收藏
批改状态：合格
老师批语：
今天课程：
背景边框，表格与列表，表单
背景：背景色，背景图
背景色 backgroud-color : 英文; 十六进制 ；rgb（r,g,b） ; rgba( r,g,b ,0-1 )
背景图 backgroud-image:url( 图片链接 ) no-repeat 不重复，背景色渐变 linear-gradient(方向，开始颜色，结束颜色)
背景图定位 background-position x坐标 y坐标
边框：边框属性 border 宽度 样式 颜色 （样式：dotted:点线虚线，dashed虚线 solid实线 double双实线）
单边框 border-bottom
边框阴影：box-shadow x y 宽度 阴影颜色
边框圆角 border-radius 像素
单边圆角 border-top-left-radius
表格与列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格与列表</title>
<style type="text/css">
*{margin: 0;padding: 0;}
table{
width: 500px;
margin: 30px auto;
border: 1px solid #ccc;
border-collapse: collapse; /*折叠边框*/
text-align: center;
}
td{border: 1px solid #ccc;}
li{list-style: none}
</style>
</head>
<body>
<!-- 表格 table tr行 td每行多少列-->
<table>
<tr>
<td >这是表格</td>
</tr>
</table>
<table>
<tr>
<!-- 合并行 -->
<td rowspan="5">这是表格</td>
</tr>
<tr>
<!-- 合并列 -->
<td colspan="5">这是表格</td>
</tr>
<tr>
<td>这是表格</td>
<td>这是表格</td>
<td>这是表格</td>
<td>这是表格</td>
<td>这是表格</td>
</tr>
</table>
<!-- 无序列表 -->
<ul><li>123</li></ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
表单
<form action="url" method="post"></form> action数据提交地址 method提交方式
文本框 <input type="text">
密码框 <input type="password">
单选框 <input type="radio" name="sex">
<input type="radio" name="sex">
多选框<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
文本域 <textarea ></textarea>
按钮
<input type="submit" value="提交">
<input type="button" value="搜索">
<button>提交</button>
简单登录样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{margin: 0;padding: 0}
body{
background: #151517;
}
div{
width: 400px;
height: 350px;
margin: 200px auto;
background: rgba(135,244,112,0.3);
border-radius: 10px;
text-align: center;
box-shadow: 0px 5px 50px white;
}
img{width: 100px;border-radius: 50%;margin-top: 20px;}
input{width: 300px;height: 30px;
padding: 10px;
margin-top: 15px;
border-radius: 6px;
border: none;
}
button{
border: none;
width: 200px;
height: 35px;
border-radius: 6px;
background: #151517;
margin-top: 20px;
color: white;
}
</style>
</head>
<body>
<div>
<img src="http://img4.duitang.com/uploads/item/201512/13/20151213102616_rCiEx.thumb.700_0.jpeg">
<form action="" method="">
<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号
