HTML+CSS实训——Day03——仿网易云音乐的发现页界面

news2024/11/27 8:40:44

仓库链接:https://github.com/MengFanjun020906/HTML_SX

一些今天需要用到的知识点

弹性盒子

<!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>
    /* 正常情况下 块元素默认是垂直从上向下排列的 */
    /* 但是我们有时候需求块元素水平显示 */
    /* 
    把需要水平显示的块元素的父元素设置为弹性盒子
    弹性盒子内部的元素是弹性子元素
    弹性子元素有自己的排列方式
    弹性子元素默认水平排列
    主轴:默认水平方向从左向右,左边为起点,右边为重点
    弹性子元素默认沿着主轴从起点向重点排列
    */
    .box {
      width: 500px;
      height: 500px;
      border: 5px solid black;
      /* 设置弹性盒子 display: flex; */
      display: flex;
      /* 设置子元素在主轴的排列方式 justify-content */
      /* justify-content设置弹性盒子垂直居中 */
      justify-content: center;
      /* aligm-items设置水平方向居中 */
      align-items: center;
      /* 设置主轴的方向 flex-direction */
      /* 主轴有四个方向: 
      row左->右  row-reverse右->左 
      column上->下 column-reverse下->上 */
      /* flex-direction: row; */
      /* flex-direction: row-reverse; */
      flex-direction: column;
      /* flex-direction: column-reverse; */
    }

    .red {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .green {
      width: 100px;
      height: 100px;
      background-color: green;
    }

    .blue {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
  </div>
</body>

</html>

在这里插入图片描述
知识点：

  • 弹性子元素有自己的排列方式
  • 弹性子元素默认水平排列
  • 主轴:默认水平方向从左向右,左边为起点,右边为重点
  • 弹性子元素默认沿着主轴从起点向重点排列
  • 交叉轴:交叉轴方向跟主轴垂直
  • 交叉轴默认方向从上向下,上边为起点,下边为重点
  • 不管主轴从左向右还是从右向左交叉轴都是从上向下的
  • 不管主轴是从上向下还是从下向上交叉轴都是从左向右的
  • 主轴有四个方向交叉轴只有两个方向

边框

通过更改border-style来改变边框的类型

<!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>
    .i1 {
        width: 100px;
        height: 100px;
        border-width: 10px;
        border-style: solid;
        border-color: black;
        border-style: double;
        border-radius: 50px;
    }
</style>
</head>
<body>
    <div class="i1"></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 {
      margin: 0;
    }

    /* 再网页中我们会把html元素想象成一个盒子 */
    /* 盒子可以设置宽高,外边距,内边距 */
    .i1 {
      width: 200px;
      height: 100px;
      border: 5px solid red;
      /* margin-top: 10px; */
      /* margin-bottom: 20px; */
      /* margin-left: 30px; */
      /* margin-right: 40px; */
      /* 当元素的左右外边距设置为auto可以水平居中 */
      margin-left: auto;
      margin-right: auto;
      /* 上 右 下 左 */
      margin: 10px 20px 30px 40px;
      /* 上下  左右 */
      /* margin: 10px 20px; */
      /* margin: 10px auto; */
      /* 上  左右  下 */
      /* margin: 10px 20px 30px; */
      /* 上下左右 */
      margin: 10px;
    }

    /* 内边距会撑大元素 */
    .i2 {
      width: 170px;
      height: 80px;
      border: 5px solid red;
      padding-top: 20px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
    }

    /* 普通盒子 */
    /* 宽 = 设置的宽度 + 左右边框 + 左右内边距 */
    /* 高 = 设置的高度 + 上下边框 + 上下内边距 */
    .i3 {
      width: 200px;
      height: 100px;
      border: 5px solid red;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      /* 边框盒子 */
      /* 宽 = 设置的宽度 */
      /* 高 = 设置的高度 */
      box-sizing: border-box;
    }
  </style>
</head>
    
<body>
  <div class="i1"></div>
  <div class="i2">这里是内容部分</div>
  <div class="i3">这里是内容部分</div>
</body>

</html>

在这里插入图片描述
通过检查功能，我们发现i2的长度和高度再观察i3的长度，发现他们在页面是一样长的，但是实际的代码是不一样的，究其原因是因为内部的间距padding给他撑大了。

固定标签

我们在许多网页都见过固定住的导航栏，那我们该如何做这种效果呢

<!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>
    .i1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: fixed;
      left: 100px;
      bottom: 0px;
      /* top: ; */
      /* right: ; */
    }

    /* 当元素没有设置宽度或者高度的时候,元素会被拉伸 */
    .i2 {
      height: 100px;
      background-color: yellow;
      position: fixed;
      left: 10px;
      right: 0;
      top: 10px;
    }

    .i3 {
      width: 100px;
      background-color: green;
      position: fixed;
      top: 0px;
      bottom: 0px;
      left: 200px;
    }
  </style>
</head>

<body>
  <div class="i1"></div>
  <div class="i2"></div>
  <div class="i3"></div>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
  123 <br> <br><br><br><br><br>
</body>

</html>

用position: fixed; 写在css中可以让其固定在顶部

用网上的图标库

从awesomeicon网站下载他们的css，然后把命令写在head中

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

把这个命令写到body中

<i class="fa fa-camera-retro"></i> fa-camera-retro

图标就出现了
在这里插入图片描述

添加底部栏

先写body的内容

 <div class="tab-bar">
        <div class="item">
            <i class="fa fa-globe"></i>
            <span>发现</span>
        </div>
        <div class="item">
            <i class="fa fa-video-camera"></i>
            <span>视频</span>
        </div>
        <div class="item">
            <i class="fa fa-music"></i>
            <span>我的</span>
        </div>
        <div class="item">
            <i class="fa fa-users"></i>
            <span>云村</span>
        </div>
        <div class="item">
            <i class="fa fa-user-o"></i>
            <span>账号</span>
        </div>
    </div>

后面的css更重要

        .tab-bar {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: white;
            height: 80px;
            /* border: 1px solid red; */
            display: flex;
            justify-content: space-evenly;
        }
        .tab-bar>.item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .tab-bar>.item>i{
            font-size: 30px;
        }
        .tab-bar>.item>span{
            margin-top: 6px;
            font-size: 14px;
        }

最后的效果就是这样的
在这里插入图片描述

添加banner

html

    <div class="banner">

        <img src="img/ad/811.jpg" alt="">
        <div class="pointer">
            <span></span>
            <span></span>
            <span class="active"></span>
            <span></span>
        </div>
    </div>

css

        .banner {
            margin-top: 60px;
            position: relative;
        }

        .banner>img {
            width: 100%;
            border-radius: 6px;

        }

        .banner>.pointer {
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 12px;
            left:0;
            right: 0;

        }

        .banner>.pointer>span {
            width: 10px;
            height: 10px;
            background-color: gray;
            margin-left: 10px;
            border-radius: 5px;
            margin-right: 4px;
        }
        .banner>.pointer>.active {
      background-color: rgb(0, 153, 255);
    }

在这里插入图片描述
但是这里的banner向上移动的时候会盖住搜索栏，他的层叠结构是不太正确的，所以我们设置了z-index

        .search {
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            left: 0;
            right: 0;
            top: 0;
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: white;
            z-index: 999;
            /* border: 1px solid red; */

        }

        .banner {
            margin-top: 60px;
            position: relative;
            z-index: 2;
        }

添加歌单并且可以滑动

html

<div class="choice">
        <div class="choice-title">
            <span class="left">你的精选歌单</span>
            <button class="right">查看更多</button>
        </div>
        <div class="choice-box">
            <div class="item">
                <img src="img/sheet/100.jpeg" alt="">
                <span>成功人士都在听的歌曲，来看看吧～</span>
            </div>
            <div class="item">
                <img src="img/sheet/10.jpg" alt="">
                <span>暮然回首，那人却在灯火阑珊处</span>
            </div>
            <div class="item">
                <img src="img/sheet/20.jpg" alt="">
                <span>温馨的歌曲，适合在家听</span>
            </div>
            <div class="item">
                <img src="img/sheet/30.jpg" alt="">
                <span>抖音热门歌曲循环</span>
            </div>
            <div class="item">
                <img src="img/sheet/40.jpg" alt="">
                <span>学习/工作/无聊/必备歌曲</span>
            </div>
            <div class="item">
                <img src="img/sheet/50.jpg" alt="">
                <span>乘风破浪会有时，直挂云帆济沧海/span>
            </div>
            <div class="item">
                <img src="img/sheet/60.jpg" alt="">
                <span>赛车爱好者必听歌曲</span>
            </div>
        </div>
    </div>

css

        .choice {

            margin-top: 10px;
        }

        .choice>.choice-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
            color: #504e4a;

        }

        .choice>.choice-title>.right {
            font-size: 12px;
            color: #999;
            border-radius: 5px;
            border: 1;
            background-color: white;
            border-color: gray;

        }

        .choice-box {
            display: flex;
            /* 设置图像可以滚动显示 */
            overflow: scroll;
        }

        /* 清除滚动条 */
        .choice-box::-webkit-scrollbar {
            display: none;
        }

        .choice-box>.item>span {
            font-size: 12px;
            /* 让文本只显示2行,并且超出的部分显示... */
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            white-space: normal;
            word-wrap: break-word;
        }

        .choice-box>.item {
            display: flex;
            flex-direction: column;
            width: 80px;
            margin-right: 10px;
        }

        .choice-box>.item>img {
            width: 80px;
            border-radius: 8px;
            margin-bottom: 6px;
        }

        .choice-box>.item>span {
            font-size: 12px;
        }

