移动web——喜马拉雅

最新推荐文章于 2025-05-22 10:09:27 发布
最新推荐文章于 2025-05-22 10:09:27 发布
阅读量833 收藏 11
点赞数 18
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51768441/article/details/135596124
版权

文章目录

前言

目标：使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式。

提示：以下是本篇文章正文内容，下面案例可供参考

一、网页制作思路

1.从上到下，先整体再局部

2.先标签，再 CSS 美化

3.制作顺序：图片效果>箭头>圆点

注：CSS 书写顺序：
1）. 盒子模型属性
2）. 文字样式
3）. 圆角、阴影等修饰属性

二、代码+效果图

<!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>喜马拉雅</title>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <header class="x-header">
      <div class="container">
        <a href="#" class="x-header-logo">喜马拉雅</a>
        <nav class="x-header-nav">
          <a href="#" class="nav-item">发现</a>
          <a href="#" class="nav-item">
            频道<span class="iconfont icon-down"></span>
            <div class="channel-layer">
              所有频道<br>
              所有频道<br>
              所有频道<br>
              所有频道<br>
            </div>
          </a>
          <a href="#" class="nav-item">电台</a>
        </nav>
        <div class="x-header-search">
          <form action="#">
            <input type="text" placeholder="专辑/声音/主播" />
            <a href="#" class="btn">
              <span class="iconfont icon-search"></span>
            </a>
          </form>
        </div>
        <div class="x-header-icons">
          <a href="#" class="icons-item">
            <span class="iconfont icon-cloud-upload"></span>
            <span class="tit">上传</span>
          </a>
          <a href="#" class="icons-item">
            <span class="iconfont icon-pic-left"></span>
            <span class="tit">创作中心</span>
          </a>
          <a href="#" class="icons-item">
            <span class="iconfont icon-sound"></span>
            <span class="tit">有声出版</span>
          </a>
          <a href="#" class="icons-item">
            <span class="iconfont icon-desktop"></span>
            <span class="tit">客户端</span>
          </a>
          <a href="#" class="icons-item">
            <img src="./assets/avatar.png" alt="" />
          </a>
        </div>
      </div>
    </header>
    <main class="x-main">
      <div class="container">
        <!-- banner -->
        <div class="banner">
          <ul class="banner-list">
            <li class="banner-item left">
              <a href="#">
                <img src="./assets/banner01.jpg" alt="" />
              </a>
            </li>
            <li class="banner-item">
              <a href="#">
                <img src="./assets/banner02.jpg" alt="" />
              </a>
            </li>
            <li class="banner-item right">
              <a href="#">
                <img src="./assets/banner03.jpg" alt="" />
              </a>
            </li>
          </ul>
        </div>
        <!-- category -->
        <nav class="category">
          <div class="category-top">
            <a href="#" class="top-item">
              <span class="iconfont icon-block top-item-icon"></span>
              <span>频道</span>
            </a>
            <a href="#" class="top-item">
              <span class="iconfont icon-appstore top-item-icon"></span>
              <span>分类</span>
            </a>
            <a href="#" class="top-item">
              <span class="iconfont icon-crown top-item-icon"></span>
              <span>排行</span>
            </a>
          </div>
          <div class="category-sub">
            <div class="category-sub-item">
              <a href="#" class="start">小说</a>
              <a href="#">男频</a>
              <a href="#">女频</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">相声</a>
              <a href="#">郭麒麟</a>
              <a href="#">岳云鹏</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">音乐</a>
              <a href="#">电音</a>
              <a href="#">流行</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">商业</a>
              <a href="#">市场营销</a>
              <a href="#">管理</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">健康</a>
              <a href="#">饮食</a>
              <a href="#">科普</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">科技</a>
              <a href="#">互联</a>
              <a href="#">无人驾驶</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">英语</a>
              <a href="#">听力</a>
              <a href="#">实用</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">头条</a>
              <a href="#">实时快讯</a>
              <a href="#">民生</a>
            </div>
          </div>
        </nav>
        <!-- layout -->
        <section class="layout">
          <!-- 主体内容  -->
          <div class="layout-main">
            <div class="panel">
              <div class="panel-head">
                <h3 class="panel-head-tit">猜你喜欢</h3>
                <a class="panel-head-toggle" href="#">
                  <span class="iconfont icon-sync"></span>
                  <span>换一批</span>
                </a>
              </div>
              <div class="panel-body">
                <ul>
                  <li>
                    <a href="#" class="album-item">
                      <div class="album-item-box">
                        <img class="img" src="./assets/img01.jpg" alt="" />
                      </div>
                      <p class="album-item-tit">奇妙三字经 | 诵读吟唱经典磨耳朵 | 宝宝巴士国学</p>
                      <p class="album-item-aut">宝宝巴士</p>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="album-item">
                      <div class="album-item-box">
                        <img class="img" src="./assets/img02.jpg" alt="" />
                      </div>
                      <p class="album-item-tit">我的世界 小绿的日记</p>
                      <p class="album-item-aut">狙击手小鲁</p>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="album-item">
                      <div class="album-item-box">
                        <img class="img" src="./assets/img03.jpg" alt="" />
                      </div>
                      <p class="album-item-tit">呼呼收音机：传统节日故事</p>
                      <p class="album-item-aut">呼呼收音机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="album-item">
                      <div class="album-item-box">
                        <img class="img" src="./assets/img04.jpg" alt="" />
                      </div>
                      <p class="album-item-tit">小学生必背古诗词75+80首</p>
                      <p class="album-item-aut">同优文化</p>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="album-item">
                      <div class="album-item-box">
                        <img class="img" src="./assets/img05.jpg" alt="" />
                      </div>
                      <p class="album-item-tit">朕|起点爆款历史文｜架空权谋&逆袭成帝|VIP免费有声小说</p>
                      <p class="album-item-aut">伍壹先生</p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 侧边栏 -->
          <div class="layout-aside">
            <div class="card">
              <div class="card-head">
                <img class="avatar" src="./assets/avatar.png" alt="" />
                <p class="text">登录一下，让我了解你</p>
              </div>
              <div class="card-info">
                <a href="#" class="login">登 录</a>
              </div>
            </div>
            <div class="download">
              <div class="dl">
                <p class="dl-tit">下载客户端</p>
                <a href="#" class="dl-btn">iPhone</a>
                <a href="#" class="dl-btn">Android</a>
              </div>
              <img src="./assets/hm.jpg" alt="">
            </div>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>

