admin管理员组文章数量:1794759
三小时学会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">1</a> <a href="//www">2</a> <a href="//www">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/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/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/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/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（菜鸟教程精华版）【下】 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686974159a124269.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论