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

    2.最重要也是最核心的是要自己改下bootstrap-paginator.js源文件,如下: [javascript] view plain copy      function oneferRepo ...

  2. 如何使用 Opencv dnn 模块调用 Caffe 预训练模型？

    QString modelPrototxt = "D:\\Qt\\qmake\\CaffeModelTest\\caffe\\lenet.prototxt"; QString mo ...

  3. Navicat for MySQL远程连接虚拟机

    在虚拟机中进入mysql mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '123456' WITH GRANT O ...

  4. MySQL中Cardinality值的介绍

    1)         什么是Cardinality 不是所有的查询条件出现的列都需要添加索引.对于什么时候添加B+树索引.一般的经验是,在访问表中很少一部分时使用B+树索引才有意义.对于性别字段.地区 ...

  5. Js用户引导插件bootstrap-tour

    1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:http://bootstraptour.com/. 2.这个bootstrap-tour插件的版本是v0.12.0,复制下来代码,引入库 ...

  6. SSH终端显示中文乱码

    出现这种关系,首先想到是因为字符集不匹配导致的.打开SSH客户端,连接到linux虚拟机 在虚拟机中输入#cd /etc#cd sysconfig/ 找到i18ncat i18n 会显示当前的编码类型 ...

  7. 判断IP地址是否合法

    /* return 1 if string contain only digits, else return 0 */ int valid_digit(char *ip_str) { while (* ...

  8. SAN，NAS区别的联系

    在网络存储中,有着各种网络存储解决方案,例如:SAN,NAS,DAS存储网络,它们各自有着各自的特点,其运用场景也有所不同.下面就说说各自的特点. 一.SAN SAN(Storage Area Net ...

  9. ACM解题之素矩阵

    题意: 如果一个矩形的两条边都是素数,则称此矩形为素矩形.本题给出一个素矩形的面积,请计算其两条边的值.有多个测试用例.每个用例占一行,包含一个表示素矩形面积且不超过 108 的正整数.输入直至没有数 ...

  10. ajax图片上传功能

    一.应用场景 当用户需要上传图片当做自己的头像时,预览的时候该图片需要在本地预览,不应该通过网络从服务器上取到之后预览 二.实现方法 1.方法1: 注释:给上传文件的input标签绑定一个change ...