CSS 入门

CSS (Cascading StyleSheet) 层叠样式表

一种用来表示html文件样式的计算机语言。可以静态修饰网页，可以配合脚本语言java script 进行格式化 ----百度百科

特点：

丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

CSS3 模块

一些重要的css3模块：

选择器
盒模型
背景和边框
文字特效
2D/3D 转换
动画
多列布局
用户界面

边框

圆角：

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> 边框 </title>
<style>
    #e1{
        border: 2px solid #a1a1a1;
        padding: 10px 40px;
        background: #dddddd;
        width: 300px;
        border-radius: 25px;
    }
    #e2{
        border: 2px solid red;
        padding: 10px;
        border-radius: 50px 20px;
    }
</style>
 
</head>
<body>
 
<div id="e1">hello world</div>
<br><br>
<div id="e2">hello java</div>
 
 
 
</body>
</html>

阴影

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
</head>
<style>
    div{
        width: 300px;
        height: 100px;
        background-color: yellow;
        box-shadow: 10px 10px 5px #888888;
    }
</style>
<body>
 
<div></div>
 
</body>
</html>

边界图片

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边界图片</title>
</head>
<style>
 
    div{
        border: 15px solid transparent;
        width: 250px;
        padding: 10px 20px;
    }
    #round{
        border-image:url(border.png) 30 30 round;
    }
    #stretch{
        border-image:url(border.png) 30 30 stretch;
    }
 
</style>
<body>
<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>
 
<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>
 
<p>这是我们使用的图片素材：</p>
 
<img src="/images/border.png" />
 
</body>
</html>

圆角

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角</title>
<style>
    #r1{
        border-radius: 25px;
        background: #8AC007;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
    #r2{
        border-radius: 25px;
        border: 2px solid #8AC007;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
    #r3{
        border-radius: 25px;
        background: url("/images/paper.gif");
        background-position: left top;
        background-repeat: repeat;
        padding: 20px;
    }
 
</style>
</head>
<body>
 
<p id="r1">圆角</p>
<p id="r2">圆角</p>
<p id="r3">圆角</p>
 
 
</body>
</html>

四个圆角

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指定每个圆角</title>
    <style>
        #r4{
            border-radius: 15px 50px 30px 5px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
 
        #r5{
            border-radius: 15px 50px 30px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
        #r6{
            border-radius: 15px 50px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
        #r7{
            border-radius: 50px/15px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
        #r8{
            border-radius: 15px/50px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
        #r9{
            border-radius: 50%;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
    </style>
 
</head>
<body>
 
    <p id="r4"></p>
    <p id="r5"></p>
    <p id="r6"></p>
    <p id="r7"></p>
    <p id="r8"></p>
    <p id="r9"></p>
 
</body>
</html>

背景

background-image

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
 
       #example{
           background-image: url("car1.jpg"), url("car2.jpg");
           background-position: right bottom, left top;
           background-repeat: no-repeat, repeat;
           padding: 15px;
       }
 
    </style>
</head>
<body>
    <div id="example">
        <h1>Lorem Ipsum Dolor</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>
 
 
</body>
</html>

background size

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变大小</title>
    <style>
        body{
            background: url("car1.jpg");
            background-size: 80px 60px;
            background-repeat: no-repeat;
            padding-top: 40px;
        }
    </style>
</head>
<body>
    <p>
        中文又称乱数假文，是指常用于排版设计的拉丁文。
    </p>
<p>
    <img src="car1.jpg" alt="Flowers" width="224" height="162">
</p>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拉伸</title>
    <style>
        body{
            background: url("car1.jpg");
            /*background-size: 80px 60px;*/
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding-top: 40px;
        }
    </style>
</head>
<body>
    <p>
        中文又称乱数假文，是指常用于排版设计的拉丁文。
    </p>
<p>
    <img src="car1.jpg" alt="Flowers" width="224" height="162">
</p>
 
</body>
</html>

background-origin

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位背景图片</title>
    <style>
        div{
            border:1px solid black;
            padding: 35px;
            background-image: url("car1.jpg");
            background-repeat: no-repeat;
            background-position: left;
        }
        #div1{
            background-origin: border-box;
        }
        #div2{
            background-origin: content-box;
        }
    </style>
