学习笔记-CSS-2017.2.15

一、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>

最后编辑于：2017.12.05 18:48:54

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 201,924评论 5赞 474
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,781评论 2赞 378
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 148,813评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,264评论 1赞 272
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,273评论 5赞 363
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,383评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,800评论 3赞 393
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,482评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,673评论 1赞 295
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,497评论 2赞 318
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,545评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,240评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,802评论 3赞 304
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,866评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,101评论 1赞 258
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,673评论 2赞 348
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,245评论 2赞 341

学习笔记-CSS-2017.2.15

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

二、CSS Positioning(定位)

三、CSS 导航栏

四、CSS 下拉菜单

推荐阅读更多精彩内容