基础选择器

css定义

层叠样式表.是一种样式表语言,用来描述html文档的呈现(美化内容)

书写位置: title标签下方,添加style双标签,style标签内书写css代码

<title>Title</title>
  <style>
      /*选择器 {*/
      /*}*/
      p {
          /*css属性*/
          color: red;
          font-size: 30px;
      }
  </style>
</head>
<body>
<p>体验css</p>
</body>
</html>

image-20240203231125741

  • 键值对:属性名和属性值成对出现,比如上述的color和font-size

css引入方式

image-20240203232107220

link引入外部样式表,stylesheet即css样式表,href为路径,和内部样式表一样放在title下引用

外部样式

/*此文件存放css代码*/
p {
    color:red;
    font-size: 45px;
}
<title>Title</title>
  <link rel="stylesheet" href="my.css">
</head>
<body>
<p>测试css</p>
<div style="color: green;font-size: 25px;">这是div</div>
</body>
</html>

image-20240203232226649

标签和类

查找标签,设置样式

基础选择器:

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

标签选择器

使用标签名作为选择器->选中同名标签设置相同的样式

例如:p,h1,div等等

无法差异化同名标签的样式

 <title>Title</title>
  <style>
    p {
        color: red;
    }
  </style>
</head>
<body>
<p>这是p标签</p>
<p>11231</p>
<p>332314</p>
</body>
</html>

image-20240203232819669

类选择器

查找标签,差异化设置标签的显示效果

步骤:

  • 定义类的选择器->.类名
  • 使用类选择器 -> 标签添加class=”类名”

类选择器可以同时使用多个

  <title>Title</title>
  <style>
    .red {
        color: red;
    }
    .size {
        font-size: 50px;
    }
  </style>
</head>
<body>
<div class="red size">这是一个div小盒子</div>
<p class="red">这是一个p段落</p>
</body>

image-20240203235208720

类名见名知义,如果需要多个单词,可以用-连接,比如news-hd

id选择器

查找标签,差异化设置标签的显示效果

id选择器一般配合JavaScript使用

步骤:

  • 定义id选择器:#id=”id名”
  • 使用id选择器:标签添加id=”id名 “
  <title>Title</title>
  <style>
    #red {
        color: red;
    }

  </style>
</head>
<body>
<div id="red">这是一个div标签</div>
</body>

image-20240204000058828

通配符选择器

查找页面所有标签,设置相同样式

*,不需要调用,浏览器自动查找页面所有标签,设置相同的样式

一般用于设计初期清除标签的默认样式

  <title>Title</title>
  <style>
    * {
        color: red;
    }
  </style>
</head>
<body>
<p>标签</p>
<div>标签</div>
<h1>标签</h1>
</body>

image-20240204000343094

画盒子

选择合适的选择器画盒子

image-20240204001520392

  <title>Title</title>
  <style>
  .div1 {
      background-color: red;
      width: 100px;
      height: 100px;
  }
  .div2 {
      background-color: orange;
      width: 200px;
      height: 200px;
  }
  </style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>

image-20240204001939340

文字控制属性

image-20240204002059415

font-weight取值范围

image-20240204002917257

font-style取值效果

normal 正常

italic 倾斜

line-height行高

设置多行文本的间距

行高:上间距+文本高度+下间距

属性值:

  • 数字+px

  • 数字,当前标签font-size的倍数

设置行高垂直居中:让行高属性值等于盒子高度属性值,此方法只适用于单行文字

font-family字体族

设置文字字体

当字体名有多个,各个字体名用逗号隔开执行顺序是从左到右依次查找可生效字体

  • font-family属性最后设置一个字体族名,网页开发建议使用无衬线字体

font复合属性

一次性设置多个属性

font: font-style font-weight font-size/line-height font-family

  • 是否倾斜 是否加粗 字号/行高 字体(必须按顺序依次写)
  • 字号和字体值必须书写
font: italic 700 100px/2 楷体;

一般用于设置网络公共样式

text-indent文本缩进

属性值:

  • 数字+px
  • 数字+em(1em=当前标签字号大小)

text-align对齐方式

left,center,right分别为左对齐,居中对齐,右对齐

图片居中

将图片放进居中的盒子里即可

  <title>Title</title>
  <style>
      div {
          text-align: center;
          background-color: white;
          font-size: 16px;
      }
  </style>
</head>
<body>
<div>
  <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.AfnOT_AV4IS_HCpz-I4WmQHaJQ?w=180&h=220&c=7&r=0&o=5&dpr=1.2&pid=1.7"
       alt="耳机图片"
       title="air">
  <h2>Xiaomi Buds 4 Pro</h2>
  <span style="color: darkgray;line-height: 8px;">48dB只能动态降噪 | 骨声纹通话降噪</span>
  <br>
  <span style="color: orange;text-align: center">999元</span>
  <span style="text-decoration: line-through;color: darkgray">1099元</span>
  <br>
</div>
</body>

image-20240204015351019

text-decoration文本修饰线

image-20240204015502531

color文字颜色

image-20240204015747834

调试工具

  • f12打开调试工具

  • 使用调试工具

    出现相应面板

    image-20240204020624828点击左上角箭头自由选择网页元素,代码中会自动强调相应部分,如果代码出现问题,会有红色的删除线标注在html或css代码中

    点击可能出现的元素也可以查看问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      /*浏览器默认大小为16px*/
      p {
          /*font-size数值必须有单位,否则不生效*/
          font-size: 16px;
          font-weight: 700;
          font-style: italic;
          line-height: 2;
          font-family: 华文宋体;
          text-indent: 2em;
          color: rgba(0,0,0,0.3);
          background-color: cornsilk;
      }

      div {
          height: 100px;
          background-color: skyblue;
          line-height: 100px;
          font-family: 华文新魏;
          text-align: center;
          color: rgb(255,0,0);
      }
      span {
          font: italic 700 100px/2 楷体;
      }
  </style>
</head>
<body>
<p>测试文字属性</p>
<hr>
<p>
  近日，韩国现代汽车集团向美国提交意见书，指出将“受关注外国实体”从电动汽车电池供应链中剔除不现实。现代汽车针对的是1月起生效的美国《通胀削减法案》电动汽车补贴细则，不满的是细则欲将中国企业排除在电池供应链外。此项歧视性贸易保护主义措施目的很明显，就是想把电动汽车产业链拉回美国，与美国政府当前实施的半导体“脱钩”政策如出一辙。不同之处在于，美国这次“脱钩”更加困难重重，因为在电动汽车电池领域，中国企业处于绝对主导地位。也正因此，上述措施一推行就引起日韩甚至美国本国车企的阵痛和反对。</p>
<div>垂直居中&nbsp;&nbsp;&nbsp;水平居中</div>
<span>font属性设置</span>
</body>
</html>

image-20240204021317038

综合案例

思路

  1. 从上到下,先整体再局部
  2. 先标签,再css美化

新闻详情

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      h1 {
          text-align: center;
          font-weight: 400;
          font-size: 30px;
          color: #333;
      }

      div {
          font-size: 14px;
          color: #999;
      }

      p {
          text-indent: 2em;
          font-size: 18px;
          color: #333333;
      }
      .center{
          text-align: center;
      }
  </style>
</head>
<body>
<h1>《中国记者》：大象新闻“豫头条”重塑地方党媒时政报道新方式</h1>
<div>来源: 2024-02-01 10:18:29发布于河南河南广电集团《大象新闻》官方账号</div>
<p><strong>央视网消息:</strong>
  新传播形势下，如何做出受众愿意看、看得懂、主动转的时政报道？面对愈加年轻的新生代读者群体，如何站稳百姓视角，解读好一省发展大计？对于地方党媒来说，在移动传播场景下，保持年轻态，这是一个事关未来发展的核心命题。
</p>
<div class="center">
<img src="https://inews.gtimg.com/om_bt/OJtA49qys9Klrjed-kHUxi5xESpOGyRuR_K5PDOrK8L4IAA/641" alt="新闻报"
title="中国记者报导">
<img src="https://inews.gtimg.com/om_bt/OkHcMrQmp56ob5bmegjCcrf5gvw6X3Ngk5ZZua8PEm7UMAA/641" alt="新闻报"
     title="中国记者报导">
