实例1.CSS-常用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS常用选择器</title>
<style type="text/css">
/*群组选择器*/
ul, li {
padding: 0;
margin: 0;
overflow: hidden;
}
/*标签选择器*/
ul {
border: 1px dashed #f00;
padding: 10px;
}
/*层级选择器*/
ul li {
width: 40px;
height: 40px;
list-style-type: none;
background-color: #DFDDBF;
border-radius: 50%;
float: left;
text-align: center;
line-height: 40px;
margin-right: 2em;
font-weight: bold;
-webkit-box-shadow: 2px 2px 1px;
box-shadow: 2px 2px 1px;
}
/*class类选择器*/
.red {
background-color: #f00;
}
/*ID选择器*/
#yello {
background-color: #ff0;
}
/*属性选择器，用[]中的属性来选择对象*/
li[id="yello"] {
border: 2px solid #f00;
}
/*兄弟选择器，用 ~ 选择相邻的对象*/
#yello ~ * {
background: -#fcc;
}
/*相邻选择器，用+号选择与之相邻的对象*/
#yello + * {
background: #f99;
}
/*伪类选择器，子元素，选择第一个*/
ul:first-child {
color: #F4BD00;
}
/*伪类选择器，子元素，选择最后一个*/
ul:last-child {
color: #D000FF;
}
/*伪类选择器，括号中输入数字可以选择元素排序，2n为偶数，2n+1为奇数*/
ul li:nth-child(2n) {
background-color: #3E90E3;
}
ul li:nth-child(2n+1) {
background-color: #E33E9F;
}
/*伪类选择器，倒序*/
ul li:nth-last-child(2) {
color: #fff60e;
}
/*伪类选择器，> 尖括号为选择子元素*/
div > :nth-child(2) {
background-color: #fff60e;
}
/*表单选择器，所有有效表单元素,注意，form的后面要有一个空格！！！！！！不然效果无效，坑爹的*/
form :enabled {
background-color: #fff60e;
}
form [type="button"]:enabled {
background-color: #f5f5f5;
}
/*表单选择器，checked被选择中的元素,选择的元素是input，+*是选它的兄弟元素，也就是label元素，就可以控制文本颜色*/
form :checked + * {
color: crimson;
font-weight: bold;
}
/*表单选择器，focus焦点选择,当鼠标选择某个元素时，就是起效果*/
form :focus {
background-color: #f4f4f4;
}
form [type="button"]:hover {
background-color: khaki;
}
/*表单选择器，表单验证，如果输入无效的值则起效果*/
form :invalid {
color: #f00;
}
}
</style>
</head>
<body>
<h3>CSS样式的常用控制</h3>
<ul>
<li class="red">类</li>
<li id="yello">ID</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div>
<p>hello moto!</p>
<p>西门大官人</p>
<p>moto sir!</p>
</div>
<div>
<p>灭绝师太</p>
<p>韦小宝</p>
</div>
<form action="">
<label for="textfield">邮箱：</label>
<input type="email" >
<br>
<label for="password">密码：</label>
<input type="password">
<br>
<input type="radio" name="radio" id="radio" value="radio">
<label for="radio">保存一周 </label>
<input type="radio" name="radio" id="radio2" value="radio2">
<label for="radio2">保存一月 </label>
<input type="button" value="登录">
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例2.CSS-背景
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS的背景</title>
<style>
div {
float: left;
width: 300px;
height: 300px;
border: 3px solid #ccc;
margin: 10px 10px 0 0;
}
/*设置元素背景颜色*/
.bg1 {
background-color: aqua;
}
/*设置元素半透明背景颜色，用RGAB颜色模型表示，前面3个数字代表红绿蓝的数值，后面的是表示透明度，1为不透明，0为透明，小数可设置为半透明*/
.bg2 {
background-color: rgba(177,26,29,0.50);
}
/*设置元素渐变背景颜色,linear-gradient线性渐变，deg是渐变角度，颜色值1 渐变位置百分百,颜色值2 渐变位置百分百,颜色值3 渐变位置百分百,....*/
.bg3 {
background-image: -webkit-linear-gradient(150deg, #f00 0%, #ff0 49.22%, #0f0 100%);
background-image: -moz-linear-gradient(150deg, #f00 0%, #ff0 49.22%, #0f0 100%);
background-image: -o-linear-gradient(150deg, #f00 0%, #ff0 49.22%, #0f0 100%);
background-image: linear-gradient(150deg, #f00 0%, #ff0 49.22%, #0f0 100%);
}
/*设置元素背景图片*/
.bg4 {
background-image: url(http://f.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd5eb22fe902b30f2442a70f37.jpg);
}
/*设置元素背景图片缩放大小,cover为拉升到容器大小*/
.bg5 {
background-image: url(http://f.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd5eb22fe902b30f2442a70f37.jpg);
background-size: cover
}
/*设置元素背景图片缩放大小,百分比可以设置缩小比例，repeat是控制重复，position可以控制位置*/
.bg6 {
background-image: url(http://f.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd5eb22fe902b30f2442a70f37.jpg);
background-size: 80% ;
background-repeat: no-repeat;
background-position:center;
}
</style>
</head>
<body>
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
<div class="bg5"></div>
<div class="bg6"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例3.CSS-固定定位
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style>
body {
height: 1500px;
}
p {
width: 300px;
height: 300px;
position: fixed;
bottom: 0px;
right: 0px;
background-color: #f00;
}
</style>
</head>
<body>
<p>固定定位广告位</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例3.CSS-实现定位遮罩
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-flexBOX实现全屏定位遮罩</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url(http://f.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd5eb22fe902b30f2442a70f37.jpg);
}
.flex {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
background-color: rgba(0,0,0,0.5);
}
.box {
width: 250px;
height: 350px;
background-color: rgba(255,255,255,1);
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
</head>
<body>
<div class="flex">
<dix class="box">CSS-flexBOX实现全屏定位遮罩</dix>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例4.CSS-圣杯布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局-圣杯布局</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.box1200 {
width: 1200px;
}
#header {
background: #f5f5f5;
height: 45px;
display: flex;
justify-content: center;
}
#header nav {
flex-direction: row;
justify-content: space-between;
text-align: center;
display: flex;
}
#header nav a {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
background-color: #CDF4E3;
text-decoration: none;
margin: 0 5px 0 0;
color: #000;
}
#header nav a:last-child {
margin: 0;
}
#header nav a:hover {
background-color: #f00;
}
.flex {
display: flex;
justify-content: center;
}
.flex .box1200 {
display: flex;
height: 800px;
}
#main {
flex: 1;
background-color: #ff0;
}
.left {
flex: 0 0 300px;
order: -1;
background-color: bisque;
}
.right {
flex: 0 0 300px;
order: 1;
background-color:burlywood;
}
#footer {
display: flex;
background-color: #f5f5f5;
height: 50px;
justify-content: center;
}
#footer .box1200 {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<header id="header">
<nav class="box1200">
<a href="#">栏目名称</a>
<a href="#">栏目名称</a>
<a href="#">栏目名称</a>
<a href="#">栏目名称</a>
<a href="#">栏目名称</a>
</nav>
</header>
<div class="flex">
<div class="box1200">
<main id="main">页面主体内容</main>
<div class="left">左侧内容区域</div>
<div class="right">右侧内容区域</div>
</div>
</div>
<footer id="footer">
<div class="box1200">页面底部区域</div>
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
