简体中文（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

博客列表 >【8/15】HTML之css选择器以及表单的学习练习--2018/8/16-19:14

【8/15】HTML之css选择器以及表单的学习练习--2018/8/16-19:14

花弄的博客
花弄的博客原创
2018年08月17日 09:16:521172浏览

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Test_4_css</title>
	<style type="text/css">
		
		/*标签选择器*/
		ul{
			margin: 0;
			width: 500px;
			border:1px dashed #666;
			padding: 10px 5px;
		}

		ul:after{			/*子块撑开父块*/
			content: '';	/*在子元素结尾添加空元素*/
			display: block;	/*转换为块级元素*/
			clear: both;	/*清楚领边浮动*/
		}

		ul li{
			list-style: none;		/*去掉原有样式*/
			float: left;			/*左浮动*/
			width: 40px;			/*宽*/
			height: 40px;			/*高*/
			line-height: 40px;		/*行高*/
			text-align: center;		/*文本居中*/
			border-radius: 50%;
			box-shadow: 2px 2px 2px #888;	/*文本阴影*/
			background-color: skyblue;		/*背景色*/
			margin-right: 10px;				/*右外边距*/
		}

		/*id选择器*/
		#li1 {
			background-color: purple;
			border-radius: 30%;
		}

		/*类选择器*/
		.li2
		{
			background-color: lightgreen;
			margin-right: 30px;
			border-radius: 40%;
		}

		/*属性选择器*/
		ul li[class]{
			background-color: blueviolet;
		}

		/*属性选择器:属性值;*/
		ul li[class=li2]{
			background-color: gray;
			margin-left: 30px;
		}

		/*属性选择器：以指定属性值开头*/
		ul li[class^="si"]
		{
			background-color: yellow;
		}

		/*属性选择器：以指定属性值结束*/
		ul li[class$="yi"]{
			background-color: red;
			border-radius: 0;
		}

		/*属性选择器：属性值中包含指定字符串*/
		ul li[class*="gu"]
		{
			background-color: green;
			border-radius: 50%;
		}

		/*后代选择器*/
		body ul li
		{
			border:1px solid black;
		}

		/*子选择器*/
		ul > li[class$="yi"]
		{
			background-color: brown;
		}

		/*相邻选择器*/
		ul li[class*="guo"] ~ *
		{
			/*选择当前元素之后的所有同级元素*/
			background-color: black;		
			color: white;
		}

		/*相邻兄弟选择器*/
		ul li[class$="yi"] + li
		{
			background-color: pink;
			color: black;
			border-radius: 25%;
		}

		/*群组选择器*/
		h1,p
		{
			font-size: 30px;
			font-weight: lighter;
			margin: 0;
		}

		/*伪类选择器:链接*/
		a{
			font-size: 30px;
		}
		/*访问前*/
		a:link{
			color: red;
		}
		/*访问后*/
		a:visited{
			color: orange;
		}
		/*获取焦点时*/
		a:focus
		{
			color: purple;
		}
		/*鼠标悬停时*/
		a:hover
		{
			color: green;
		}
		/*鼠标点击时*/
		a:active
		{
			color: blue;
		}

		/*
		伪类选择器：位置
		选择集合中第一个元素*/
		ul li:first-child{
			background-color: #efefef!important;
		}

		/*选择集合中的最后一个子元素*/
		ul li:last-child{
			background-color: green;
		}

		/*按索引选择指定的元素，注意从1开始计数*/
		ul li:nth-child(5)
		{
			background-color: red;
		}

/*		选择所有偶数元素变色
		2n偶数，even偶数，2n+1奇数，odd奇数
*/
		ul li:nth-child(even)
		{
			background-color: blue!important;
		}	

		/*伪类选择器，根据子元素数量*/
		/*选择具有唯一子元素的元素*/
		ol :only-child
		{
			background-color: darkgreen;
		}

		/*选择指定类型的唯一子元素*/
		ol li:only-of-type
		{
			background-color: coral;
		}

		/*倒数选择指定的元素*/
		ul li:nth-last-child(3){
			background-color: white;
		}

		/*选择指定父级的第二个元素*/
		ol li:nth-of-type(2)
		{
			background-color: wheat;
		}

		/*选择页面中内容为空的元素*/
		:empty{
			width: 150px;
			height: 150px;
			background-color: orange;
		}
		/*空元素之后*/
		:empty:after{
			content: "想找个小姐姐过七夕";
		}
		/*空元素之前*/
		:empty:before {
			/*默认插入的元素为行内元素,不支持宽度设定,如果一定要设置可以通过背景图片实现*/
			/*content: url("img/timg.png");*/
		}

	</style>

</head>
<body>
	<ul>
		<li id="li1"></li>
		<li class="li2"></li>
		<li class="si guo yi"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

	<h1>这是一门神奇的css唉~~~</h1>
	<p>昨天的CSS真多啊，真多啊，多啊，啊~~~</p>

	<a href="https://www.baidu.com">我不管，我就要上度娘</a>

	<ol>
		<li>2333哈哈哈_1</li>
	</ol>

	<ol>
		<li>2333哈哈哈_1</li>
		<li>2333哈哈哈_2</li>
		<li>2333哈哈哈_3</li>
	</ol>


	<ol>
		<li>2333哈哈哈_1</li>
		<li>2333哈哈哈_2</li>
		<li>2333哈哈哈_3</li>
		<li>2333哈哈哈_4</li>
	</ol>

	<div></div>