</head>
<body>
    <p>背景图像边界框的相对位置</p>
    <div id="div1">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>
 
    <p>背景图像相对位置的内容框：
    </p>
    <div id="div2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>
 
 
</body>
</html>

background-clip

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景裁剪</title>
    <style>
        #example1{
            border: 10px dotted black;
            padding: 35px;
            background: yellow;
        }
        #example2{
            border: 10px dotted black;
            padding: 35px;
            background: yellow;
            background-clip: padding-box;
        }
        #example3{
            border: 10px dotted black;
            padding: 35px;
            background: yellow;
            background-clip: content-box;
        }
    </style>
</head>
<body>
<p>没有背景剪裁 (border-box没有定义):</p>
<div id="example1">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</body>
</html>

渐变

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style>
        #grad1{
            /*从上到下的渐变*/
            height: 200px;
            background-color: red;
            background-image: linear-gradient(#e66465,#9198e5);
        }
        #grad2{
        /*    从左到右的渐变*/
            height: 200px;
            background-color: red;
            background-image: linear-gradient(to right ,red,yellow);
 
        }
        #grad3{
        /*    对角的渐变*/
            height: 200px;
            background-color: red;
            background-image: linear-gradient(to bottom, red, yellow);
 
        }
        #grad4{
        /*    使用角度*/
            height: 100px;
            background-color: red;
            background-image: linear-gradient(60deg,red,yellow);
        }
        #grad5{
        /*    多个颜色节点*/
            height: 200px;
            background-color: red;
            background-image: linear-gradient(red 10%,green 85%,blue 90%);
        }
        #grad6{
        /*    带有彩虹颜色和文本的线性渐变*/
            height: 55px;
            background-color: red;
            background-image: linear-gradient(to right,red, orange, yellow, green, blue, indigo, violet);
        }
 
    </style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变，起点是红色，慢慢过渡到蓝色；</p>
<div id="grad1"></div>
<br>
<br>
<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：</p>
<div id="grad2"></div>
 
<h3>线性渐变 - 对角</h3>
<p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：</p>
<div id="grad3"></div>
<br>
<br>
<div id="grad4" style="text-align:center;">60deg</div>
 
<br>三个颜色节点，不均匀分布
<br>
<div id="grad5"></div>
<br><br>    带有彩虹颜色和文本的线性渐变
<div id="grad6" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
    渐变颜色
</div>
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变2</title>
    <style>
        #grad{
            /*透明度*/
            height: 200px;
            background-image: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
        }
        #grad1{
        /*    重复的线性渐变*/
            height: 200px;
            background-color: red;
            background-image: repeating-linear-gradient(45deg,red,yellow 10%,green 20%);
        }
        #grad2{
        /*    径向渐变*/
            height: 200px;
            background-color: red;
            background-image: radial-gradient(red 5%,yellow 15%,green 60%);
        }
        #grad3{
        /*    设置形状*/
            height: 200px;
            background-color: red;
            background-image: radial-gradient(circle,red,yellow,green);
        }
        #grad4{
        /*    不同尺寸大小关键字使用*/
            height: 150px;
            width: 150px;
            background-color: red;
            background-image: radial-gradient(farthest-corner at 60% 50% ,red ,yellow,black);
 
        }
        #grad5{
            /*    不同尺寸大小关键字使用*/
            height: 150px;
            width: 150px;
            background-color: red;
            background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
 
        }
 
    </style>
</head>
<body>
 
<div id="grad4"></div>
<div id="grad"></div>
<div id="grad1"></div>
<div id="grad2"></div>
<div id="grad3"></div>
<div id="grad5"></div>
 
 
 
 
 
</body>
</html>

文本效果

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本效果 1</title>
  <style>
 
    h1{
      Text-shadow: 5px 5px 5px #FF0000;
    }
    /*阴影颜色是灰色*/
    div{
        width:300px;
        height:100px;
        padding:15px;
        background-color: yellow;
        box-shadow: 10px 10px grey;
    }
  /*  背景颜色模糊*/
    div{
        width:300px;
        height: 100px;
        padding:15px;
        background-color: yellow;
        box-shadow: 10px 10px 5px grey;
    }
  </style>
