CSS学习笔记之高级教程（三）

文阿花

于 2024-05-28 15:14:24 发布

阅读量739

点赞数 13

分类专栏： CSS 文章标签： css 学习笔记

本文链接：https://blog.csdn.net/wz_1992/article/details/139162265

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

14、CSS 图像样式

14.1 圆角图像：`border-radius`

  .img01 {
      width: 200px;
      height: auto;
      /* 四个角一致的圆角 */
      border-radius: 10px;
    }

14.2 圆形

   .img02 {
      width: 200px;
      height: auto;
      /* 圆形 */
      border-radius: 50%;
    }

14.3 缩略图图像

.img03{
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 10px;
      width: 200px;
    }
    .img03:hover{
      border: 1px solid black;
    }

14.4 响应式图像根据窗口大小自动调整大小

  .img04{
      width: 50%;
      height: auto;
    }

14.5 图像居中

 .img05{
      display: block;
      margin-left:auto;
      margin-right: auto;
      width: 200px;
    }

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img01 {
      width: 200px;
      height: auto;
      /* 四个角一致的圆角 */
      border-radius: 10px;
    }
    .img02 {
      width: 200px;
      height: auto;
      /* 圆形 */
      border-radius: 50%;
    }
    /* 缩略图图像 */
    .img03{
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 10px;
      width: 200px;
    }
    .img03:hover{
      border: 1px solid black;
    }

    /* 响应式图像  根据窗口大小自动调整大小 */
    .img04{
      width: 50%;
      height: auto;
    }

    /* 图像居中 */
    .img05{
      display: block;
      margin-left:auto;
      margin-right: auto;
      width: 200px;
    }
    

  </style>
</head>

<body>
  <img class="img01" src="imgs/paper.jpg" alt="paper">
  <img class="img02" src="imgs/paper.jpg" alt="paper">
  <img class="img03" src="imgs/paper.jpg" alt="paper">
  <img class="img04" src="imgs/paper.jpg" alt="paper">
  <br>
  <img class="img05" src="imgs/paper.jpg" alt="paper">
</body>

</html>

14.6 图像文本（在图像上定位文本）

文本在图片上左上角

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      position: relative;
    }

    .topleft{
      position: absolute;
      top: 10px;
      left: 10px;
    }

  </style>
</head>
<body>
  <div class="container">
    <img src="imgs/paper.jpg" alt="paper">
    <div class="topleft">Top Left</div>
  </div>
  
</body>
</html>

运行效果：
在这里插入图片描述

14.7 图像滤镜

图像滤镜

14.8 图像悬停叠加

淡入文本：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img {
      width: 100%;
      height: auto;
      display: block;
    }

    .container {
      position: relative;
      width: 200px;
    }

    .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      /* transition: .5s ease; */
      /* transition: width .5s height 5s ease; */
      transition-duration: 1s;
      transition-timing-function: ease;
      background-color: #008CBA;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .container:hover .overlay {
      opacity: 1;
    }

    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      /* transform: translateY(-50%);
      transform: translateX(-50%); */
      transform: translate(-50%, -50%);
      color: white;
      font-size: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <img class="img" src="imgs/paper.jpg" alt="paper">
    <div class="overlay">
      <div class="text">你好，中国</div>
    </div>
  </div>

</body>

</html>

淡入框：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 200px;
      position: relative;
    }

    .img {
      width: 100%;
      height: auto;
    }

    .overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: .5s ease;
    }

    .text {
      background-color: #4CAF50;
      color: white;
      padding: 20px;
      border-radius: 5px;
    }

    .container:hover .overlay{
      opacity:1;
    }
    .container:hover .img{
      opacity:0.7;
    }
  </style>
</head>

<body>
  <div class="container">

    <img class="img" src="imgs/paper.jpg" alt="paper">

    <div class="overlay">
      <p class="text">哈喽</p>

    </div>

  </div>

