收藏
批改状态：合格
老师批语：
知识点包括背景、边框、表格与无序列表、表单四项内容。（每一个知识点都包括一张页面案例，附在文章的最后）
一、背景控制
背景控制包括背景色与背景图两种。
1.背景色
background-color属性，可以写成background,可以使用英文单词，16进制颜色，rgb颜色，rgba颜色。
例如：
background:red;
background:#f5f5f5;
background:rgb(129,44,44);
background:rgba(129,44,44,0.2);
rgba写法中最后一个参数为背景色透明度，透明度的取值范围是0~1之间，值越小越透明
背景色的线性渐变可以通过linear-gradient()进行设置，其参数为方向，起始颜色，终止颜色。
例如：
background:linear-gradient(to right,red,blue);
2.背景图
background-image:url()属性，可以写成background:url()。
例如：
background:url(static/images/p1.jpg);
背景图不平铺可以写成background:url(static/images/p1.jpg) no-repeat;这是一种属性的复合写法。其中no-repeat表示不平铺。
background-size:100%;背景图比例大小。
精灵图是背景图的一种使用方式，主要用于选取图片中的图标。可以将多个图标设计在一张图片上，页面在加载时只需要加载该张图片，而图片上的不同图标可以被页面的任何地方引用。使用background-position进行操作,background-position:背景图片定位x y坐标
例如：
background:url(static/images/p2.jpg) -100px 0px;复合写法，引入背景图，再定位图标
图标在图片中的位置可以使用小工具FastStone Capture的标尺测量，该工具可以截图，拾取颜色，位置测量等。需要注意的是定位图标值均为负值，因为坐标原点在左上角。
二、边框
border属性：border:宽度 样式 颜色。
样式有四种，分别是dotted点线边框，dashed虚线边框，solid实线边框，double双边框。其中solid使用最为广泛。
例如：
border:1px solid #ccc;
也可以单个控制边框线 border-top:1px solid #ccc
边框阴影可以使用 box-shadow:x y 阴影宽度 阴影颜色
例如：
box-shadow:2px 2px 20px #ccc;
边框圆角可以使用 border-radius
例如：
border-radius:10px;
如果做一个圆形，可以使用border-radius:50%;当然也可以使用像素作为参数，输入的是半径值
圆角的单个控制 border-top-left-radius:10px;border-top-right-radius:10px;
三、表格与无序列表
1.表格由<table>标签来定义，每个表格均有若干行（由<tr>标签定义），每行被分割为若干个单元格（由<td>标签定义）。
例如：
<table>
<tr>
<td>一行一列表格</td>
</tr>
</table>
表格如果设置边框，单元格也设置边框，显示效果会出现双边框，使用属性border-collapse:collapse;将边框折叠（合并）
合并列：<td colspan="4">苹果</td>
合并行：<td rowspan="3">商品</td>
做表格合并时注意观察实际效果，将多余的单元格删除。表头<th>标签已经很少使用。
2.无序列表
无序列表由<ul>标签来定义，没个列表均有若干个表项（由<li>标签定义）。其经常被用于导航条的制作，二级下拉菜单框的嵌套会很清晰。
例如：
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
通常情况下需要清除无序列表样式，例如：
li{
list-style:none;
}
四、表单
表单用于收集不同类型的用户输入，使用<form>标签，位于<form>标签内部的是一个包含表单元素的区域。
<form>标签两个属性，action的参数是url地址，即表单提交的地址，method的参数在get与post中选择，均表示传值的方式。
例如：
<form action="apply.html" method="post">
1.<input>元素是表单中最重要的元素，该元素根据不同的type属性，可以变化为多种形态。
type可以使用的属性值有：text,password,radio,checkbox,submit,button
text定义提供文本的单行输入
password定义密码的输入
radio定义单选框
checkbox定义多选框
submit定义提交表单数据处理程序的按钮
button定义一个按钮（使用<button>标签定义按钮比使用type属性为button更常用，因为容易控制样式）
例如：
<input type="button" name="" value="搜索">
<button>搜索</button>
注意：<input>与<button>自带边框样式，通常使用border:none;取消其自带样式
placeholder属性用于提示用户输入的信息
例如：
<input type="text" name="" placeholder="请输入用户名..."
2.<textarea>元素为多行文本域，可以用于填写多行文字，例如用于发表说说，微博等，但其被<div>取代。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<link rel="icon" type="image/x-icon" href="">
<style type="text/css">
*{margin: 0px;padding: 0px;}
/*1.背景控制*/
/*background(背景图 背景色)*/
/*背景色（英文单词 16进制颜色 rgb颜色）*/
body{
/*background: red;*/
/*background: #f5f5f5;*/
/*background: rgb(129,44,44);*/
/*background: rgba(129,44,44,0.2);*//*背景色透明度，透明度取值0~1*/
/*background: url(static/images/p1.jpg ) no-repeat;*/
/*背景图,background-image:url(),no-repeat不平铺*/
/*background-size: 100%;*/
}
hr{
height: 10px;
background: linear-gradient(to right,red,blue);/*背景色的线性渐变：方向，起始颜色，终止颜色*/
}
/*精灵图
(background-position：背景图片定位x y 坐标)
*/
/**/
div{
width: 80px;
height: 80px;
}
.pic1{
background:url(static/images/p2.jpg) -100px 0px; /*复合写法*/
}
.pic2{
background:url(static/images/p2.jpg) -310px -365px;
}
p{
width: 20px;
height: 20px;
background:url(static/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: 0px;padding: 0px;}
/*边框属性：border:宽度 样式 颜色;(样式：dotted点线边框，dashed:虚线边框，solid:实线边框，double:双边框)*/
div{
width: 200px;
height: 200px;
margin: 20px auto;
border: 1px solid #ccc; /*复合写法*/
/*border-top: 1px solid #ccc; 边框线单个控制*/
}
/*边框阴影：box-shadow:x y 阴影宽度 阴影颜色；*/
/*边框圆角：border-radius;*/
p{
width: 200px;
height: 200px;
margin: 20px auto;
box-shadow: 2px 2px 20px #ccc;
/*border-radius: 100px; *//*使用百分比表示半径50%,圆形*/
border-top-left-radius: 20px;
border-top-right-radius: 20px; /*单边控制*/
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格与列表</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
table{
width: 300px;
margin: 20px auto;
border: 1px solid #ccc;
border-collapse: collapse; /*边框折叠，或者说表格边框与单元格边框合并*/
}
td{
border: 1px solid #ccc;
text-align: center;
}
li{
list-style: none; /*将无序列表样式去掉*/
}
</style>
</head>
<body>
<!-- 表格 -->
<!-- 表格由<table>标签来定义，每个表格均有若干行（由<tr>标签定义），每行被分割为若干个单元格（由<td>标签定义） -->
<table>
<tr>
<td>一行一列表格</td>
</tr>
</table>
<table>
<tr>
<!-- 合并列 -->
<!-- <th>表头标签已经很少使用 -->
<td colspan="4">苹果</td>
<!-- <td>苹果</td>
<td>苹果</td>
<td>苹果</td> -->
</tr>
<tr>
<!-- 合并行 -->
<td rowspan="3">商品</td>
</tr>
<tr>
<td>苹果</td>
<td>苹果</td>
<td>苹果</td>
<!-- <td>苹果</td> -->
</tr>
<tr>
<td>苹果</td>
<td>苹果</td>
<td>苹果</td>
<!-- <td>苹果</td> -->
</tr>
</table>
<!-- 无序列表，主要用于导航条的制作，二级下拉菜单框的嵌套会很清晰 -->
<!-- 无序列表由<ul>标签来定义，没个列表均有若干个表项（由<li>标签定义） -->
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
</style>
</head>
<body>
<!-- 表单用于收集不同类型的用户输入。<form>表单是一个包含表单元素的区域 -->
<!-- action的参数是url地址，表单提交的地址。method的参数在get与post中选择,传值的方式。 -->
<form action="" method="">
<!-- <input>元素是表单中最重要的元素，该元素根据不同的type属性，可以变化为多种形态。 -->
<!-- type="text",定义提供文本的单行输入，type="password",定义密码的输入,type="radio",定义单选框,type="checkbox",定义多选框，type="submit",定义提交表单数据处理程序的按钮,type="button",定义一个按钮 -->
用户名：<input type="text" name="">
<br>
密码：<input type="password" name="">
<br>
<input type="radio" name="">男
<input type="radio" name="">女
<br>
<input type="checkbox" name="">php
<input type="checkbox" name="">html
<input type="checkbox" name="">sql
<br>
<!--文本域,用于发说说，微博等等，会被div取代 -->
<textarea></textarea>
<br>
<!-- 定义提交表单数据至表单处理程序的按钮 -->
<input type="submit" name="" value="提交">
<br>
<input type="button" name="" value="搜索">
<br>
<!-- 定义按钮，最常用，容易控制样式 -->
<button>提交</button>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆页面</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
body{
background:#151517;
}
div{
width: 400px;
height: 350px;
margin: 200px auto;
background: rgba(188,185,198,0.4);
border-radius: 10px;
text-align: center;
}
img{
width: 80px;
border-radius: 50%;
margin: 50px;
}
input{
width: 300px;
height: 30px;
margin-top: 15px;
border-radius: 6px;
border: none;
padding-left: 10px;
}
button{
border:none;
width: 200px;
height: 35px;
border-radius: 6px;
background: #151517;
color:#fff;
margin-top: 30px;
}
</style>
</head>
<body>
<div>
<img src="">
<form action="" method="">
<input type="text" name="" placeholder="请输入用户名..."><br>
<input type="password" name="" placeholder="请输入密码..."><br>
<button>登陆</button>
</form>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