</head>
<body>
 
<h1>这是文本阴影!</h1>
<div>这是一个div盒子阴影</div>
<br>
<div>盒子阴影模糊效果</div>
 
<div></div>
 
</body>
</html>

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        div.card {
            width: 250px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            text-align: center;
        }
 
        div.header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            font-size: 40px;
        }
 
        div.container {
            padding: 10px;
        }
    </style>
</head>
<body>
 
<h2>卡片</h2>
 
<p>box-shadow 属性用来可以创建纸质样式卡片:</p>
 
<div class="card">
    <div class="header">
        <h1>1</h1>
    </div>
 
    <div class="container">
        <p>January 1, 2016</p>
    </div>
</div>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示溢出内容</title>
</head>
<style>
    div.test
    {
        white-space:nowrap;
        width:12em;
        overflow:hidden;
        border:1px solid #000000;
    }
</style>
<body>
<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
<p>div 使用 &quot;text-overflow:ellipsis&quot;:</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 &quot;text-overflow:clip&quot;:</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 &quot;text-overflow: &gt;&gt;&quot;(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
 
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换行</title>
    <style>
        p.test{
            width:11em;
            border:1px solid #000000;
            word-wrap:break-word;
        }
    </style>
</head>
 
<body>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.
    The long word will break and wrap to the next line.</p>
 
 
</body>
</html>

2D转换

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height:75px;
            background-color: red;
            border:1px solid black;
        }
        div#div2{
            transform:translate(50px,100px);
            -ms-transform: translate(50px,100px);
            -webkit-transform: translate(50px,100px);
        }
    </style>
</head>
<body>
<div>hello,world!</div>
<div id="div2"> hello ,java! </div>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height: 75px;
            background-color: red;
            border: 1px solid black;
        }
        div#div2{
            transform:rotate(30deg);
 
            -webkit-transform: rotate(30deg);
        }
    </style>
</head>
<body>
 
<div>hello,world!</div>
<div id="div2">hello,java</div>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 150px;
            width: 200px;
            height: 100px;
            background-color: yellow;
            border:1px solid black;
            -webkit-transform: scale(2,3);
            transform: scale(2,3);
        }
    </style>
</head>
<body>
<p>scale() 方法用于增加和缩小元素大小</p>
<div>
    div 元素宽度是原始大小的两倍，高度是原始大小的三倍。
</div>
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:200px;
            height:100px;
            background-color:yellow;
            transform:rotate(30deg);
            -ms-transform:rotate(30deg);
            -webkit-transform: rotate(30deg);
        }
    </style>
</head>
<body>
 
<div>Hello</div>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height: 75px;
            background-color: red;
            border:1px solid black;
        }
 
        div#div2{
            transform: skew(30deg,20deg);
            -webkit-transform: skew(30deg,20deg);
        }
    </style>
</head>
<body>
 
<div>hello,world</div>
 
<div id="div2">hello,java</div>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height:75px;
            background-color:red;
            border:1px solid black;
        }
        div#div2{
            transform:matrix(0.866,0.5,-0.5,0.866,0,0);
            -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
        }
    </style>
</head>
<body>
    <div>hello,java</div>
    <div id="div2">hello,world</div>
 
</body>
</html>

3D转换

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height:75px;
            background-color:red;
            border:1px solid black;
        }
        div#div2{
            transform:rotateX(120deg);
            -webkit-transform:rotateX(120deg);
        }
    </style>
 
</head>
<body>
<p>
    <div> hello,world! </div>
    <div id="div2">hello ,java! </div>
</p>
 
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    div{
        width: 100px;
        height: 75px;
        background-color: red;
        border: 1px solid black;
    }
    div#div2{
        transform:rotate(130deg);
        -webkit-transform:rotateY(130deg);
    }
 
    </style>
</head>
<body>
    <div>hello,world</div>
    <div id="div2">hello,java</div>
 
