zoukankan      html  css  js  c++  java
  • 使用CSS3的伪元素进行首字母下沉和首行改变样式

    网页中常见的一种效果,首字改变样式或者首行改变样式,效果如下图。

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .demo1 {
           300px;
          height: 200px;
          border: 1px solid #000;
          overflow: auto;
        }
        /* 首字母改变样式 */
        .demo1 p::first-letter {
          color: red;
          font-size: 40px;
          font-weight: bold;
          float: left;
        }
        .demo2 {
            300px;
          height: 200px;
          border: 1px solid #000;
          overflow: auto;
          margin-top: 200px;
        }
        .demo2::first-line {
          color:salmon;
        }
      </style>
    </head>
    <body>
      <div class="demo1">
        <p>
          我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容
          我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容
          我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容
          我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容
        </p>
      </div>
      <div class="demo2">
        <p>
          我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容
          我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容
          我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容
          我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容
        </p>
      </div>
    </body>
    </html>
    
  • 相关阅读:
    数据库表结构变动发邮件脚本
    .net程序打包部署
    无法登陆GitHub解决方法
    netbeans 打包生成 jar
    第一次值班
    RHEL6 纯命令行文本界面下安装桌面
    C语言中格式化输出,四舍五入类型问题
    I'm up to my ears
    How to boot ubuntu in text mode instead of graphical(X) mode
    the IP routing table under linux@school
  • 原文地址:https://www.cnblogs.com/Bianco/p/13516131.html
Copyright © 2011-2022 走看看