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

    awesome-python: https://github.com/vinta/awesome-python

  2. Redis3.2.8配置参数及说明

    bind 127.0.0.1# 绑定的主机地址,不设置默认将处理所有请求protected-mode yes# 是否开启保护模式,默认开启,要是配置里面没有指定bind和密码,开启该参数后,redis ...

  3. 爬虫五 Beautifulsoup模块

    一 介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你 ...

  4. php 数组 高效随机抽取指定条记录的算法

    php使用数组array_rand()函数进行高效随机抽取指定条数的记录,可以随机抽取数据库中的记录,适合进行随机展示和抽奖程序. 该算法主要是利用php的array_rand()函数,下面看一下ar ...

  5. 流量分析系统----讲解-echarts模拟迁移(结合china.js)

    百度 Echarts 地图->模拟迁徙,实现自动切换地图 小航哥注释: 1.本文主要是把模拟迁移的流程讲了一遍,讲的很好.具体实现参考航哥这篇随笔“流量分析系统----实现-echarts模拟迁 ...

  6. Linux系统通过console口连接交换机

    一.安装minicomUbuntu安装:sudo apt-get install minicom.centos安装:yum install minicom二.配置minicomUbuntu输入:sud ...

  7. 每天一个Linux命令（46）ifconfig命令

    在windows系统中,ipconfig命令行工具被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).     ( ...

  8. P4501 [ZJOI2018]胖

    题目 P4501 [ZJOI2018]胖 官方口中的送分题 做法 我们通过手玩(脑补),\(a_i\)所作的贡献(能更新的点)为:在\(a_i\)更新\(\forall x\)更新前前没有其他点能把\ ...

  9. R的t-test检验

    1.t-test的功能:单因素二水平的假设检验. H0:与我们想过要的结果相反的假设,比如我们想要的是两组数据的差异性,那么这个假设是:两组数据没有差异性. H1或Ha:备择假设,与H0假设相反. 2 ...

  10. Object.defineProperty小解

    最早认识这个函数,源于对vue双向绑定的探索,vue通过这个函数实现属性挟持并结合发布者-订阅者模式实现双向绑定 先看一个实例: var o= {name: 'a'} Object.definePro ...