CSS样式补充+项目前置认知 +项目结构搭建

最新推荐文章于 2023-11-03 17:39:32 发布

认真学习的宋小姐

最新推荐文章于 2023-11-03 17:39:32 发布

阅读量138

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/qq_51946936/article/details/120747261

版权

笔记专栏收录该内容

30 篇文章 2 订阅

订阅专栏

CSS样式补充

在这里插入图片描述

 <style>
    .one {
      width: 24px;
      height: 24px;
      background: url('./images/taobao.png') 0px -264px;
      float: left;
    }

    .two {
      width: 24px;
      height: 24px;
      background: url('./images/taobao.png') 0px -484px;
      float: left;
    }

  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>

在这里插入图片描述

<style>
    div {
      width: 400px;
      height: 300px;
      border: 1px solid #000;
      background: url('./images/1.jpg') no-repeat;
      margin: 100px auto;
    }

    div:nth-child(2) {
      /* 
      1、数字 + px
        优点：设置简单
        缺点：图片可能会拉伸变形
      */
      background-size: 400px 300px;
    }

    div:nth-child(3) {
      /* 
      2、百分比：
        优点：设置简单
        缺点：图片可能会拉伸变形
      */
      background-size: 100% 100%;
    }

    div:nth-child(4) {
      /* 
        3、contain：包含——》让背景图片进行等比例缩放，直到不会超出盒子的最大
          优点：进行等比例缩放，不会让图片变形
          缺点：可能盒子会出现留白
      */
      background-size: contain;
    }

    div:nth-child(5) {
      /* 
        4、cover：覆盖——》让背景图片进行等比例缩放，直接填满整个盒子刚好没有空白为止
          优点：进行等比例缩放，不会让图片变形
          缺点：可能背景图片会超出盒子
      */
      background-size: cover;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

在这里插入图片描述

<style>
    div {
      width: 600px;
      height: 600px;
      border: 1px solid #000;
      background: url('./images/1.jpg') no-repeat center center / 100% 100%;
      /* background-size: 100% 100%; */

      /* 
      background的连写：
        background：color image repeat position / size

        解决方法：
          1、要么把单独的样式写在连写的下面
          2、要么把单独的样式写在连写的里面
      */
    
      background: color image repeat position/size;

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

在这里插入图片描述

 <style>
    div {
      height: 300px;
      text-align: center;
      line-height: 300px;
      font-size: 100px;
      font-weight: 700;
    }

    div:nth-child(1) {
      text-shadow: 18px 20px 16px red;
    }

    div:nth-child(2) {
      text-shadow: 10px 10px 5px red,
                  20px 20px 5px green,
                  30px 30px 5px blue;
    }

    div:nth-child(3) {
      color: #fff;
      background-color: #000;
      text-shadow: 0 0 5px #fff, 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
    }

    div:nth-child(4) {
      background-color: #000;
      color: #fff;
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }

  div:nth-child(5) {
      color: #666;
      background-color: #666;
      text-shadow: -1px -1px 1px #fff,
                    1px 1px 1px #000;
    }

    div:nth-child(6) {
      color: #666;
      background-color: #666;
      text-shadow: -1px -1px 1px #000,
                    1px 1px 1px #fff;
    }

  </style>
</head>
<body>
  <div>多喝点热水</div>
  <div>多喝点热水</div>
  <div>多喝点热水</div>
  <div>多喝点热水</div>
  <div>多喝点热水</div>
  <div>多喝点热水</div>
</body>

在这里插入图片描述

<style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
      margin: 100px auto;
      /* 盒子阴影 */
      box-shadow: 32px 26px 15px #000;
    }

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

在这里插入图片描述

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
      /* 过渡 */
      transition: all 1s;
    }

    div:hover {
      width: 800px;
      /* width: 200px; */
      background-color: yellow;
    }

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

鼠标碰之前
在这里插入图片描述
鼠标碰之后，缓慢变长变颜色

项目前置认知

在这里插入图片描述

<!DOCTYPE html>
<!-- 
  document：文档
  type：类型
  文档类型声明：当前网页是html5
 -->

<html lang="en">
<!-- 
  标识网页使用的语言
  en：英文
  zh-CN：中文
 -->

<head>
  <meta charset="UTF-8">
  <!-- 
    设置网页使用的字符编码
    UTF-8：字符编码的一种

   -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  我是一个中文
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小兔鲜儿-新鲜、惠民、快捷！</title>
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。" />
  <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物" />
</head>
<body>
  
</body>
</html>

在这里插入图片描述

项目结构搭建

在这里插入图片描述

认真学习的宋小姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式补充+项目前置认知 +项目结构搭建

CSS样式补充 <style> .one { width: 24px; height: 24px; background: url('./images/taobao.png') 0px -264px; float: left; } .two { width: 24px; height: 24px; background: url('./images/taobao.png') 0px
复制链接

扫一扫