前端实训-Day2 CSS概述、基础语法、选择器

最新推荐文章于 2024-09-11 22:31:16 发布

劫o梦

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量60

点赞数

文章标签：前端 html html5 css vscode

本文链接：https://blog.csdn.net/m0_57826741/article/details/130819272

版权

Day1回顾复习

HTML

超文本标记语言

超文本：超出了普通文本范围

标记：也叫标签，是网页的基本组成部分

CSS

层叠样式表，样式表

注意

html和css都是弱类型语言，也就是当你语法不规范的时候也不会报错，甚至在某些程度上可以执行

元素

标签+内容=元素

标签：<div></div>

元素：<div>这是div里面的内容</div>

行元素

宽度是根据内容大小决定，水平排列

行元素不能设置宽高

行元素不能设置上下外边距,可以设置左右外边距

块元素

默认宽度占父元素的100%,垂直排列

弹性布局

display: flex; 设置为弹性盒子

注意想让哪些元素水平显示并且和设置宽高和边距

就把它的父元素设置为弹性盒子

主轴

弹性盒子内部有一个主轴

主轴的默认方向是从左向右,左边为起点右边为终点

所有弹性子元素默认是靠近起点

justify-content 设置弹性子元素在主轴上的排列方式

交叉轴

弹性盒子内部还有个跟主轴垂直的交叉轴

交叉轴默认方向是从上向下,上边为起点下边为终点

所有弹性子元素默认是靠近起点

align-items 设置弹性子元素在交叉轴上的排列方式

固定定位

position: fixed

设置过固定定位的元素不在按照正常文档流显示

固定定位元素显示位置的参照是浏览器的可视区上下左右四边

通过top、bottom、left、right控制

Day2任务：做个封面

创建新工程文件

