CSS 中级

其他 2018-08-08 15:57:56 阅读次数: 0

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>

class*=”col-“

猜你喜欢

转载自blog.csdn.net/LEIQINGQI/article/details/81415220
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022