</div>
<p>2022年9月，河南广播电视台大象新闻集合优势兵力，面向移动端，创立了时政品牌栏目“豫头条”，重塑地方党媒时政报道方式。作为主打“年轻”的时政新媒体栏目，一年多来，“豫头条”以“河南新闻联播”为基础，以新视角、新思考探寻时政新闻新表达，更深一度观察河南政经大势。在众声喧哗的舆论场上，“豫头条”以角度赢得流量、以深度彰显质量、以温度成就分量，更以态度让出彩成为常量，在新媒体端收获了大批年轻粉丝。</p>
<p>在各类新闻类型中，时政新闻天然与网民有距离，若在做新媒体时还是一副长者相、满是说教腔，势必不会受到年轻网友的关注。如何让时政新闻年轻起来，也像民生新闻那样成为频频刷屏的爆款？这是地方党媒共同面对的问题，也是大象新闻在打造“豫头条”栏目过程中，所探寻的方向。</p>
<div class="center">
  <img src="https://inews.gtimg.com/om_bt/OpucN7vjYi9jDkHjn4vwpLlUklq2DlJFzQGxDxhDlV7_IAA/641">
</div>
</body>
</html>

效果

image-20240204022537600

CSS简介

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    h1 {
        color: #333333;
    }
    p {
        text-indent: 2em;
        font-size: 14px;
        color: #444;
        line-height: 30px;
    }
    a {
        color: #0069c2;
    }
    li {
        font-size: 14px;
        color: #444;
        line-height: 30px;
    }
  </style>
</head>
<body>
<h1>CSS：(层叠样式表)</h1>
<p>层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种<a href="#">样式表</a>语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。</p>
<p><strong>CSS 是开放 Web 的核心语言之一</strong>，并根据 W3C 规范在 Web 浏览器中进行了标准化。以前，CSS 规范的各个部分的开发是同步进行的，这种方式允许对最新推荐的 CSS 版本进行控制。你可能已经听说过 CSS1、CSS2.1 甚至 CSS3。但是以后将不会再有 CSS3 或者 CSS4；相反，现在的一切都是没有版本号的 CSS。</p>
<ul>
  <li>CSS 介绍:如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础文章以学习 CSS 的含义和用法。</li>
  <li>CSS 教程:我们的 CSS 学习区包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</li>
  <li>CSS 参考:我们针对资深 Web 开发者编写的<a href="#">详细参考手册</a>，描述了 CSS 的各个属性与概念。</li>
</ul>
</body>
</html>

image-20240204023422841

复合选择器

由两个或多个基础选择器,通过不同的方式组合而成

后代选择器

选中某元素的后代元素

写法: 父选择器 子选择器{属性},父子选择器用空格隔开

  <title>Title</title>
  <style>
    div span {
        color: red;
    }
  </style>
</head>
<body>
<span>这是span标签</span>
<br>
<div>
  这是div儿子<span>span</span>
  <p>
    <span>这是孙子span</span>
  </p>
</div>
</body>

image-20240204181256954

子代选择器

选择某元素的子代元素

写法:父选择器 > 子选择器,父子选择器用>隔开

  <title>Title</title>
  <style>
      div>span {
          color: red;
      }
  </style>
</head>
<body>
<span>这是span标签</span>
<br>
<div>
  这是div儿子<span>span</span>
  <p>
    <span>这是孙子span</span>
  </p>
</div>
</body>

image-20240204181501029

并集选择器

选择多种标签设置相同的样式

写法:选择器1,选择器2,…,选择器n{选择器属性},选择器之间用,隔开

  <title>Title</title>
  <style>
    div,
    p,
    span {
        ;
    color: red;
  </style>
</head>
<body>
<div> div标签</div>
<p>p标签</p>
<span>span标签</span>
</body>

image-20240204191319169

交集选择器

选中同时满足多个条件的元素

写法:选择器1选择器2{css属性},选择器之间连写 

  <title>Title</title>
  <style>
    .box {
        color: red;
    }
    p.box {
        color: #0076ce;
    }
  </style>
</head>
<body>
<!--使用p标签的同时使用box类选择器生效-->
<p class="box">p标签,使用box类选择器</p>
<p>p标签</p>
<div class="box">div,标签,使用box类选择器</div>
</body>

image-20240204191837644

伪类选择器

伪类表示元素状态,选中元素的某个状态设置样式

鼠标悬停状态: 选择器:hover{CSS属性}

  <style>
    a:hover {
        color: red;
    }
    .box:hover {
        color: green;
    }
  </style>
</head>
<body>
<a href="#">鼠标悬停测试</a>
<div class="box">鼠标悬停测试</div>
</body>

image-20240204192702380

伪类超链接

image-20240204193147009

如果要给超链接设置以上四个状态,要按照LVHA的顺序书写

  <title>Title</title>
  <style>
    a:link {
        color: #0076ce;
    }
    a:visited {
        color: green;
    }
    a:hover {
        color: orange;
    }
    a:active {
        color: aqua;
    }
  </style>
</head>
<body>
<a href="#">a标签,测试伪类</a>
</body>

image-20240204193542794

CSS特性

  • 继承性

    子级默认继承父级的文字控制属性

    如果标签有自己的相应属性,则不继承对应的属性

      <title>Title</title>
      <style>
        body {
            font-size: 30px;
            color: red;
        }
      </style>
    </head>
    <body>
    <p>这是p标签</p>
    <span>这是span标签</span>
    <h1>这是h1标签</h1>
    <a href="#">这是a标签</a>
    </body>

    image-20240204195340806

  • 层叠性

    • 相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性

    • 不同的属性会叠加:不同的CSS属性都生效

        <style>
          div {
              color: red;
              font-weight: 700;
          }
          div {
              color: green;
              font-size: 30px;
          }
        </style>
      </head>
      <body>
      <div>div标签</div>
      </body>

      image-20240204195135203

  • 优先级

    权重,当一个标签使用了多种选择器时, 基于不同种类的选择器的匹配规则

      <style>
        div {
            color: red;
        }
        .box {
            color: green;
        }
      </style>
    </head>
    <body>
    <div class="box">这是div标签</div>
    </body>

    规则:image-20240204195858740

    选择器标签选中的范围越大,优先级越低

image-20240204195815241

优先级叠加计算规则

如果是复合选择器,则需要权重叠加计算

image-20240204200620699

Emmet写法

vscode代码的简写方法,输入缩写会自动生成相应代码

webstorm下载emmet everywhere插件,通过tab键生成对应代码

  • html

    image-20240204202609522

<body>
<!--.box-->
<div class="box"></div>
<!--span.box-->
<span class="box"></span>
<!--span#box-->
<span id="box"></span>
<!--span+p-->
<span></span>
<p></p>
<!--span>p-->
<span>
  <p>1</p>
</span>
<!--span*3-->
<span></span><span></span><span></span>
<!--span{111}-->
<span>111</span>
</body>

  • css

    css一般以属性首字母生成对应代码

<style>
    .box {
        color: red;
    }
    div {
    /*    w*/
        width: 500px;
    /*    h30*/
        height: 30px;
    /*    bgc*/
        background-color: #fff;
    }
    span {
    /*    w500+h300+bgc*/
        width: 500px;
        height: 300px;
        background-color: #fff;
    }
</style>

背景属性

拆分写法

image-20240204204640207

  • background-repeat

    image-20240204205201962

  • background-position

    • 关键字

      image-20240204205839520

    • 坐标(数字+px,正负都可以)

  • background-size

    • 关键字

      cover:等比例缩放直到完全覆盖背景区,可能图片部分看不见

      contain:等比例缩放直到完全装入背景区,可能背景区部分空白

    • 百分比;根据盒子尺寸计算大小

      100%时图片的宽度与盒子宽度相等

    • 数字+单位:px

  • background-attachment

    背景不会随着元素内容滚动(拖拽滚动条,背景不动)

复合属性

属性值:背景色 背景图 背景平铺 背景位置/背景缩放 背景固定(空格隔开,不区分顺序)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
        width: 800px;
        height: 800px;
        /*背景图默认平铺效果,即图片过小不足以达到尺寸时自动复制几张填充*/
        background-color: pink;
        background-image: url(https://lupic.cdn.bcebos.com/20200412/3059475153_14_747_533.jpg);
        background-repeat: no-repeat;
        /*如果只写一个关键字,另一个默认居中*/
        /*关键字可以颠倒顺序*/
        background-position: center center;
        background-size: cover;
        background-attachment: fixed;
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>

image-20240204211939279

显示模式

布局网页的时候,根据标签的显示模式选择合适的标签摆放内容

  • 块级元素
    • 独占一行
    • 宽度默认是父级的100%
    • 添加宽高属性生效
  • 行内元素
    • 一行共存多个
    • 由内容撑开尺寸
    • 宽高不生效
  • 行内块元素
    • 一行共存多个
    • 尺寸由内容撑开
    • 宽高生效
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      div {
          width: 100px;
          height: 100px;
      }

      .div1 {
          background-color: red;
      }

      .div2 {
          background-color: orange;
      }

      span {
          width: 100px;
          height: 100px;
      }

      .span1 {
          background-color: red;
      }

      .span2 {
          background-color: orange;
      }
  </style>
</head>
<body>
<!--块元素-->
<div class="div1">div标签1</div>
<div class="div2">div标签2</div>
<!--行内元素-->
<span class="span1">span标签1111</span>
<span class="span2">span标签2222</span>
<!--行内块元素-->
<img src="https://ts1.cn.mm.bing.net/th?id=ORMS.be86f8b8e006d658c5f6051b1a506622&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.2187498807907104&p=0">
<img src="https://ts1.cn.mm.bing.net/th?id=ORMS.be86f8b8e006d658c5f6051b1a506622&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.2187498807907104&p=0">
</body>
</html>

转换显示模式

属性名 display

image-20240204214404783

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      div {
          width: 100px;
          height: 100px;
          display: inline-block;
      }

      .div1 {
          background-color: red;
      }

      .div2 {
          background-color: orange;
      }

      span {
          width: 100px;
          height: 100px;
          display: block;
      }

      .span1 {
          background-color: red;
      }

      .span2 {
          background-color: orange;
      }
      img {
          display: block;
      }
  </style>
</head>
<body>
<!--块元素-->
<div class="div1">div标签1</div>
<div class="div2">div标签2</div>
<!--行内元素-->
<span class="span1">span标签1111</span>
<span class="span2">span标签2222</span>
<!--行内块元素-->
<img src="https://ts1.cn.mm.bing.net/th?id=ORMS.be86f8b8e006d658c5f6051b1a506622&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.2187498807907104&p=0">
<img src="https://ts1.cn.mm.bing.net/th?id=ORMS.be86f8b8e006d658c5f6051b1a506622&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.2187498807907104&p=0">
</body>
</html>

image-20240204214710850

综合案例

热词

	<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    a {
        display: block;
        width: 200px;
        height: 80px;
        text-align: center;
        color: white;
        text-decoration: none;
        line-height: 80px;
        font-size: 18px;
        background-color: #3064bb;
    }
    a:hover {
        background-color: #608dd9;
    }
  </style>
</head>
<body>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
</body>
</html>

效果

image-20240204221008288

banner效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .banner {
          height: 500px;
          background-color: #f3f3f4;
          background-image: url(https://upload.shejihz.com/2020/02/dc3f75d941d12dafa7a3a9f2f7e13b29.jpg);
          background-repeat: no-repeat;
          background-position: left bottom;
          background-size: contain;

          /*继承给子级*/
          text-align: right;
          color: #333;
      }
      .banner h2 {
          font-size: 32px;
          font-weight: 400;
          line-height: 100px;
      }
      .banner p {
          font-size: 20px;
      }
      .banner a {
          display: inline-block;
          width: 125px;
          height: 40px;
          background-color: orangered;
          text-decoration: none;
          text-align: center;
          line-height: 40px;
          color: white;
          font-size: 20px;
      }
  </style>
</head>
<body>
<div class="banner">
  <h2>让创造产生价值</h2>
  <p>我们希望小游戏平台可以提供无限的可能性,让每一个创造者都可以将他们的才华和创意传递给用户.</p>
  <a href="#">我要报名</a>
</div>
</body>
</html>

image-20240204222851589

选择器拓展

结构伪类效果

根据元素的结构关系查找元素

image-20240207184310933

  • nth-child公式

    image-20240207184842879

  <style>
    li:first-child {
        background-color: mediumspringgreen;
    }
    li:last-child {
        background-color: red;
    }
    li:nth-child(3) {
        background-color: beige;
    }
    li:nth-child(2n) {
        color: red;
    }
    li:nth-child(n+5):nth-child(-n+8) {
        font-size: 30px;
    }
  </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
</body>

image-20240207185554491

伪元素选择器

创建虚拟元素(伪元素),用来摆放装饰性内容

​ image-20240207185808100

  • 必须设置content:””属性,用来设置伪元素的内容,如果没有内容,引号留空
  • 伪元素默认是行内显示模式
  • 权重和标签选择器相同
  <style>
    div {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    div::before {
        display: block;
        width: 100px;
        height: 100px;
        background-color: brown;
        content: "老鼠";
    }
    div::after {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: white;
        content: "大米";
    }
  </style>
</head>
<body>
<div>爱</div>
</body>

PxCook

image-20240207195129582

相关操作请查阅视频

盒子模型

布局网页,摆放盒子和内容

image-20240207201542022

	  <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        padding: 20px;
        border: 1px solid #000;
        margin: 50px;
    }
  </style>
</head>
<body>
<div>div标签</div>
</body>

image-20240207204025019

边框线

属性:

像素大小 线条 颜色

线条

  • 实线solid
  • 虚线dashed
  • 点线dotted\
  <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;

        border: 2px dotted red;
    }
  </style>
</head>
<body>
<div>div 标签</div>
</body>

image-20240207205442281

单方向边框线

属性名:border-方位名top,bottom,right,left

  <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;

        border-top: 2px solid #000;
        border-bottom: 5px dotted green;
        border-right: 2px dashed red;
        border-left: 10px solid orange;
    }
  </style>
</head>
<body>
<div>div 标签</div>
</body>

image-20240207205758547

内边距

设置内容与盒子之间的距离

属性名:padding/padding-方位名词

多值写法: image-20240207210653504

  <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;

        /*padding: 20px;*/
        /*padding-top: 10px;*/
        /*padding-right: 20px;*/
        /*padding-bottom: 40px;*/
        /*padding-left: 80px;*/
        padding: 10px 20px 30px 40px;
    }
  </style>