</body>
</html>

运行实例 »

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

这些选择器还真是有点让人头疼啊，不过多好的，又学到了新的东西，预览图在下面:

X1`(%~D~D`4]`])A$I}OW06.png


实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册</title>
	<style type="text/css">
		@CHARSET "UTF-8";
#register {
	width:auto;
	height:auto;
	border:2px solid #ccc;
	font-size:12px;
}
#register h2 {
	text-indent:0;
	text-align:center;
}

#register dl {
	width:400px;
	margin:0 auto;
	align:center;
}
#register dl dt {
	text-align:center;
	padding:10px 0;
	font-weight:bold;
}
#register dl dd {
	padding:5px 0;
}
#register dl dd.face {
	padding:5px 0 5px 120px;
}
#register dl dd.face img {
	cursor:pointer;
}
#register dl dd input.text {
	width:220px;
	height:19px;
	border:1px dashed #333;
	background:#fff;
}
#register dl dd input.yzm {
	width:60px;
}
#register dl dd input.submit {
	width:60px;
	height:19px;
	border:1px dashed #333;
	background:#fff;
	cursor:pointer;
	margin:0 0 0 120px;
}
#register dl dd img#code {
	position:relative;
	top:6px;
	cursor:pointer;
}	
	</style>
</head>
<body>
	<div id = "register">
		<h2>会员注册</h2>
		<form method="post" name = "register" action="#">
			<input type="hidden" name="uniqid">
			<dl>
				<br/><h4>        请认真填写以下内容：</h4>
					<dd><font style="letter-spacing: 0.5em;margin-right: -0.5em;">用户名</font>：<input style="border-radius: 5px;" type="text" name="username" class="text"></dd>
					<dd><font style="border-radius: 5px;letter-spacing: 2em;margin-right: -2em;">密码</font>：<input type="password" name="password" class="text" placeholder="字母+数字不少于10位"></dd>
					<dd>确认密码：<input style="border-radius: 5px;" type="password" name="confirmpsw" class="text" placeholder="字母+数字不少于10位"></dd>
					<dd>密码问题：<input style="border-radius: 5px;" type="text" name="question" class="text"></dd>
					<dd>密码答案：<input style="border-radius: 5px;" type="text" name="answer" class="text"></dd>
					<dd><font style="letter-spacing: 2em;margin-right: -2em;">性别</font>：   		
						<input type="radio" name="sex" value="男" checked="checked">男　　
						<input type="radio" name="sex" value="女" />女　　
						<input type="radio" name="sex" value="保密" />保密</dd>
					<dd>电子邮件：<input style="border-radius: 5px;" type="text" name="email" class="text"  placeholder="example@mail.com"></dd>
					 <dd>
			            <font style="border-radius: 5px;letter-spacing: 2em;margin-right: -2em;">级别</font>：
			                <select name="level" id="level">
			                    <option value="">我是零基础的小白啦</option>
			                    <option value="" selected="">已经入门啦</option>
			                    <option value="">做过一些项目</option>
			                    <option value="">已经是大神级别</option>
			                </select>
       				 </dd>
					<dd>主页地址：<input style="border-radius: 5px;" type="text" name="http" value = "http://" class="text"></dd>
					<dd><font style="letter-spacing: 2em;margin-right: -2em;">扣扣</font>：<input style="border-radius: 5px;" type="text" name="qq" class="text"></dd>
					<dd>
			             <font style="border-radius: 5px;letter-spacing: 2em;margin-right: -2em;">简介</font>：
			            <td><textarea name="comment" id="comment" rows="5" cols="40" placeholder="文明上网,理性发言"></textarea></td>
		       		 </dd>
					<dd><font style="letter-spacing: 0.5em;margin-right: -0.5em;">验证码</font>：<input style="border-radius: 5px;" type="text" name="yzm" class="text yzm"/></dd>		
					<dd><input style="border-radius: 5px;" type="submit" class="submit" value="注册"></dd>
			</dl>
		</form>
	</div>
</body>
</html>

运行实例 »

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

上面的就是表单了，可以说web程序是离不了他的，常见的注册登录页面都是有表单支撑的，简直不能在强大
预览图如下：
HA8M%)US]FW7M~D_T7~(${2.png

这里手抄代码暂时还没有写，上班忒忙了，现在才空下来上传这个代码博客，稍后会补上，毕竟好记性不如烂笔头啊，稍后会补上来。

再说说选择器吧，还真是丰富多彩：标签选择器，属性选择器，id选择器，类选择器，后代选择器，子选择器，相邻选择器，相邻兄弟选择器，群组选择器，伪类选择器。。。属性选择器又可以根据不同的属性值，属性位置，指定属性值来区分使用，存在即合理，知道有哪些还要知道怎么去用，那样才算是掌握好了。这都需要不断的练习，熟能生巧。


这里 补上手抄代码：依旧辣眼睛。。。。

1534468414194.jpg

上一条：CSS选择器&元素单位---2018年8月16日19时分下一条：表单实现+元素单位+属性选择器8月15号
css选择器，表单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多