</body>
</html>

过渡

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height: 100px;
            background: red;
            transition: width 2s;
            -webkit-transition:width 2s;
        }
        div:hover{
            width: 100px;
            height: 100px;
            background: red;
            transition:width 2s;
            -webkit-transition:width 2s;
        }
        div:hover{
            width: 300px;
        }
    </style>
</head>
<body>
 
<div></div>
<p>鼠标移动</p>
 
</body>
</html>

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            transition-property:width;
            transition-duration:1s;
            transition-timing-function:linear;
            transition-delay:2s;
            /* Safari */
            -webkit-transition-property:width;
            -webkit-transition-duration:1s;
            -webkit-transition-timing-function:linear;
            -webkit-transition-delay:2s;
        }
 
        div:hover
        {
            width:200px;
        }
    </style>
</head>
<body>
 
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
 
 
 
<div></div>
 
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
 
</body>
</html>

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            transition:width 1s linear 2s;
            /* Safari */
            -webkit-transition:width 1s linear 2s;
        }
 
        div:hover
        {
            width:200px;
        }
    </style>
</head>
<body>
 
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
 
<div></div>
 
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
 
</body>
</html>

动画

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画 1</title>
<style>
    div{
        width:100px;
        height:100px;
        background:red;
        /*animation:myfirst 5s;*/
        -webkit-animation:myfirst 5s;
    }
    @-webkit-keyframes myfirst {
        from{background:red;}
        to{background:yellow;}
    }
 
</style>
</head>
<body>
<div></div>
 
</body>
</html>

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            animation:myfirst 5s;
            -moz-animation:myfirst 5s; /* Firefox */
            -webkit-animation:myfirst 5s; /* Safari and Chrome */
            -o-animation:myfirst 5s; /* Opera */
        }
 
        @keyframes myfirst
        {
            0%   {background:red;}
            25%  {background:yellow;}
            50%  {background:blue;}
            100% {background:green;}
        }
 
        @-moz-keyframes myfirst /* Firefox */
        {
            0%   {background:red;}
            25%  {background:yellow;}
            50%  {background:blue;}
            100% {background:green;}
        }
 
        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0%   {background:red;}
            25%  {background:yellow;}
            50%  {background:blue;}
            100% {background:green;}
        }
 
        @-o-keyframes myfirst /* Opera */
        {
            0%   {background:red;}
            25%  {background:yellow;}
            50%  {background:blue;}
            100% {background:green;}
        }
    </style>
</head>
<body>
 
<div></div>
 
<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
 
 
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画 3</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            -webkit-animation:myfirst 5s;
        }
        @-webkit-keyframes myfirst {
            0%{background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
    </style>
</head>
<body>
<div></div>
 
</body>
</html>

多列

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列与列间的间隙为 40 像素</title>
    <style>
        .newspaper{
           column-count:3;
           column-gap: 40px;
        }
    </style>
</head>
<body>
<div class="newspaper">
    “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列与列间的边框样式,两列的边框厚度,两列的边框颜色</title>
    <style>
        .newspaper{
            column-count: 3;
            column-gap: 40px;
            column-rule-style: outset;
            column-rule-width: 3px;
            column-rule-color: #ff0000;
        }
    </style>
</head>
<body>
 
<div class="newspaper">
    当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指定元素跨越多少列</title>
    <style>
        .newspaper{
            column-count: 3;
        }
        h2{
            column-span: all;
        }
 
    </style>
</head>
<body>
<div class="newspaper">
    <h2>英国维斯米斯特教堂碑文</h2>
    当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>
</body>
</html>

用户界面

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调整尺寸</title>
    <style>
        div{
            border:2px solid;
            padding: 10px 40px;
            width:300px;
            resize:both;
            overflow: auto;
        }
    </style>
</head>
<body>
 
<div>调整属性指定一个元素是否由用户可调整大小的。</div>
 
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方框大小调整</title>
    <style>
        #example1{
            box-sizing: content-box;
            width: 300px;
            height: 100px;
            padding: 30px;
            border: 10px solid blue;
        }
 
        #example2{
            box-sizing: border-box;
            width: 300px;
            height: 100px;
            padding: 30px;
            border: 10px solid blue;
        }
    </style>
