表单：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <form action="" method="get"> <!--get/post提交方式--> <table width="500px" align="center" style="background-color: skyblue" cellspacing="0" cellpadding="8px"> <caption><h2>用户注册</h2></caption> <tr> <td colspan="2"> <hr /> </td> </tr> <tr> <td align="right"><label for="num">帐号:</label></td> <td><input type="text" name="num" id="num" /></td> </tr> <tr> <td align="right"><label for="password">密码:</label></td> <td><input type="password" name="password" id="password" /></td> </tr> <tr> <td align="right">性别:</td> <td> <input type="radio" name="sex" id="" value="男" />男 <input type="radio" name="sex" id="" value="女" />女 <input type="radio" name="sex" id="" value="保密" />保密 </td> </tr> <tr> <td align="right">爱好:</td> <td> <input type="checkbox" name="hobby[]" id="" name="game" />打游戏 <input type="checkbox" name="hobby[]" id="" name="wash" />洗 <input type="checkbox" name="hobby[]" id="" name="篮球" />篮球 <input type="checkbox" name="hobby[]" id="" name="足球" />足球 </td> </tr> <tr> <td colspan="2"> <hr /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="提交" style="margin-left: 100px;border-radius: 8px;cursor:pointer" /> <input type="reset" value="重置" style="margin-left: 100px;border-radius: 8px;cursor:pointer" /> </td> </tr> </table> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3种单位的区别
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<title>3种单位的区别</title>
<body>
<div class="px">px</div>
<div class="em">em</div>
<div class="rem">rem</div>
<style>
/*
浏览器默认字体16px
最小12px
*/
.px{
font-size:20px;
width:100px;
line-height:100px;
text-align:center;
background-color:#666666;
}
.em{ /*em =16px 默认值*/
font-size:20px;
width:5em;
line-height:5em;
text-align:center;
background-color:red;
}
.rem{
width:10rem;
line-height:10rem;
text-align:center;
background-color:blue;
}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
样式继承：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<title>样式继承</title>
<body>
<style>
/*在文档中 字体、颜色、字体大小、列表样式、表格可继承*/
/*元素外部的属性 边框 内外边距不可继承*/
body{
font-size:22px; /*可继承*/
}
ul{
font-weight:bold; /*可继承*/
border:1px solid red; /*不可继承*/
padding:1rem; /*不可继承*/
}
ul li{
border:inherit; /*强制继承*/
padding:inherit; /*强制继承*/
}
</style>
<nav>
<ul>
<li class="item1"><a href="">导航1</a></li>
<li class="item2"><a href="">导航2</a></li>
<li class="item3"><a href="">导航3</a></li>
<li class="item4"><a href="">导航4</a></li>
</ul>
</nav>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS选择器：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<title>样式冲突</title>
<body>
<!--
样式优先级
内联：style属性声明在元素内部，仅对当前元素有效
内部：style标签，对当前文件有效
外部：通过link引入css样式
优先级：内联>内部>外部
同名样式后面定义的会覆盖前面的
强制优先级：!import
-->
<style>
h2{
/*color:blue;*/
}
</style>
<h2 style="color: red">hello world</h2>
<style>
ul{
margin:0;
padding:20px 5px;
width:600px;
border:1px dashed #666;
}
/*子块撑开父级*/
ul:after{
content:'';
display:block;
clear:both;
}
ul li{
list-style:none;
float:left;
width:40px;
height:40px;
line-height:40px;
border-radius:50%;
background-color:skyblue;
text-align:center;
margin:0 5px;
box-shadow:3px 3px 3px #666666;
}
/*属性选择器*/
ul li[id]{
background-color:red;
}
ul li[class]{
background-color:green;
}
ul li[class="item2"]{
background-color:yellow;
}
/*以***开头*/
ul li[class^="cat"]{
background-color:blue;
}
/*以***结尾*/
ul li[class$="big"]{
background-color:#f24f24;
}
/*属性值中包含**的*/
ul li[class*="t"]{
background-color:#f56f56;
}
/*层级选择器*/
body ul li{
border:1px solid #000;
}
/*子选择器*/
ul>li[class="item2"]{
background-color:cyan;
}
/*相邻选择器*/
ul li[class$="big"] ~ *{
background-color:black;
color:#fff;
}
/*相邻兄弟选择器*/
ul li[class$="big"]+li{
background-color:pink;
}
/*群组选择器*/
h2,p{
font-size:33px;
font-weight:bold;
}
/*伪类*/
a{
font-size:22px;
}
/*访问后*/
a:link{
color:blue;
}
/*访问前*/
a:visited{
color:red;
}
/*获取焦点*/
a:focus{
color:pink;
}
/*鼠标悬停*/
a:hover{
color:#000;
}
/*鼠标点击激活的时候*/
a:active {
color: aquamarine;
}
/*伪类选择器 位置*/
ul li:first-child{ /*第一个*/
background-color:#fff !important;
}
ul li:last-child{ /*倒数第一个*/
color:red;
}
ul li:nth-child(5){ /*第五个*/
background-color:skyblue;
}
ul li:nth-child(even){
/*偶数、odd基数*/
background-color:#f4f4f4;
}
/*伪类选择器: 根据子元素的数量*/
ol :only-child {
background-color: lawngreen;
}
ol li:only-child {
background-color: lawngreen;
}
ul li:nth-last-child(3) {
background-color: wheat;
}
/*规定属于其父元素的第二个 p 元素*/
ol li:nth-of-type(2) {
background-color: wheat;
}
/*空元素*/
:empty{
width:220px;
height:220px;
background-color:cyan;
}
:empty:after{
content:'hello world'; /*内容*/
}
:empty:before {
/*通过伪类添加的元素,默认都是行内元素,不支持宽高设置,可以通过设置背景图片的方式来间接处理*/
content: url("./static/images/footlogo.png");
}
</style>
<ul>
<li id="item1">1</li>
<li class="item2">2</li>
<li class="cat dog big">3</li>
<li >4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h2>hello</h2>
<p>你好吗</p>
<a href="http://www.php.cn/">PHP中文网</a>
<div></div>
<ol>
<li>1</li>
</ol>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
