三种元素单位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种元素单位</title>
<style>
html {
font-size: 13px; /*浏览器默认16px*/
}
/* px:像素单位，相对于当前的显示器*/
.px {
font-size: 18px;
width: 100px;
height: 100px;
background: pink;
}
/* em：元素单位，相对于当前元素或父元素字体大小，默认1em = 16px*/
.em {
font-size: 18px; /*1em = 18px*/
width: 5em; /*即等于90px*/
height: 5em;
background: lightblue;
}
/*rem：根元素单位，r即root，相对于根元素html字体大小，浏览器默认 1rem = 16px*/
.rem {
font-size: 16px;
width: 5rem; /*5rem = 65px*/
height: 5rem;
background: lightgreen;
}
</style>
</head>
<body>
<h2>元素单位:px、em、rem</h2>
<div class="px">我是px单位</div>
<div class="em">我是em单位</div>
<div class="rem">我是rem单位</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
常用的css选择器
实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style>
* {
padding: 0;
margin: 0;
}
h3 {
text-align: center;
width: 180px;
height: 40px;
line-height: 40px;
background: gold;
box-shadow:2px 2px 3px 1px;
margin: 8px 0 8px 150px;
}
div a {
text-decoration:none;
font-size:22px;
margin: 10px 10px;
}
/*伪类选择器*/
div a:hover{
font-size: 28px;
}
ul li {
text-align: center;
list-style: none;
width: 30px;
height: 30px;
line-height: 30px;
border:1px solid black;
border-radius: 50%;
background: cyan;
float: left;
margin-left:8px;
}
/*id选择器*/
ul li#one {
background: #000;
color:white;
}
/*类选择器*/
ul li.blue {
background: blue;
color: #fff;
}
/* 属性选择器：根据属性名选择*/
div a[href] {
color: purple;
font-weight: bolder;
}
div a[href="https://www.sina.com.cn/"] {
color:cadetblue;
}
div a[href="https://www.taobao.com/"] {
font-family: 楷体;
}
/* 属性选择器：根据属性值选择*/
ul li[class="five"] {
background: darkred;
color: yellow;
}
/* 属性选择器：根据正则表达式选择*/
/*选择指定开头字符的元素*/
ul li[class^="num"] {
background: palegoldenrod;
}
/*选择指定结尾字符的元素*/
ul li[class$="nd"] {
background: greenyellow;
}
/*选择包含某字符串的元素*/
ul li[class*="oo"] {
color: red;
font-weight: bolder;
}
/*相邻选择器*/
ul li.goods ~ * {
color: purple;
font-style: italic;
}
/*兄弟选择器*/
ul li.brother + li {
background: #ccc;
}
/* 伪类选择器*/
li:last-child {
background-color: #ff740e;
}
li:nth-child(18){
background: #000;
}
</style>
</head>
<body>
<h3>常用选择器练习</h3>
<div>
<a href="http://www.php.cn">学PHP来php中文网</a>
<a href="http://www.baidu.com">有事没事都百度</a>
<a href="https://www.sina.com.cn/">看新闻来新浪</a>
<a href="https://www.taobao.com/">淘宝吧！</a>
</div>
<ul>
<li id="one">1</li>
<li class="blue">2</li>
<li>3</li>
<li class="blue">4</li>
<li class="five">5</li>
<li class="num_six good">6</li>
<li class="num_seven">7</li>
<li class="num_end">8</li>
<li class="num_end">9</li>
<li class="goods">10</li>
<li>11</li>
<li class="brother">12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
昨晚，过了一个美妙的夜晚，学到了很多东西，谢谢朱老师，谢谢PHP中文网。