CSS的元素类型--笔记回顾

最新推荐文章于 2024-09-25 16:29:08 发布

Li敢敢

最新推荐文章于 2024-09-25 16:29:08 发布

阅读量241

点赞数

分类专栏： HTML css文本和字体 css 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_47000934/article/details/109275199

版权

css 同时被 3 个专栏收录

10 篇文章 2 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

css文本和字体

5 篇文章 0 订阅

订阅专栏

CSS的元素类型--笔记回顾

1、块级元素和行内级元素
2、块级元素的由来
3、display的练习-邮箱列表
4、display的练习-分页列表
5、visibikity属性的使用

1、块级元素和行内级元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 200px;
      background: orange;
    } 
    .inner {
      height: 30px;
      background-color: #f00;
    }
    .p {
      background-color: #0f0;
    }
    span {
      background-color: #00f;
    }
    strong {
      background-color: #ffff00;
    }
  </style>
</head>
<body>
  <!-- 块级元素的特点：独占父元素一行
       行内级元素的特点：和其他元素可以在同一行显示
  -->
  <!-- 1.块级元素 -->
  <div class="box">
    <div class="inner"></div>
    <p class="p">我是段落</p>
  </div>
  <!-- 2.行内级元素 -->
  <span>我是span元素</span>
  <strong>我是strong元素</strong>
  <img src="../08_HTML其他元素/img/三大主流框架.PNG" alt="">
  <input type="text">
</body>
</html>

在这里插入图片描述

2、块级元素的由来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- dispaly四个常用值 -->
  <!-- block：让元素显示为块级元素 -->
  <!-- inline：让元素显示为行内级元素 -->
  <!-- none:隐藏元素 -->
  <!-- inline-block:让元素同时具备行内级\块级元素的特征 -->

  <!-- 有display:block；所以是块级元素 -->
  <div>div元素</div>
  <p>p元素</p>
  <h1>元素</h1>
  <a href="#">aa</a>


</body>
</html>

在这里插入图片描述

3、display的练习-邮箱列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 样式重置 */
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    a {
      text-decoration: none;
      color: #000;
    }

    /* 整体样式 */
    .mail {
      width: 100px;
      border: 2px solid #999;
      text-align: center;
    }

    .mail:hover ul {
      display: block;
      background-color: #fff;
    }

    /* 局部:header */
    /* .header:hover+ul{
      display: block;
      background-color: #f00;
    } */

    .header {
      background-color: #999;
      color: #fff;
    } 

    /* 局部:邮箱样式 */
    /* .mail ul {

    } */

    .mail ul li a:hover {
      background-color: skyblue;
    }

    .mail ul li a {
      display: block;
    }
  </style>
</head>
<body>
  <div class="mail">
    <div class="header">邮箱</div>
    <ul>
        <li><a href="#">QQ邮箱</a></li>
        <li><a href="#">163邮箱</a></li>
        <li><a href="#">139邮箱</a></li>
    </ul>
  </div>
</body>
</html>

在这里插入图片描述

4、display的练习-分页列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 1.样式重置 */
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    a {
      text-decoration: none;
      color: #0000cc;
    }

    /* 2.整体样式 */
    
    /* 3.每一个li的样式 */
    .page ul li {
      display: inline-block
    }

    .page ul li a {
      display: inline-block;
      width: 34px;
      height: 34px;
      border: 1px solid #e1e2e3;

      /* 居中 */
      text-align: center;
      line-height: 34px;

      /* 调整间距 */
      margin-right: 5px;
    }

    .page ul li a:hover {
      border: 1px solid #38f;
      background-color: #f2f8ff;
    }

    .page .prev a,.page .next a {
      /* 并集选择器 */
      width: 88px;
    }

    /* 4.点击后的a效果 */
    .page .active {
      width: 36px;
      height: 36px;
      line-height: 36px;
      border: none;
      font-weight: 700;
      color: #000;

    }

    .page .active:hover {
      border: none;
      background-color: transparent;
    }
  </style>
</head>
<body>
  <div class="page">
    <ul>
      <li class="prev"><a href="#">&lt;上一页</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#" class="active">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="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">10</a></li>
      <li class="next"><a href="#">下一页&gt;</a></li>
    </ul>
  </div>
</body>
</html>

在这里插入图片描述

5、visibikity属性的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: #f00;

      /* 隐藏div */
    /* 1.display:none div元素不再占据空间 */
    /* display: none; */

    /* 2.visibility:隐藏元素,依然占据空间 */
      visibility: hidden;
    }
    
  </style>
</head>
<body>
  <div>我是div元素</div>
  <p>我是段落</p>
</body>
</html>