</head>
<body>
<div>div 标签</div>
</body>

image-20240207210957011

尺寸计算

盒子尺寸=内容尺寸+border尺寸+内边距尺寸

给盒子加border或者padding属性会增大盒子尺寸

方法:

  1. 手动做减法
  2. 内减模式:box-sizing: border-box
  <style>
      div {
          width: 200px;
          height: 200px;
          background-color: pink;

          padding: 20px;
          box-sizing: border-box;
      }
  </style>
</head>
<body>
<div>div标签</div>
</body>

image-20240207212800116

外边距

拉开两个盒子之间的距离

属性名:margin

  <style>
    div {
        width: 1000px;
        height: 200px;
        background-color: pink;

        /*margin: 50px;*/
        /*margin: 10px 20px 30px 40px;*/

        /*版心居中*/
        margin: auto;
    }
  </style>
</head>
<body>
<div>版心内容</div>
</body>

image-20240207214353726

版心居中需要盒子具有宽度属性

清除默认样式

清除标签默认样式,比如:默认的内外间距

方法:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 去掉列表符号 */
li {
	list-style: none;
}

overflow属性

控制溢出元素的内容显示方式

image-20240207215752036

  <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;

        overflow: auto;
    }
  </style>
</head>
<body>
<div>
  内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出 内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出 内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出
</div>
</body>

image-20240207220044891

外边距合并,塌陷现象

合并现象

垂直排列的兄弟元素,上下margin会合并

最后会选择margin中最大的那一个生效

  <style>
    .one {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 20px;
    }
    .two {
        width: 100px;
        height: 100px;
        background-color: orange;
        margin-top: 50px;
    }
  </style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>

image-20240207220645993

塌陷现象

父子级的标签,子级添加上外边距会产生塌陷问题

导致父级一起向下移动

  <style>
    .father {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: orange;

        margin-top: 50px;
    }
  </style>
</head>
<body>
<div class="father">
  <div class="son">son</div>
</div>
</body>

image-20240207221350692

解决方法:

  • 取消子级margin,父级设置padding
  • 父级设置overflow:hidden
  • 父级设置border-top

overflow和bdt都是让浏览器找到父级的正确边缘位置,从来改正

  <title>Title</title>
  <style>
    .father {
        width: 300px;
        height: 300px;
        background-color: pink;

        /*padding-top: 50px;*/
        /*overflow: hidden;*/
        border-top: 1px solid black;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: orange;

        margin-top: 50px;
    }
  </style>
</head>
<body>
<div class="father">
  <div class="son">son</div>
</div>
</body>

image-20240207222114586

行内元素内外边距问题

行内元素添加margin和padding,无法改变元素垂直位置

解决方法:给行内元素添加line-height 可以改变垂直位置

  <style>
    span {
        margin: 50px;
    }
  </style>
</head>
<body>
<span>span标签</span>
<span>span标签</span>
</body>

仅改变了水平的margin,垂直没有变化

image-20240207222448681

解决

  <style>
    span {
        margin: 50px;

        line-height: 100px;
    }
  </style>
</head>
<body>
<span>span标签</span>
<span>span标签</span>
</body>

image-20240207222606876

圆角

设置元素的外边框为圆角

属性名:border-radius

