CSS 中级

最新推荐文章于 2023-03-20 15:46:53 发布

LEIQINGQI

最新推荐文章于 2023-03-20 15:46:53 发布

阅读量408

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/LEIQINGQI/article/details/81415220

版权

CSS 中级

CSS 中级

CSS 导航栏

导航条基本上就是一个链接列表，所以使用 <ul> <li> 元素非常有意义

<!DOCTYPE html>
<html>
<head>
    <style>
    ul
    {
        list-style-type:none;
        margin:0px;
        padding:0;

    }
    li
    {
        float:left;
    }
    a
    {
        margin:1px;
        display:block;
        width:78px;
        background-color:yellow;
        text-decoration:none;
        text-align:center;

    }
</style>
</head>
<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>
</html>

这里写图片描述

使用display:inline 也可以删除块元素前后的换行符。

CSS 下拉菜单

下拉菜单

鼠标移动上去后显示下拉菜单的效果

<!DOCTYPE html>
<html>
<head>
    <title>下拉菜单实例|W3Cschool教程(w3cschool.cn)</title>
    <meta charset="utf-8">
    <style>
    .dropbtn {
        background-color: yellow;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: 2px solid red;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {background-color: red;}

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
</style>
</head>
<body>

    <h2>下拉菜单</h2>
    <p>鼠标移动到按钮上打开下拉菜单。</p>

    <div class="dropdown">
        <button class="dropbtn">下拉菜单</button>
        <div class="dropdown-content">
            <a href="http://www.w3cschool.cn">W3Cschool教程 1</a>
            <a href="http://www.w3cschool.cn">W3Cschool教程 2</a>
            <a href="http://www.w3cschool.cn">W3Cschool教程 3</a>
        </div>
    </div>

</body>
</html>

1533361504613

下拉图片

鼠标放在图片上面在下面放大图片

<!DOCTYPE html>
<html>
<head>
    <title>下拉菜单实例|W3Cschool教程(w3cschool.cn)</title>
    <meta charset="utf-8">
    <style>
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .desc {
        padding: 15px;
        text-align: center;
    }
</style>
</head>
<body>

    <h2>下拉图片</h2>
    <p>移动鼠标到图片上显示下拉内容。</p>

    <div class="dropdown">
        <img src="//www.w3cschool.cn/statics/images/w3c/intro.png" alt="Trolltunga Norway" width="100" height="50">
        <div class="dropdown-content">
            <img src="//www.w3cschool.cn/statics/images/w3c/intro.png" alt="Trolltunga Norway" width="400" height="200">
            <div class="desc">学技术，从W3Cschool开始！</div>
        </div>
    </div>

</body>
</html>

下拉菜单

<!DOCTYPE html>
<html>
<head>
    <title>下拉菜单实例|W3Cschool教程(w3cschool.cn)</title>
    <meta charset="utf-8">
    <style>
    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;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover, .dropdown:hover .dropbtn {
        background-color: #111;
    }

    .dropdown {
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }
</style>
</head>
<body>

    <ul>
        <li><a class="active" href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <div class="dropdown">
            <a href="#" class="dropbtn">下拉菜单</a>
            <div class="dropdown-content">
                <a href="#">链接 1</a>
                <a href="#">链接 2</a>
                <a href="#">链接 3</a>
            </div>
        </div>
    </ul>

    <h3>导航栏上的下拉菜单</h3>
    <p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

</body>
</html>

下拉内容对齐方式

<!DOCTYPE html>
<html>
<head>
    <title>下拉菜单实例|W3Cschool教程(w3cschool.cn)</title>
    <meta charset="utf-8">
    <style>
    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        right: 0;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
</style>
</head>
<body>

    <h2>下拉内容的对齐方式</h2>
    <p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p>

    <div class="dropdown" style="float:left;">
        <button class="dropbtn">左</button>
        <div class="dropdown-content" style="left:0;">
            <a href="#">W3Cschool教程 1</a>
            <a href="#">W3Cschool教程 2</a>
            <a href="#">W3Cschool教程 3</a>
        </div>
    </div>

    <div class="dropdown" style="float:right;">
        <button class="dropbtn">右</button>
        <div class="dropdown-content">
            <a href="#">W3Cschool教程 1</a>
            <a href="#">W3Cschool教程 2</a>
            <a href="#">W3Cschool教程 3</a>
        </div>
    </div>

</body>
</html>

CSS 图片廊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>W3Cschool教程(w3cschool.cn)</title> 
    <style>


    div.img
    {
        margin: 2px;
        border: 1px solid #000000;
        height: auto;
        width: auto;
        float: left;
        text-align: center;
    }    
    div.img img
    {
        display: inline;
        margin: 3px;
        border: 1px solid #ffffff;
    }
    div.img a:hover img {border: 1px solid #0000ff;}
    div.desc
    {
        text-align: center;
        font-weight: normal;
        width: 120px;
        margin: 2px;
    }
</style>
</head>


<body>
    <div class="img">
        <a target="_blank" href="javascript;:"><img src="/statics/images/course/klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
        <div class="desc">粉色的花</div>
    </div>
    <div class="img">
        <a target="_blank" href="javascript;:"><img src="/statics/images/course/klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
        <div class="desc">紫色的花</div>
    </div>
    <div class="img">
        <a target="_blank" href="javascript;:"><img src="/statics/images/course/klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
        <div class="desc">红色的花</div>
    </div>
    <div class="img">
        <a target="_blank" href="javascript;:"><img src="/statics/images/course/klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
        <div class="desc">灰色的花</div>
    </div>
</body>

图像透明/不透明

CSS 中属性的透明度是opacity，值越小，元素更加透明

看看下面的CSS:

img
 {
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
 }

图像透明 - 悬停效果

<!DOCTYPE html>
<html>
<head>
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
    vertical-align:middle;
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
    width:300px;
    height:226px;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<img src="/statics/images/course/klematis.jpg" width="150" height="113" alt="klematis">
<img src="/statics/images/course/klematis2.jpg" width="150" height="113" alt="klematis">

<p><b>Note:</b> In IE, a &lt;!DOCTYPE&gt; must be added for the :hover selector to work on other elements than the &lt;a&gt; element.</p>
</body>
</html>

具有文本的拥有背景图像的透明框

<!DOCTYPE html>
<html>
<head>
    <style>
    div.background
    {
        width: 500px;
        height: 250px;
        background: url(/statics/images/course/klematis.jpg) no-repeat;
        background-size:500px 250px;  /* 铺满整个div*/
         background-size:100% 100%; /*铺满整个div*/
        border: 2px solid black;
    }
    div.transbox
    {
        width: 400px;
        height: 180px;
        margin: 30px 50px;
        background-color: #ffffff;
        border: 1px solid black;
        opacity:0.6;
        filter:alpha(opacity=60); /* For IE8 and earlier */
    }
    div.transbox p
    {
        margin: 30px 40px;
        font-weight: bold;
        color: #000000;
    }
</style>
</head>
<body><div class="background">
    <div class="transbox">
        <p>This is some text that is placed in the transparent box.
            This is some text that is placed in the transparent box.

        </p>
    </div>
</div>
</body>
</html>

图像拼接技术

有许多的图像的网页可能会需要很长时间加载和生成多个服务器请求

使用图像拼接会降低服务器请求数量，节省带宽

<!DOCTYPE html>
<html>
<head>
    <style>
    #navlist{position:relative;}
    #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
    #navlist li, #navlist a{height:44px;display:block;}

    #home{left:0px;width:46px;}
    #home{background:url('/statics/images/course/img_navsprites_hover.gif') 0 0;}
    #home a:hover{background: url('/statics/images/course/img_navsprites_hover.gif') 0 -45px;}

    #prev{left:63px;width:43px;}
    #prev{background:url('/statics/images/course/img_navsprites_hover.gif') -47px 0;}
    #prev a:hover{background: url('/statics/images/course/img_navsprites_hover.gif') -47px -45px;}

    #next{left:129px;width:43px;}
    #next{background:url('/statics/images/course/img_navsprites_hover.gif') -91px 0;}
    #next a:hover{background: url('/statics/images/course/img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
    <ul id="navlist">
        <li id="home"><a href="default.asp"></a></li>
        <li id="prev"><a href="css_intro.asp"></a></li>
        <li id="next"><a href="css_syntax.asp"></a></li>
    </ul>
</body>
</html>

其中的 img_navsprites_hover.gif 是

img_navsprites_hover

媒体类型

媒体类型允许指定文件将如何在不同媒体呈现，该文件可以以不同的方式显示在屏幕上，在纸张上，或者听觉浏览器上。

通常sans-serif 字体比较适合在屏幕上阅读， serif 字体更容易在纸上阅读

@media 规则

允许在相同样式表为不同媒体设置不同的样式，这个例子，如果打印，字体会小一点

<html>
<head>
    <style>
    @media screen
    {
        p.test {font-family:verdana,sans-serif;font-size:14px;}
    }
    @media print
    {
        p.test {font-family:times,serif;font-size:10px;}
    }
    @media screen,print
    {
        p.test {font-weight:bold;}
    }
</style>
</head>

<body>
    ....
</body>
</html>

媒体类型	描述
all	所有的媒体设备
aural	语音和音频合成器
braille	盲人用点字法触觉回馈设备
embossed	分页的盲人用点字法打印机
handheld	小的手持设备
print	打印机
projection	幻灯片
screen	电脑显示器
tty	电传打字机
tv	电视机

CSS 属性选择器

可以根据元素的属性以及属性值来选择元素，具有特定属性的HTML元素样式不仅仅是class和id

title ~=

<!DOCTYPE html>
<html>
<head>
    <style>
    [title~=hello]
    {
        color:blue;
        border:2px solid green;
    } 
</style>
</head>

<body>
    <h2>Will apply to:</h2>
    <h1 title="hello world">Hello world</h1>
    <p title="student hello">Hello CSS students!</p>
    <hr>
    <h2>Will not apply to:</h2>
    <p title="student">Hi CSS students!</p>
</body>
</html>

lang|=

<!DOCTYPE html>
<html>
<head>
    <style>
    [lang|=en]
    {
        color:blue;
    }
</style>
</head>

<body>
    <h2>Will apply to:</h2>
    <p lang="en">Hello!</p>
    <p lang="en-us">Hi!</p>
    <p lang="en-gb">Ello!</p>
    <hr>
    <h2>Will not apply to:</h2>
    <p lang="us">Hi!</p>
    <p lang="no">Hei!</p>
</body>
</html>

表单样式 type=

focus hover

<!DOCTYPE html>
<html>
<head>
    <style>

    input[type="text"]
    {
        width:150px;
        display:block;
        margin-bottom:10px;
        background-color:yellow;
    }
    input:focus
    {
        border:1px solid green;
    }
    input:hover
    {
        background-color:red;   
    }
    input[type="button"]
    {
        width:130px;
        margin-left:25px;
        display:block;
        text-align:center;
    }
</style>
</head>
<body>

    <form name="input" action="demo-form" method="get">
        Firstname:<input type="text" name="fname" value="Peter" size="20">
        Lastname:<input type="text" name="lname" value="Griffin" size="20">
        <input type="button" value="Example Button">

    </form>
</body>
</html>