导航栏

熟练使用导航栏，对于任何网站都非常重要。

使用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	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv	用于电视机类型的设备。

CSS 属性选择器

具有特定属性的HTML元素样式不仅仅是class和id。

属性和值选择器

下面的实例改变了标题title='runoob'元素的边框样式:

[title=runoob]

{

    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;

}

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 ...

随机推荐

oracle定时器执行一遍就不执行或本就不执行
转:http://blog.csdn.net/qq_23311211/article/details/76283689 以sqlplus/ assysdba进入sql命令模式,使用sql:select ...
CF922B Magic Forest
CF922B Magic Forest 题意翻译题目大意给定一个正整数nn ,求满足如下条件的三元组(a,b,c)(a,b,c) 的个数: 1 \le a \le b \le c \le n1≤a ...
《编程导论（Java）·7.4.4 String对象问题》
String是Java API中使用频率第一的类,曾经在CSDN论坛上.至少每一个月都有相关的贴子,讨论==和equals(). 本节介绍这一部分的内容,也有一个重要更正. String文字在程序中被 ...
ZooKeeper分布式集群部署及问题
ZooKeeper为分布式应用系统提供了高性能服务,在许多常见的集群服务中被广泛使用,最常见的当属HBase集群了,其他的还有Solr集群.Hadoop-2中的HA自己主动故障转移等. 本文主要介绍了 ...
ｎｙｏｊ　Wythoff Game（暴力枚举）
Wythoff Game ms | KB 描写叙述近期ZKC同学在学博弈,学到了一个伟大的博弈问题--威佐夫博弈. 相信大家都学过了吧?没学过?没问题.我将要为你讲述一下这个伟大的博弈问题. ...
Leetcode--easy系列2
#14 Longest Common Prefix Write a function to find the longest common prefix string amongst an array ...
C++ 浅析 STL 中的 list 容器
list - 擅长插入删除的链表链表对于数组来说就是相反的存在. 数组本身是没有动态增长能力的(程序中也必须又一次开辟内存来实现), 而链表强悍的就是动态增长和删除的能力. 但对于数组强悍的随机訪问 ...
2017第33周四JDK8并发
Java 8在Lambda表达式.接口默认方式.新的日期API等方面引入的新特性广受关注,同时在并发编程方面也做出了大量改进.以往的几个Java版本都对java.util.concurrent做了不同 ...
ubuntu16.04 安装 docker-compose
下载安装 docker-composecurl -L https://github.com/docker/compose/releases/download/1.15.0/docker-compose ...
401 - Unauthorized: Access is denied due to invalid credentials.
solution:change application pool from ApplicationPoolIdentity to NetworkService.

CSS学习（五）

导航栏

导航栏=链接列表

水平导航栏

内嵌列表项

浮动列表项

下拉菜单

基本下拉菜单

下拉菜单

CSS 提示工具(Tooltip)

图片廊

图像透明/不透明

图像的透明度 - 悬停效果

透明的盒子中的文字

图像拼合技术

图像拼合 - 简单实例

图像的拼合悬停效果

媒体类型

CSS 属性 选择器

属性和值选择器

属性和值的选择器 - 多值

表单样式

CSS学习（五）的更多相关文章

随机推荐

热门专题

CSS 属性选择器