属性值:数字+px / 百分比,数值意为圆角半径

和padding一样可以多值赋值:二角或三角赋值时,对角相等赋值

  <style>
    div {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background-color: orange;

        border-radius: 10px 20px 30px 40px;
    }
  </style>
</head>
<body>
<div></div>
</body>

image-20240207223810339

应用

​ image-20240207224414638

  <style>
    img {
        width: 200px;
        height: 200px;

        border-radius: 50%;
    }
    div {
        width: 200px;
        height: 80px;

        background-color: #7fffd4;
        border-radius: 40px;
        line-height: 80px;
        font-size: 20px;
        color: white;
        text-align: center;
    }
  </style>
</head>
<body>
<img src="http://8.140.253.116/img/avatar.jpg">
<div>直达github</div>
</body>

image-20240207225336190

阴影

给元素设置阴影效果

属性名: box-shadow

属性值:x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

image-20240207225629185

综合案例

CSS书写顺序(加快访问速度)

  1. 盒子模型属性
  2. 文字样式
  3. 圆角,阴影等修饰属性

产品卡片 个人卡片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人卡片</title>
  <style>
      * {
          margin: 0;
          padding: 0;

          box-sizing: border-box;
      }

      body {
          background-color: #f1f1f1;
      }

      .personal {
          width: 354px;
          height: 424px;
          background-color: #fff;
          margin: 50px auto;
          padding: 23px;

          text-align: center;
          border-radius: 30px;
          box-shadow: -2px 5px 10px 1px rgba(0,0,0,0.3);
      }

      .avatar {
          width: 136px;
          height: 136px;

          border-radius: 50%;
      }

      div.personal > h2 {
          margin-top: 16px;
          margin-bottom: 24px;
      }
      div.personal > table {
          margin: auto 30px;
      }
      td {
          padding: 3px 18px;
          font-size: 22px;
      }
      .github {
          display: block;
          margin-top: 10px;
          margin-bottom: 20px;
          padding: 14px 90px;
          background: #7fffd4;

          font-size: 20px;
          text-decoration: none;
          color: white;
      }
      .icon{
          margin: auto 11px;
          width: 24px;
          height: 24px;
      }
      a.github > img {
          width: 23px;
          height: 23px;

          border-radius: 50%;
      }
  </style>
</head>
<body>
<div class="personal">
  <img class="avatar" src="http://8.140.253.116/img/avatar.jpg" alt="这是头像" title="这是头像">
  <h2>niepandou</h2>
  <table>
    <thead>
    <tr>
      <td>文章</td>
      <td>标签</td>
      <td>分类</td>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>42</td>
      <td>13</td>
      <td>1</td>
    </tr>
    </tbody>
  </table>
  <a class="github" href="#"><img src="https://ts1.cn.mm.bing.net/th?id=ODLS.05ef88bd-5ada-40d4-892e-a7718a9bf1ce&w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2">直达github</a>
  <a href="#"><img class="icon" src="https://ts1.cn.mm.bing.net/th?id=ODLS.05ef88bd-5ada-40d4-892e-a7718a9bf1ce&w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2"></a>
  <a href="#"><img class="icon" src="https://ts2.cn.mm.bing.net/th?id=OIP-C.3Vfua3wP9IgKLmBLpiflnAD8D3&w=252&h=247&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2"></a>
  <a href="#"><img class="icon" src="https://ts1.cn.mm.bing.net/th?id=OIP.AQhGsZG10tN_YgvsGDxR6gHaHa&w=298&h=204&c=12&rs=1&qlt=99&pcl=faf9f7&o=6&dpr=1.2&pid=MultiSMRSV2Source"></a>
  <a href="#"><img class="icon" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.ELDLtNxcwkvZp3qkNJG2GgAAAA?w=211&h=211&c=7&r=0&o=5&dpr=1.2&pid=1.7"></a>
</div>
</body>
</html>

image-20240208002208837

新浪新闻

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      * {
          margin: 0;
          padding: 0;

          box-sizing: border-box;
      }

      li {
          list-style: none;
      }

      a {
          text-decoration: none;
      }

      .news {
          margin: 100px auto;
          width: 360px;
          height: 200px;

          /*background-color: pink;*/
      }

      .news .hd {
          height: 34px;
          background-color: #eee;
          border: 1px solid #bdbee1;
          border-left: none;
      }

      .hd a {
          margin-top: -1px;
          display: block;
          width: 48px;
          height: 34px;
          background-color: white;
          border-top: 3px solid #ff8400;
          border-right: 1px solid #bdbee1;

          line-height: 32px;
          text-align: center;
          font-size: 14px;
          color: #333;
      }

      .news .bd {
          padding: 5px;
          background-color: white;
      }
      .news .bd li {
          background: url("#");
          background-repeat: no-repeat;
          background-position: 0 center;
          padding-left: 15px;
      }
      .news .bd li a {
          background: url("#") no-repeat 0 center;
          padding-left: 20px;

          font-size: 12px;
          color: #666;
          line-height: 24px;
      }
      .news .bd li a:hover {
          color: #ff8400;
      }
  </style>
</head>
<body>
<div class="news">
  <!--  标题-->
  <div class="hd"><a href="#">新闻</a></div>
  <!--  内容-->
  <div class="bd">
    <ul>
      <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
      <li><a href="#">体验javascript的魅力</a></li>
      <li><a href="#">jquery世界来临</a></li>
      <li><a href="#">网页设计师的梦想</a></li>
      <li><a href="#">jquery中的链式编程是什么</a></li>
      <li></li>
    </ul>
  </div>

</div>
</body>
</html>

image-20240208005247536

标准流

标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行, 行内元素可以一行显示多个

浮动

让块元素水平排列

属性名: float

属性值:left左对齐

​ right右对齐

 <style>
    .one {
        width: 100px;
        height: 100px;

        background-color: brown;
        float: left;
    }
    .two {
        width: 200px;
        height: 200px;

        background-color: orange;

        float: right;
    }
  </style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>

对于添加了float属性的块元素,脱离了标准流的控制,在其他标准盒子中,浮动元素并不存在

因此可能发生两个盒子合并覆盖的情况

image-20240208183111680

  • 浮动盒子特点
    • 顶对齐
    • 具备行内块特点
    • 脱标

产品区域布局

​ 


  <style>
      * {
          margin: 0;
          padding: 0;
      }

      li {
          list-style: none;
      }

      .product {
          margin: 50px auto;
          width: 1226px;
          height: 628px;
          background-color: pink;
      }

      .left {
          float: left;
          
          width: 234px;
          height: 628px;

          background-color: skyblue;
      }

      .right {
          float: right;

          width: 978px;
          height: 628px;

          background-color: brown;

      }

      .right li {
          float: left;

          margin-right: 14px;
          margin-bottom: 14px;
          /*li和盒子右边距有一定边距,不能够放下,超出导致每行只有三个*/

          width: 234px;
          height: 300px;
          background: orange;
      }

      /*单独拿出去掉li右边距*/
      .right li:nth-child(4n) {
          margin-right: 0;
      }
  </style>
</head>
<body>
<!--版心-->
<div class="product">
  <div class="left"></div>
  <div class="right">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li></ul>
  </div>
</div>

</body>

image-20240208183039390

清除浮动

浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度

解决办法: 清除浮动

  <style>
      .top {
          margin: 10px auto;
          width: 1200px;
          /*height: 300px;*/

          background-color: pink;
      }

      .bottom {
          height: 100px;

          background-color: brown;
      }

      .left {
          float: left;
          width: 200px;
          height: 300px;
          background-color: skyblue;
      }

      .right {
          float: right;
          width: 950px;
          height: 300px;
          background-color: orange;
      }
  </style>
</head>
<body>
<div class="top">
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="bottom"></div>
</body>

image-20240208185111224

解决方案:

  • 额外标签法: 在父元素内容的最后添加一个块级元素,设置CSS属性clear: both

     <style>
          .top {
              margin: 10px auto;
              width: 1200px;
              /*height: 300px;*/

              background-color: pink;
          }

          .bottom {
              height: 100px;

              background-color: brown;
          }

          .left {
              float: left;
              width: 200px;
              height: 300px;
              background-color: skyblue;
          }

          .right {
              float: right;
              width: 950px;
              height: 300px;
              background-color: orange;
          }

          .clearfix {
              clear: both;
          }
      </style>
    </head>
    <body>
    <div class="top">
      <div class="left"></div>
      <div class="right"></div>
      <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
    </body>

  • 单伪元素法:在父元素内容最后添加一个块级元素