Code运行，然后添加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>
    body {
      background-color: #da2c22;
    }

    h2 {
      color: white;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 140px;
      margin-bottom: 40px;
    }

    .logo {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }
    /* css 选择器可以灵活运用 */
    /* .uname,
    .upwd {
      width: 280px;
    } */
    /* input {
      width: 280px;
    } */
    /* 子代选择器 */
    /* 选择器1>选择器2 */
    /* 选择器1选中的元素是选择器2选中元素的父元素 */
    .form>input {
      width: 280px;
      height: 40px;
      border-radius: 20px;
      border: none;
      margin-bottom: 8px;
      /* 清除轮廓 */
      outline: none;
    }

    button {
      width: 280px;
      height: 40px;
      border-radius: 20px;
      border: none;
      font-size: 20px;
      background-color: #da2c22;
      border: 2px solid white;
      color: white;
    }

    .form {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
  </style>
</head>

<body>
  <h2>
    <img src="./img/logo.png" class="logo" alt="">
    木子云音乐
  </h2>
  <div class="form">
    <input type="text" class="uname">
    <input type="password" class="upwd">
    <button class="login">登录</button>
  </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>
    body {
      background-color: #da2c22;
    }

    h2 {
      color: white;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 140px;
      margin-bottom: 40px;
    }

    .logo {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }

    /* css 选择器可以灵活运用 */
    /* .uname,
    .upwd {
      width: 280px;
    } */
    /* input {
      width: 280px;
    } */
    /* 子代选择器 */
    /* 选择器1>选择器2 */
    /* 选择器1选中的元素是选择器2选中元素的父元素 */
    .form>input {
      width: 260px;
      height: 40px;
      border-radius: 20px;
      border: none;
      margin-bottom: 8px;
      /* 清除轮廓 */
      outline: none;
      padding-left: 20px;
    }

    button {
      width: 280px;
      height: 40px;
      border-radius: 20px;
      border: none;
      font-size: 20px;
      background-color: #da2c22;
      border: 2px solid white;
      color: white;
    }

    .form {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .uname {
      background-image: url("img/fd16e36b_E772821_29be78fe.png");
      background-size: 35px 35px;
      /* 控制背景图片重复 */
      background-repeat: no-repeat;
      /* 控制背景图片位置 */
      /* background-position: 10px 20px; */
      background-position: right center;


    }

    .upwd {
      background-image: url("img/OIP-C-removebg-preview.png");
      background-size: 35px 35px;
      /* 控制背景图片重复 */
      background-repeat: no-repeat;
      /* 控制背景图片位置 */
      /* background-position: 10px 20px; */
      background-position: right center;

    }

    .agreement {
      width: 260px;
      font-size: 12px;
      color: white;
      display: flex;
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
    }

    .agreement>.left {
      /* border: 2px solid white; */
      width: 100px;
      margin-right: 20px;
    }

    .agreement>.right {
      /* border: 2px solid white; */
      display: flex;
      flex-wrap: wrap;
    }
  </style>
</head>

<body>
  <h2>
    <img src="./img/logo.png" class="logo" alt="">
    木子云音乐
  </h2>
  <div class="form">
    <input type="text" class="uname" placeholder="账号">
    <input type="password" class="upwd" placeholder="密码">
    <button class="login">登录</button>
  </div>
  <div class="agreement">
    <div class="left">
      <input type="checkbox">同意
    </div>
    <div class="right">
      <span>《服务条款》</span>
      <span>《隐私政策》</span>
      <span>《大学生隐私政策》</span>
      <span>《中国移动认证服务协议》 </span>
    </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>
    body {
      background-color: #da2c22;
    }

    h2 {
      color: white;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 140px;
      margin-bottom: 40px;
    }

    .logo {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }

    /* css 选择器可以灵活运用 */
    /* .uname,
    .upwd {
      width: 280px;
    } */
    /* input {
      width: 280px;
    } */
    /* 子代选择器 */
    /* 选择器1>选择器2 */
    /* 选择器1选中的元素是选择器2选中元素的父元素 */
    .form>input {
      width: 260px;
      height: 40px;
      border-radius: 20px;
      border: none;
      margin-bottom: 8px;
      /* 清除轮廓 */
      outline: none;
      padding-left: 20px;
    }

    button {
      width: 280px;
      height: 40px;
      border-radius: 20px;
      border: none;
      font-size: 20px;
      background-color: #da2c22;
      border: 2px solid white;
      color: white;
    }

    .form {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .uname {
      background-image: url("img/fd16e36b_E772821_29be78fe.png");
      background-size: 35px 35px;
      /* 控制背景图片重复 */
      background-repeat: no-repeat;
      /* 控制背景图片位置 */
      /* background-position: 10px 20px; */
      background-position: right center;


    }

    .upwd {
      background-image: url("img/OIP-C-removebg-preview.png");
      background-size: 35px 35px;
      /* 控制背景图片重复 */
      background-repeat: no-repeat;
      /* 控制背景图片位置 */
      /* background-position: 10px 20px; */
      background-position: right center;

    }

    .agreement {
      width: 260px;
      font-size: 12px;
      color: white;
      display: flex;
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
    }

    .agreement>.left {
      /* border: 2px solid white; */
      width: 100px;
      margin-right: 20px;
    }

    .agreement>.right {
      /* border: 2px solid white; */
      display: flex;
      flex-wrap: wrap;
    }
    
    .icon {
      /* 正常情况下i标签是行元素不能设置宽高 */
      /* 但是由于 .icon 设置为弹性盒子*/
      /* i标签就变成了弹性子元素 */
      /* 弹性子元素都是块元素 */
      position: fixed;
      bottom: 30px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .icon>i {
      width: 50px;
      height: 50px;
      background-size: 40px;
      background-repeat: no-repeat;
      background-position: center center;
      background-color: white;
      border-radius: 25px;
      margin-left: 10px;
      margin-right: 10px;
    }

    .weixin {
      background-image: url('./img/weixin.png');
    }

    .qq {
      background-image: url('./img/QQ.png');
    }

    .weibo {
      background-image: url('./img/weibo.png');
    }

    .apple {
      background-image: url('./img/apple.png');
    }

  </style>
</head>

<body>
  <h2>
    <img src="./img/logo.png" class="logo" alt="">
    木子云音乐
  </h2>
  <div class="form">
    <input type="text" class="uname" placeholder="账号">
    <input type="password" class="upwd" placeholder="密码">
    <button class="login">登录</button>
  </div>
  <div class="agreement">
    <div class="left">
      <input type="checkbox">同意
    </div>
    <div class="right">
      <span>《服务条款》</span>
      <span>《隐私政策》</span>
      <span>《大学生隐私政策》</span>
      <span>《中国移动认证服务协议》 </span>
    </div>
  </div>
  <div class="icon">
    <i class="weixin"></i>
    <i class="qq"></i>
    <i class="weibo"></i>
    <i class="apple"></i>
  </div>
</body>

</html>

图标iconfont

https://www.iconfont.cn/ 下载后是png图片，当作图片使用即可

使用方式一

使用方式二

下载后解压到项目文件夹中

可以查看demo_index.html实例

demo_index.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="./font_6i0yfnyrs86/iconfont.css">
  <style>
    /* 因为图标是有文本生成的所以可以设置大小颜色等 */
    .icon-xiaoxi-zhihui {
      font-size: 150px;
    }
  </style>
</head>

<body>
  <!-- 使用图标 -->
  <span class="iconfont icon-xiaoxi-zhihui"></span>
  <span class="iconfont icon-xihuan"></span>
  <span class="iconfont icon-shouye-zhihui"></span>
  <span class="iconfont icon-gerenzhongxin-zhihui"></span>
  <span class="iconfont icon-zhifudingjin"></span>
</body>

</html>

fontawesome

Font Awesome，一套绝佳的图标字体库和CSS框架Font Awesome，一套绝佳的图标字体库和CSS框架。Font Awesome中文网。https://fontawesome.dashgame.com/

fontawesome_demo.htm

<!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>
  <!-- 下载后引入font-awesome.css文件 -->
  <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
  <style>
    .fa-bathtub {
      font-size: 50px;
      color: red;
    }
  </style>
</head>

<body>
  <i class="fa fa-bathtub fa-spin"></i>
  <i class="fa fa-free-code-camp fa-2x fa-rotate-90"></i>
  <i class="fa fa-grav fa-3x fa-spin"></i>
  <i class="fa fa-meetup fa-4x"></i>

</body>

</html>