实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>表单实战</title> </head> <body> <form action="demo.html" method="get"> <table align="center" width="400" bgcolor="powderblue"> <h1 align="center">提交表单</h1> <tr> <td> <label for="name">邮箱：</label></td> <td><input type="text" name="name" value="" id="name" placeholder="1652786790"></td> </tr> <tr> <td> <label for="name1"> 密码： </label> </td> <td><input type="text" name="name1" id="name1" value="" placeholder="请输入你的密码？"> </td> </tr> <tr> <td><label for="name2">性别：</label> </td> <td> <!-- 取决于name2的值相等 --> <input type="radio" name="name2">男 <input type="radio" name="name2">女 <input type="radio" name="name2" checked="">保密 <!-- checked设置默认选项 --> </td> </tr> <tr> <td><lable for="name3">兴趣： </lable> </td> <td> <input type="checkbox" name="name3">html <input type="checkbox" name="name3">css <input type="checkbox" name="name3" checked="">javacsript </td> </tr> <tr> <td> <label>级别： </label> </td> <td> <select> <option> html </option> <option selected=""> css </option> <!-- selected=""设置显示谁 --> <option> javascript </option> <option>jquery </option> </select> </td> </tr> <tr> <td> <lable>头像： </lable> </td> <td> <img src="" alt=""> <input type="file" name=""> </td> </tr> <tr> <td><lable> 简介： </lable></td> <td> <textarea name="name5" placeholder="请输入内容"></textarea> </td> </tr> <tr> <td colspan="2" align="center"> <hr> <input type="submit" name="" value="提交表单"> <input type="reset" name="" value="重置"> </td> </tr> </table> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>样式继承</title>
</head>
<body>
<style type="text/css" media="screen">
body{
font-size:20px;
}
ul{
font-weight:bold;
border:1px solid #f30;
padding:20rem;
}
ul li{
border:inherit;
padding:inherit; /* //继承样式 */
}
</style>
<ul>
<li> 样式继承 </li>
<li> 导航菜单 </li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>常用选择器</title>
</head>
<style type="text/css" media="screen">
ul,li{
list-style:none;
}
ul:after{
content:"";
display:block;
clear:both;
}
ul li{
float: left;
width:30px;
height:30px;
border-radius:50%;
background:#f30;
text-align:center;
line-height:30px;
color:#eee;
margin-left:5px;
}
#item1{
background:blue;
}
.item1{
background:gold;
}
ul li[class]{
background:blueviolet;
}
/* ul li[class^="gov"] {
background-color:grey;
}
*/
ul li[class$="box"] {
background-color: #666;
}
ul li[class*="te"]{
background:#000;
}
/* ul li:first-child{
background:#333!important;
} */
ul li:last-child{
background:#333;
}
/* ul li:nth-child(2n+1){
background:#888;
} */
ul li:nth-child(2n){
background:#888;
}
/*伪类选择器: 根据子元素数量*/
/*选择具有唯一子元素的元素*/
ol :only-child {
background-color: lawngreen;
}
ol li:only-child{
}
ol li:nth-of-type(2){
background:#999;
}
:empty {
width: 220px;
height: 271px;
background-color: coral;
}
:empty:after{
content:"看到我了吗？";
}
:empty:before{
content:"url('')";
}
</style>
<body>
<!-- 总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
同一级别 -->
<ul>
<li id="item1">1</li>
<li class="item1">2</li>
<li class="gov pin box te">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ol>
<li>1</li>
</ol>
<ol>
<li>2</li>
<li>3</li>
</ol>
<ol>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
<div></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
:empty 选择页面中内容为空的元素 :empty:after插入内容
:first-child 选择第一个元素 :last-child 选择最后一个
[class$="pig"] + li 相邻兄弟选择器