【属性选择器】
顾名思义，属性选择器可以根据属性是否存在或属性的值来寻找元素，因此能实现某些效果。例如当鼠标停留在一个具有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. 数据库之MySQL（三）

    视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. 临时表搜索 SELECT   *FRO ...

  2. jQuery 查找标签

    1 基本选择器 2 基本筛选器 3 属性选择器 4 间接选择 1 基本选择器 //id选择器: $("#id") //标签选择器: $("tagName") / ...

  3. css小技巧1

    资料 1. 文本省略 单行省略: white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行文本省略: 只兼容webkit内核,不属 ...

  4. 【HackerRank】Manasa and Stones

    Change language : Manasa 和 她的朋友出去徒步旅行.她发现一条小河里边顺序排列着带有数值的石头.她开始沿河而走,发现相邻两个石头上的数值增加 a 或者 b. 这条小河的尽头有一 ...

  5. CSS3中新颖的布局方法

    本人已经很久没用 bootstrap 什么的了,而现阶段一点卑微的梦想就是自己做框架,毕竟也才入门不久. 所以在寻找布局的共通性/稳定性及拓展性时,会发觉 CSS3 的这三种方法比栅栏布局要有趣得多. ...

  6. gstreamer交叉编译

    gstreamer(0.10.36) ./configure --build=i686-linux --host=arm-linux --prefix=/opt/EmbedSky/gcc-4.6.2- ...

  7. 无线路由：关于WDS,Repeater等模式的说明

    转:http://blog.csdn.net/lizhiqiang5846/article/details/38397803 当今如果不用无线路由连接宽带似乎是很不popular了,当然Wifi/WL ...

  8. python爬虫之html解析Beautifulsoup和Xpath

    Beautiifulsoup Beautiful Soup 是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据.BeautifulSoup 用来解析 HTML 比较简 ...

  9. BYTE、HANDEL、DWORD等的定义

    有时候引入第三方库之后,可能会存在标题的这些变量没有定义,原来这些变量都定义在windows.h里面,包含进去就行了(Qt的MSVC编译器)

  10. RabbitMQ死信队列

    关于RabbitMQ死信队列 死信队列 听上去像 消息“死”了     其实也有点这个意思,死信队列  是 当消息在一个队列 因为下列原因: 消息被拒绝(basic.reject/ basic.nac ...