为了账号安全，请及时绑定邮箱和手机立即绑定
课程 \ 十天精通CSS3

十天精通CSS3

代码 80 问答 0
按时间 按章节
1-1 什么是CSS3？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello CSS3</title>
<link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello CSS3</h1>
</body>
</html>
2015-05-17 查看完整代码
1-2 CSS3能做什么？
<!doctype html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS3-Demo</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="stage">
<div id="doraemon">
<div id="face">
<div id="head_light"></div>
<div id="eyes">
<div class="eye eye_left"></div>
<div class="black_eye black_left"></div>

<div class="eye eye_right"></div>
<div class="black_eye black_right"></div>
</div>
<div id="base">
<div id="base_white"></div>
<div id="nose">
<div id="nose_light"></div>
</div>
<div id="nose_line"></div>
<div id="mouth"></div>
<div id="mouth_rewrite"></div>
<div id="firefox_mouth"></div>

<div class="whiskers whi_right_top rotate160"></div>
<div class="whiskers whi_right"></div>
<div class="whiskers whi_right_bottom rotate20"></div>

<div class="whiskers whi_left_top rotate20"></div>
<div class="whiskers whi_left"></div>
<div class="whiskers whi_left_bottom rotate160"></div>
</div>
</div>
<div id="choker">
<div id="belt"></div>
<div id="bell">
<div id="bell_line"></div>
<div id="bell_circle"></div>
<div id="bell_under"></div>
<div id="bell_light"></div>
</div>
</div>
<div id="body">
<div id="doutai"></div>
<div class="base_white2 doutai_center"></div>
<div id="pocket">
<div id="circle"></div>
<div id="circle_rewrite"></div>
</div>
</div>
<div id="hand_right">
<div id="arm_right"></div>
<div class="hand_circle hand_right"></div>
<div class="arm_rewrite_right"></div>
</div>
<div id="hand_left">
<div id="arm_left"></div>
<div class="hand_circle hand_left"></div>
<div class="arm_rewrite_left"></div>
</div>
<div id="foot">
<div id="foot_left"></div>
<div id="foot_right"></div>
<div id="foot_rewrite"></div>
</div>
<div id="shadow_doutai_arm"></div>
<div id="shadow_doutai_left"></div>
<div id="shadow_doutai_right"></div>
<div id="shadow_belt"></div>
</div>
</div>
</body>
</html>
2015-05-17 查看完整代码
2-1 CSS3边框 圆角效果 border-radius
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
/*任务部分*/
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius:50px 0 0 50px;
}

</style>
</head>
<body>
<div class="circle">
</div>
<br/>
<!--任务部分-->
<div class="semi-circle">
</div>

</body>
</html>
2015-05-17 查看完整代码
2-2 CSS3边框 阴影 box-shadow（一）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadow</title>
<style>
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:4px 4px 6px #666,10px 10px 15px green inset;
}
.boxshadow-inset{
width:100px;
height:100px;
box-shadow:4px 4px 6px #666 inset;
}
.boxshadow-multi{
width:100px;
height:100px;
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

</style>
</head>

<body>
<h2>外阴影</h2>
<div class="boxshadow-outset">
</div>
<br />
<h2>内阴影</h2>
<div class="boxshadow-inset">
</div>
<br />
<h2>多阴影</h2>
<div class="boxshadow-multi">
</div>
</body>
</html>
2015-05-17 查看完整代码
2-3 CSS3边框 阴影 box-shadow（二）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadow</title>
<style>
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:4px 4px 6px #666;
}


</style>
</head>

<body>
<h2>外阴影</h2>
<div class="boxshadow-outset">
</div>


