PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 背景控制、边框、表格与无序列表、表单--PHP五期培训线上班

背景控制、边框、表格与无序列表、表单--PHP五期培训线上班

gh
gh 原创
2019年03月18日 16:38:44 1369浏览

知识点包括背景、边框、表格与无序列表、表单四项内容。(每一个知识点都包括一张页面案例,附在文章的最后)

一、背景控制

背景控制包括背景色与背景图两种。

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>

运行实例 »

点击 "运行实例" 按钮查看在线实例





声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
一股清流2019-03-21 19:53:37 2楼
感谢楼主 HTML虽然不是很难 但是有太多无关紧要的代码,你所指出的这些正是我最需要的
灭绝师太2019-03-18 09:04:33 1楼
完成的很好,很认真!