三小时学会css（菜鸟教程精华版）【下】
三小时学会css
上期传送门
CSS组合选择符
组合选择符说明了两个选择器直接的关系:
后代选择器(以空格 分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）
后代选择器
后代选择器用于选取某元素的后代元素。
以下实例选取所有 <p> 元素插入到 <div> 元素中:
div p
{background-color:yellow;
}
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。
以下实例选择了<div>元素中所有直接子元素 <p> ：
div>p
{background-color:yellow;
}
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:
div+p
{background-color:yellow;
}
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
div~p
{background-color:yellow;
}
CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果
语法
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
伪类列表传送门
CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
语法
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
伪元素可以结合CSS类如：
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
CSS 导航栏
导航栏=链接列表
作为标准的HTML基础一个导航栏是必须的
在我们的例子中我们将建立一个标准的HTML列表导航栏。
导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>永恒之蓝</title>
<style>
ul
{list-style-type:none;margin:0;padding:0;
}
a:link,a:visited
{display:block;font-weight:bold;color:#FFFFFF;background-color:#98bf21;width:120px;text-align:center;padding:4px;text-decoration:none;text-transform:uppercase;
}
a:hover,a:active
{background-color:#7A991A;
}
</style>
</head><body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
创建链接并添加边框
可以在 <li> or <a> 上添加text-align:center 样式来让链接居中。
可以在 border <ul> 上添加 border 属性来让导航栏有边框。
如果要在每个选项上添加边框
可以在每个 <li> 元素上添加border-bottom :
ul {border: 1px solid #555;
}li {text-align: center;border-bottom: 1px solid #555;
}li:last-child {border-bottom: none;
}
全屏高度的固定导航条
接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。
ul {list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;height: 100%; /* 全屏高度 */position: fixed; overflow: auto; /* 如果导航栏选项多，允许滚动 */
}
水平导航栏
有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>永恒之蓝</title>
<style>
ul
{list-style-type:none;margin:0;padding:0;padding-top:6px;padding-bottom:6px;
}
li
{display:inline;
}
a:link,a:visited
{font-weight:bold;color:#FFFFFF;background-color:#98bf21;text-align:center;padding:6px;text-decoration:none;text-transform:uppercase;
}
a:hover,a:active
{background-color:#7A991A;
}</style>
</head><body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul><p><b>注意:</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。 </p>
</body>
</html>
水平导航条实例
创建一个水平导航条，在鼠标移动到选项后修改背景颜色。
ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
}li {float: left;
}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;
}/*鼠标移动到选项上修改背景颜色 */
li a:hover {background-color: #111;
}激活/当前导航条实例
在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：
.active {background-color: #4CAF50;
}
添加分割线
<li> 通过 border-right 样式来添加分割线:
/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {border-right: 1px solid #bbb;
}li:last-child {border-right: none;
}
固定导航条
可以设置页面的导航条固定在头部或者底部：
固定在头部
ul {position: fixed;top: 0;width: 100%;
}
CSS 下拉菜单
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|</title>
<meta charset="utf-8">
<style>
/* 下拉按钮样式 */
.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;
}/* 容器 <div> - 需要定位下拉内容 */
.dropdown {position: relative;display: inline-block;
}/* 下拉内容 (默认隐藏) */
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}/* 下拉菜单的链接 */
.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;
}/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {display: block;
}/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {background-color: #3e8e41;
}
</style></head>
<body><h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="//www.com">1</a><a href="//www.com">2</a><a href="//www.com">3</a></div>
</div></body>
</html>CSS 提示工具(Tooltip)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>永恒之蓝</title>
</head><style>
/* Tooltip 容器 */
.tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}/* Tooltip 文本 */
.tooltip .tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;padding: 5px 0;border-radius: 6px;/* 定位 */position: absolute;z-index: 1;
}/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {visibility: visible;
}
</style>
<div class="tooltip">鼠标移动到这<span class="tooltiptext">提示文本</span>
</div></body>
</html>
添加箭头
我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。
以下实例演示了如何为显示在顶部的提示工具添加底部箭头：
.tooltip .tooltiptext::after {content: " ";position: absolute;top: 100%; /* 提示工具底部 */left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: black transparent transparent transparent;
}在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头。
注意：border-width 属性指定了箭头的大小。如果你修改它，也要修改 margin-left 值。这样箭头在能居中显示。
border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。
淡入效果
我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:
.tooltip .tooltiptext {opacity: 0;transition: opacity 1s;
}.tooltip:hover .tooltiptext {opacity: 1;
}
CSS 图片廊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片廊</title>
<style>
div.img {margin: 5px;border: 1px solid #ccc;float: left;width: 180px;
}div.img:hover {border: 1px solid #777;
}div.img img {width: 100%;height: auto;
}div.desc {padding: 15px;text-align: center;
}
</style>
</head>
<body><div class="responsive"><div class="img"><a target="_blank" href="demo1.jpg"><img src="demo1.jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="demo2.jpg"><img src="demo2.jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="demo3.jpg"><img src="demo3.jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="demo4.jpg"><img src="demo4.jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div>
</div></body>
</html>
响应式图片廊
使用 CSS3 的媒体查询来创建响应式图片廊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>响应式</title>
<style>
div.img {border: 1px solid #ccc;
}div.img:hover {border: 1px solid #777;
}div.img img {width: 100%;height: auto;
}div.desc {padding: 15px;text-align: center;
}* {box-sizing: border-box;
}.responsive {padding: 0 6px;float: left;width: 24.99999%;
}@media only screen and (max-width: 700px){.responsive {width: 49.99999%;margin: 6px 0;}
}@media only screen and (max-width: 500px){.responsive {width: 100%;}
}.clearfix:after {content: "";display: table;clear: both;
}
</style>
</head>
<body><h2 style="text-align:center">响应式图片相册</h2><div class="responsive"><div class="img"><a target="_blank" href="img_fjords.jpg"><img src="//www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"></a><div class="desc">Add a description of the image here</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="img_forest.jpg"><img src="//www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400"></a><div class="desc">Add a description of the image here</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="img_lights.jpg"><img src="//www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400"></a><div class="desc">Add a description of the image here</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="img_mountains.jpg"><img src="//www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400"></a><div class="desc">Add a description of the image here</div></div>
</div><div class="clearfix"></div><div style="padding:6px;"><h4>重置浏览器大小查看效果</h4>
</div></body>
</html>
CSS 图像透明/不透明
CSS 图像拼合技术
我们想使用拼合图像 (“img_navsprites.gif”)，以创建一个导航列表。
我们将使用一个HTML列表，因为它可以链接，同时还支持背景图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}#home{left:0px;width:46px;}
#home{background:url('/images/img_navsprites.gif') 0 0;}#prev{left:63px;width:43px;}
#prev{background:url('/images/img_navsprites.gif') -47px 0;}#next{left:129px;width:43px;}
#next{background:url('/images/img_navsprites.gif') -91px 0;}
</style>
</head><body>
<ul id="navlist"><li id="home"><a href="/"></a></li><li id="prev"><a href="/css/"></a></li><li id="next"><a href="/css/"></a></li>
</ul>
</body>
</html>
解析：
#navlist{position:relative;} - 位置设置相对定位，让里面的绝对定位
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0，列表样式被删除，所有列表项是绝对定位
#navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是44px
现在开始每个具体部分的定位和样式：
#home{left:0px;width:46px;} - 定位到最左边的方式，以及图像的宽度是46px
#home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）
#prev{left:63px;width:43px;} - 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。
#prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像右侧47px（＃home宽46px+分隔线的1px）
#next{left:129px;width:43px;}- 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
#next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定义背景图像右边91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）
CSS 属性 选择器
具有特定属性的HTML元素样式
具有特定属性的HTML元素样式不仅仅是class和id。
属性选择器
下面的例子是把包含标题（title）的所有元素变为蓝色：
[title]
{color:blue;
}
属性和值选择器
下面的实例改变了标题title='r’元素的边框样式:
[title=r]
{border:5px solid green;
}
属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
[title~=hello] { color:blue; }
下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值
[lang|=en] { color:blue; }
表单样式
属性选择器样式无需使用class或id的形式:
input[type="text"]
{width:150px;display:block;margin-bottom:10px;background-color:yellow;
}
input[type="button"]
{width:120px;margin-left:35px;display:block;
}
更多表单设置传送门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>永恒之蓝</title>
</head>
<style>
input[type=text], select {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;
}input[type=submit] {width: 100%;background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;
}input[type=submit]:hover {background-color: #45a049;
}div {border-radius: 5px;background-color: #f2f2f2;padding: 20px;
}
</style>
<body><h3>使用 CSS 来渲染 HTML 的表单元素</h3><div><form action="/action_page.php"><label for="fname">First Name</label><input type="text" id="fname" name="firstname" placeholder="Your name.."><label for="lname">Last Name</label><input type="text" id="lname" name="lastname" placeholder="Your last name.."><label for="country">Country</label><select id="country" name="country"><option value="australia">Australia</option><option value="canada">Canada</option><option value="usa">USA</option></select><input type="submit" value="Submit"></form>
</div></body>
</html>
CSS 计数器
CSS 计数器通过一个变量来设置，根据规则递增变量。
使用计数器自动编号
CSS 计数器根据规则来递增变量。
CSS 计数器使用到以下几个属性：
counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素
要使用 CSS 计数器，得先用 counter-reset 创建：
以下实例在页面创建一个计数器 (在 body 选择器中)
每个 <h2> 元素的计数值都会递增，并在每个 <h2> 元素前添加 "Section <计数值>:"
CSS 网页布局
头部区域
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：
CSS3 实例
.header {background-color: #F1F1F1;text-align: center;padding: 20px;
}
菜单导航区域
菜单导航条包含了一些链接，可以引导用户浏览其他页面：
CSS3 实例
/* 导航条 */
.topnav {overflow: hidden;background-color: #333;
}/* 导航链接 */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 链接 - 修改颜色 */
.topnav a:hover {background-color: #ddd;color: black;
}
内容区域
/* 创建三个相等的列 */
.column {float: left;width: 33.33%;
}/* 列后清除浮动 */
.row:after {content: "";display: table;clear: both;
}/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {.column {width: 100%;}
}提示:要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%
不相等的列
不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。
.column {float: left;
}/* 左右侧栏的宽度 */
.column.side {width: 25%;
}/* 中间列宽度 */
.column.middle {width: 50%;
}/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {.column.side, .column.middle {width: 100%;}
}
底部区域
底部区域在网页的最下方，一般包含版权信息和联系方式等。
.footer {background-color: #F1F1F1;text-align: center;padding: 10px;
}
响应式网页布局
* {box-sizing: border-box;
}body {font-family: Arial;padding: 10px;background: #f1f1f1;
}/* 头部标题 */
.header {padding: 30px;text-align: center;background: white;
}.header h1 {font-size: 50px;
}/* 导航条 */
.topnav {overflow: hidden;background-color: #333;
}/* 导航条链接 */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 链接颜色修改 */
.topnav a:hover {background-color: #ddd;color: black;
}/* 创建两列 */
/* Left column */
.leftcolumn { float: left;width: 75%;
}/* 右侧栏 */
.rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px;
}/* 图像部分 */
.fakeimg {background-color: #aaa;width: 100%;padding: 20px;
}/* 文章卡片效果 */
.card {background-color: white;padding: 20px;margin-top: 20px;
}/* 列后面清除浮动 */
.row:after {content: "";display: table;clear: both;
}/* 底部 */
.footer {padding: 20px;text-align: center;background: #ddd;margin-top: 20px;
}/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {.leftcolumn, .rightcolumn { width: 100%;padding: 0;}
}/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {.topnav a {float: none;width: 100%;}
}三小时学会css（菜鸟教程精华版）【上】
三小时学会css（菜鸟教程精华版）【中】
三小时学会css（菜鸟教程精华版）【下】相关推荐
- 三小时学会css（菜鸟教程精华版）【中】
三小时学会css 上期传送门 CSS 盒子模型(Box Model) CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边 ...
- 三小时学会css（菜鸟教程精华版）【上】
三小时学会css 三小时学会HTML传送门 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- ReactJs入门教程-精华版
原文地址:https://www.cnblogs.com/Leo_wl/p/4489197.html 阅读目录 ReactJs入门教程-精华版 回到目录 ReactJs入门教程-精华版 现在最热门的前 ...
- 《CSS菜鸟教程》学习
学习资料:<CSS菜鸟教程> 学习目标:熟悉CSS语法即可 CSS简介 什么是CSS? CSS(Cascading Style Sheets)层叠样式表 CSS定义了如何显示HTML元素 ...
- 2小时学会CSS，完成网页制作！
第一步:规划网站,本教程将以图示为例构建网站 1.规划网站,本教程将以下图为例构建网站. 其基本布局见下图: 主要由五个部分构成: 1.Main Navigation 导航条,具有按钮特效. Widt ...
- 一看就懂的ReactJs入门教程-精华版
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- CSS菜鸟教程自学2，Text文本
文本颜色(color) 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: r ...
- Linux新手入门教程(精华版)
1994年,Young和Mark Ewing创建了Red Hat公司,并创造了全球使用最广泛的Red Hat Linux套件,为Linux的普及立下了汗马功劳,笔者也是跟随着Red Hat的带领?w: ...
- 三小时学会V语言到放弃（第一小时）
有编程基础的基本跟着敲一遍就差不多了,基础的语法都基本就熟悉了,由于V语言现在还没有正在release出来,所以有很多的语法还没有完善的,有些语法错误可以忽略,但是确保你是敲对了. 第一个小时首先把最 ...
最新文章
- linux进程状态d状态,Linux下进程的状态
- Spring原理总结
- Bugku——Web——矛盾
- 演示：使用Sniffer统计与分析流量
- bzoj千题计划169：bzoj2463: [中山市选2009]谁能赢呢？
- 在Java中避免NullPointerException
- php点击弹出文字代码,js实现鼠标点击页面弹出自定义文字效果
- Windows开机自动运行软件目录
- Google排名第一的编程语言，死磕它这两点，小白也能学的会！不信你看！
- 【问题2】如何保证缓存与数据库的双写一致性？
- 勇者游戏C语言,c语言命令行-勇者斗恶龙
- HTML5前端教程：jQuery项目实战
- matlab求函数偏导
- “RFID射频识别技术”简介
- Unity 3D游戏-塔防类游戏源码：重要方法和功能的实现
- 计算机多显器设置方法,一个电脑多个显示器怎么设置
- 进击的海姆达尔Heimdallr，2021年链游最后一趟财富专列
- 论文阅读：Factoring Statutory Reasoning as Language Understanding Challenges
- CuraEngine源码编译
- Introduction to NMOS and PMOS Transistors