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

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

Blogger Information

Blog 22

fans 0

comment 0

visits 18111

Special Recommendation

More>

Related recommendations

实例

<!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选择器，类选择器，后代选择器，子选择器，相邻选择器，相邻兄弟选择器，群组选择器，伪类选择器。。。属性选择器又可以根据不同的属性值，属性位置，指定属性值来区分使用，存在即合理，知道有哪些还要知道怎么去用，那样才算是掌握好了。这都需要不断的练习，熟能生巧。

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

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

【8/10】---HTML初体验之html组成部分和样式属性搭配----2018/8/11--14:12

2018-08-11 17:49:16