</head>
<body>
<h1>box-sizing 属性</h1>
<p>定义如何计算一个元素的总宽度和总高度，是否包含内边距和边框。</p>
 
<h2>box-sizing: content-box (默认):</h2>
<p>高度和宽度只应用于元素的内容:</p>
<div id="example1">这个 div 的宽度为 300px。但完整宽度为 300px + 20px (左边框和右边框) + 60px (左边距和右边距) = 380px!</div>
 
<h2>box-sizing: border-box:</h2>
<p>高度和宽度应用于元素的所有部分: 内容、内边距和边框:</p>
<div id="example2">不管如何这里的完整宽度为300px!</div>
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外形修饰</title>
    <style>
        div{
            margin: 20px;
            width:150px;
            padding: 10px;
            height:70px;
            border:2px solid black;
            outline: 2px solid red;
            outline-offset:15px;
        }
    </style>
</head>
<body>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>

图片

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角图片</title>
    <style>
        img{
            border-radius: 8px;
        }
    </style>
</head>
<body>
<img src="aodi.jpg" alt="Paris" width="400" height="300">
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>椭圆角图片</title>
    <style>
        img{
            border-radius: 50%;
        }
    </style>
</head>
<body>
<img src="aodi.jpg" alt="Paris" width="400" height="300">
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缩略图。在图片外层添加一个链接</title>
    <style>
        a{
            display: inline-block;
            border:1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
            transition: 0.3s;
        }
 
        a:hover{
            box-shadow: 0 0 2px 1px rgba(0,140,186,0.5);
        }
    </style>
</head>
<body>
<a target="_blank" href="aodi.jpg">
    <img src="aodi.jpg" alt="Paris" width="800" height="600">