.clearfix::after {
      content: "";
      display: block;
      clear: both;
  }

  • 双伪元素法

      .clearfix::before,
          .clearfix::after {
              content: "";
              display: table;
          }

          .clearfix::after {
              clear: both;
          }
    /* before伪元素解决外边距塌陷问题 */

  • overflow

    父元素添加overflow:hidden

image-20240208192419291

flex布局

image-20240208192658061

image-20240208200500101

浮动网页(产生脱标问题)

<style>
    .box {
        /*display: flex;*/
        /*justify-content: space-between;*/

        /*height: 300px;*/
        border: 1px solid #000;
    }
    .box div {
        float: left;
        margin: 50px;

        width: 200px;
        height: 100px;
        background-color: pink;
    }
  </style>
</head>
<body>
<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</body>

image-20240208193505185

flex网页布局

<style>
    .box {
        display: flex;
        justify-content: space-between;

        /*height: 300px;*/
        border: 1px solid #000;
    }
    .box div {
        /*float: left;*/
        /*margin: 50px;*/

        width: 200px;
        height: 100px;
        background-color: pink;
    }
  </style>
</head>
<body>
<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</body>

image-20240208193418937

flex组成

设置方式: 给父元素设置display:flex,子元素可以自动挤压或拉伸

组成部分

  • 弹性容器
  • 弹性盒子
  • 主轴: 默认在水平方向
  • 侧轴/交叉轴: 默认在垂直方向
<style>
    .box {
        /*主轴水平方向,因此水平放置*/
        display: flex;

        height: 300px;
        border: 1px solid #000;
    }

    .box div {
        width: 200px;
        height: 100px;
        background-color: pink;
    }
  </style>
</head>
<body>
<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</body>

image-20240208194854909

当div盒子足够多时

<body>
<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</body>

盒子大小与设置不符,自动进行了挤压

image-20240208194947228

当没有高度限制时

盒子拉伸到父级大小

.box div {
        width: 200px;
        /*height: 100px;*/
        background-color: pink;
    }

image-20240208195045201

主轴对齐方式

image-20240208200807779

  <style>
      .box {
          display: flex;
          /*justify-content: flex-start;*/
          /*justify-content: flex-end;*/
          /*justify-content: center;*/
          /*弹性盒子之间间距相等*/
          /*justify-content: space-between;*/
          /*空白区域均分在盒子两侧*/
          /*justify-content: space-around;*/
          /*空白区域均分*/
          justify-content: space-evenly;
          height: 300px;
          border: 1px solid #000;
      }

      .box div {
          width: 200px;
          height: 100px;
          background-color: pink;
      }
  </style>
</head>
<body>
<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</body>

image-20240208202800549

侧轴对齐方式

  • align-items: 控制所有弹性盒子侧轴对齐方式(给弹性容器设置)
  • align-self: 控制单个弹性盒子侧轴对齐方式(给弹性盒子设置)

image-20240208202943490

<style>
      .box {
          display: flex;
          /*align-items: stretch;*/
          /*align-items: center;  */
          /*align-items: flex-start;*/
          align-items: flex-end;
          height: 300px;
          border: 1px solid #000;
      }
      .box div {
          width: 200px;
          height: 100px;
          background-color: pink;
      }
  </style>
</head>
<body>
<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</body>

image-20240208203530003

修改主轴方向

属性名:flex-direction

image-20240208203707891

 <style>
      .box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          width: 150px;
          height: 120px;
          background-color: pink;
      }
      .box img {
          width: 32px;
          height: 32px;
      }
  </style>
</head>
<body>
<div class="box">
  <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.ldEoLaoDu5Y1LjGmn5e15gHaH-?w=169&h=182&c=7&r=0&o=5&dpr=1.2&pid=1.7" alt="">
  <span>媒体</span>
</div>
</body>

image-20240208204341065

弹性伸缩比

控制弹性盒子的主轴方向的尺寸

属性名: flex

属性值: 整数,表示占用父级剩余尺寸的分数

  <title>Title</title>
  <style>
      .box {
          display: flex;

          height: 300px;
          border: 1px solid #000;
      }
      .box div {
          height: 100px;
          background-color: pink;

          border: 1px solid #000;
      }
      .box div:nth-child(1) {
          width: 200px;
      }
      .box div:nth-child(2) {
          flex: 1;
      }
      .box div:nth-child(3) {
          flex: 2;
      }
  </style>
</head>
<body>
<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</body>

2号和3号形成1:2的比例

image-20240208205433164

弹性换行

弹性盒子可以自动挤压或拉伸,默认情况下, 所有弹性盒子在一行显示

属性名:flex-wrap

属性值:

  • wrap换行
  • nowrap 不换行(默认)
<style>
      .box {
          display: flex;
          flex-wrap: wrap;
          
          border: 1px solid #000;
      }
      .box div {
          width: 200px;
          height: 100px;
          background-color: pink;
      }
  </style>
</head>
<body>
<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</body>

wrap

image-20240208205902089

nowrap

image-20240208212152383

行对齐方式

设置每一行的排列方式

前提: wrap值生效

属性名: align-content

和主轴对齐方式的属性值相同

  <style>
      .box {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          /*align-content: flex-start;*/
          /*align-content: flex-end;*/
          /*align-content: center;*/
          /*align-content: space-between;*/
          /*align-content: space-around;*/
          align-content: space-evenly;
          height: 400px;
          border: 1px solid #000;
      }

      .box div {
          width: 200px;
          height: 100px;
          background-color: pink;
      }
  </style>
</head>
<body>
<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
</body>

image-20240208213025122

综合案例

抖音解决方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    li {
        list-style: none;
    }

    .box {
        margin: 100px auto;
        height: 418px;
        width: 1200px;

        border: 1px solid #ddd;

        border-radius: 10px;
        box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5);
    }
    .box ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;

        padding: 90px 40px 90px 60px;
        height: 418px;
    }
    .box ul li {
        display: flex;
        width: 500px;
        height: 88px;
        /*background-color: pink;*/
    }
    .pic img{
        margin-right: 15px;
        width: 88px;
        height: 88px;
    }
    .text h4{
        line-height: 40px;
        font-size: 20px;
        font-weight: 400;
        color: #333;
    }
    .text p{
        font-size: 14px;
        color: #666;
    }
  </style>
</head>
<body>
<div class="box">
  <ul>
    <li>
      <div class="pic"><img src="https://bpic.588ku.com/element_origin_min_pic/19/06/25/842fd9385dff9b43e99b183d0d165b5b.jpg" alt=""></div>
      <div class="text">
        <h4>python将word文件转换成pdf文件</h4>
        <p>此方法适用于linux和Windows环境，方法一只适用于Windows环境。</p>
      </div>
    </li>
    <li>
      <div class="pic"><img src="https://bpic.588ku.com/element_origin_min_pic/19/06/25/842fd9385dff9b43e99b183d0d165b5b.jpg" alt=""></div>
      <div class="text">
        <h4>数据结构与算法：图论</h4>
        <p>图的难点主要在于图的表达形式非常多，即数据结构实现的形式很多。</p>
      </div>
    </li>
    <li>
      <div class="pic"><img src="https://bpic.588ku.com/element_origin_min_pic/19/06/25/842fd9385dff9b43e99b183d0d165b5b.jpg" alt=""></div>
      <div class="text">
        <h4>JavaScript 设计模式之单例模式</h4>
        <p>单例模式我们在日常使用中还是非常多的，比如常见的 jQuery，prototype，vue等都是属于单例模式</p>
      </div>
    </li>
    <li>
      <div class="pic"><img src="https://bpic.588ku.com/element_origin_min_pic/19/06/25/842fd9385dff9b43e99b183d0d165b5b.jpg" alt=""></div>
      <div class="text">
        <h4>23种设计模式之单例模式</h4>
        <p>单例模式是一种创建型设计模式，它的核心思想是保证一个类只有一个实例，并提供一个全局访问点来访问这个实例。</p>
      </div>
    </li>
  </ul>
</div>
</body>
</html>

image-20240208221454677

学成在线项目

准备工作

项目目录

网站根目录是存放网站的第一层文件夹,内部包含当前网站的所有素材,包含html,css,图片,JavaScript等

  • 根目录

    • images文件夹:固定使用的图片素材,例如logo,样品修饰图

    • uploads文件夹:非固定使用的图片素材,例如商品图,宣传图

    • css文件夹:存放css文件

      • base.css:基础公共样式,清除默认样式,设置网页基本样式
      • index.css:首页css样式

    • index.html:首页

image-20240218000833542

版心效果

.wrapper {
        margin: 0 auto;
        width: 1200px;
    }

网页制作思路

  1. 布局思路

先整体再局部,从外到内,从上到下,从左到右

  1. css实现思路

    1. 画盒子,调整盒子范围->宽高背景色
    2. 调整盒子位置->flex布局,内外边距
    3. 控制图片,文字内容样式

