学习笔记-CSS-2017.2.15

2017-02-15 本文已影响0人阿苏菇凉

一、CSS Display(显示) 与 Visibility（可见性）

1、display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

2、隐藏元素 - display:none或visibility:hidden。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

3、CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：

< h1 >
< p >
< div >

内联元素只需要必要的宽度，不强制换行。
内联元素的例子：

< span >
< a >

li {display:inline;}

<style>
span
{
    display:block;
}
</style>
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>

二、CSS Positioning(定位)

1、Static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。

2、Fixed 定位

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

3、Relative 定位

相对定位元素的定位是相对其正常位置。

<style>
h2.pos_top
{
    position:relative;
    top:-50px;
}
</style>
<h2>这是一个没有定位的标题</h2>
<h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>

4、Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

Absolutely定位的元素和其他元素重叠。

5、重叠的元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序。

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

6、CSS clip 属性
让你指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。

注意：如果先有"overflow：visible"，clip属性不起作用。

<style>
img 
{
    position:absolute;
    clip:rect(0px,60px,200px,0px);
}
</style>
<body>
![](w3css.gif)
</body>

7、CSS overflow 属性

8、CSS cursor 属性

三、CSS 导航栏

1、垂直导航栏

ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
a
{
    display:block;
    width:60px;
    background-color:#dddddd;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

2、内嵌列表项

<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
li
{
display:inline;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

3、浮动列表项

<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li
{
    float:left;
}
a
{
    display:block;
    width:60px;
    background-color:#dddddd;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

float:left - 使用浮动块元素的幻灯片彼此相邻
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

<style type="text/css">
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    li{ 
        float: left; 
    }

    a:link,a:visited{
        width: 100px;
        display: block;
        font-weight: bold;
        color:white;
        text-align: center;
        background:black;
        padding: 4px;
        text-decoration: none;
        text-transform: uppercase;
    }

    a:hover,a:active{
        background: #ccc;
    }
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>

四、CSS 下拉菜单

1、基本下拉菜单

<style type="text/css">
    .drop-down{ 
        position: relative; 
        display: inline-block;
    }
    .drop-content{
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;

    }
    .drop-down:hover .drop-content {
       display: block;
}
</style>
    <div class="drop-down">
        <span>this is a demo</span>
        <div class="drop-content">
            <p>this is a demo</p>
        </div>
    </div>

2、下拉菜单

<style type="text/css">
/* 容器 <div> - 需要定位下拉内容 */
.dropdown{
    list-style-type: none;
    display: inline-block;
}
/* 下拉按钮样式 */
.dropbtn{
    background: red;
    color: #FFFFFF;
    padding: 16px;
    cursor: pointer;
    border: none;
}
/* 下拉内容 (默认隐藏) */
.drop_select{
    display: none;
    min-width: 100px;
    position: absolute;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* 下拉菜单的链接 */
.drop_select a{
    color: #000;
    padding: 12px 16px;
    display: block;
    text-decoration: none;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.drop_select a:hover{
    background-color: #ccc;
}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .drop_select{
    display: block;
}
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn{
    background-color: #3e8e41
}
</style>

<body>
<div class="dropdown">
    <button class="dropbtn">下拉菜单</button>
    <div class="drop_select">
        <a href="#">A</a>
        <a href="#">B</a>
        <a href="#">C</a>
    </div>
</div>

3、下拉图片

<style type="text/css">
.dropdown{
    position: relative;
    display: inline-block;
}
.dropcontent{
    display: none;
    min-width: 200px;
    position: absolute;
}
.dropdown:hover .dropcontent{
    display: block;
}
.dropdown >img{
    width: 100px;
    height: 50px;
}
</style>

    <div class="dropdown">
        ![](images/1.jpg)
        <div class="dropcontent">
            ![](images/1.jpg)
        </div>

    </div>

4、导航栏上的下拉菜单

<style type="text/css">
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li{
    float: left;
}
li a, .dropbtn{
    display: inline-block;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
}
li a:hover, .dropdown:hover, .dropbtn{
    background-color: #111;
}
.dropdown{
    display: inline-block;
}
.dropcontent{
    display: none;
    background-color: #f9f9f9;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropcontent a{
    color: black;
    padding: 12px 16px;
    display: block;
    text-decoration: none;

}
.dropcontent a:hover{
    background-color: #f1f1f1;
}
.dropdown:hover .dropcontent{
    display: block;
}
</style>

    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <div class="dropdown">
            <a class="dropbtn">下拉菜单</a>
            <div class="dropcontent">
                <a href="#">a</a>
                <a href="#">b</a>
                <a href="#">c</a>
            </div>
        </div>
    </ul>

学习笔记-CSS-2017.2.15

一、CSS Display(显示) 与 Visibility（可见性）

二、CSS Positioning(定位)

三、CSS 导航栏

四、CSS 下拉菜单

猜你喜欢

热点阅读