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

    因为一些旧版本的浏览器对于JS的trim()不支持,所以可以用正则代替此功能. 参数:strMz,字符串,必需. function getTrim(strMz) {    return strMz.r ...

  2. c# 获取网页源代码(支持cookie),最简单代码

    /// /// 获取网页源码 public static string GetHtmls(string url, string referer = "", string cooki ...

  3. boost之智能指针

    内存问题永远是c++中讨论的重要话题 1.c98 auto_ptr的实现,auto_ptr的特点是始终只保持一个指针指向对象,若经过赋值或者拷贝之后原指针失效 #include <iostrea ...

  4. 玩转NumPy数组

    一.Numpy 数值类型 1.前言:Python 本身支持的数值类型有 int(整型, long 长整型).float(浮点型).bool(布尔型) 和 complex(复数型).而 Numpy 支持 ...

  5. Map中object转换成boolean类型

    Ajax请求查询数据之后,返回的是map类型, resultMap.put("flag", flag); 在接收到数据之后判断时,转换出现异常,导致页面点击按钮之后,页面没有反应, ...

  6. CSS3 animation-iteration-count：infinite

    原文:http://www.w3chtml.com/css3/properties/animation/animation-iteration-count.html animation-iterati ...

  7. UI控件之UIView与动画

    UIView:用来展示用户的界面,响应用户的操作(继承自UIResponder) UIView的作用:绘图.动画.处理事件 UIView可以包含和管理子视图,并且决定子视图的位置大小 获取所有的子视图 ...

  8. 用matlab将nc数据读出来，写成二进制文件，然后用grads画图

    clear,clc nt=735;ny=73;    %2.5*2.5格点的nx=144;    %2.5*2.5格点的f=netcdf('air.mon.mean.nc','nowrite');tt ...

  9. sublime text3自动同步左边栏颜色背景为编辑栏颜色

    下面的步骤需要安装Package Control插件,如果你已经安装,可跳过本步骤,直接看第二步. 第一步:安装Package Control插件: 按Ctrl+`调出console(注:安装有QQ输 ...

  10. HttpServlet---getLastModified与缓存

    在HttpServlet中重写service方法的代码如下: protected void service(HttpServletRequest req, HttpServletResponse re ...