header区域

整体布局

.header {
    height: 100px;
    background-color: #fff;
}
.header .wrapper {
    display: flex;

    padding-top: 29px;
}
<div class="header">
  <div class="wrapper">
    <!--logo-->
    <div class="logo">logo</div>
    <!--导航-->
    <div class="nav">nav</div>
    <!--搜索-->
    <div class="search">search</div>
    <!--用户-->
    <div class="user">user</div>
  </div>
</div>

功能

单击跳转到首页

搜索引擎优化: 提升网站百度搜索排名

实现方法

标签结构: h1 > a > 网站名称(搜索关键字)

.logo a {
    display: block;

    width: 195px;
    height: 41px;
    background-image: url(../images/logo.png);

    /*文字隐藏*/
    font-size: 0;
}
<!--logo-->
<div class="logo">
  <h1><a href="#">学成在线</a></h1>
</div>

导航

功能

单击跳转页面

实现方法

标签结构: ul > li*3 > a

避免堆砌a标签,网站搜索排名降级

.nav {
    margin-left: 102px;
}

.nav ul {
    display: flex;
}

.nav li {
    margin-right: 24px;
}

.nav li a {
    display: block;
    padding: 6px 8px;
    line-height: 27px;

    font-size: 19px;
}

.nav li .active,
.nav li a:hover {
    border-bottom: 2px solid #00a4ff;
}
<!--导航-->
 <div class="nav">
   <ul>
     <li><a href="#" class="active">首页</a></li>
     <li><a href="#">课程</a></li>
     <li><a href="#">职业规划</a></li>
   </ul>
 </div>

搜索区域

标签结构

.search >input+a/button

/*搜索*/
.search {
    display: flex;
    margin-left: 64px;
    padding-left: 19px;
    padding-right: 12px;

    width: 412px;
    height: 40px;
    background-color: #f3f5f7;
    border-radius: 20px;
}

.search input {
    /*设置弹性伸缩比,将剩余尺寸全部给input*/
    flex: 1;
    border: 0;
    background-color: transparent;
    /*去处焦点框*/
    /*焦点框为选中当前元素时的边框*/
    outline: none;
}

/*placeholder文字属性*/
.search input::placeholder {
    font-size: 14px;
    color: #999;
}
/*父级为flex布局,那么子级为弹性盒子*/
.search a {
    align-self: center;

    width: 50px;
    height: 40px;
    background-image: url(../images/btn.png);

    border-radius: 20px;
}
<!--搜索-->
 <div class="search">
   <input type="text" placeholder="请输入关键词">
   <a href="#"></a>
 </div>

用户

标签结构

.user >a>img+span

.user {
    margin-top: 4px;
    margin-left: 32px;
}

.user img {
    margin-right: 7px;
    /*专门用来处理行内块和行内元素垂直方向对齐方式*/
    vertical-align: middle;
}
.user span {
    font-size: 16px;
    color: #666666;
}
<!--用户-->
   <div class="user">
     <a href="#"><img src="./images/user.png" alt="用户" title="用户头像"><span>涅槃豆</span></a>
   </div>

banner区域

整体布局

/*banner区域*/
.banner {
    height: 420px;
    background-color: #1c036c;
}
.banner .wrapper {
    display: flex;
    justify-content: space-between;
    height: 420px;
    background-image: url(../images/banner2.png);
}
<!--banner区域-->
<div class="banner">
  <div class="wrapper">
    <div class="left">1</div>
    <div class="right">1</div>
  </div>
</div>

左侧导航

标签结构

.left>ul>li*9>a

a默认状态为白色右箭头

.banner .left {
    padding: 3px 20px;
    width: 191px;
    height: 420px;
    
    background-color: rgba(0,0,0,0.30);
}

.banner .left a {
    display: block;

    height: 46px;
    line-height: 46px;

    font-size: 16px;
    color: darkgray;
}
.banner .left a::after {
    content: ">";
    color: darkgray;
    float: right;
}
.banner .left a:hover {
    color: #00a4ff;
}
.banner .left a:hover::after{
    color: #00a4ff;
}
<div class="left">
      <ul>
        <li><a href="#">前端开发</a></li>
        <li><a href="#">后端开发</a></li>
        <li><a href="#">移动开发</a></li>
        <li><a href="#">人工智能</a></li>
        <li><a href="#">商业预测</a></li>
        <li><a href="#">云计算&大数据</a></li>
        <li><a href="#">运维&测试</a></li>
        <li><a href="#">UI设计</a></li>
        <li><a href="#">产品</a></li>
      </ul>
    </div>

右侧课程表

标签结构

.right >h3+.content

/*右侧课程表*/
.right {
    margin-top: 60px;

    width: 218px;
    height: 305px;
    background-color: #9bceea;

    border-radius: 10px;
}

.right h3 {
    margin: 16px auto 14px;

    width: 97px;
    height: 18px;
    font-size: 16px;
    font-weight: 400;
    font-stretch: normal;
    line-height: 16px;
    letter-spacing: 2px;
    text-align: center;

    color: #ffffff;
}

.banner .content {
    padding: 14px;

    height: 257px;
    background: #fff;

    border-radius: 10px;
}