</body>

</html>

从上方滑入：（思路：控制高度0-100% +过渡动画）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 200px;
      position: relative;

    }

    .img {
      width: 100%;
      height: auto;
      display: block;
    }

    .overlay {
      position: absolute;
      width: 100%;
      height: 0;
      background-color: #008CBA;
      top: 0;
      left: 0;
      bottom: 100%;
      transition: .5s ease;
    }

    .text {
      position: absolute;
      color: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      visibility: hidden;
    }

    p {
      padding: 0;
      margin: 0;
    }

    .container:hover .overlay {
      height: 100%;
      bottom: 0;
    }
    .container:hover .text{
      visibility: visible;
    }
  </style>

</head>

<body>

  <div class="container">

    <img class="img" src="imgs/paper.jpg" alt="paper">

    <div class="overlay">
      <p class="text">哈喽</p>
    </div>
  </div>

</body>

</html>

从下方滑入：（思路：同上）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 200px;
      position: relative;

    }

    .img {
      width: 100%;
      height: auto;
      display: block;
    }

    .overlay {
      position: absolute;
      width: 100%;
      height: 0;
      background-color: #008CBA;
      top: 100%;
      left: 0;
      bottom: 0;
      transition: .5s ease;
    }

    .text {
      position: absolute;
      color: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      visibility: hidden;
    }

    p {
      padding: 0;
      margin: 0;
    }

    .container:hover .overlay {
      height: 100%;
      top: 0;
    }
    .container:hover .text{
      visibility: visible;
    }
  </style>

</head>

<body>

  <div class="container">

    <img class="img" src="imgs/paper.jpg" alt="paper">

    <div class="overlay">
      <p class="text">哈喽</p>
    </div>
  </div>

</body>

</html>

左侧滑入：（思路：控制width）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 200px;
      position: relative;

    }

    .img {
      width: 100%;
      height: auto;
      display: block;
    }

    .overlay {
      position: absolute;
      width: 0;
      height: 100%;
      background-color: #008CBA;
      top: 0;
      left: 0;
      bottom: 0;
      right: 100%;
      transition: .5s ease;
    }

    .text {
      position: absolute;
      color: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      visibility: hidden;
      white-space: nowrap; 
    }

    p {
      padding: 0;
      margin: 0;
    }

    .container:hover .overlay {
      width: 100%;
      right: 0;
    }
    .container:hover .text{
      visibility: visible;
    }
  </style>

</head>

<body>

  <div class="container">

    <img class="img" src="imgs/paper.jpg" alt="paper">

    <div class="overlay">
      <p class="text">哈喽</p>
    </div>
  </div>

</body>

</html>

14.9 图像翻转

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img{
      width: 200px;
      height: auto;
    }

    .img:hover{
      transform:scaleX(-1);
    }
  </style>
</head>
<body>
  

  <div>
    <img  class="img" src="imgs/bill.png" alt="bill">
  </div>
</body>
</html>

14.10 响应式图库

本例使用媒体查询来重新排列不同屏幕尺寸的图像。请调整浏览器窗口的大小以查看效果：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      width: 24%;
      border: 1px solid #ccc;
      float: left;
      margin-left: 6px;
    }

    .img {
      width: 100%;
      height: auto;
    }

    .container:hover {
      border: 1px solid #333;
    }

    .text {
      padding: 15px 0;
      text-align: center;
    }

    /* 响应式 */
    @media only screen and (max-width: 700px) {
      .container {
        width: 49.99999%;
        margin: 6px 0;
      }
    }

    @media only screen and (max-width: 500px) {
      .container {
        width: 100%;
      }
    }




    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>