在这里插入图片描述

Gilpin+
关注
【系统架构设计师】论文：论软件系统架构评估
数据知道的博客
09-02 8192
我公司承担了国家某安全中心漏洞挖掘系统的开发工作，我在该项目中承担系统架构设计师的职务，主要负责系统的架构设计。该项目的主要目的是依托大数据平台从互联网流量中挖掘未知漏洞。本文以漏洞挖掘系统为例，论述了软件系统的架构评估。首先分析了软件架构评估所普遍关注的质量属性并阐述了其性能、可用性、可修改性和安全性的具体含义。整个系统采用了面向服务SOA的架构设计方法。
CSDN前1000名博主
热门推荐
无知人生，记录点滴
05-26 8万+
博主 简介 stpeace 排名：1 原创：2166 粉丝：7180 积分：181660 等级：10stpeace的专栏中国本博客供大家交流，欢迎各抒己见。博文中的内容禁止用 yuanmeng001 排名：2 原创：5286 粉丝：10660 积分：170616 等级：10袁萌专栏无穷小微积分倡导者–北大教授null老师 yjclsx 排名：3 原创：162...
推荐项目：喜马拉雅 - HTML转JSON的利器
gitblog_00560的博客
08-28 546
推荐项目：喜马拉雅 - HTML转JSON的利器 项目地址:https://gitcode.com/gh_mirrors/him/himalaya 在快速发展的Web开发领域，数据处理和结构化信息的需求日益增长。今天，我们要向大家隆重推荐一个名为**喜马拉雅（Himalaya）**的开源项目，它是一个将HTML转换为JSON的工具，简单、强大且易于集成。 项目介绍 喜马拉雅，正如其名所蕴含的高远...
web作业网页设计--静态网页（仿写喜马拉雅主页）
huhuls的博客
01-10 1546
📘适合人群：适合刚入门想自己研究的小伙伴；📓网站素材：收集好看的图片素材；📒网站文件：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑：本作品代码简单，可使用任意HTML编辑软件(如：​​Dreamweaver、HBuilder、Vscode 等任意html编辑软件进行运行及修改编辑等操作)；1.看到这里了就。
如何为网页添加CSS样式
随缘就学
01-16 2829
在装饰网页的过程中，我发现了三种非常实用的CSS应用方式：外部样式表、内部样式表和内联样式。
python django打造自己的喜马拉雅 3（主页前端+数据库）
潜心修炼--记录点滴
06-21 1193
Django Model设计：先设计两张表，一张用来存储专辑（专辑名，封面图，专辑id，添加时间），另外一张存储专辑下每一集的信息（所属的专辑，序号，trackid，音频地址，添加时间）class XimalayaMediaAlbum(models.Model): """ 喜马拉雅专辑 """ name = models.CharField(max_length=5...
2023【黑马程序员】移动 Web 第一天
abeijixingdeye的博客
01-02 947
平面转换、渐变
前端静态模板-手机仿喜马拉雅手机版-学生作业毕设实训素材.zip
04-07
《前端静态模板——手机仿喜马拉雅手机版：一个完整的毕业设计学习资源》 在IT行业中，前端开发是一项至关重要的技能，特别是在移动互联网时代，手机应用的界面设计与用户体验显得尤为重要。"前端静态模板-手机仿...
绝对干货-国内值得关注的官方API集合，很全很强大（必须收藏）
AMEPRE88的博客
08-18 4384
相关阅读： 吊炸天！74款APP完整源码！ 123个微信小程序源码分享（附下载） ［干货］2017已来，最全面试总结——这些Android面试题你一定需要 公众号：Java和Android架构 关注回复：Android,iOS,PHP,js,HTML5,Python,机
iOS：iOS开发非常全的三方库、插件等等
dienangpiao2051的博客
09-23 8201
iOS开发非常全的三方库、插件等等 github排名:https://github.com/trending, github搜索：https://github.com/search. 此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS 一、UI 下拉刷新 EGOTableViewPullRefresh- 最早...
网站喜马拉雅
02-15
腾唐喜玛 兴邦南玛哈西斯瓦科技大学（HIMATIF）班古鲁大学（孟加拉大学）丹加·唐加2006年9月22日班纳古拉Craft.io大学（Benkulu untak）与班加卢大学合影。 Kepengurusan HIMATIF dibagi menjadi 6 devisi bidang，yaitu Bidang Kerohanian，Bidang IT，Bidang Pendidikan，Bidang Olahraga dan Kesenian，Bidang Pengabdian Masyarakat dan Bidang Kewirausahaan。 Sampai saat ini，HIMATIF telah berjalan selama 11 periode yaitu dari kepengurusan pertama Yoza Saputra Utama（2007-2008年）
HTML大作业.zip
06-27
移动前端开发技术大作业，htmlcssjs。模仿喜马拉雅电台，内含视频播放器，视频全屏功能兼容性可能需要略微调试。
himawari-app:喜马拉雅前端
05-19
原 可以正常使用的WebRTC语音通话 Himawari是一个用Node.JS和React编写的小型应用程序，可让您使用浏览器进行快速语音通话。 动机 我想要一个可以让我快速共享链接并让人们加入语音会议的应用程序。 这些人不需要创建帐户，也无需在任何地方登录，只需加入链接即可以最少的步骤进行交谈。 这包括不安装某些软件。 WebRTC似乎是完美的解决方案。 我尝试了几种WebRTC应用程序，但它们似乎都无法很好地与电话配合使用，因为它们根本无法连接，这是最受欢迎的问题。 那就是我要解决的问题。 您可以简单地转到URL并附加一个随机的房间名称。 例如 https://himawari-domain.example.com/test/ 如果没有人做的话，或者如果它已经存在，就会创建一个名为test的房间，只需加入我的会议即可。 这与在主页上的房间名称框中输入test相同。 怎么跑 Hima
练习项目-听书
qq_43477157的博客
08-16 251
听书 一、项目设计 1、 观察页面，理解名词关系，简化需求 简单实现喜马拉雅听书的基本功能，观察喜马拉雅页面 有一些名词：专辑、声音、用户、故事 理解名词之间的对应关系： 用户 创建(1:m) 专辑 (故事、声音必须通过这个用户添加) 专辑 包含(1:m) 故事 故事 描述(1:1) 声音 2、 简单的功能设计： 不需要用户必须登录： 需要用户必须登录： 3、 开发方式：前后端分离方式 前端：AJAX + DOM树修改 后端：提供 JSON 格式的
Python爬虫 -- 喜马拉雅爬虫
Avaricious_Bear的博客
06-24 935
向服务器发送请求 ----> 得到json数据包 ----> 分析json数据包 ----> 提取json数据包中的有用数据 ----> 存储到本地MongoDB数据库。Python所有方向路线就是把Python常用的技术点做整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。最终的数据插入到了本地的MongoDB数据库。
怎样用html播放喜马拉雅音频文件格式,喜马拉雅音频提取方法
weixin_32673065的博客
06-07 930
自动分句软件下载地址：http://www.listeneer.com/html/date/Imported-V4.6.4.zip[将此链接复制粘贴到浏览器的网址栏，然后按回车键，点击下载，不要放在电脑C盘或者桌面]，如下图：下载下来之后，将其解压，解压的方法：用鼠标右键单击，选择解压到当前文件夹，如下图：喜马拉雅免费音频提取方法↓：第一步：双击“自动分句软件.exe”在电脑上面运行自动分句...
喜马拉雅第三方客户端开发（接口和接口数据解析）。
weixin_34355715的博客
11-28 2442
前言：最近闲来无事，看了网上豆瓣的第三方客户端，手有点痒，决定自己动手开发一个客户端，比较了荔枝和喜马拉雅，决定开发喜马拉雅的第三方客户端。 客户端使用了WPF开发。 1.抓取接口； 首先得解决接口数据的问题，使用了手机端的喜马拉雅，抓包看了接口。这里推荐使用fiddler2这个工具。从图中可以看到接口信息，包括接口地址和参数的一些数据。 2.通过http获取接口数据和转换接口数据格式。 ...
基于Browser Use + Playwright 实现AI Agent操作Web UI自动化
fantasy_4的博客
05-21 821
基于Browser Use + Playwright 实现AI Agent操作Web UI自动化
【sylar-webserver】10 HTTP模块
最新发布
weixin_52355727的博客
05-22 1010
HTTP 模块
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值