.banner .right dl {
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.banner .right dt {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.banner .right dd {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 16px;
}

.banner .right dd span {
    color: #00a4ff;
}

.banner .right dd strong {
    color: #7d7d7d;
    font-weight: 400;
}

.banner .right a {
    display: block;

    height: 32px;
    background-color: #00a4ff;

    text-align: center;
    line-height: 32px;
    color: white;
    font-size: 14px;

    border-radius: 15px;
}
<!--课程表-->
    <div class="right">
      <h3>我的课程表</h3>
      <div class="content">
        <dl>
          <dt>程序语言设计</dt>
          <dd><span>正在学习</span>-<strong>使用对象2</strong></dd>
        </dl>
        <dl>
          <dt>程序语言设计</dt>
          <dd><span>正在学习</span>-<strong>IO流5</strong></dd>
        </dl>
        <dl>
          <dt>HTML+CSS</dt>
          <dd><span>正在学习</span>-<strong>学成在线项目7</strong></dd>
        </dl>
        <a href="#">全部课程</a>
      </div>
    </div>

精品推荐

标签结构

.recommend>h3+ul+a.modify

flex布局

/*精品推荐*/
.recommend {
    display: flex;

    margin-top: 11px;
    padding: 0 20px;

    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 3px 0 rgba(118, 118, 118, 0.2);
    line-height: 60px;
}

.recommend h3 {
    color: #00a4ff;
    font-size: 18px;
    font-weight: 400;
}

/*除去标题和修改兴趣的尺寸,剩余的都给ul 实现了修改兴趣在最右侧的效果*/
.recommend ul {
    display: flex;
    flex: 1;
}
.recommend ul li a {
    padding: 0 24px;
    border-right: 1px solid #e0e0e0;

    font-size: 18px;
}
.recommend ul li:nth-last-child(-n+1) a{
    border-right: 0;
}
.recommend .modify {
    font-size: 16px;
    color: #00a4ff;
}
<!--精品推荐-->
<div class="recommend wrapper">
  <h3>精品推荐</h3>
  <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">JQuery</a></li>
    <li><a href="#">React</a></li>
    <li><a href="#">MySQL</a></li>
    <li><a href="#">JavaWeb</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">Node.js</a></li>
    <li><a href="#">Vue2.0</a></li>
  </ul>
  <a href="#" class="modify">修改兴趣</a>
</div>

精品课程

标签结构

.hd + .bd

/*精品课程*/
.course {
    margin-top: 15px;
}

/*hd公共使用*/
.hd {
    display: flex;
    justify-content: space-between;

    height: 60px;
    line-height: 60px;
}

.hd h3 {
    font-size: 21px;
    font-weight: 400;
}

.hd .more {
    font-size: 14px;
    color: #999
}

.bd ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.bd li {
    margin-bottom: 14px;
    width: 228px;
    height: 271px;
}

.bd li .pic {
    height: 155px;
}

.bd li .text {
    padding: 20px;
    height: 115px;
    background-color: #fff;
}
.bd li .text h4 {
    margin-bottom: 20px;
    height: 40px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}
.bd li .text p {
    font-size: 14px;
    line-height: 20px;
    color: #999;
}
.bd li .text p span {
    color: #fa6400;
}
.bd li .text p i {
    font-style: normal;
}
<!--精品课程-->
<div class="course wrapper">
  <div class="hd">
    <h3>精品推荐</h3>
    <a href="#" class="more">查看全部 ></a>
  </div>
  <div class="bd">
    <ul>
      <li>
        <a href="#">
          <div class="pic"><img src="./images/course03.png" alt=""></div>
          <div class="text">
            <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
            <p><span>高级</span> • <i>1125人在学</i></p>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="pic"><img src="./images/course02.png" alt=""></div>
          <div class="text">
            <h4>Android 网络图片加载框架详解</h4>
            <p><span>高级</span> • <i>1145人在学</i></p>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="pic"><img src="./images/course03.png" alt=""></div>
          <div class="text">
            <h4>Angular 2 最新框架+主流技术+项目实战 </h4>
            <p><span>高级</span> • <i>3222人在学</i></p>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="pic"><img src="./images/course04.png" alt=""></div>
          <div class="text">
            <h4>Android Hybrid APP开发实战 H5+原生！</h4>
            <p><span>高级</span> • <i>3288人在学</i></p>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="pic"><img src="./images/course02.png" alt=""></div>
          <div class="text">
            <h4>UGUI 源码深度剖析</h4>
            <p><span>高级</span> • <i>1125人在学</i></p>
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>

前端

/*前端*/
.hd ul {
    display: flex;
}
.hd li {
    margin-right: 60px;
    font-size: 16px;
}
.hd li .active{
    color: #00a4ff;
}

.before .bd {
    display: flex;
    justify-content: space-between;
}
.bd .left {
    width: 228px;
}
.bd .right {
    width: 957px;
}
.bd .right .top {
    margin-bottom: 15px;
    height: 100px;
}
<!--前端-->
<div class="before wrapper">
  <div class="hd">
    <h3>编程入门</h3>
    <ul>
      <li><a href="#" class="active">热门</a></li>
      <li><a href="#">初级</a></li>
      <li><a href="#">中级</a></li>
      <li><a href="#">高级</a></li>
    </ul>
    <a href="#" class="more">查看全部 ></a>
  </div>
  <div class="bd">
    <div class="left"><img src="./images/left.jpg" alt=""></div>
    <div class="right">
      <div class="top"><img src="./images/top.jpg" alt=""></div>
      <div class="bottom">
        <ul>
          <li>
            <a href="#">
              <div class="pic"><img src="./images/course03.png" alt=""></div>
              <div class="text">
                <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                <p><span>高级</span> • <i>1125人在学</i></p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./images/course03.png" alt=""></div>
              <div class="text">
                <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                <p><span>高级</span> • <i>1125人在学</i></p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./images/course04.png" alt=""></div>
              <div class="text">
                <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                <p><span>高级</span> • <i>1125人在学</i></p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./images/course02.png" alt=""></div>
              <div class="text">
                <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                <p><span>高级</span> • <i>1125人在学</i></p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

版权

/*版权*/
.footer {
    margin-top: 60px;
    padding-top: 60px;
    height: 273px;
    background-color: #fff;
}
.footer .wrapper {
    display: flex;
    justify-content: space-between;
}
.footer .left {
    width: 440px;
}
.footer .left p {
    margin-top: 24px;
    margin-bottom: 14px;

    font-size: 12px;
    line-height: 17px;
    color: #666;
}
.footer .left .download {
    display: block;

    width: 120px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #00a4ff;
    border: 1px solid #00a4ff;
}
.footer .right {
    display: flex;
}
.footer .right dl{
    margin-right: 130px;
}
.footer .right dt {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 32px;
}
.footer .right a {
    font-size: 14px;
    color: #666;
    line-height: 24px;
}
<!--版权-->
<div class="footer">
  <div class="wrapper">
    <div class="left">
      <a href="#"><img src="./images/logo.png" alt=""></a>
      <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
        © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
      <a href="#" class="download">下载APP</a>
    </div>
    <div class="right">
      <dl>
        <dt>关于学成网</dt>
        <dd><a href="">关于</a></dd>
        <dd><a href="">管理团队</a></dd>
        <dd><a href="">工作机会</a></dd>
        <dd><a href="">客户服务</a></dd>
        <dd><a href="">帮助</a></dd>
      </dl>
      <dl>
        <dt>新手指南</dt>
        <dd><a href="#">如何注册</a></dd>
        <dd><a href="#">如何选课</a></dd>
        <dd><a href="#">如何拿到毕业证</a></dd>
        <dd><a href="#">学分是什么</a></dd>
        <dd><a href="#">考试未通过怎么办</a></dd>
      </dl>
      <dl>
        <dt>合作伙伴</dt>
        <dd><a href="#">合作机构</a></dd>
        <dd><a href="#">合作导师</a></dd>
      </dl>
    </div>
  </div>
</div>

成品展示

image-20240218042822040

image-20240218042812742

定位

灵活度改变盒子在网页中的位置

可以实现多个盒子叠在一起的效果

属性

定位模式 position

边偏移: 设置盒子的位置 left,right,top,bottom

相对定位relative

特点

  1. 改变位置的参照物是自己原来的位置

  2. 不脱标,原先位置依旧占位

  3. 标签显示模式特点不变

 <style>
    div {
        position: relative;
        /*图片上方顶了100px,实现了图片下移,同时图片压住了下面p标签的部分文字*/
        top: 100px;
    }
  </style>
</head>
<body>
<h1>《中国记者》：大象新闻“豫头条”重塑地方党媒时政报道新方式</h1>
<div>来源: 2024-02-01 10:18:29发布于河南河南广电集团《大象新闻》官方账号</div>
<p><strong>央视网消息:</strong>
  新传播形势下，如何做出受众愿意看、看得懂、主动转的时政报道？面对愈加年轻的新生代读者群体，如何站稳百姓视角，解读好一省发展大计？对于地方党媒来说，在移动传播场景下，保持年轻态，这是一个事关未来发展的核心命题。
</p>
<div>
  <img src="https://inews.gtimg.com/om_bt/OJtA49qys9Klrjed-kHUxi5xESpOGyRuR_K5PDOrK8L4IAA/641" alt="新闻报"
       title="中国记者报导">
  <img src="https://inews.gtimg.com/om_bt/OkHcMrQmp56ob5bmegjCcrf5gvw6X3Ngk5ZZua8PEm7UMAA/641" alt="新闻报"
       title="中国记者报导">
</div>
<p>2022年9月，河南广播电视台大象新闻集合优势兵力，面向移动端，创立了时政品牌栏目“豫头条”，重塑地方党媒时政报道方式。作为主打“年轻”的时政新媒体栏目，一年多来，“豫头条”以“河南新闻联播”为基础，以新视角、新思考探寻时政新闻新表达，更深一度观察河南政经大势。在众声喧哗的舆论场上，“豫头条”以角度赢得流量、以深度彰显质量、以温度成就分量，更以态度让出彩成为常量，在新媒体端收获了大批年轻粉丝。</p>
<p>在各类新闻类型中，时政新闻天然与网民有距离，若在做新媒体时还是一副长者相、满是说教腔，势必不会受到年轻网友的关注。如何让时政新闻年轻起来，也像民生新闻那样成为频频刷屏的爆款？这是地方党媒共同面对的问题，也是大象新闻在打造“豫头条”栏目过程中，所探寻的方向。</p>
<div>
  <img src="https://inews.gtimg.com/om_bt/OpucN7vjYi9jDkHjn4vwpLlUklq2DlJFzQGxDxhDlV7_IAA/641">
</div>
</body>

绝对定位

使用场景: 子级绝对定位,父级相对定位

特点

  1. 脱标,不占位,类似浮动

  2. 先找最近的已经定位的祖先元素,如果所有祖先元素都没有定位,那么参照浏览器可视区该位置

  3. 显示模式特点改变.宽高生效(具备行内块特点)

tips:如果祖先元素是绝对定位,那么margin的auto是0,不再自动选择尺寸

例如下面的场景将展会活动移动到图片右上角,且不出现留白区域

image-20240219175225413

修改效果如下

<style>
    .news {
        position: relative;
        margin: 100px auto;
        width: 365px;
        height: 250px;
        background-color: #f8f8f8;
    }

    .news span {
        position: absolute;
        top: 0;
        right: 0;

        display: block;
        width: 92px;
        height: 32px;
        background-color: rgba(0,0,0,0.6);
        text-align: center;
        line-height: 32px;
        color: #fff;
    }
  </style>
</head>
<body>
<div class="news">
  <img src="https://ts1.cn.mm.bing.net/th?id=ORMS.fa66b032af1d6066ca3a08a27eef01c7&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.2187498807907104&p=0" alt="">
  <span>展会活动</span>
  <h4>歌唱舞台</h4>
</div>
</body>

定位居中

步骤

  1. 使用绝对定位
  2. 水平,垂直边偏移为50%
  3. 子级向左,上移动自身尺寸的一半
    • margin设为左,上尺寸一半的负数,即往相反方向移动.,实现居中效果
    • transform: translate(-50%,-50%)
img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -182px;
    margin-top: -95px;
}
img {
    position: absolute;
    left: 50%;
    top: 50%;
    /*margin写法*/
    /*margin-left: -182px;*/
    /*margin-top: -95px;*/
    /*transform写法*/
    transform: translate(-50%,-50%);
}

固定定位

position:fixed

元素的位置在网页滚动时不会改变

特点:

  1. 脱标,不占位
  2. 参照物为浏览器可视区
  3. 显示模式为行内块

堆叠层级z-index

默认效果: 按照标签书写顺序,后来者居上

作用:设置定位元素的层级顺序,改变定位元素的显示顺序

<style>
    div {
        position: absolute;

        width: 200px;
        height: 200px;
    }
    .box1 {
        background-color: pink;

        /*z-index默认值为0,数值越大显示等级越高*/
        z-index: 1;
    }
    .box2 {
        background-color: blue;
    }
  </style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>

CSS精灵

是一种网页图片应用处理方式

把网页的一些图片整合到一张图片中,再通过background-position精确的定位出背景图片的位置,想要哪个图片就根据坐标显示出来

步骤

  1. 创建盒子,盒子尺寸与小图尺寸相同
  2. 设置盒子背景图为精灵图
  3. 调价background-position属性,改变背景图位置
    • 使用PxCook测量小图片左上角坐标
    • 取负数坐标为background-position属性为负数,向左上移动
  <style>
      div {
          width: 112px;
          height: 110px;

          background-color: pink;

          /*将字母表设为背景图*/
          background-image: url(#);
          /*此时显示A.我们要显示N需要挪动位置*/
          background-position: -256px -276px;

      }
  </style>
</head>
<body>
<div></div>
</body>

综合案例

京东服务

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    li {
        list-style: none;
    }
    .service {
        margin: 100px auto;
        padding-left: 102px;

        width: 1320px;
        height: 42px;
        /*background-color: pink;*/
    }

    .service ul {
        display: flex;
        /*justify-content: space-between;*/
    }
    .service li {
        display: flex;
        padding-left: 40px;

        width: 292px;
        height: 42px;
    }
    .service li h5 {
        margin-right: 10px;
        width: 36px;
        height: 42px;
        background: url(https://misc.360buyimg.com/jdf/1.0.0/unit/service/5.0.0/i/ico_service.png) 0 0;
    }
    .service li:nth-child(2) h5{
        background: url(https://misc.360buyimg.com/jdf/1.0.0/unit/service/5.0.0/i/ico_service.png) 0 -42px;

    }
    .service li:nth-child(3) h5{
        background: url(https://misc.360buyimg.com/jdf/1.0.0/unit/service/5.0.0/i/ico_service.png) 0 -84px;

    }
    .service li:nth-child(4) h5{
        background: url(https://misc.360buyimg.com/jdf/1.0.0/unit/service/5.0.0/i/ico_service.png) 0 -128px;

    }
    .service li p {
        font-size: 18px;
        line-height: 42px;
        font-weight: 700;
        color: #444;
    }
  </style>
</head>
<body>
<div class="service">
  <ul>
    <li>
      <h5></h5>
      <p>品类齐全，轻松购物</p>
    </li>
    <li>
      <h5></h5>
      <p>多仓直发，极速配送</p>
    </li>
    <li>
      <h5></h5>
      <p>正品行货，精致服务</p>
    </li>
    <li>
      <h5></h5>
      <p>天天低价，畅选无忧</p>
    </li>
  </ul>
</div>
</body>
</html>

image-20240219230216704

字体图标

展示的是图标,本质是字体

作用: 在网页中添加简单的颜色单一的小图标

下载和使用

iconfont图标库:iconfont-阿里巴巴矢量图标库

下载方法

  • 登录购买加入购物车

  • 选完后添加至项目

  • 项目中选择下载

  • 解压下载文件

  • 将解压文件夹移至所要使用的web项目中

使用方法

  1. 引入字体样式表
<link rel="stylesheet" href="../iconfont/iconfont.css">
  1. 标签使用字体图标类名
    • iconfont:字体图标基本样式
    • icon-xxx:图标对应的类名
  <link rel="stylesheet" href="../iconfont/iconfont.css">
  <style>
    .iconfont {
        font-size: 32px;
        color: red;
    }
  </style>
</head>
<body>
<span class="iconfont icon-gerenzhongxin-zhihui"></span>
</body>

上传矢量图

项目特有的图标上传到iconfont图标库,生成字体

修饰属性

垂直对齐方式vertical-align

属性值 效果
baseline 基线对齐(默认)
top 顶部对齐
middle 居中对齐
bottom 底部对齐

image-20240219233520948

基线:一般来说基线能够准确的分割每一层字,但有诸如p一类的字母下方有多余部分,会有些留白用来处理,图片看作字体的话,可以看出空白间距是如何出现的

一般来说哪个元素占高最大就给哪个元素添加垂直对齐属性

过渡transition

可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名: transition(复合属性)

属性值: 过渡的属性 花费时间(s)

  • 过渡的属性可以是具体的CSS属性
  • 也可以为all(两个状态属性值不同)
  • transition设置给元素本身
  <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      div {
          margin: 100px auto;

          width: 600px;
          height: 200px;
          background-color: pink;

          overflow: hidden;
      }

      img {
          display: block;
          margin: 50px auto;


          width: 100px;
          height: 50px;

          transition: all 1s;
      }

      img:hover {
          width: 200px;
          height: 100px;
      }
  </style>
</head>
<body>
<div>
  <img
    src="https://ts2.cn.mm.bing.net/th?id=ORMS.aa2c376913d5a4d1e996878637b20cb3&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.2187498807907104&p=0"
    alt="">
</div>
</body>

透明度opacity

设置整个元素的透明度

属性值:0-1

光标类型cursor

鼠标悬停在元素上时指针显示样式

属性值 效果
default 默认值,箭头
pointer 小手效果,提示用户可以点击
text 工字型,提升用户可以输入文字
move 十字光标,提升用户可以移动

综合案例

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

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

      li {
          list-style: none;
      }

      .banner {
          position: relative;
          margin: 100px auto;
          width: 700px;
          height: 338px;
          background-color: pink;
          overflow: hidden;
      }

      .banner ul {
          display: flex;
      }

      .banner img {
          width: 700px;
          height: 348px;

          vertical-align: middle;
      }

      /*箭头*/
      .banner .prev,
      .banner .next {
          display: none;/*隐藏*/
          position: absolute;
          top: 50%;
          transform: translateY(-50%);

          width: 20px;
          height: 30px;
          background-color: rgba(0, 0, 0, 0.3);

          color: white;
          line-height: 30px;
          text-align: center;
      }

      .banner .prev {
          left: 0;
          border-radius: 0 15px 15px 0;
      }

      .banner .next {
          right: 0;
          border-radius: 15px 0 0 15px;
      }

      .banner i {
          text-decoration: none;
      }
      /*划到banner区域,箭头显示*/
      .banner:hover .prev,
      .banner:hover .next{
          display: block;
      }
      /*圆点*/
      .banner ol {
          display: flex;

          position: absolute;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%);

          height: 13px;
          background-color: rgba(255,255,255,0.3);

          border-radius: 10px;
      }
      .banner ol li {
          margin: 5px;
          width: 12px;
          height: 12px;
          background-color: white;
          border-radius: 50%;
      }
      .banner ol .active {
          background-color: orangered;
      }
      .banner ol li:hover {
          cursor: pointer;
      }
  </style>
</head>
<body>
<div class="banner">
  <!--  图-->
  <ul>
    <li><a href="#"><img
      src="https://ts4.cn.mm.bing.net/th?id=ORMS.0117f2818f0924c98cb86699404eb61b&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.2187498807907104&p=0"
      alt=""></a></li>
    <li><a href="#"><img
      src="https://ts4.cn.mm.bing.net/th?id=ORMS.0117f2818f0924c98cb86699404eb61b&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.2187498807907104&p=0"
      alt=""></a></li>
    <li><a href="#"><img
      src="https://ts4.cn.mm.bing.net/th?id=ORMS.0117f2818f0924c98cb86699404eb61b&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.2187498807907104&p=0"
      alt=""></a></li>
  </ul>
  <!--  箭头-->
  <a href="#" class="prev">
    <i class="iconfont icon-fanhui"></i>
  </a>
  <a href="#" class="next">
    <i class="iconfont icon-jinru"></i>
  </a>
  <!--  圆点-->
  <ol>
    <li></li>
    <li class="active"></li>
    <li></li>
  </ol>
</div>
</body>
</html>

image-20240220004919823