实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器*/
ul li {
list-style: none;
/*display实现块级、行内、行内块级元素转化。*/
/*块级元素主要写结构。*/
/*内联级主要写内容的。*/
display: inline-block;
width: 40px;
height: 40px;
/*行高和宽高一致，可实现文本的垂直居中*/
line-height: 40px;
/*text-align可让文本水平居中*/
text-align: center;
background-color: aqua;
margin-left: 5px;
/*变成圆形就是宽高的50%*/
border-radius: 50%;
/*四个数据分别为：水平、垂直、渐变、颜色*/
box-shadow:3px 2px 2px gray;
}
/*id选择器用#*/
#blue{
background-color: blue;
}
/*类选择器可设置多个*/
.green{
background-color: green;
}
/*属性选择器，选属性*/
li[id]{
border: 3px red solid;
}
/*群组选择器，中间一个逗号隔开*/
#blue,.green{
border: 2px black dashed;
}
/*相邻选择器用+li,也可以用*，*/
#blue+li{
border: 5px solid blueviolet;
}
/*同级兄弟选择器*/
#blue~*{
background-color: gray;
}
</style>
</head>
<body>
<ul>
<li>地球</li>
<li id="blue">火星</li>
<li>水星</li>
<li class="green">金星</li>
<li>***</li>
<li>月亮</li>
<li class="green">土星</li>
<li>五星</li>
</ul>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*!*标签选择器*!*/
ul li {
list-style: none;
/*display实现块级、行内、行内块级元素转化。*/
/*块级元素主要写结构。*/
/*内联级主要写内容的。*/
display: inline-block;
width: 40px;
height: 40px;
/*行高和宽高一致，可实现文本的垂直居中*/
line-height: 40px;
/*text-align可让文本水平居中*/
text-align: center;
background-color: aqua;
margin-left: 5px;
/*变成圆形就是宽高的50%*/
border-radius: 50%;
/*四个数据分别为：水平、垂直、渐变、颜色*/
box-shadow:3px 2px 2px gray;
}
/*伪类：子元素选择器，切记，ul 后边要加空格。*/
ul :first-child{
background-color: gray;
}
ul :last-child{
background-color:blueviolet;
}
ul :nth-child(5){
background-color:blue;
}
ul :nth-last-child(3){
background-color: green;
}
/*伪类：类型选择器，指第几个这种类型的样式设置成什么样*/
ul li:first-of-type{
background-color: antiquewhite;
}
ul li:last-of-type{
background-color:greenyellow;
}
ul li:nth-of-type(4){
background-color:brown;
}
/*第一个DIV类型的里的第二个*/
div:first-of-type :nth-child(2){
background-color: brown;
}
/*第二个子元素P类型的设置成啥样*/
div p:nth-of-type(2){
background-color: greenyellow;
}
/*表单样式*/
/*enabled指有效框设置效果*/
form :enabled{
background-color:lightpink;
}
form :checked+label{
color: green;
}
/*当输入错误时被激活*/
form :invalid{
color:red;
}
/*获取焦点的效果：*/
form :focus{
background-color: green;
}
/*鼠标悬停效果*/
button:hover{
color: greenyellow;
}
</style>
</head>
<body>
<ul>
<li>地球</li>
<li>火星</li>
<li>水星</li>
<li>金星</li>
<li>***</li>
<li>月亮</li>
<li>土星</li>
<li>五星</li>
</ul>
<div>
<p>大狗</p>
<li>二狗</li>
<p>三狗</p>
</div>
<div>
<p>四狗</p>
<li>五狗</li>
</div>
<hr>
<h1>用户登录</h1>
<form>
<p>
<label for="email"></label>
<input type="email" id="email" name="" value="">邮箱
</p>
<p>
<label for="password"></label>
<input type="password" id="password" name="" value="">密码
</p>
<p>
<input type="radio" id="week" checked>
<label for="week">保存一周</label>
<input type="radio" id="month">
<label for="month">保存一月</label>
</p>
<p>
<button>提交</button>
</p>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加油</title>
<style>.box {
width: 300px;
height: 2000px;
border: 5px dashed black;
/*设置背景*/
/*background-color: deeppink;*/
/*background-image: url("xunguang-7.jpg");*/
/*是否重复*/
/*background-repeat: no-repeat;*/
/*背景定位*/
/*background-position: left center;*/
background-size: 100px 100px;
/*背景不滚动*/
/*background-attachment:fixed;*/
/*合起来写*/
background:black url("xunguang-7.jpg") 50px 100px fixed no-repeat;</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