</a>
 
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式图片</title>
    <style>
        img{
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片文本，卡片式</title>
    <style>
        body{margin:25px;}
        div.polaroid{
            width: 80%;
            background-color: white;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            margin-bottom: 25px;
        }
 
        div.container{
            text-align: center;
            padding:10px 20px;
        }
    </style>
</head>
<body>
<div class="polaroid">
    <img src="aodi.jpg" alt="奥迪" style="width:100%" >
    <div class="container">
        <p>The Troll's tongue in Hardanger, Norway</p>
    </div>
</div>
 
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片滤镜</title>
    <style>
        img{
            width: 33%;
            height: auto;
            float: left;
            max-width: 235px;
        }
        .blur {-webkit-filter: blur(4px);filter: blur(4px);}
        .brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
        .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
        .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
        .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
        .invert {-webkit-filter: invert(100%);filter: invert(100%);}
        .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
        .saturate {-webkit-filter: saturate(7); filter: saturate(7);}
        .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
        .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
    </style>
</head>
<body>
<img src="aodi.jpg" alt="Pineapple" width="800" height="600">
<img class="blur" src="aodi.jpg" alt="Pineapple" width="800" height="600">
<img class="brightness" src="aodi.jpg" alt="Pineapple" width="800" height="600">
<img class="contrast" src="aodi.jpg" alt="Pineapple" width="800" height="600">
<img class="grayscale" src="aodi.jpg" alt="Pineapple" width="800" height="600">
<img class="huerotate" src="aodi.jpg" alt="Pineapple" width="800" height="600">
<img class="invert" src="aodi.jpg" alt="Pineapple" width="800" height="600">
<img class="opacity" src="aodi.jpg" alt="Pineapple" width="800" height="600">
<img class="saturate" src="aodi.jpg" alt="Pineapple" width="800" height="600">
<img class="sepia" src="aodi.jpg" alt="Pineapple" width="800" height="600">
<img class="shadow" src="aodi.jpg" alt="Pineapple" width="800" height="600">
 
 
</body>
</html>

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>响应式图片相册</title>
    <style>
        div.img {
            border: 1px solid #ccc;
        }
 
        div.img:hover {
            border: 1px solid #777;
        }
 
        div.img img {
            width: 100%;
            height: auto;
        }
 
        div.desc {
            padding: 15px;
            text-align: center;
        }
 
        * {
            box-sizing: border-box;
        }
 
        .responsive {
            padding: 0 6px;
            float: left;
            width: 24.99999%;
        }
 
        @media only screen and (max-width: 700px){
            .responsive {
                width: 49.99999%;
                margin: 6px 0;
            }
        }
 
        @media only screen and (max-width: 500px){
            .responsive {
                width: 100%;
            }
        }
 
        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
 
<h2 style="text-align:center">响应式图片相册</h2>
 
<div class="responsive">
    <div class="img">
        <a target="_blank" href="aodi.jpg">
            <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
        </a>
        <div class="desc">Add a description of the image here</div>
    </div>
</div>
 
 
<div class="responsive">
    <div class="img">
        <a target="_blank" href="aodi.jpg">
            <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
    </div>
</div>
 
<div class="responsive">
    <div class="img">
        <a target="_blank" href="aodi.jpg">
            <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
    </div>
</div>
 
<div class="responsive">
    <div class="img">
        <a target="_blank" href="aodi.jpg">
            <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
    </div>
</div>
 
<div class="clearfix"></div>
 
<div style="padding:6px;">
 
    <h4>重置浏览器大小查看效果</h4>
</div>
 
</body>
</html>

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片模态框</title>
    <style>
        #myImg {
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }
 
        #myImg:hover {opacity: 0.7;}
 
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
        }
 
        /* Modal Content (image) */
        .modal-content {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
        }
 
        /* Caption of Modal Image */
        #caption {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 0;
            height: 150px;
        }
 
        /* Add Animation */
        .modal-content, #caption {
            -webkit-animation-name: zoom;
            -webkit-animation-duration: 0.6s;
            animation-name: zoom;
            animation-duration: 0.6s;
        }
 
        @-webkit-keyframes zoom {
            from {-webkit-transform: scale(0)}
            to {-webkit-transform: scale(1)}
        }
 
        @keyframes zoom {
            from {transform: scale(0.1)}
            to {transform: scale(1)}
        }
 
        /* The Close Button */
        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }
 
        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }
 
        /* 100% Image Width on Smaller Screens */
        @media only screen and (max-width: 700px){
            .modal-content {
                width: 100%;
            }
        }
    </style>
</head>
<body>
 
<h2>图片模态框</h2>
<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p><p>
    首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<p>
<p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p>
<img id="myImg" src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">
 
<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="close">×</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
</div>
 
<script>
    // 获取模态窗口
    var modal = document.getElementById('myModal');
 
    // 获取图片模态框，alt 属性作为图片弹出中文本描述
    var img = document.getElementById('myImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        modalImg.alt = this.alt;
        captionText.innerHTML = this.alt;
    }
 
    // 获取 <span> 元素，设置关闭模态框按钮
    var span = document.getElementsByClassName("close")[0];
 
    // 点击 <span> 元素上的 (x), 关闭模态框
    span.onclick = function() {
        modal.style.display = "none";
    }
</script>
 
</body>
</html>

