简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >背景图片精灵图设置，边框border，表格table，表单元素，登录案例

背景图片精灵图设置，边框border，表格table，表单元素，登录案例

one183563的博客
one183563的博客原创
2019年04月25日 17:50:03749浏览

1.背景控制

background(背景图 背景色)

背景色(英文单词/16进制颜色/rgb颜色)

background: red;

background: #343D46;

background: rgb(67,139,193);

背景色的透明度 两个参数，第一个是rgb的颜色值，第二个是透明度，范围在0-1之间rgba(rgb颜色值，0-1)

background: rgba(67,139,193,0.3);

背景图  background:url(图片地址) no-repeat    no=repeat是不平铺的意思  background-size：100%  控制北京图片的大小与屏幕相同

background: url(http://www.vsread.com/iconograph/2014-09-27/43210c41deb2622c08f07b6ee8252e35.jpg) no-repeat;

background-size: 100%;

/*背景色的线性渐变 background:linear-gradient(方向，起止颜色，终止颜色)*/

background: linear-gradient(to right,red,blue);

/*去掉内部间距*/

*{margin: 0;padding: 0;}

/*边框属性 border：宽度 样式 颜色;（样式：dotted：点线边框、dashed:虚线边框、solid：实线边框、double：两个边框）*/

border: 2px solid #ccc;

/*设置单边边框*/

/*设置上边边框*/

border-top: 2px dotted red;

/*设置左边边框*/

border-left: 2px dashed blue;

/*设置右边边框*/

border-right: 2px solid yellow;

/*设置下边边框*/

border-bottom: 5px double #ccc;

/*边框阴影：box-shadow: x y 阴影宽度 阴影颜色;*/

box-shadow: 2px 2px 5px blue;

/*边框圆角 border-radius:10px;*/

/*border-radius:10px;*/

/*圆形  制作原理：圆形设置仅需要设置当前正方形宽度的一半就可以变成圆形了.比如当前正方形的宽度是200px，仅需要设置成100px就可以完成圆形，可以写像素也可以写百分比50%*/

/*border-radius: 100px;*/

/*控制单边框圆角*/

/*控制左上角变圆角*/

border-top-left-radius: 10px;

/*控制右上角变圆角*/

border-top-right-radius: 10px;

/*控制左下角变圆角*/

border-bottom-left-radius: 10px;

/*控制右下角变圆角*/

border-bottom-right-radius: 10px;

/*折叠边框*/

border-collapse: collapse;

/*清除掉无序列表前面的小黑点*/

list-style: none;

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

<ul>

<li>apple</li>

<li>apple</li>

<li>apple</li>

</ul>

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

<form action="url" method="get/post">

<!-- <input>元素，最重要的表单元素 -->

用户名：<input type="text" name=""><!-- text：定义供文本输入的单行输入 -->

密码：<input type="password" name=""><!-- password:定义密码字段 -->

<!-- 单选 -->

<input type="radio" name="">男

<input type="radio" name="">女

<!-- 多选框 -->

<input type="checkbox" name="">php

<input type="checkbox" name="">java

<input type="checkbox" name="">javascript

<!-- 文本域 -->

<textarea></textarea>

<!-- 定义提交表单数据至表单处理程序的按钮 -->

<input type="submit" name="" value="提交">

<input type="button" name="" value="搜索">

<button>按钮</button>

</form>

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景</title>
	<style type="text/css">
		/*去掉内部间距*/
		*{margin: 0;padding: 0;}
		/*1.背景控制*/
		/*background(背景图 背景色)*/
		/*背景色(英文单词/16进制颜色/rgb颜色)*/
		body{
			/*background: red;*/
			/*background: #343D46;*/
			/*background: rgb(67,139,193);*/
			/*背景色的透明度 两个参数，第一个是rgb的颜色值，第二个是透明度，范围在0-1之间rgba(rgb颜色值，0-1)*/
			/*background: rgba(67,139,193,0.3);*/
			/*背景图  background:url(图片地址) no-repeat    no=repeat是不平铺的意思  background-size：100%  控制北京图片的大小与屏幕相同*/
			/*background: url(http://www.vsread.com/iconograph/2014-09-27/43210c41deb2622c08f07b6ee8252e35.jpg) no-repeat;
			background-size: 100%;*/
		}
		hr{
			height: 10px;
			/*背景色的线性渐变 background:linear-gradient(方向，起止颜色，终止颜色)*/
			background: linear-gradient(to right,red,blue);

		}
		div{
			width: 80px;
			height: 80px;
		}
		.pic1{background: url(images/p2.jpg) -100px 0;}
		.pic2{background: url(images/p2.jpg) -210px -245px;}
		p{
			width: 20px;
			height: 20px;
			background: url(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: 0;padding: 0;}
	/*边框属性 border：宽度 样式 颜色;（样式：dotted：点线边框、dashed:虚线边框、solid：实线边框、double：两个边框）*/
	div{
		width: 200px;
		height: 200px;
		margin: 50px auto;
		border: 2px solid #ccc;
		/*设置单边边框*/
		/*设置上边边框*/
		border-top: 2px dotted red;
		/*设置左边边框*/
		border-left: 2px dashed blue;
		/*设置右边边框*/
		border-right: 2px solid yellow;
		/*设置下边边框*/
		border-bottom: 5px double #ccc;
	}
	p{
		width: 200px;
		height: 200px;
		margin: 50px auto;
		/*边框阴影：box-shadow: x y 阴影宽度 阴影颜色;*/
		box-shadow: 2px 2px 5px blue;
		/*边框圆角 border-radius:10px;*/
		/*border-radius:10px;*/
		/*圆形  制作原理：圆形设置仅需要设置当前正方形宽度的一半就可以变成圆形了.比如当前正方形的宽度是200px，仅需要设置成100px就可以完成圆形，可以写像素也可以写百分比50%*/
		/*border-radius: 100px;*/
		/*控制单边框圆角*/
		/*控制左上角变圆角*/
		border-top-left-radius: 10px;
		/*控制右上角变圆角*/
		border-top-right-radius: 10px;
		/*控制左下角变圆角*/
		border-bottom-left-radius: 10px;
		/*控制右下角变圆角*/
		border-bottom-right-radius: 10px;
	}
	</style>
</head>
<body>
<hr>
<div></div>
<p></p>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表格与列表</title>
	<style type="text/css">
	/*去掉内部间距*/
	*{margin: 0;padding: 0;}
	table{
		width: 500px;
		margin: 50px auto;
		border:2px solid #cccc;
		/*折叠边框*/
		border-collapse: collapse;
	}
	td{
		border:1px solid #cccc;
	}
	li{
		/*清除掉无序列表前面的小黑点*/
		list-style: none;
	}
	</style>
</head>
<body>
<table>
	<tr>
		<td>第一列</td>
		<td>第一列</td>
		<td>第一列</td>
	</tr>
	<tr>
		<td>第一列</td>
		<td>第一列</td>
		<td>第一列</td>
	</tr>
	<tr>
		<td>第一列</td>
		<td>第一列</td>
		<td>第一列</td>
	</tr>

</table>
    <!-- 无序列表 -->
	<!-- 无序列表由<ul>标签来定义，每个列表均由有若干列表项（由<li>标签定义） -->
		<ul>
			<li>apple</li>
			<li>apple</li>
			<li>apple</li>
		</ul>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表单元素</title>
	<style type="text/css">
	/*去掉内部间距*/
	*{margin: 0;padding: 0;}
	
	</style>
</head>
<body>
<!-- 表单用于收集不同类型的用户输入，<form>表单是一个包含表单元素的区域 -->
	<form action="url" method="get/post">
		<!-- <input>元素，最重要的表单元素 -->
		用户名：<input type="text" name=""><!-- text：定义供文本输入的单行输入 -->
		密码：<input type="password" name=""><!-- password:定义密码字段 -->
		<!-- 单选 -->
		<input type="radio" name="">男
		<input type="radio" name="">女
		<!-- 多选框 -->
		<input type="checkbox" name="">php
		<input type="checkbox" name="">java
		<input type="checkbox" name="">javascript
		<!-- 文本域 -->
		<textarea></textarea>
		<!-- 定义提交表单数据至表单处理程序的按钮 -->
		<input type="submit" name="" value="提交">
		<input type="button" name="" value="搜索">
		<button>按钮</button>
	</form>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>登录页面</title>
	<style type="text/css">
	/*去掉内部间距*/
	*{margin: 0;padding: 0;}
	body{
		background: #151517;
	}
	div{
		width: 400px;
		height: 400px;
		margin: 200px auto;/*上下200像素左右居中*/
		background:rgba(188,185,198,0.4);
		border-radius: 10px;
		text-align: center;
	}
	img{
		width: 80px;
		margin-top: 50px;
		border-radius: 50%;
	}
	input{
		width: 300px;
		height: 30px;
		margin-top: 15px;
		border-radius: 6px;
		border: none;/*去掉元素自带边框*/
		padding-left: 15px;/*设置左边的内边距*/
	}
	button{
		border:none;
		width: 200px;
		height: 35px;
		border-radius: 6px;
		background: #151517;
		color: #fff;
		margin-top: 30px;
	}
	</style>
</head>
<body>
<div>
	<img src="https://img03.sogoucdn.com/app/a/100520093/11388287d0e56ad7-53b51a5be5b5a2db-9e20f21c3413f36b211a6543ad164d1f.jpg"><br>
	<input type="text" name="" placeholder="请输入用户名..."><br>
	<input type="password" name="" placeholder="请输入密码..."><br>
	<button>登录</button>
</div>
</body>
</html>

运行实例 »

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


上一条：0423第二节课作业下一条：CSS选择器的优先级与盒模型基础知识---2019年4月24日
background、border、table
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多