1.层次选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用CSS3层次选择器</title>
<style type="text/css">
p,ul{
border: 1px solid red; /*边框属性*/
}
/*后代选择器*/
/* body p{
background: red;
} */
/*子选择器*/
/* body>p{
background: pink;
} */
/*/!*相邻兄弟选择器*!/*/
/* .active + p{
background: green;
} */
/*/!*通用选择器*!/*/
.active~p{
background: yellow;
}
</style>
</head>
<body>
<p class="active">1</p><!-- 为了说明相邻兄弟选择器，在此处添加一个类名active -->
<p>2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
</body>
</html>
2.属性选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3属性选择器的使用</title>
<style type="text/css">
/*此段代码只是让结构更美观，后续会详细讲解*/
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background: #aac;
color: blue;
font: bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
/*存在属性id的元素*/
/* a[id] {
background: yellow;
} */
/*/!*属性id=first的元素*!/*/
/* a[id=first] {
background: red;
} */
/*/!*属性class="links"的元素*!/*/
/* a[class="links"] {
background: red;
} */
/*/!*属性class里包含links字符串的元素*!/*/
/* a[class*=links] {
background: red;
} */
/*/!*属性href里以http开头的元素*!/*/
/* a[href^=http] {
background: red;
} */
/*/!*属性href里以png结尾的元素*!/*/
a[href$=png] {
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links active item" title="test website" target="_blank">2</a>
<a href="sites/file/test.html" class="links item">3</a>
<a href="sites/file/test.png" class="links item"> 4</a>
<a href="sites/file/image.jpg" class="links item">5</a>
<a href="efc" class="links item" title="website link">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abcdef.doc" class="links item">9</a>
<a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
</body>
</html>
3.span标签的应用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>span标签的应用</title>
<style type="text/css">
p {
font-size: 14px;
}
p .show,
.bird span {
font-size: 36px;
font-weight: bold;
color: blue;
}
p #dream {
font-size: 24px;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p>课工场<span id="dream">每时每课给你新机会</span></p>
<p class="bird">选择<span>课工场</span>，成就你的梦想</p>
</body>
</html>
4.字体类型
body {
font-family: Times, "Times New Roman", "楷体";
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>字体类型</title>
<link href="css/font.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>
<h1>京东商城――全部商品分类</h1>
<h2>图书、音像、电子书刊</h2>
<p><span>电子书刊</span> 电子书 网络原创 数字杂志 多媒体图书目<br/>
<span>音像</span>音乐 影视 教育音像<br/>
<span>经管励志</span> 经济 金融与投资 管理 励志与成功</p>
<h2>家用电器</h2>
<p><span>大家电</span> 平板电视 空调 冰箱 DVD播放机<br/>
<span>生活电器</span> 净化器 电风扇 饮水机 电话机</p>
<h2>个护化妆</h2>
<p><span>面部护理</span> 洁面乳 精华露 眼部护理 T区护理<br/>
<span>身体护理</span> 洗发护发 沐浴 手工/香皂 手足护理<br/>
<span>香水SPA</span> 女士香水 男士香水 组合套装 迷你香水</p>
<h2>钟表</h2>
<p><span>瑞士品牌</span> 江诗丹顿 卡地亚Cartier 帝舵TUDOR 真利时ZENITH 雷蒙威Raymond Well<br/>
<span>时尚品牌</span> 巴宝莉BURBERRY 雅克利曼Jacques Lemans 苏菲玛索Sophie Marceau<br/>
<span>国产品牌</span> 聚利时Julius 北京beijing 依宝诺EBONO 劳士顿</p>
<h2>服饰鞋帽</h2>
<p><span>女装</span> T恤 衬衫 针织衫 卫衣 连衣裙 风衣 大衣 休闲裤<br/>
<span>男装</span> 衬衫 POLO衫 针织衫 皮衣 外套 棉服 大衣<br/>
<span>运动</span> 休闲鞋 跑步鞋 足球鞋 运动裤 运动包</p>
</div>
</body>
</html>
5.字体风格
body {
font-family: Times, "Times New Roman", "楷体";
}
h1 {
font-size: 24px;
font-style: italic;
}
h1 span {
font-style: oblique;
}
h2 {
font-size: 16px;
font-style: normal;
}
p {
font-size: 12px;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>字体风格</title>
<link href="css/font.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>
<h1>京东商城――<span>全部商品分类</span></h1>
<h2>图书、音像、电子书刊</h2>
<p><span>电子书刊</span> 电子书 网络原创 数字杂志 多媒体图书目<br/>
<span>音像</span>音乐 影视 教育音像<br/>
<span>经管励志</span> 经济 金融与投资 管理 励志与成功</p>
<h2>家用电器</h2>
<p><span>大家电</span> 平板电视 空调 冰箱 DVD播放机<br/>
<span>生活电器</span> 净化器 电风扇 饮水机 电话机</p>
<h2>个护化妆</h2>
<p><span>面部护理</span> 洁面乳 精华露 眼部护理 T区护理<br/>
<span>身体护理</span> 洗发护发 沐浴 手工/香皂 手足护理<br/>
<span>香水SPA</span> 女士香水 男士香水 组合套装 迷你香水</p>
<h2>钟表</h2>
<p><span>瑞士品牌</span> 江诗丹顿 卡地亚Cartier 帝舵TUDOR 真利时ZENITH 雷蒙威Raymond Well<br/>
<span>时尚品牌</span> 巴宝莉BURBERRY 雅克利曼Jacques Lemans 苏菲玛索Sophie Marceau<br/>
<span>国产品牌</span> 聚利时Julius 北京beijing 依宝诺EBONO 劳士顿</p>
<h2>服饰鞋帽</h2>
<p><span>女装</span> T恤 衬衫 针织衫 卫衣 连衣裙 风衣 大衣 休闲裤<br/>
<span>男装</span> 衬衫 POLO衫 针织衫 皮衣 外套 棉服 大衣<br/>
<span>运动</span> 休闲鞋 跑步鞋 足球鞋 运动裤 运动包</p>
</div>
</body>
</html>
6.字体的粗细
body {
font-family: Times, "Times New Roman", "楷体";
}
h1 {
font-size: 24px;
font-style: italic;
}
h1 span {
font-style: oblique;
font-weight: normal;
}
h2 {
font-size: 16px;
font-style: normal;
}
p {
font-size: 12px;
}
p span {
font-weight: bold;
}
p span {
font: oblique bold 12px "楷体";
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>字体风格</title>
<link href="css/font.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>
<h1>京东商城――<span>全部商品分类</span></h1>
<h2>图书、音像、电子书刊</h2>
<p><span>电子书刊</span> 电子书 网络原创 数字杂志 多媒体图书目<br/>
<span>音像</span>音乐 影视 教育音像<br/>
<span>经管励志</span> 经济 金融与投资 管理 励志与成功</p>
<h2>家用电器</h2>
<p><span>大家电</span> 平板电视 空调 冰箱 DVD播放机<br/>
<span>生活电器</span> 净化器 电风扇 饮水机 电话机</p>
<h2>个护化妆</h2>
<p><span>面部护理</span> 洁面乳 精华露 眼部护理 T区护理<br/>
<span>身体护理</span> 洗发护发 沐浴 手工/香皂 手足护理<br/>
<span>香水SPA</span> 女士香水 男士香水 组合套装 迷你香水</p>
<h2>钟表</h2>
<p><span>瑞士品牌</span> 江诗丹顿 卡地亚Cartier 帝舵TUDOR 真利时ZENITH 雷蒙威Raymond Well<br/>
<span>时尚品牌</span> 巴宝莉BURBERRY 雅克利曼Jacques Lemans 苏菲玛索Sophie Marceau<br/>
<span>国产品牌</span> 聚利时Julius 北京beijing 依宝诺EBONO 劳士顿</p>
<h2>服饰鞋帽</h2>
<p><span>女装</span> T恤 衬衫 针织衫 卫衣 连衣裙 风衣 大衣 休闲裤<br/>
<span>男装</span> 衬衫 POLO衫 针织衫 皮衣 外套 棉服 大衣<br/>
<span>运动</span> 休闲鞋 跑步鞋 足球鞋 运动裤 运动包</p>
</div>
</body>
</html>
7.文本颜色
h1 {
color: rgba(0, 0, 255, 0.5);
font-size: 24px;
}
h3 {
font: 12px normal;
}
p {
font-size: 12px;
}
p span {
color: #F00;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>总裁致辞页面</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>总裁致辞</h1>
<h3>来源：来自北大青鸟</h3>
<hr />
<p>目前北大青鸟IT教育全体系员工<span>10000</span>余名、授权培训中心<span>180</span>余家、合作院校<span>500</span>余所、覆盖全国<span>90</span>余座城市，市场占有率达到<span>39.8%</span>。
</p>
<p>作为IT职业教育的先行者，北大青鸟IT教育创新的职业教育理念和业务经营模式得到了社会的广泛认可：国家人力资源和社会保障部与北大青鸟IT教育实施课程联合认证制度；公司两度入选中华人民共和国商务部评选的“中国连锁经营百强企业”，是迄今为止教育培训领域唯一上榜品牌。公司连续两年荣获
“中国服务业十大优秀特许品牌”称号，并获得中国特许经营协会颁发的中国连锁经营百强和中国特许经营年度大奖；获得新浪颁发的“中国教育杰出贡献奖”和“中国十大品牌教育集团”称号；并赢得
“中国IT公众认知企业金奖”、“本土最具知名度认证奖”、“最佳就业认同奖”、“质量放心用户满意双优品牌”、“最佳实用课程奖”等数十个奖项。人民日报、光明日报、经济日报、解放日报、中国青年报、中国计算机报等几十家权威媒体对公司进行了多方面的报道。
</p>
<p>2000年，北大青鸟IT教育创造性地将特许经营模式引入到IT职业教育领域，在全国建立“北大青鸟APTECH计算机授权培训中心”。所有中心实行统一经营管理、严格保证教学质量，受到社会和业界的高度认可。发展速度之快、经营规模之大、学员人数之多，在全国众多IT职业培训机构中一枝独秀。成立至今，北大青鸟IT教育先后培养<span>45</span>万名学员进入IT行业。
</p>
</body>
</html>
8.排版文本段落
h1 {
color: #091CC4;
font-size: 24px;
text-align: center;
text-decoration: blink;
}
h3 {
text-align: right;
font: 12px normal;
}
p {
font-size: 12px;
text-align: left;
line-height: 28px;
text-indent: 2em;
}
p span {
color: #F00;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>肖总致辞页面</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>肖总致辞</h1>
<h3>来源：来自课工场</h3>
<hr />
<p>
<span>课工场</span>——更可靠的IT就业教育
始源于<span>北京大学</span>优秀校办企业，拥有<span>19年</span>企业历史，培养超过<span>85万</span>IT行业精英的北大青鸟集团。
<p>汇聚企业领袖、行业一线大咖、技术大牛及顶尖学府名师，面向大学生及适龄人群，通过<span>课程</span>、<span>师资</span>、<span>教材</span>、<span>平台</span>及<span>服务</span>全方位支撑，提供专业、贴近目标人群的产品及服务，满足人群对就业教育产品的挑剔和高需求，保证学员就业效果。
目前课工场筛选青鸟体系内致力于大学生市场的实力雄厚的校区，在全国核心城市建设课工场校区，学员已经超过<span>5万</span>人。</p>
</p>
<p>课工场自主研发的学习平台已经稳定运行<span>7年</span>，学员利用课工场网站，APP等学习端进行学习，将预习和复习放到线上，成为线下学习的必要补充；老师可以利用平台进行直播、录播授课，在线测试，在线实验，将整个学练评测的过程放在线上，丰富了教学手段。同时，平台利用累积多年20多亿条学员学习行为大数据，实现学员个性化学习，提升学员学习效率，为学员最终高效完成学业获得就业机会提供重要支持
</p>
</body>
</html>
9.文本装饰
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>text-decoration</title>
<style>
a:nth-of-type(1) {
text-decoration: underline;
}
a:nth-of-type(2) {
text-decoration: overline;
}
a:nth-of-type(3) {
text-decoration: line-through;
}
a:nth-of-type(4) {
text-decoration: none;
}
p{
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#">下划线：underline</a> <br /> <br />
<a href="#">上划线：overline</a> <br /> <br />
<a href="#">删除线：line-through</a> <br /> <br />
<a href="#">无下划线：none</a> <br /> <br />
<p>dddddd</p>
</body>
</html>
10.垂直对齐方式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>垂直对齐方式</title>
<style type="text/css">
img,span{
vertical-align:middle;
}
</style>
</head>
<body>
<p>
<img src="image/icon.gif" width="129" height="121" />
<span>图片与文本垂直居中对齐</span>
</p>
</body>
</html>
11.超链接样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书列表页</title>
<style>
p{
font-size: 14px;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: orange;
}
</style>
</head>
<body>
<!--图片超链接-->
<a href="#" >
<img src="image/img1.png" alt="姑娘，欢迎降落在这残酷的世界" title="姑娘，欢迎降落在这残酷的世界" />
</a>
<!--文字超链接-->
<p><a href="#" >姑娘，欢迎降落在这残酷的世界</a></p>
<p><a href="#" >作者：一门</a></p>
<p>￥58</p>
</body>
</html>
12.列表样式
.title {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
}
ul li {
height: 30px;
line-height: 25px;
text-indent: 1em;
list-style: none;
}
a {
font-size: 14px;
text-decoration: none;
color: #000;
}
a:hover {
color: #F60;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表样式</title>
<link href="css/background.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a>
</li>
</ul>
</body>
</html>
13.背景颜色
#nav {
width:230px;
background-color:#D7D7D7;
}
.title {
background-color:#C00;
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
}
#nav ul li {
height:25px;
line-height:25px;
list-style: none;
}
a {
font-size:14px;
text-decoration:none;
color:#000;
}
a:hover {
color:#F60;
text-decoration:underline;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景颜色</title>
<link href="css/background.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a>
</li>
</ul>
</div>
</body>
</html>
14.背景重复
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> background-repeat</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url("image/1.jpg");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
15.背景图像
#nav {
width:230px;
background-color:#D7D7D7;
}
.title {
/*background-color:#C00;*/
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
/*background-image:url(../image/arrow-down.gif);
background-repeat:no-repeat;
background-position:205px 10px;*/
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
}
#nav ul li {
height:30px;
line-height:25px;
list-style: none;
background-image:url(../image/arrow-right.gif);
background-repeat:no-repeat;
background-position:170px 2px;
}
a {
font-size:14px;
text-decoration:none;
color:#000;
}
a:hover {
color:#F60;
text-decoration:underline;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景图像</title>
<link href="css/background.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav">
<div class="title">全部商品分类</div>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
