【01】blockqote美化

【01】blockqote美化

 

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>moyu's demo</title>
    <meta name="keywords" content="demo 测试 魔芋">
    <meta name="description" content="魔芋的测试示例">
    <meta name="robots" content="index,follow">
    <!-- 定义网页搜索引擎索引方式 -->
    <meta name="renderer" content="webkit">
    <!-- 360,以webkit内核进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <!-- 以最新内核进行渲染。 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- 百度禁止转码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>
    blockquote {
        background: #f9f9f9;
        border-left: 10px solid #ccc;
        margin: 1.5em 10px;
        padding: .5em 10px;
        quotes: "\201C""\201D""\2018""\2019";
    }

    blockquote:before {
        color: #ccc;
        content: open-quote;
        font-size: 4em;
        line-height: .1em;
        margin-right: .25em;
        vertical-align: -.4em;
    }

    blockquote p {
        display: inline;
    }
    </style>
</head>

<body>
    <blockquote cite="http://www.worldwildlife.org/who/index.html">
        For 50 years, WWF has been protecting the future of nature. 
The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million 
members in the United States and close to 5 million globally.
    </blockquote>
    <script></script>
</body>

</html>

效果：