CSS学习（五）
导航栏
熟练使用导航栏，对于任何网站都非常重要。
使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。
导航栏=链接列表
作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。
导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
现在，让我们从列表中删除边距和填充：
ul
{
list-style-type:none;
margin:0;
padding:0;
}
水平导航栏
有两种方法创建横向导航栏。使用内联或浮动的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。
内嵌列表项
建立一个横向导航栏的方法之一是指定
元素， 上述代码是标准的内嵌:
li
{
display:inline;
}
浮动列表项
在上面的例子中链接有不同的宽度。
对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度：
li
{
float:left;
}
a
{
display:block;
width:60px;
}
效果截图：
下拉菜单
基本下拉菜单
当鼠标移动到指定元素上时，会出现下拉菜单。
<style>
.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);
padding: 12px 16px;
z-index: 1;
} .dropdown:hover .dropdown-content {
display: block;
}
</style> <div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
下拉菜单
创建下拉菜单，并允许用户选取列表中的某一项。这个实例类似前面的实例，当我们在下拉列表中添加了链接，并设置了样式：
<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> <div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">菜鸟教程 1</a>
<a href="#">菜鸟教程 2</a>
<a href="#">菜鸟教程 3</a>
</div>
</div>
CSS 提示工具(Tooltip)
本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WENG</title>
</head>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
} .tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0; /* 定位 */
position: absolute;
z-index: 1;
} .tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;"> <div class="tooltip">鼠标移动到这
<span class="tooltiptext">让你移动你就移动啊，笨蛋</span>
</div> </body>
</html>
图片廊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WENG</title>
<style>
div.img {
margin: 5px;
border: 1px solid #bbb;
float: left;
width: 180px;
} div.img:hover {
border: 1px solid #ee2;
} 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="http://static.runoob.com/images/demo/demo1.jpg">
<img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div> <div class="responsive">
<div class="img">
<a target="_blank" href="http://static.runoob.com/images/demo/demo2.jpg">
<img src="http://static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div> <div class="responsive">
<div class="img">
<a target="_blank" href="http://static.runoob.com/images/demo/demo3.jpg">
<img src="http://static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div> <div class="responsive">
<div class="img">
<a target="_blank" href="http://static.runoob.com/images/demo/demo4.jpg">
<img src="http://static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div> </body>
</html>
使用媒体查询的图片廊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WENG</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="http://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="http://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="http://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="http://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>
图像透明/不透明
图像的透明度 - 悬停效果
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* IE8 及其更早版本 */
}
透明的盒子中的文字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* IE8 及更早版本 */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head> <body> <div class="background">
<div class="transbox">
<p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
</p>
</div>
</div> </body>
</html>
图像拼合技术
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量，并节省带宽。
图像拼合 - 简单实例
与其使用三个独立的图像，不如我们使用这种单个图像（"img_navsprites.gif"）：
有了CSS，我们可以只显示我们需要的图像的一部分。
在下面的例子CSS指定显示 "img_navsprites.gif" 的图像的一部分：
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
- <img class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像
- 宽度：46px;高度：44px; - 定义我们使用的那部分图像
- background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）
图像的拼合悬停效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WENG</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('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;} #prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;} #next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head> <body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
媒体类型
一些CSS属性只设计了某些媒体。例如"voice-family"属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如，"font-size"属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans - serif字体比较适合在屏幕上阅读，而serif字体更容易在纸上阅读。
媒体类型名称不区分大小写。
| 媒体类型 | 描述 |
|---|---|
| all | 用于所有的媒体设备。 |
| aural | 用于语音和音频合成器。 |
| braille | 用于盲人用点字法触觉回馈设备。 |
| embossed | 用于分页的盲人用点字法打印机。 |
| handheld | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
CSS 属性 选择器
具有特定属性的HTML元素样式不仅仅是class和id。
属性和值选择器
下面的实例改变了标题title='runoob'元素的边框样式:
[title=runoob]
{
border:5px solid green;
}
属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
[title~=hello] { color:blue; }
下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:
表单样式
属性选择器样式无需使用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;
}
CSS学习（五）的更多相关文章
- Html CSS学习（五）position定位 原
Html CSS学习(五)position定位 position用来对元素进行定位,其值有以下几种: static:无特殊定位,对象遵循正常文档流,top,right,bottom,left等属性不会 ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- web—第四章css&第五章
web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...
- 说说CSS学习中的瓶颈
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
- CSS学习中的瓶颈期深入分析
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
- 【CSS学习】--- 盒子模型
一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...
- SVG 学习<五> SVG动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- 算警示吧——此文来自张鑫旭（说说CSS学习中的瓶颈）
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习归纳总结（三） 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
随机推荐
- java import跨包引用类理解
当前类要用其他类时,import具体包路径+.+具体的类 import引入的是被引用类的class文件,所以当我们build path第三方jar包时, 要用他们的类,要把jar包add to bui ...
- Ruby中使用patch HTTP方法
Ruby中使用patch HTTP方法 如果使用patch,在后台可以看到只更新了改动的部分: Started PATCH "/ads/5/update" for ::1 at 2 ...
- Android开发之配置adb工具的环境变量
在Android开发中,adb是一个非常好用也非常使用的工具,可是使用的时候假设没有改动环境变量,每一次都须要输入全然路径非常麻烦.解决的方法是在环境变量中加入adb工具的路径. Windows平台 ...
- BestCoder Round #75 King's Order dp：数位dp
King's Order Accepts: 381 Submissions: 1361 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 655 ...
- Fragment状态保存
这篇博文是对官方API Demo的FragmentRetainInstanceSupport.java的学习.路径在android-sdk-macosx/extras/android/support/ ...
- 并行编程(1) - sum.msic.Unsafe 一
相信看过java源代码的同学.对 sum.msic.Unsafe 这个类并不陌生,特别是在java.util.concurrent包有非常多的使用. sum.msic.Unsafe源代码: ...
- Android应用之——自己定义控件ToggleButton
我们经常会看到非常多优秀的app上面都有一些非常美丽的控件,用户体验非常好.比方togglebutton就是一个非常好的样例,IOS系统以下那个精致的togglebutton现在在android以下也 ...
- zzulioj--1769--去师院的旅程：能怎么走（三）（0.0）
1796: 去师院的旅程:能怎么走(三) Time Limit: 1 Sec Memory Limit: 128 MB Submit: 404 Solved: 200 SubmitStatusWe ...
- 信息安全-加密：MD5
ylbtech-信息安全-加密:MD5 MD5消息摘要算法(英语:MD5 Message-Digest Algorithm),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值( ...
- UIimageView和UIimage的小区别
UIimageView 用来显示一张图片或者显示一组动画图片 UIimage 不是一个控件,只是一个普通的类,用来生成一张图片,只单纯的生成一张图片,图片只会被加载到内存,如果想要让用户 ...