收藏
批改状态：合格
老师批语：
通过今天的学习，我主要对form表单进行认识和了解，css的三种单元，以及几种选择器的认识和使用，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器使用秘籍</title>
</head>
<style>
body{
margin: auto 0px;
}
li{ list-style: none;}
/*标签属性选择器*/
div{
font-size:1.25rem;
background-color:lightpink;
width: 75rem;
height: 50rem;
text-align: center;
}
/*id选择器*/
#name{
font-size: 18px;
border-style: solid ;
border-color: antiquewhite;
width:14em;
height: 1.2em;
}
/*类选择器*/
.password{
font-size: 18px;
border-color: antiquewhite;
border-style: solid;
width:14em;
height: 1.2em;
}
/*属性选择器*/
ol li[class="study"]
{
color: lightseagreen;
}
ol li[class^="game"]
{
color: lightslategray;
}
ol li[class*="hs"]
{
color: yellow!important;
}
ol li[class$="ha"]
{
color: red;
}
input[type="radio"] {
}
/*//后代选择器*/
ul li{
font-size: 15px;
}
/*子选择器*/
ul li[class="miejue"]
{
color: green;
}
/*除了class为灭绝其它之外的样式*/
ul li[class="miejue"]~*
{
font-size: 18px;
}
/*相邻兄弟选择器*/
ul li[class="miejue"]+li
{
color:darkmagenta;
}
/*群组选择器*/
h3,h2{
font-weight: 200;
}
/*伪类选择器*/
input[class="name"]:focus{
border-color: darkmagenta!important;
width: 1600px!important;
}
input[class="tijiao"]:active{
border-color: yellow!important;
border-radius: 15px;
width: 400px;
}
/*伪类选择器 位置*/
ul li:first-child{
font-weight: 100;
font-size: small;
}
ul li:last-child{
font-weight: 200;
font-size: medium;
}
ul li:nth-child(5)
{
color: darkred;
font-size: large;
}
/*偶数行设置样式 even 奇数old*/
/*ul li:nth-child(2n)*/
/*{*/
/*color: darkred!important;*/
/*font-size: large!important;*/
/*!*}*!*/
/*根据子元素数量*/
ul :only-child
{
font-size: 15px;
}
/*倒数第几个*/
/*ul li:nth-last-child(2)*/
/*{*/
/*font-size: 30px;!important;*/
/*}*/
/*每个倒数第几个元素 去掉last就是正数第几个*/
ul li:nth-last-of-type(1)
{
color: white!important;
font-size: 20px!important;
}
/*：empty{设置元素属性}*/
div:empty
{
width:100px;
height:20px;
background:#ff0000;
}
div:empty:after{
content: '我其实是帅哥！';
content: url("http://dingyue.nosdn.127.net/d0I8gsgDAuDez2CihXlTafv607HX2JSH1k9cxZGBRw1xf1513105361444.jpg");
}
#divimag
{
width:1200px;
height:1400px;
background-color:lightpink;
}
img{
border-radius: 50%;
}
a img:hover{
width: 150px;
height: 150px;
border-color: aqua;
}
</style>
<body>
<div>
<h2>PHP中文网</h2>
<form method="post" action="">
<input type="text" name="name" id="name" class="name" placeholder="姓名">
<br>
<input type="password" name="password" class="password" placeholder="password">
<br>
<input style="font-size: 12px;background-color: red" type="radio" name="sex" id="petezhu" value="朱老师">
<label for="petezhu">朱老师</label>
<input type="radio" name="sex" id="meijuelaoshi" value="灭绝老师">
<label for="meijuelaoshi">灭绝老师</label>
<input type="radio" name="sex" id="banzhuren" value="班主任">
<label for="banzhuren">班主任</label>
<br>
<a><img src='http://img.hdbs.cn/images/2015/4/16/20154161429148361883_36.jpg' width=100px height=100px /></a>
<a><img src="http://image3.xyzs.com/upload/ca/f1/321/20150506/143087306938411_0.jpg" width="100px" height="100px"></a>
<a><img src="http://06.imgmini.eastday.com/mobile/20180719/20180719171954_79070f1dbb01466928f236febea58f75_3.png" width="100px" height="100px"></a>
<hr>
<h3>你希望学到什么内容！</h3>
<ol>
<li>前端布局</li>
<li class="study">php基本操作</li>
<li class="game show">项目实战</li>
<li class="hs ha">数据库知识点</li>
<li class="hs">服务器</li>
<li class="gank">填补业余生活</li>
</ol>
<hr>
<h3>php幕后中文网神秘操控人员清单</h3>
<ul>
<li>皮特朱</li>
<li class="miejue">灭绝师太</li>
<li>西门官人</li>
<li>幕后剪辑师</li>
<li>神秘者五号</li>
<li>神秘者六号</li>
</ul>
<ul>
<li>哈哈</li>
</ul>
<input type="button" class="tijiao" value="提交">
<input type="reset" value="重置">
</form>
</div>
<div id="divimag"></div>
<div>A paragraph.</div>
<div>Another paragraph.</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手抄代码如下
总结：
内联大于内部大于外部
内联：以style属性方式声明在元素的起始标签
内部：以style标签声明在当前html文档中,仅对当前文档有效
外部：将样式规则放在一个外部，通过link引入
标签 Id选择器 类选择器 属性选择器
后代选择器/层级选择器
子选择器
相邻选择器
兄弟相邻选择器
群组选择器
伪类选择器:链接
访问前
a:link{}
访问后
a:visited{}
获取焦点的时候
a:focus{}
访问中
a:hover{}
鼠标点击激活的时候
a:active{}
伪类选择器：位置
Ul li:fist-child{}
Ul li:last-child{}
Ul li:nth-child(6){}起始从1开始
偶数Ul li:nth-child(2n){} 或者even 奇数odd
根据子元素数量
Ol :only-child
根据选择类型
Ol li: :only-child
倒数第几个
Ul li：nth-last-child(3)
每个第几个子元素
Ol li:nth-of-type(2){}
：empty{设置元素属性}
：empty:after{
Contente
}
//默认都是行内元素
:empty:before{
Content:url
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