按钮

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本按钮样式</title>
    <style>
        .button{
            background-color:#4CAF50;
            border:none;
            color:white;
            padding:15px 32px;
            text-align:center;
            text-decoration:none;
            display:inline-block;
            font-size:16px;
            margin:4px 2px;
            cursor: pointer;
        }
 
        .button2 {background-color: #008CBA;}
        .button3 {background-color: #f44336;}
        .button4 {background-color: #e7e7e7; color: black;}
        .button5 {background-color: #555555;}
    </style>
</head>
<body>
 
<h2>按钮颜色</h2>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮颜色</title>
    <style>
        .button{
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer
        }
        .button2{background-color: #008CBA}
        .button3 {background-color: #f44336;} /* 红色 */
        .button4 {background-color: #e7e7e7; color: black;} /* 灰色 */
        .button5 {background-color: #555555;} /* 黑色 */
 
    </style>
</head>
<body>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
 
 
 
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮大小</title>
    <style>
        .button{
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align:center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .button1 {font-size: 10px;}
        .button2 {font-size: 12px;}
        .button3 {font-size: 16px;}
        .button4 {font-size: 20px;}
        .button5 {font-size: 24px;}
 
    </style>
</head>
<body>
 
<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>
 
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角按钮</title>
    <style>
        .button{
            background-color: #4CAF50;
            border: none;
            padding: 15px 32px;
            text-align:center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .button1{border-radius:2px;}
        .button2{border-radius:4px;}
        .button3{border-radius:8px;}
        .button4{border-radius:12px;}
        .button5{border-radius:50%;}
    </style>
</head>
<body>
<h2>圆角按钮</h2>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮颜色</title>
    <style>
        .button{
            background-color: #4CAF50;
            border:none;
            color: white;
            padding: 15px 32px;
            text-align:center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .button1{
            background-color: white;
            color: black;
            border: 2px solid #4CAF50;
        }
        .button2{
            background-color: white;
            color: black;
            border: 2px solid #008CBA;
        }
        .button3{
            background-color: white;
            color: black;
            border: 2px solid #f44336;
        }
        .button4{
            background-color: white;
            color: black;
            border: 2px solid #e7e7e7;
        }
        .button5{
            background-color: white;
            color: black;
            border: 2px solid #555555;
        }
    </style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标悬停</title>
    <style>
        .button{
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 16px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            transition-duration: 0.4s;
            cursor: pointer;
        }
 
        .button:hover{
            background-color: #4CAF50;
            color: white;
        }
        .button2{
            background-color: white;
            color: black;
            border: 2px solid #008CBA;
        }
        .button2:hover{
            background-color: #008CBA;
            color: white;
        }
        .button3{
            background-color: white;
            color: black;
            border: 2px solid #f44336;
        }
        .button3:hover{
            background-color: #f44336;
            color: white;
        }
        .button4{
            background-color: white;
            color: black;
            border: 2px solid #e7e7e7;
        }
        .button4:hover{background-color: #e7e7e7;}
        .button5:hover{
            background-color: #555555;
            color: white;
        }
 
    </style>
</head>
<body>
 
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
 
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮阴影</title>
    <style>
        .button{
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            transition-duration: 0.4s;
        }
        .button1 {
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        }
 
        .button2:hover {
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
        }
 
 
    </style>
</head>
<body>
<button class="button button1">阴影按钮</button>
<button class="button button2">鼠标悬停后出现阴影</button>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>禁用按钮</title>
    <style>
        .button{
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .disabled{
            opacity: 0.6;
            cursor: not-allowed;
        }
    </style>
 
</head>
<body>
    <button class="button">正常按钮</button>
    <button class="button disabled">禁用按钮</button>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮宽度</title>
    <style>
        .button{
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .button1{
            width: 250px;
        }
        .button2{
            width: 50%;
        }
        .button3{
            padding-left: 0;
            padding-right: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<button class="button button1">250px</button>
<br>
<button class="button button2">50%</button>
<br>
<button class="button button3">100%</button>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮组</title>
    <style>
        .button{
            background-color: #4CAF50;
            border:none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            float: left;
        }
        .button:hover{
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
 
<p style="clear:both"><br>记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。</p>
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带边框按钮组</title>
    <style>
        .button{
            background-color: #4CAF50;
            border: 1px solid green;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            float: left;
        }
        .button:hover{
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
 
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
 
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>波纹效果</title>
    <style>
        .button{
            position: relative;
            background-color: #4CAF50;
            border: none;
            font-size: 28px;
            color: #FFFFFF;
            padding: 20px;
            width: 200px;
            text-align: center;
            transition-duration:0.4s;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
        }
        .button:after{
            content:"";
            background: #90EE90;
            display: block;
            position: absolute;
            padding-top: 300%;
            padding-left: 350%;
            margin-left:-20px;
            margin-top: -120%;
            opacity: 0;
            transition: all 0.8s;
        }
        .button:active:after{
            padding: 0;
            margin: 0;
            opacity: 1;
            transition: 0s;
        }
    </style>
</head>
<body>
<button class="button">Click Me</button>
 
</body>
</html>

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        .button {
            display: inline-block;
            border-radius: 4px;
            background-color: #f4511e;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 28px;
            padding: 20px;
            width: 200px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
        }
 
        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }
 
        .button span:after {
            content: '»';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }
 
        .button:hover span {
            padding-right: 25px;
        }
 
        .button:hover span:after {
            opacity: 1;
            right: 0;
        }
    </style>
</head>
<body>
 
<h2>按钮动画</h2>
 
<button class="button" style="vertical-align:middle"><span>Hover </span></button>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按下效果</title>
    <style>
        .button {
            display: inline-block;
            padding: 15px 25px;
            font-size: 24px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            outline: none;
            color: #fff;
            background-color: #4CAF50;
            border: none;
            border-radius: 15px;
            box-shadow: 0 9px #999;
        }
        .button:hover{
            background-color: #3e8e41;
        }
        .button:active{
            background-color: #3e8e41;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }
    </style>
</head>
<body>
<button class="button">Click Me</button>
 
</body>
</html>

分页

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单分页</title>
    <style>
        ul.pagination{
            display: inline-block;
            padding: 0;
            margin: 0;
        }
        ul.pagination li{ display : inline;}
 
        ul.pagination li a{
            color : black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }
    </style>
</head>
<body>
<h2>简单的分页</h2>
<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a class="active" href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">»</a></li>
</ul>
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击及鼠标悬停分页样式</title>
    <style>
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }
        ul.pagination li {
            display: inline;
        }
        ul.pagination li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            border-radius: 5px;
        }
        ul.pagination li a.active{
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
        }
 
        ul.pagination li a:hover:not(.active){background-color: #ddd;}
 
    </style>
</head>
<body>
<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a class="active" href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">»</a></li>
</ul>
 
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面包屑导航</title>
    <style>
        ul.breadcrumb{
            padding: 8px 16px;
            list-style: none;
            background-color: #eee;
        }
        ul.breadcrumb li {display: inline;}
        ul.breadcrumb li+li:before{
            padding: 8px;
            color: black;
            content: "/\00a0";
        }
        ul.breadcrumb li a {color: green;}
    </style>
</head>
<body>
<ul class="breadcrumb">
    <li><a href="#">首页 </a></li>
    <li><a href="#">前端 </a></li>
    <li><a href="#">HTML 教程 </a></li>
    <li>HTML 段落</li>
</ul>
 
 
</body>
</html>

多媒体查询

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作一个电子邮箱的链接列表</title>
    <style>
        ul{
            list-style-type: none;
        }
        ul li a{
            color: green;
            text-decoration: none;
            padding: 3px;
            display: block;
        }
    </style>
</head>
<body>
<ul>
    <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">
        John Doe
    </a> </li>
    <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
    <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>
 
</body>
</html>

posted @ 2022-04-23 21:48 鱼子酱caviar 阅读(34) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端三剑客 html css js

· 自定义博客园2.0

· 前端新手看过来，教你从零CSS做漂亮网页，这样学习太有成就感了

· CSS系列之（一）概述

· CSS基础

公告

昵称：鱼子酱caviar
园龄： 4年
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

鱼子酱

CSS 入门

CSS (Cascading StyleSheet) 层叠样式表

CSS3 模块

边框

阴影

圆角

背景

渐变

文本效果

2D转换

3D转换

过渡

动画

多列

用户界面

图片

按钮

分页

多媒体查询

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title> 边框 </title>
	<style>
	#e1{
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background: #dddddd;
	width: 300px;
	border-radius: 25px;
	}
	#e2{
	border: 2px solid red;
	padding: 10px;
	border-radius: 50px 20px;
	}
	</style>

	</head>
	<body>

	<div id="e1">hello world</div>
	<br><br>
	<div id="e2">hello java</div>



	</body>
	</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>阴影</title>
	</head>
	<style>
	div{
	width: 300px;
	height: 100px;
	background-color: yellow;
	box-shadow: 10px 10px 5px #888888;
	}
	</style>
	<body>

	<div></div>

	</body>
	</html>