CCS常用背景控制表格样式控制-3.12

总结：

背景控制

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>

合并行

无序列表

无序列表由 <ul> 标签来定义 ,每个列表均有若干列表项（由 <li> 标签定义）

list-style: none 将列表项自带的样式清除

表单元素

表单用于收集不同类型的用户输入 <form>表单是一个包含表单元素的区域

用户名:<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="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>

运行实例 »

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

CCS常用背景控制 表格样式控制-3.12

实例

实例

实例

实例

相关文章