【属性选择器】
顾名思义，属性选择器可以根据属性是否存在或属性的值来寻找元素，因此能实现某些效果。例如当鼠标停留在一个具有title属性的元素上的时候，大多数浏览器会显示一个工具提示，可以根据这个特性来解释一些内容。
例子：当鼠标悬停在一个元素上的时候鼠标指针将变为一个问号，表示这个元素与众不同，从而提供更多的上下文信息。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>box-shadow</title>

    <style>

        .box{

            margin:0 auto;

            color:red;

         }

         .box[value]{

             border-bottom: 1px dotted #000;

         }

         .box[value]:hover,.box[value]:focus{

             cursor: help;

         }

    </style>

</head>

<body>

    <a href="##" class="box" value="这是一段特殊的文字">这是一段特殊的文字</a>

</body>

</html>

基于属性选择器，我们都知道属性也有值，所以我们也可以通过属性的值来找到相应的元素，从而给他添加样式。

【定位概述】
相对定位：是一个比较容易掌握的概念，如果对一个元素进行相对定位，他将会出现在他所在的位置上，可以通过设置垂直和水平位置让这个元素相对于他的起点移动。相对定位实际上可以看成普通流定位模式的一种，因为元素的位置是相当于他在普通流中的位置。

绝对定位：相比于相对定位，绝对定位使元素的位置与文档流无关，因此不占据空间，普通流中的其他元素就像是绝对定位的元素不存在一样。绝对定位的位置是相当于离她最近的那个已经定位的祖先元素确定的。如果没有已经定位的祖先元素，那么他的位置是相对于初识包含块的。
因为绝对定位与文档流无关，所以他们可以覆盖掉页面上的其他元素，这时，可以通过z-index属性来俩控制这些框的叠放层次。z-index的值越大，框在栈中的位置越高。

固定定位：是绝对定位的一种，差异在于固定元素的包含块是视口。这使我们总是能创建总是出现在窗口中相对位置的浮动元素。

利用背景图片设置给站点的每个标题上添加 项目符号。代码如下：

h1{

   padding-left:30px;

   background:url(../imgs/img.gif) no-repeat;

   background-position:left center;//这里还可以使用百分号：0 50%；

}

【Suckerfish下拉菜单】
一个简单的例子如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>box-shadow</title>

    <style>

        .nav{

            list-style: none;

        }

        .nav li{

            list-style: none;

            float:left;

            width:100px;

            height:40px;

            background-color:yellow;

        }

        .nav_ul{

            margin-left:-40px;

             display:none;

            width:100px;

            height:40px;

         }

        .nav li:hover .nav_ul{

            display:block;

         }

    </style>

</head>

<body>

     <ul class="nav">

            <li><a href="#">Home</a>

            </li>

            <li><a href="#">Products</a>

                <ul class="nav_ul">

                    <li><a href="#">Silverback</a></li>

                    <li><a href="#">Font Deck</a></li>

                </ul>

            </li>

            <li><a href="#">Service</a>

                <ul class="nav_ul">

                    <li><a href="#">Design</a></li>

                    <li><a href="#">Development</a></li>

                    <li><a href="#">Consulttancy</a></li>

                </ul>

            </li>

    </ul>

</body>

</html>

css——被自己遗忘的css属性的更多相关文章

  1. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  3. 改变CSS世界纵横规则的writing-mode属性

    改变CSS世界纵横规则的writing-mode属性 这篇文章发布于 2016年04月27日,星期三,23:12,归类于 css相关. 阅读 8292 次, 今日 71 次 by zhangxinxu ...

  4. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  5. css继承性和不继承的属性。

    在CSS中并不是所有的属性都是能够继承的,因此在使用时一定要了解哪些是能够继承的哪些是不能够继承的.visibility和cursor能够被所有元素继承:letter-spacing,word-spa ...

  6. 装载：对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  7. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  8. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

  9. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

随机推荐

  1. ehcache缓存框架简介（一）

    EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. 我们使用EhCache缓存框架主要是为了判断重复Url,每次爬取一个网 ...

  2. C# 调用ArcGIS server admin api

    一.AGS server admin api 介绍 1.1什么是admin api AGS Server Admin api 官方的称呼是 AGS Server administrator api, ...

  3. Linux查找命令find、locate、whereis、which、type

    find:查找指定下目录的文件 -empty:查找空文件 -name:按名字查找 -type f(文件 or d:目录):按类型查找

  4. java基础—Hashtable，HashMap，TreeMap的差别

    Hashtable : 此类实现一个哈希表,该哈希表将键映射到对应的值.不论什么非null  对象都能够作键值,是线程不同步的 HashMap : 基于哈希表的Map接口的实现.此实现提供全部可选的映 ...

  5. 【Java工程师之路】[1-2.2]Java10个面向对象设计原则

    面向对象设计原则是OOPS(Object-Oriented Programming System,面向对象的程序设计系统)编程的核心,但大多数Java程序员追逐像Singleton.Decorator ...

  6. 调用AJAX返回JSON、XML数据类型

    1.调用AJAX返回JSON数据 用下拉列表显示Nation表民族名称 主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  7. C语言中auto，register，static，const，volatile的区别

    1)auto 这个关键字用于声明变量的生存期为自动,即将不在任何类.结构.枚举.联合和函数中定义的变量视为全局变量,而在函数中定义的变量视为局部变量.这个关键字不怎么多写,因为所有的变量默认就是aut ...

  8. Linux查看某个端口+gcc动态编译

    Linux下就: 1.lsof -i:端口号 2.netstat -tunlp|grep 端口号 gcc:动态编译 gcc –fpic –c file.c –o file.o gcc –shared ...

  9. Redis集群环境搭建

    Redis集群cluster环境搭建 描述:本章节主要单服务器搭建集群,在一个服务器上启动多个不同端口的redis服务,非真实环境. 真实环境下redis集群会搭建在多个物理服务器上,并非单一的服务器 ...

  10. /usr/lib/update-notifier/updates-available

     /usrb/update-notifier/update-motd-updates-available: 49: /usrb/update-notifier/update-motd-updates- ...