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

文阿花2024-05-24 1:31

14、CSS 下拉菜单

14.1 示例1：普通弹窗

思路：弹窗内容先隐藏display: none;，:hover时候修改弹窗部分的 display: block;

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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>
    div.dropdown {
      position: relative;
      display: inline-block;
    }

    div.dropdown:hover .dropdown-content{
      display: block;
    }

    div.dropdown-content {
      display: none;
      position: absolute;
      background-color: red;
      min-width: 160px;
      border: 2px solid #666;
      padding: 12px 15px;
      z-index: 1;
    }
  </style>
</head>

<body>
  <h1>可悬停的下拉菜单</h1>
  <div class="dropdown">
    <p>把鼠标移动到下面文本上查看</p>
    <div class="dropdown-content">
      <p>Hello World</p>
    </div>
  </div>
</body>

</html>

鼠标悬停到p元素上后效果：

14.2 示例2：列表弹窗

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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>
    .button {
      display: inline;
      background-color: #4CAF50;
      padding: 10px 15px;
      font-size: 15px;
      color: white;
      border: none;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .dropdown-content{
      display: none;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 10px 15px;
      /* display: block; */
      min-width: 160px;
      background-color: #EDEDED;
      position: absolute;
    }

    .dropdown:hover .dropdown-content{
      display: block;
    }
  </style>
</head>

<body>
  <div>
    <h1>下拉菜单</h1>
    <p>把鼠标移动到按钮上，以打开下拉菜单</p>
    <div class="dropdown">
      <button class="button">dropdown</button>
      <div class="dropdown-content">
        <ul>
          <li>第一个</li>
          <li>第二个</li>
          <li>第三个</li>
        </ul>
      </div>
    </div>
    <p><b>Note:</b> 其他内容</p>
  </div>
</body>

</html>

运行效果：

14.3 示例3：下拉式图像

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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>
    .dropdown:hover .dropdown-content {
      display: block;
    }

    .dropdown-content {
      display: none;
    }
  </style>
</head>

<body>
  <div>
    <h1>下拉图片</h1>
    <p>把鼠标移动到图像上，以打开下拉内容</p>
    <div class="dropdown">
      <img src="imgs/icon_mess_sellorder.png" alt="pic" width="100px">
      <div class="dropdown-content">
        <img src="imgs/icon_mess_sellorder.png" alt="pic" width="300px">
      </div>
    </div>
    <p><b>Note:</b> 其他内容</p>
  </div>
</body>

</html>

运行效果：

14.4 示例4：下拉式导航

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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>
    ul {
      background-color: #333;
      overflow: hidden;
    }

    li {
      float: left;
      display: inline-block;

    }

    li a:hover {
      background-color: red;

    }

    li a {
      display: inline-block;
      color: white;
      padding: 10px;
      text-decoration: none;
    }

    div.dropdown_content {
      position: absolute;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      min-width: 160px;
      background-color: white;
      display: none;

    }

    .dropdown_content a {
      display: block;
      color: black;
      padding: 10px;
      text-decoration: none;
    }

    .dropdown_content a:hover {
      background-color: #EDEDED;
    }

    .dropdown:hover .dropdown_content {
      display: block;
    }
  </style>
</head>

<body>
  <div>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">News</a></li>
      <li class="dropdown"><a href="">DropDown</a>
        <div class="dropdown_content">
          <a href="">第一个</a>
          <a href="">第二个</a>
          <a href="">第三个</a>
        </div>

      </li>

    </ul>
  </div>

</body>

</html>

运行效果：

15、CSS 属性选择器

  • 为带有特定属性的 HTML 元素设置样式

15.1 CSS [attribute] 选择器（指定属性）

  • [attribute] 选择器用于选取带有指定属性的元素。

下例选择所有带有 target 属性的 <a> 元素；

html 复制代码 
 a[target]{
    background-color: yellow;
   }
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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>
   a[target]{
    background-color: yellow;
   }
  </style>
</head>

<body>
  <a href="" target="_blank">第一个</a>
  <a href="" >第二个</a>
  <a href="" target="_top">第三个</a>

</body>

</html>

运行效果：

15.2 CSS [attribute="value"] 选择器（指定属性和值）

  • [attribute="value"] 选择器用于选取带有指定属性和值的元素。

下例选取所有带有 target="_blank" 属性的 <a> 元素：

html 复制代码 
a[target='_blank']{
    background-color: yellow;
   }
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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>
   a[target='_blank']{
    background-color: yellow;
   }
  </style>
</head>

<body>
  <a href="" target="_blank">第一个</a>
  <a href="" >第二个</a>
  <a href="" target="_top">第三个</a>

</body>

</html>

运行效果：

15.3 CSS [attribute~="value"] 选择器（包含指定词的元素）

  • [attribute~="value"] 选择器选取属性值包含指定词的元素。

下例选取 title 属性包含 "flower" 单词的所有元素：

（该例子会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。）

html 复制代码 
 [title~=flower] {
      background-color: yellow;
    }
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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>
    [title~=flower] {
      background-color: yellow;
    }
  </style>
</head>

<body>

  <img src="imgs/icon_mess_sellorder.png" alt="pic" title="flower" width="100px">
  <img src="imgs/icon_mess_sellorder.png" alt="pic" title="key flower" width="100px">
  <img src="imgs/icon_mess_sellorder.png" alt="pic" title="tree" width="100px">

</body>

</html>

运行效果：

15.4 CSS [attribute|="value"] 选择器（指定完整值开头的元素）

  • [attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。
  • 注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。
html 复制代码 
[class|=top]{
      background-color: yellow;
    }
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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>

    [class|=top]{
      background-color: yellow;
    }
    
  </style>
</head>

<body>

  <h1 class="top-01">标题</h1>
  <p class="top-02">内容1</p>
  <p class="topaaa">内容2</p>

</body>

</html>

运行效果：

注意：class刚开始命名时候使用的是下划线top_01结果不起作用，更换成top-01后才起作用

15.5 CSS [attribute^="value"] 选择器（以指定非完整值开头的元素）

  • [attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。
  • 提示：值不必是完整单词！
html 复制代码 
[class^="top"] {
  background: yellow;
}
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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>

    [class^='top']{
      background-color: yellow;
    }
    
  </style>
</head>

<body>

  <h1 class="top-01">标题</h1>
  <p class="top-02">内容1</p>
  <p class="topaaa">内容2</p>

</body>

</html>

运行效果：

15.6 CSS [attribute$="value"] 选择器（以指定值结尾的元素）

  • [attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。
  • 提示：值不必是完整单词！
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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>

    [class$='end']{
      background-color: yellow;
    }
    
  </style>
</head>

<body>

  <h1 class="01-end">标题</h1>
  <p class="01end">内容1</p>
  <p class="end">内容2</p>
  <p class="aaa"> 内容3</p>

</body>

</html>

运行效果：

15.7 CSS [attribute*="value"] 选择器（包含指定词的元素）

  • [attribute*="value"] 选择器选取属性值包含指定词的元素。
  • 提示：值不必是完整单词！
html 复制代码 
 [class*='end']{
      background-color: yellow;
    }
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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>

    [class*='end']{
      background-color: yellow;
    }
    
  </style>
</head>

<body>

  <h1 class="01-end">标题</h1>
  <p class="01end01">内容1</p>
  <p class="end">内容2</p>
  <p class="aaa"> 内容3</p>

</body>

</html>

运行效果：

15.8 所有 CSS 属性选择器

16、CSS 表单

  • 通过CSS改善表单的展示样式

16.2 示例：实现如下图中样式

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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>
    .kuang {
      background-color: #EDEDED;
      border: none;
      margin: 10px;
      padding: 10px;
      border-radius: 4px;
    }

    input[type='text'],
    select {
      width: 100%;
      padding: 10px 12px;
      margin: 10px 0px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 15px;
      color: #333;
      box-sizing: border-box;

      -webkit-transition: 0.5s;
      transition: 0.5s;
      /*  获取焦点修改border的话需要设置outline: none*/
      outline: none;
    }

    input[type='submit'] {
      width: 100%;
      height: 45px;
      background-color: #4CAF50;
      border: none;
      border-radius: 4px;
      color: white;
      font-size: 15px;
      margin-top: 10px;
      margin-bottom: 5px;
    }

    /* 获取焦点 */
    input[type='text']:focus {
      background-color: antiquewhite;
      border: 1px solid #333;
    }
  </style>
</head>

<body>

  <form class="kuang" action="html_jump_page.html">
    <label for="fname">姓：</label>
    <input type="text" id="fname" name="firstname" placeholder="请输入您的姓...">


    <label for="sname">名：</label>
    <input type="text" id="sname" name="seconednmae" placeholder="请输入您的名...">


    <label for="country">城市：</label>
    <select name="country" id="country">
      <option value="zz">郑州</option>
      <option value="ny">南阳</option>
      <option value="kf">开封</option>
    </select>

    <input type="submit" value="提交">
  </form>


</body>

</html>

注意：请注意，我们已将 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框。
box-sizing 属性可以被用来调整这些表现:

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

border-box width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

这里的维度计算为： width = border + padding + 内容的 width， height = border + padding + 内容的 height。

16.2 带有图标/图像的输入框

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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>
    .kuang {
      background-color: #EDEDED;
      padding: 10px;
      margin: 10px;
      border-radius: 4px;
    }

    input[type='text'] {
      width: 100%;
      margin-top: 10px;
      height: 35px;
      font-size: 15px;
      padding-left: 30px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-image: url('imgs/search.png');
      background-repeat: no-repeat;
      background-position: 10px 10px;
      background-size: 15px;
      outline: none;
      margin-right: 20px;
      /* 重要 */
      box-sizing: border-box;

    }
  </style>
</head>

<body>
<div class="kuang">
  <form action="html_jump_page.html" >
    <label for="search">搜索</label>
    <input type="text" id="search" name="searchname" placeholder="加油站名称">

  </form>

</div>
 


</body>

</html>

运行效果：

16.3 设置文本域的样式（多行输入textarea）

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>
  <link rel="stylesheet" href="css/baseStyle.css">
  <style>
    textarea {
      /* 禁止右下角可调整大小功能 */
      resize: none;
      font-size: 15px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin: 10px;
      height: 150px;
      width: 500px;
      outline: none;
    }
  </style>
</head>

<body>
  <form action="html_jump_page.html">
    <textarea name="content" id="content" cols="30" rows="10" placeholder="请输入内容..."></textarea>
  </form>



</body>

</html>

运行效果：

17 、CSS 计数器

CSS 计数器

18、CSS 网站布局


缩小页面后：


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>
  <!-- <link rel="stylesheet" href="css/baseStyle.css"> -->
  <style>
    * {
      box-sizing: border-box;
      margin: 0px;
      padding: 0px;
    }

    body {
      background-color: #EDEDED;
    }

    .header {
      background-color: white;
      text-align: center;
      padding: 30px;
      margin-top: 20px;
      margin-left: 20px;
      margin-right: 20px;
    }

    /* 清除浮动 */
    .row::after {
      content: "";
      display: table;
      clear: both;
    }

    .row {
      margin-right: 20px;
    }

    .topnav {
      background-color: #333;
      overflow: hidden;
      margin-left: 20px;
      margin-right: 20px;
    }

    .topnav a {
      float: left;
      display: inline-block;
      color: white;
      font-size: 16px;
      text-decoration: none;
      padding: 15px 20px;
    }

    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    .leftpart {
      width: 75%;
      float: left;
    }

    .rightpart {
      width: 25%;
      float: right;
    }

    .card {
      margin-top: 20px;
      margin-left: 20px;
      /* margin: 20px; */
      background-color: white;
      padding: 30px;
    }

    .imagepart {
      height: 200px;
      background-color: #aaa;
      padding: 20px;
      margin-bottom: 20px;
    }

    .imagepart02 {
      height: 80px;
      background-color: #aaa;
      padding: 20px;
    }

    .footerpart {
      background-color: #ddd;
      padding: 30px 20px;
      margin: 20px;
      text-align: center;
    }


    /* 响应式布局 - 当屏幕的宽度小于 800 像素时，使两列堆叠而不是并排 */
    @media screen and (max-width: 800px) {

      .leftpart,
      .rightpart {
        width: 100%;
        padding: 0;
      }
    }

    /* 响应式布局 - 当屏幕的宽度小于 400 像素时，使导航链接堆叠而不是并排 */
    @media screen and (max-width: 400px) {
      .topnav a {
        float: none;
        width: 100%;
      }
    }
  </style>
</head>

<body>

  <!-- 页眉 -->
  <div class="header">
    <h1>My Website</h1>
    <p>Resize the browser window to see the effect.</p>
  </div>

  <!-- 导航 -->
  <div class="topnav">
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="" style="float: right;">Link</a>
    </ul>
  </div>

  <div class="row">
    <div class="leftpart">
      <!-- TITLE HEADING  -->
      <div class="card">
        <h1 style="padding-bottom: 15px;">TITLE HEADING</h1>
        <h6 style="padding-bottom: 15px;">Title description, Dec 7, 2017</h6>
        <div class="imagepart">Image</div>
        <p style="padding-bottom: 15px;">Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco.
        </p>
      </div>

      <!-- TITLE HEADING  -->
      <div class="card">
        <h1 style="padding-bottom: 15px;">TITLE HEADING</h1>
        <h6 style="padding-bottom: 15px;">Title description, Dec 7, 2017</h6>
        <div class="imagepart">Image</div>
        <p style="padding-bottom: 15px;">Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco.
        </p>
      </div>

    </div>

    <div class="rightpart">
      <!-- About Me -->
      <div class="card">
        <h1 style="padding-bottom: 15px;">About Me</h1>
        <div class="imagepart">Image</div>
        <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      </div>

      <!-- Popular Post -->
      <div class="card">
        <h1 style="padding-bottom: 15px;">Popular Post</h1>
        <div class="imagepart02">Image</div>
        <div class="imagepart02">Image</div>
        <div class="imagepart02">Image</div>
      </div>

      <!-- Follow Me -->
      <div class="card">
        <h1 style="padding-bottom: 15px;">Follow Me</h1>
        <p style="padding-bottom: 15px;">Some text..</p>
      </div>
    </div>

   
  </div>

 <!-- Footer -->
 <div class="footerpart">
  <h1>Footer</h1>
</div>


</body>

</html>

19、CSS 特异性

CSS 特异性

相关推荐
观鉴词recommend1 分钟前
【c++刷题笔记-动态规划】day32： 509. 斐波那契数 、 70. 爬楼梯 、 746. 使用最小花费爬楼梯
c++·笔记·算法·leetcode·动态规划
whatever who cares17 分钟前
macOS笔记
笔记·macos
m0_6896182834 分钟前
生物墨水：3D组织生物打印的基石
人工智能·笔记
Tassel_YUE1 小时前
linux修改内核实现禁止被ping
linux·运维·笔记
安冬的码畜日常1 小时前
【CSS in Depth 2精译】2.5 无单位的数值与行高
前端·css
ilisi_1 小时前
导航栏样式，盒子模型
前端·javascript·css
sealaugh321 小时前
spring boot(学习笔记第十二课)
spring boot·笔记·学习
观鉴词recommend1 小时前
【c++刷题笔记-贪心】day28： 134. 加油站 、 135. 分发糖果 、860.柠檬水找零 、 406.根据身高重建队列
c++·笔记·算法·leetcode
会翻身的嵌入式咸鱼2 小时前
蓝桥杯开发板STM32G431RBT6高阶HAL库学习FreeRtos——完成第一个小项目点灯
stm32·学习·蓝桥杯
Alice_JC2 小时前
《昇思25天学习打卡营第11天|计算机视觉-ResNet50迁移学习》
深度学习·学习·计算机视觉·迁移学习
热门推荐
012024年江苏省研究生数学建模科研创新实践大赛C题气象数据高精度融合技术研究论文和代码分析02Coze扣子平台完整体验和实践（附国内和国际版对比）03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）042024亚太赛（中文赛）数学建模竞赛选题建议+初步分析05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【经验分享】Ubuntu22.04安装微信(linux官方版)072024 年第十四届 APMCM 亚太地区大学生数学建模竞赛B题超详细解题思路+数据预处理问题一代码分享082025张宇考研数学，百度网盘视频课+36讲PDF讲义+真题09【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解10通用大模型VS垂直大模型，你更青睐哪一方？