中间加入可以滑动的功能，并且要去掉滚动条
在这里插入图片描述

加入其他的功能选项

html

    <div class="category">
        <div class="item">
            <i class="fa fa-calendar"></i>
            <span>每日推荐</span>
        </div>
        <div class="item">
            <i class="fa fa-music"></i>
            <span>歌单</span>
        </div>
        <div class="item">
            <i class="fa fa-trophy"></i>
            <span>排行榜</span>
        </div>
        <div class="item">
            <i class="fa fa-bullhorn"></i>
            <span>电台</span>
        </div>
        <div class="item">
            <i class="fa fa-caret-square-o-right"></i>
            <span>直播</span>
        </div>
        <div class="item">
            <i class="fa fa-bolt"></i>
            <span>火前留名</span>
        </div>
        <div class="item">
            <i class="fa fa-comments"></i>
            <span>畅聊</span>
        </div>
    </div>

css

        .category>.item {
            display: flex;
            flex-direction: column;
            margin-top: 5px;
            margin-bottom: 5px;
            /* border: 1px solid red; */
            align-items: center;
            justify-content: center;
        }

        .category>.item>span {
            font-size: 10px;

        }

        .category>.item>i {
            color: red;
            font-size: 30px;

        }

跟下面的tab-bar效果是一样的
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/577712.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

