收藏
批改状态：合格
老师批语：
<!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](https://img.php.cn//upload/image/974/676/768/1534418263720814.png "1534418263720814.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](https://img.php.cn//upload/image/306/661/873/1534418372459345.png "1534418372459345.png")
这里手抄代码暂时还没有写，上班忒忙了，现在才空下来上传这个代码博客，稍后会补上，毕竟好记性不如烂笔头啊，稍后会补上来。
再说说选择器吧，还真是丰富多彩：标签选择器，属性选择器，id选择器，类选择器，后代选择器，子选择器，相邻选择器，相邻兄弟选择器，群组选择器，伪类选择器。。。属性选择器又可以根据不同的属性值，属性位置，指定属性值来区分使用，存在即合理，知道有哪些还要知道怎么去用，那样才算是掌握好了。这都需要不断的练习，熟能生巧。
这里 补上手抄代码：依旧辣眼睛。。。。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
