html+css复习(三)
2024-05-13 19:28:47
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="data: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="data: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>
html+css复习(三)相关推荐
- 爆肝！css复习笔记（有目录！）
爆肝!css复习笔记 1.基础选择器:标签选择器.类选择器.id 选择器和通配符选择器 2.css字体属性 font-family font-size字体大小 font-weight字体的粗细 fon ...
- CSS实现三列图片等宽等间距布局
每个图片块左浮动,宽30%,左外边距2.5%: 100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%<!DOCTYPE html> <html> ...
- css的三个特性 背景透明设置
关于行内元素(补充一点) 行内元素只能容纳文本或其他行内元素.(a特殊a里面可以放块级元素) 例子: 关于行高tip: 选择器的嵌套层级不应大于3级,位置靠后的限定条件应尽可能的精确. 属性定义必须另 ...
- 外部导入方式添加背景图_web前端基础：CSS的三种导入方式说明
随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能.但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿.于是css便诞生了. Web前端基础教程,Web ...
- CSS 的三个特性：层叠性、继承性、优先级
层叠性 CSS 有三个非常重要的三个特性:层叠性.继承性.优先级. 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式.层叠性主要解决样式冲突 的问题 层叠性原则: 样式冲突 ...
- CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作 ...
- CSS（三）：CSS特性与盒子模型
目录 CSS三大特性 层叠性 继承性 行高的继承 优先级 权重的叠加 盒子模型 网页布局的本质 盒子模型组成 边框(border) 表格细线边框 边框会影响盒子实际大小! 内边距(padding) p ...
- 前端学习之CSS第三天
前端学习之CSS第三天 一.圆角边框 border-radius 圆形 :正方形的盒子是圆形,长方形的盒子是椭圆 boder-radius:50% 圆角矩形:高度或者是宽度的一半 border-rad ...
- CSS的三种引入方式：外部样式、内部样式和行内样式
CSS的三种引入方式:外部样式.内部样式和行内样式 外部样式 链接式:link标签 导入式:@import 链接式与导入式的区别 内部样式 行内样式 样式优先级 外部样式 即CSS代码保存在外部,HT ...
最新文章
- R语言ggplot2可视化、在可视化区域中自定义添加多个大小不同矩形阴影区域、自定义配置大小不同矩形阴影区域的颜色（Adding multiple shadows/rectangles）
- ES6 使用数据类型Set求交集、并集、差集
- boost::mp11::mp_count_if_q相关用法的测试程序
- python log日志_Python中logging日志的四个等级和使用
- 小程序的 HelloWord 01《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》
- Hihocoder 1632 : Secret Poems 思维|技巧
- ZZULIOJ 1093: 验证哥德巴赫猜想（函数专题）
- 50套可视化报表模板直接用，做报告不用愁了！快收藏
- Docker安装Mysql8.0，并配置忽略大小写,一句命令搞定
- GIS案例练习-----------第二天
- PE系统-微PE工具箱V2.1 - 有情怀的PE - PE中的战斗鸡无广告VIP精品
- gitee.visualstudio.vsix 分享
- sql server 备份mysql_SQL Server远程数据库操作(备份、还原等)
- Mac电脑开启共享wifi教程
- 钢铁侠是如何练成的（一）
- 某型车载导航软件测试
- 2021-2026年，全球MPO光纤连接器市场复合年增长率预计为23.2％
- 王兴：8年时间，我对商业的思考
- appium自动化获取app的appPackage与appActivity方法总结
- MySQL 的 SQL语句