练习：

1.画盒子1 2.画盒子2 3.京东特色购物 4.京东发现好货 5.京东玩3c

7.3 定位

通过使用 position 属性，我们可以选择 3 种不同类型的定位，这会影响元素框生成的方式。

relative

相对定位的参照物是原来自己的位置，元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

<html>
<head>
<style type="text/css">
h2.pos_left{
    position:relative;
    left:-20px
}
h2.pos_right{
    position:relative;
    left:20px
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

absolute

绝对定位的参照物是有定位属性的上级元素，一层一层往外找定位的参照物，直到body

<html>
<head>
<style type="text/css">
h2.pos_abs{
    position:absolute;
    left:100px;
    top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。
下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

</html>

fixed

固定定位的参照物是浏览器可视区域

<html>
<head>
<style type="text/css">
p.one{
    position:fixed;
    left:5px;
    top:5px;
}
p.two{
    position:fixed;
    top:30px;
    right:5px;
}
</style>
</head>
<body>

<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>

</body>
</html>

练习：

1、京东固定定位 2、网易栏目 3、淘宝轮播图

8 其他选择器

8.1相邻选择器

相邻选择器可以选择紧跟其后的相邻元素,注意：相邻选择器用＋号来连接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
           h1+div{
                width:100px;
                height:100px;
                background:blue;
        </style>
    </head>
    <body>
        <h1>css 样式测试</h1>
        <div id="div1"></div>
        <div id="box"></div>
    </body>
</html>

8.2 多元素选择器

当几个元素有共同属性的时候，可以使用多元素选择器，注意：选择多个元素的时侯，用逗号隔开

<style>
    h1,h2,h3,h4,h5,h6,ol,ul,dl,dd,textarea,
form,input,select,body{margin:0;padding:0}
</style>

8.3 后代选择器

后代选择器作用于父元素下面的所有子元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
           ＃div1 p{
           /*
           把id为div1的下面的所有p元素的字体设置为红色，这里包括id为box的子元素p
           
           */
                color:red;
           ｝
                
        </style>
    </head>
    <body>
        <h1>css 样式测试</h1>
        <div id="div1">
            <p>一江春水向东流</p>
            <p>飞流直下三千尺</p>
            <div id="box">
                  <p>床前明月光</p>
            </div>
        </div>
    </body>
</html>

8.4 子元素选择器

子元素选择器作用于父元素的子元素，子元素选择器与后代选择器的区别在于后代选择器可以作用于子孙元素，而子元素选择器只能作用于它的子元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
           ＃div1>p{
           /*把id为div1的子元素p的字体设置为红色
           这里只包含子元素，不包含id为box下面的子元素
           */
                color:red;
           ｝
                
        </style>
    </head>
    <body>
        <h1>css 样式测试</h1>
        <div id="div1">
            <p>一江春水向东流</p>
            <p>飞流直下三千尺</p>
            <div id="box">
                  <p>床前明月光</p>
            </div>
        </div>
    </body>
</html>

8.5 属性选择器

E[attr] 匹配所有具有att属性的E元素，不考虑它的值,例如： input[name]，只要有name属性的input元素都会被选中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
           input[name]{
              /*把带有name属性的input元素加上红色边框*/
              border:red solid 1px;
           }
        </style>
    </head>
    <body>
       <form>
            <input type="text" name="ipt1"/>
            <input type="text" name="ipt1"/>
            <input type="submit" value="提交" /> 
       </form>
    </body>
</html>

E[attr = val] 匹配所有attr属性值等于val的E元素 input[id=ipt2] 属性值一般不加引号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
           input[id=ipt2]{
              /*把id值为ipt2的input元素的边框设置成蓝色*/
              border:blue solid 1px;
           }
        </style>
    </head>
    <body>
       <form>
            <input type="text" name="ipt1" id='ipt1'/>
            <input type="text" name="ipt1" id='ipt2'/>
            <input type="submit" value="提交" /> 
       </form>
    </body>
</html>

E[attr ~= val],"~"包含的意思，只要属性值包含了val的E元素都会被选中

<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower]{
    border:5px solid yellow;
}
</style>
</head>
<body>

<p>title 属性中包含单词 "flower" 的图片会获得黄色边框。</p>

<img src="/i/eg_tulip.jpg" title="tulip flower" />
<br />
<img src="/i/shanghai_lupu_bridge.jpg" title="lupu bridge" />

<p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [attribute~=value]，
必须声明 <!DOCTYPE>。</p>

</body>
</html>

E[attr = ^val],"^"以某个值开头的意思，只要属性值以val开头的E元素都会被选中

<!DOCTYPE html>
<html>
<head>
<style> 
div[class^="test"]{
    /*第三个div元素的背景会被设置成红色*/
    ckground:red;
}
</style>
</head>
<body>

<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test_three">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>

</body>
</html>

E[attr = $val],"$"以某个值结尾的意思，只要属性值以val开头的E元素都会被选中

<!DOCTYPE html>
<html>
<head>
<style> 
div[class$="test"]{
    /*第一个div的背景会被设置成蓝色*/
    background:blue;
}
</style>
</head>
<body>

<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test_three">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>

</body>
</html>

8.6 伪类和伪元素

8.6.1 :after和:before

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a:before{
                content: "点我";
            }
            a:after{
                content: "!!!";
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度</a>
        <p>百度一下你就知道了！</p>
        <a href="http://nativejs.org">原生js社区</a>
    </body>
</html>

8.6.2 a标签的4种不同状态

未访问链接(link)、鼠标放上状态(hover)、已访问链接(visited)、当前活动链接(active)。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a:link{
                color: red;
            }
            a:visited{
                color: blue;
            }
            a:hover{
                color: yellow;
            }
            a:active{
                color: green;
            }
        </style>
    </head>
    <body>
        <a href="http://nativejs.org">原生js</a>
         
    </body>
</html>

上述代码中，对a元素使用:before 和 :after伪选择器，使用这类选择器对时候，通过设置content属性对值可以指定耀插入的内容。这个属性比较特别，只能跟伪选择器一起使用。after表示在a元素内容之前插入，before表示在a元素内容之后插入

螺钉课堂视频课程地址：http://edu.nodeing.com

html+css快速入门教程（5）

练习：