</body>
</html>
2015-05-17 查看完整代码
2-4 CSS3边框 为边框应用图片 border-image
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>边框图片</title>
<style>
#border_image {
margin:0 auto;
height:100px;
line-height:100px;
text-align:center;
font-size:30px;
width:450px;
border:15px solid #ccc;
border-image:url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 20 repeat;
}
</style>
</head>
<body>
<div id="border_image">
请为我镶嵌上漂亮的画框吧
</div>
</body>
</html>
2015-05-17 查看完整代码
3-1 CSS3颜色 颜色之RGBA
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RGBA colors</title>
<style type="text/css">
body{background:url(http://static.mukewang.com/static/img/logo_index.png)}
p{
font-size:42px;
text-align:center;
font-weight:bold;
background:rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<p>背景半透明的？</p>
</body>
</html>
2015-05-17 查看完整代码
3-2 CSS3颜色 渐变色彩 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradient</title>
<style type="text/css">

p {
width: 400px;
height: 150px;
line-height: 150px;
text-align:center;
color: #000;
font-size:24px;
background-image:linear-gradient(to top left,red,yellow,white);
}
</style>
</head>
<body>
　　<p>右下角向左上角的线性渐变背景</p>
</body>
</html>
2015-05-17 查看完整代码
4-1 CSS3文字与字体 text-overflow 与 word-wrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
<style type="text/css">
.test_demo{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width:200px;
background:#ccc;
}
</style>
</head>
<body>
<div class="test_demo">
超酷的IT技术学习平台（我是省略号）
</div>
</body>
</html>
2015-05-17 查看完整代码
4-2 CSS3文字与字体 嵌入字体@font-face
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入字体</title>
<style type="text/css">
@font-face {
font-family: "MOOC Font";
src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
.demo {
width: 340px;
padding: 30px;
color: #566F89;
background: #000;
font-size:58px;
font-family: "MOOC Font";
}
</style>
</head>
<body>
<div class="demo">IMOOC</div>
</body>
</html>
2015-05-17 查看完整代码
4-3 CSS3文字与字体 文本阴影text-shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow</title>
<style type="text/css">
.demo {
width: 340px;
padding: 30px;
font: bold 55px/100% "微软雅黑";
background: #C5DFF8;
text-shadow: 2px 2px 0 red;
}
</style>
</head>
<body>
<div class="demo">IMOOC</div>
</body>
</html>
2015-05-17 查看完整代码
5-1 CSS3背景 background-origin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景原点</title>
<style type="text/css">
.wrap {
width:220px;
border:20px dashed #000;
padding:20px;
font-weight:bold;
color:#000;
background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
background-origin: content-box;
position: relative;
}
.wrap span {
position: absolute;
left:0;
top:0;
}
.content {
height:80px;
border:1px solid #333;
}
</style>
</head>
<body>
<div class="wrap"><span>padding</span>
<div class="content">content</div>
</div>
</body>
</html>
2015-05-17 查看完整代码
5-2 CSS3背景 background-clip
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景裁切</title>
<style type="text/css">
.wrap {
width:220px;
border:20px dashed #000;
padding:20px;
font-weight:bold;
color:#000;
background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
background-origin: border-box;
background-clip: padding-box;
position: relative;
}
.wrap span {
position: absolute;
left:0;
top:0;
}
.content {
height:80px;
border:1px solid #333;
}
</style>
</head>
<body>
<div class="wrap"><span>padding</span>
<div class="content">content</div>
</div>
</body>
</html>
2015-05-17 查看完整代码
5-3 CSS3背景 background-size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片大小</title>
<style type="text/css">
.demo {
background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
width: 300px;
height: 140px;
border: 1px solid #999;
background-size:300px 140px;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
2015-05-17 查看完整代码
5-4 CSS3背景 multiple backgrounds
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多重背景</title>
<style type="text/css">
.demo{
width: 300px;
height: 140px;
border: 1px solid #999;

background-image: url(http://img1.sycdn.imooc.com//54cf2365000140e600740095.jpg),
url(http://img1.sycdn.imooc.com//54cf238a0001728d00740095.jpg),
url(http://img1.sycdn.imooc.com//54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;

margin:0 0 20px 0;
}
.task {
width: 300px;
height: 140px;
border: 1px solid #999;

background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat,
url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
background-position:left top,right bottom;
background-size:75% 55%,50% 40%;

}


</style>
</head>
<body>
<div class="demo"></div>
<div class="task"></div>
</body>
</html>
2015-05-17 查看完整代码
5-5 CSS3背景 制作导航菜单综合练习题
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS制作立体导航</title>
<link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">
<style>
body{
background: #ebebeb;
}
.nav{
width:560px;
height: 50px;
font:bold 0/50px Arial;
text-align:center;
margin:40px auto 0;
background: #f65f57;
/*制作圆*/
border-radius:10px;
/*制作导航立体风格*/
box-shadow:0 10px darkred;
}
.nav a{
display: inline-block;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.nav a:hover{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
transform:rotate(10deg);
}

.nav li{
position:relative;
display:inline-block;
padding:0 16px;
font-size: 13px;
text-shadow:1px 2px 4px rgba(0,0,0,.5);
list-style: none outside none;
}
/*使用伪元素制作导航列表项分隔线*/

/*删除第一项和最后一项导航分隔线*/

.nav a,
.nav a:hover{
color:#fff;
text-decoration: none;
}

</style>
</head>
<body>
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">About Me</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Resources</a></li>
<li><a href="">Contact Me</a></li>
</ul>
</body>
</html>
2015-05-17 查看完整代码
6-1 CSS3选择器 属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
a[class^=column]{
background:red;
}
a[href*=doc]{
background:green;
}
a[title*=box]{
background:blue;
}
</style>
</head>
<body>
<a href="##" class="columnNews">我的背景想变成红色</a>
<a href="##" class="columnVideo">我的背景想变成红色</a>
<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>
<a href="1.doc">我的背景想变成绿色</a>
<a href="2.doc">我的背景想变成绿色</a><br/>
<a href="##" title="this is a box">我的背景想变成蓝色</a>
<a href="##" title="box1">我的背景想变成蓝色</a>
<a href="##" title="there is two boxs">我的背景想变成蓝色</a>
</body>
</html>
2015-05-27 查看完整代码
6-2 CSS3 结构性伪类选择器—root
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—root</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>Root选择器修改HTML元素的背景颜色</div>
</body>
</html>
2015-05-27 查看完整代码
6-3 CSS3 结构性伪类选择器—not
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—not</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">页头</div>
<div id="page">页体</div>
<div id="footer">页脚</div>
</body>
</html>
2015-05-27 查看完整代码
6-4 CSS3 结构性伪类选择器—empty
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—empty</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>我这里有内容</div>
<div> <!-- 我这里有一个空格 --></div>
<div></div><!-- 我这里任何内容都没有 -->
</body>
</html>
2015-05-27 查看完整代码
首页上一页1234下一页尾页
意见反馈 帮助中心 APP下载
官方微信