<body>



  <div class="container">
    <img class="img" src="imgs/flower.png" alt="flower">
    <div class="text">
      <div>郁金香</div>
    </div>
  </div>

  <div class="container">
    <img class="img" src="imgs/flower.png" alt="flower">
    <div class="text">
      <div>郁金香</div>
    </div>
  </div>

  <div class="container">
    <img class="img" src="imgs/flower.png" alt="flower">
    <div class="text">
      <div>郁金香</div>
    </div>
  </div>

  <div class="container">
    <img class="img" src="imgs/flower.png" alt="flower">
    <div class="text">
      <div>郁金香</div>
    </div>
  </div>

</body>

</html>

15、CSS object-fit 属性

CSS object-fit 属性用于规定应如何调整 <img> 或 <video> 的大小来适应其容器。
这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。

object-fit 属性可接受如下值：

fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none - 不对替换的内容调整大小。
scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）

16、CSS 按钮

16.1 可悬停的按钮+禁止使用

hover改变颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .button{
      background-color: white;
      border: 1px solid #4CAF50;
      border-radius: 5px;
      padding: 10px 15px;
      /* 过渡动画时间 */
      transition-duration: 0.5s;
      /* 阴影 */
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

    .button:hover{
      background-color: #4CAF50;
      color: white;
    }

    .button02{
      opacity: 0.5;
      cursor: not-allowed;
      background-color: white;
      border: 1px solid gray;
      border-radius: 5px;
      padding: 10px 15px;
    }
  </style>
</head>
<body>

  <button class="button">提交</button>

  <button class="button02">禁用的按钮</button>
  
</body>
</html>

运行效果：
在这里插入图片描述

16.2 动画按钮

16.2.1 鼠标悬停显示箭头

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      background-color: #f4511e;
      display: inline-block;
      width: 200px;
      padding: 20px;
      /* 设置鼠标指针在元素上的样式为手型 */
      cursor: pointer;
      border-radius: 4px;
    }

    .text {
      color: white;
      font-size: 28px;
      text-align: center;
      transition: 0.5s;
      display: inline-block;
      position: relative;
    }

    .container:hover .text {
      padding-right: 25px;
    }

    .container:hover .text::after {
      opacity: 1;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .text:after {
      content: '\00bb';
      position: absolute;
      transition: 0.5s;
      opacity: 0;
      right: -15px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="text">
      请悬停在我上方
    </div>

  </div>

</body>

</html>

运行效果：

在这里插入图片描述

16.2.2 添加点击时的“按键按下”效果（按压效果）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .button{
      display: inline-block;
      background-color: #4CAF50;
      font-size: 25px;
      outline: none;
      border: none;
      color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 9px #999;
      /* transition: 0.5s; */
    }
    .button:hover{
      background-color:  #3e8e41;
    }

    /* 鼠标按下后 */
    .button:active{
      box-shadow: 0 5px #666;
      transform: translateY(4px);

    }

  </style>
</head>
<body>
  

  <button class="button">请点击我</button>

</body>
</html>

17、CSS 分页实例

17.1 示例一：普通样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 居中 */
    .center {
      text-align: center;
    }

    .container {
      display: inline-block;

    }

    .container a {
      color: black;
      text-decoration: none;
      float: left;
      padding: 8px 16px;
      /* 颜色改变过渡动画 0.3s */
      transition: background-color .3s;
      border: 1px solid #ededed;
      margin-right: 4px;
    }

    .container a:hover {
      background-color: #ddd;
      /* border-radius: 4px; */
    }

    /* 选中效果 */
    .container a.active {
      background-color: #4CAF50;
      color: white;
      /* border-radius: 4px; */
    }

    .container a:first-child {
      border-radius: 4px;
    }

    .container a:last-child {
      border-radius: 4px;
    }
  </style>
</head>

<body>

  <div class="center">
    <div class="container">
      <a href="#">«</a>
      <a class="active" href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">»</a>
    </div>
  </div>



</body>

</html>

运行效果：
在这里插入图片描述

17.2 示例二：面包屑

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      padding: 8px 16px;
      list-style: none;
      background-color: #eee;
    }

    .container a {
      display: inline-block;
      color: green;
      padding: 8px;
      text-decoration: none;
    }

    .container a+a:before {
      content: '/\00a0';
      padding-right: 8px;
    }
  </style>
</head>

<body>

  <div class="container">
    <a href="#">Home</a>
    <a href="#">VIP</a>
    <a href="#">Order</a>
    <a href="#">Mine</a>
  </div>

</body>

</html>

运行效果：

在这里插入图片描述

18、CSS 多列布局

CSS 多列布局允许我们轻松定义多列文本

18.1 CSS 多列属性

在这里插入图片描述

18.1.1 CSS 创建多列： `column-count`

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .columnexp {
      column-count: 3;
    }
  </style>
</head>

<body>

  <div class="columnexp">
    话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
  </div>

</body>

</html>

运行效果：
在这里插入图片描述

18.1.2 CSS 指定列之间的间隙：`column-gap`

 .columnexp {
      /* 列数 */
      column-count: 3;
      /* 列间距 */
      column-gap: 40px;
    }

18.1.3 CSS 列规则：`column-rule-style`

 .columnexp {
      /* 列数 */
      column-count: 3;
      /* 列间距 */
      column-gap: 40px;
      /* 列规则 */
      column-rule-style:solid
    }

运行效果：
在这里插入图片描述

18.1.4 CSS 列规则宽度：`column-rule-width`

  .columnexp {
      /* 列数 */
      column-count: 3;
      /* 列间距 */
      column-gap: 40px;
      /* 列规则 */
      column-rule-style:solid;
      /* 列规则宽度 */
      column-rule-width: 20px;
    }

运行效果：
在这里插入图片描述

18.1.5 CSS 列规则颜色：`column-rule-color`

.columnexp {
      /* 列数 */
      column-count: 3;
      /* 列间距 */
      column-gap: 40px;
      /* 列规则 */
      column-rule-style:solid;
      /* 列规则宽度 */
      column-rule-width: 20px;
      /* 列规则颜色 */
      column-rule-color: red;
    }

运行效果：
在这里插入图片描述

18.1.6 列规则简写：`column-rule`

  .columnexp {
      /* 列数 */
      column-count: 3;
      /* 列间距 */
      column-gap: 40px;
      /* 列规则 */
      /* column-rule-style:solid; */
      /* 列规则宽度 */
      /* column-rule-width: 20px; */
      /* 列规则颜色 */
      /* column-rule-color: red; */
      /* 列规则简写 */
      column-rule: 20px solid red;
    }

18.1.7 指定元素应该横跨多少列:`column-span`

column-span: all;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .columnexp {
      /* 列数 */
      column-count: 3;
      /* 列间距 */
      column-gap: 40px;
      /* 列规则简写 */
      column-rule: 20px solid red;
    }
    h2{
      column-span: all;
    }
  </style>
</head>

<body>

  <div class="columnexp">
    <h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
    话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
  </div>

</body>

</html>

运行效果：
在这里插入图片描述

column-span: none;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .columnexp {
      /* 列数 */
      column-count: 3;
      /* 列间距 */
      column-gap: 40px;
      /* 列规则简写 */
      column-rule: 20px solid red;
    }
    h2{
      column-span:none;
    }
  </style>
</head>

<body>

  <div class="columnexp">
    <h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
    话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
  </div>

</body>

</html>

运行效果：
在这里插入图片描述

18.1.8 指定列宽度：`column-width`

column-width 属性为列指定建议的最佳宽度。

文阿花

关注

13
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记之高级教程（三）

14、CSS 图像样式14.1 圆角图像：border-radius .img01 { width: 200px; height: auto; /* 四个角一致的圆角 */ border-radius: 10px; }14.2 圆形 .img02 { width: 200px; height: auto; /* 圆形 */ border-radius: 50%; }14.3
复制链接

扫一扫