二次元的登录界面

二次元的登录界面

今天还是继续坚持写博客&#xff0c;然后今天给大家带来比较具有二次元风格的登录界面&#xff0c;也只是用html和css来写的&#xff0c;大家可以来看看&#xff01; 个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大一在校生&#xff0c;web前端开发专业 &…
阅读更多...
[acwing周赛复盘] 第 105 场周赛20230527

[acwing周赛复盘] 第 105 场周赛20230527

[acwing周赛复盘] 第 105 场周赛20230527 总结5029. 极值数量1. 题目描述2. 思路分析3. 代码实现 5030. 核心元素1. 题目描述2. 思路分析3. 代码实现 5031. 矩阵扩张1. 题目描述2. 思路分析3. 代码实现 六、参考链接 总结 又是笨比的一周&#xff0c;只做出1题。T1 模拟T2 计…
阅读更多...
leetcode刷题之链表相关问题（js）

leetcode刷题之链表相关问题（js）

21.合并两个有序链表 var mergeTwoLists function(list1, list2) {if(list1null) return list2if(list2null) return list1let newHead new ListNode(0,null) //创建一个虚拟节点let cur newHeadlet cur1 list1,cur2 list2while(cur1&&cur2){if(cur1.val<cur2.…
阅读更多...
PowerToys Windows 工具集

PowerToys Windows 工具集

Microsoft PowerToys | Microsoft Learn Microsoft PowerToys&#xff1a;用于自定义 Windows 的实用工具 项目2023/04/1918 个参与者 反馈 Microsoft PowerToys 是一组实用工具&#xff0c;可帮助高级用户调整和简化其 Windows 体验&#xff0c;从而提高工作效率。 安装 …
阅读更多...
Unity之效应器

Unity之效应器

主要作用&#xff1a;在一个区域内让游戏对象受到力和扭矩力的作用 1、创建一个精灵&#xff08;绿色区域&#xff09; 2、为其添加碰撞器&#xff08;要将Used By Effector和is Trigger打钩&#xff09; 3、添加效应器组件 4、区域效应器参数 Use Collider Mask&#xff1a;…
阅读更多...
第3章 Class and Object

第3章 Class and Object

构造函数 Guaranteed initialization with the constructor使用构造函数保证初始化 • If a class has a constructor, the compiler automatically calls that constructor at the point an object is created, before client programmers can get their hands on the o…
阅读更多...
Solidity基础五

Solidity基础五

暂时的一事无成也代表将来万事皆有可能&#xff01; 目录 一、对Solidity文件的理解 二、Solidity的导sol文件&#xff08;库、合约&#xff09; 三、Solidity的继承 1.继承的分类 2.继承的可见性 3.父合约构造函数的传参 4.调用父合约成员 5.重写 四、Solidity的抽象…
阅读更多...
Solidity基础八

Solidity基础八

别慌&#xff0c;月亮也在大海某处迷茫 目录 一、Solidity 编程风格 1. 代码布局 2. 代码中各部分的顺序 3. 命名约定 二、Solidity 智能合约编写过程 1. solidity Hello World 2. 版本声明 3. 导入声明 4. 合约声明 三、Solidity 合约结构 智能合约 Test 四、So…
阅读更多...
Solidity基础六

Solidity基础六

生活本来就是平凡琐碎的&#xff0c;哪有那么多惊天动地的大事&#xff0c;快乐的秘诀就是不管对大事小事都要保持热情 目录 一、Solidity的特殊变量(全局) 二、Solidity的不可变量 immutable的赋值方式 三、Solidity的事件与日志 事件和日志加深理解 四、Solidity的异常…
阅读更多...
EMLP2021 ｜ Google大模型微调经典论文prompt tuning

EMLP2021 ｜ Google大模型微调经典论文prompt tuning

一、概述 title&#xff1a;The Power of Scale for Parameter-Efficient Prompt Tuning 论文地址&#xff1a;https://arxiv.org/abs/2104.08691 代码&#xff1a;GitHub - google-research/prompt-tuning: Original Implementation of Prompt Tuning from Lester, et al, …
阅读更多...
系列一、RuoYi前后端分离（登录密码加密）

系列一、RuoYi前后端分离（登录密码加密）

一、部署前后端服务 http://doc.ruoyi.vip/ruoyi-vue/ 二、现象 若依前后端环境分离版本&#xff0c;本地部署好前后端环境后&#xff0c;访问登录接口密码是明文的&#xff0c;这样显然hi不安全的&#xff0c;如下图所示&#xff1a; 三、解决方法 3.1、加密流程 ①、后端…
阅读更多...
Linux-0.11 文件系统namei.c详解

Linux-0.11 文件系统namei.c详解

Linux-0.11 文件系统namei.c详解 模块简介 namei.c是整个linux-0.11版本的内核中最长的函数&#xff0c;总长度为700行。其核心是namei函数&#xff0c;即根据文件路径寻找对应的i节点。 除此以外&#xff0c;该模块还包含一些创建目录&#xff0c;删除目录&#xff0c;创建目…
阅读更多...
Day2：Windows网络编程-TCP

Day2：Windows网络编程-TCP

今天开始进入Windows网络编程的学习&#xff0c;在学习的时候总是陷入Windows复杂的参数&#xff0c;纠结于这些。从老师的讲解中&#xff0c;这些内容属于是定式&#xff0c;主要学习写的逻辑。给自己提个醒&#xff0c;要把精力放在正确的位置&#xff0c;不要无端耗费精力。…
阅读更多...
【JavaScript】文件分片上传

【JavaScript】文件分片上传

文章目录 普通文件上传分片上传整体流程技术点分析文件选择方式隐藏input框&#xff0c;自定义trigger拖拽上传 分片动态分片 计算哈希workerrequestIdleCallback抽样 请求并发控制进度展示手动中止/暂停 合并流式并发合并 反思分片命名问题并发控制代码实现的问题 参考文献 普…
阅读更多...
ChatGPT桌面客户端支持gpt4模型，附使用说明

ChatGPT桌面客户端支持gpt4模型，附使用说明

#软件核心功能&#xff1a; 1、支持OpenAI官方秘钥及API2D双秘钥使用&#xff1b;如果全局魔法&#xff0c;可以自己用官方秘钥&#xff1b;没魔法国内可直接使用API2D秘钥&#xff1b; 2、内置GPT4模型选项&#xff0c;如果你的官方秘钥支持可直接使用&#xff1b;你也可以注册…
阅读更多...
【Labview如何显示数据库表格中的内容】

【Labview如何显示数据库表格中的内容】

Labview如何显示数据库表格中的内容 前提操作思路框图 前提 已经成功将数据库与Labview相连接&#xff0c;若还没有链接可以查看&#xff1a;Labview与SQL Server互联 进行操作 操作 思路 首先创建一个表格控件&#xff0c;通过一个按钮启动程序&#xff0c;通过程序调用数…
阅读更多...
SAP MM 根据采购订单反查采购申请

SAP MM 根据采购订单反查采购申请

如何通过采购订单号查询到其前端的采购申请号。 首先从采购申请的相关报表着手&#xff0c;比如ME5A, 发现它是可以满足需求的。 例如&#xff1a;如下的采购订单&#xff0c; 该订单是由采购申请10003364转过来的。 如果想通过这个采购订单找到对应的采购申请&#xff0c;在…
阅读更多...
Packet Tracer – 配置命名标准 IPv4 ACL

Packet Tracer – 配置命名标准 IPv4 ACL

Packet Tracer – 配置命名标准 IPv4 ACL 地址分配表 设备 接口 IP 地址 子网掩码 默认网关 R1 F0/0 192.168.10.1 255.255.255.0 N/A F0/1 192.168.20.1 255.255.255.0 N/A E0/0/0 192.168.100.1 255.255.255.0 N/A E0/0/1 192.168.200.1 255.255.2…
阅读更多...
第五十五天学习记录：C语言进阶：动态内存管理Ⅲ

第五十五天学习记录：C语言进阶：动态内存管理Ⅲ

柔性数组 C99中&#xff0c;结构中的最后一个元素允许是未知大小的数组&#xff0c;这就叫做柔性数组成员。 柔性数组的特点&#xff1a; 。结构体中的柔性数组成员前面必须至少有一个其他成员。 。sizeof返回的这种结构大小不包括柔性数组的内存。 。包含柔性数组成员的结构…
阅读更多...
【C++学习】智能指针

【C++学习】智能指针

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《C学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 智能指针 &#x1f96e;智能指针&#x1f362;为什么需要智能指针&#x1f362;RAII &#x1f96e;au…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023