使用html编写一个（移动端）静态页面_html移动端页面怎么做-程序员宅基地

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>
        * {
      
            margin: 0;
            padding: 0;
        }

        html {
      
            font-size: calc(100vw / 750);
        }

        .tubaio {
      
            background-image: url('./img1/sousuo.png');
            background-size: 7%;
            background-repeat: no-repeat;

            /* background-image: url('./img1/的声音_voice23 (1).png');
            background-size: 7%;
            background-repeat: no-repeat;     */
        }
    </style>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!-- 导航栏 -->
    <header>
        <div class="input">
            <input type="text" class="tubaio" placeholder="          深夜书屋">
            <img src="./img1/的声音_voice23 (1).png" alt="">
        </div>
        <img src="./img1/icon_tianjia.png" alt="">
    </header>
    <!-- 二级菜单 -->
    <nav>
        <section class="caidan">
            <ul>
                <li>直播</li>
                <li>推荐</li>
                <li>娱乐</li>
                <li>小说</li>
                <li>儿童</li>
                <li>播客</li>
                <li>相声</li>
                <li><img src="./img1/gengduo.png" alt="" class="gengduo"></li>
            </ul>
        </section>
    </nav>
    <article>
        <!-- 中间内容区域 -->
        <section class="picture">
            <div class="picture-img">
                <img src="https://imagev2.xmcdn.com/storages/5ee0-audiofreehighqps/8C/5A/GKwRIDoGJbKqAAJRiAE3os59.jpeg!strip=1&quality=7&magick=webp&op_type=5&upload_type=cover&name=large_pop&device_type=ios"
                    alt="">
                <img src="https://imagev2.xmcdn.com/storages/30e4-audiofreehighqps/80/F9/GKwRIMAGJa_2AAI7xQE3oTlN.jpeg!strip=1&quality=7&magick=webp&op_type=5&upload_type=cover&name=large_pop&device_type=ios"
                    alt="">
                <img src="https://imagev2.xmcdn.com/storages/3aed-audiofreehighqps/95/03/GKwRIUEGJcQWAAJKtwE3rbUy.jpeg!strip=1&quality=7&magick=webp&op_type=5&upload_type=cover&name=large_pop&device_type=ios"
                    alt="">
                <img src="https://imagev2.xmcdn.com/storages/72d9-audiofreehighqps/B9/7E/GMCoOSUGJbBCAAGLuAE3oWWu.jpeg!strip=1&quality=7&magick=webp&op_type=5&upload_type=cover&name=large_pop&device_type=ios"
                    alt="">
                <img src="https://imagev2.xmcdn.com/storages/5ee0-audiofreehighqps/8C/5A/GKwRIDoGJbKqAAJRiAE3os59.jpeg!strip=1&quality=7&magick=webp&op_type=5&upload_type=cover&name=large_pop&device_type=ios"
                    alt="">
            </div>
        </section>
        <!-- 菜单面板 -->
        <section class="zhongjian">
            <div>
                <ul>
                    <li><img src="./img1/paixingbang.png" alt="">
                        <p>排行榜</p>
                    </li>
                    <li><img src="./img1/pinpaitemai.png" alt="">
                        <p>限时免费</p>
                    </li>
                    <li><img src="./img1/hangkonghangtian-yuzhoufeichuanspacecraft.png" alt="">
                        <p>科幻基地</p>
                    </li>
                    <li><img src="./img1/shu.png" alt="">
                        <p>喜马讲书</p>
                    </li>
                    <li><img src="./img1/renxiang.png" alt="">
                        <p>悬疑推理</p>
                    </li>
                </ul>
                <ul>
                    <li><img src="./img1/xianxingyueliang.png" alt="">
                        <p>放松音乐</p>
                    </li>
                    <li><img src="./img1/shanzi.png" alt="">
                        <p>相声小品</p>
                    </li>
                    <li><img src="./img1/huo.png" alt="">
                        <p>今日热点</p>
                    </li>
                    <li><img src="./img1/fuwudiqiu.png" alt="">
                        <p>听天下</p>
                    </li>
                    <li><img src="./img1/gengduo1.png" alt="">
                        <p>更多</p>
                    </li>
                </ul>
            </div>
        </section>
        <section class="one">
            <span>猜你喜欢</span>
            <span><img src="./img1/huanyihuan.png" alt=""> 换一批</span>
        </section>
    </article>
    <section class="two">
        <div class="all">
            <div class="right">
                <img src="./img1/36M@Q7}Z}S}RS6U4EL41ONB.png" alt="">
            </div>
            <div class="left">
                <p>夜的命名术丨年度都市异能霸榜神作丨紫襟领衔有声剧</p>
                <span>蓝与紫的霓虹中，浓密的钢铁苍穹下，数据洪流的前端。
                    这里，表世界与里世界并存，面前的一切，像是时间之墙近在眼前。
                    黑暗逐渐笼罩。
                    可你要明白啊我的朋友，我们不能用温柔去应对黑暗，要用火
                </span>
            </div>
        </div>
        <div class="all">
            <div class="right">
                <img src="./img1/36M@Q7}Z}S}RS6U4EL41ONB.png" alt="">
            </div>
            <div class="left">
                <p>夜的命名术丨年度都市异能霸榜神作丨紫襟领衔有声剧</p>
                <span>蓝与紫的霓虹中，浓密的钢铁苍穹下，数据洪流的前端。
                    这里，表世界与里世界并存，面前的一切，像是时间之墙近在眼前。
                    黑暗逐渐笼罩。
                    可你要明白啊我的朋友，我们不能用温柔去应对黑暗，要用火
                </span>
            </div>
        </div>
        <div class="all">
            <div class="right">
                <img src="./img1/36M@Q7}Z}S}RS6U4EL41ONB.png" alt="">
            </div>
            <div class="left">
                <p>夜的命名术丨年度都市异能霸榜神作丨紫襟领衔有声剧</p>
                <span>蓝与紫的霓虹中，浓密的钢铁苍穹下，数据洪流的前端。钢铁与身体，过去与未来。
                    这里，表世界与里世界并存，面前的一切，像是时间之墙近在眼前。
                    黑暗逐渐笼罩。
                    可你要明白啊我的朋友，我们不能用温柔去应对黑暗，要用火</span>
            </div>
        </div>
    </section>
    <!-- 结尾 -->
    <footer>
        <div>
            <ul>
                <li>首页</li>
                <li>会员</li>
                <li>播放</li>
                <li>动态</li>
                <li>我的</li>
            </ul>
        </div>
    </footer>
</body>
</html>

css代码

header {
    
  width: 100%;
  height: 100rem;
  display: flex;
  justify-content: space-around;
}

header input {
    
  background-color: rgba(199, 181, 181, 0.377);
  border: white;
  width: 650rem;
  height: 50rem;
  font-size: 20rem;
  border-radius: 30rem;
}

header img {
    
  width: 26rem;
  height: 26rem;
  margin-top: 40rem;
}

section.caidan li {
    
  list-style: none;
  display: inline-block;
  width: 72rem;
  height: 60rem;
  font-size: 20rem;
  margin-left: 10rem;
}

section.caidan li:hover {
    
  color: red;
}

section.picture {
    
  width: 100vw;
  overflow: hidden;
  margin-top: 20rem;
}

section.picture .picture-img {
    
  width: 500vw;
  height: 280rem;
  display: flex;
  justify-content: space-around;
  animation: mylunbo 8s infinite;
}

section.picture img {
    
  width: 80vw;
  height: 280rem;
  border-radius: 10rem;
}

@keyframes mylunbo {
    
  0%,
  25% {
    
    transform: translateX(0);
  }
  25%,
  50% {
    
    transform: translateX(-100vw);
  }
  50%,
  75% {
    
    transform: translateX(-200vw);
  }
  75%,
  99% {
    
    transform: translateX(-300vw);
  }
  99%,
  100% {
    
    transform: translateX(-400vw);
  }
}

section.zhongjian ul {
    
  margin-top: 20rem;
}

section.zhongjian li {
    
  list-style: none;
  display: inline-block;
  width: 130rem;
  height: 130rem;
  font-size: 20rem;
  margin-left: 4rem;
  border-radius: 50%;
  background-color: rgba(255, 0, 0, 0.274);
}

section.zhongjian li:hover {
    
  background-color: rgba(189, 184, 184, 0.445);
}

section.zhongjian img {
    
  width: 50rem;
  height: 50rem;
  text-align: center;
  margin-left: 40rem;
  margin-top: 30rem;
}

section.zhongjian p {
    
  text-align: center;
}

section.one {
    
  display: flex;
  justify-content: space-around;
  margin-top: 20rem;
  margin-bottom: 20rem;
}

section.one span {
    
  font-size: 20rem;
  font-weight: 700;
  text-align: center;
}

section.one img {
    
  width: 20rem;
  height: 20rem;
}

section.one span:hover {
    
  background-color: wheat;
}

section.two div {
    
  margin-top: 5rem;
  height: 200rem;
}

section.two img {
    
  width: 150rem;
  height: 150rem;
}

section.two .right {
    
  float: left;
}

section.two .left {
    
  float: right;
  font-size: 22rem;
}

section.two p {
    
  font-weight: 600;
}

section.two span {
    
  font-weight: 500;
  width: 560rem;
  height: 200em;
  float: right;
  color: rgba(0, 0, 0, 0.493);
}

footer li {
    
  list-style: none;
  display: inline-block;
  font-size: 50rem;
  margin-left: 30rem;
}

footer li:hover {
    
  color: red;
}

成品展示
在这里插入图片描述

中间是一个轮播图

本文链接：https://blog.csdn.net/qq_53566222/article/details/125794163

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

C#中数组，ArrayList与List对象的区别-程序员宅基地

在C#中，当我们想要存储一组对象的时候，就会想到用数组，ArrayList,List这三个对象了。那么这三者到底有什么样的区别呢？我们先来了解一下数组，因为数组在C#中是最早出现的。数组数组有很多的优点，比如说数组在内存中是连续存储的，所以它的索引速度是非常的快，而且赋值与修改元素也很简单，比如：string[] s=new string[3];//赋值s[0]="a";

智能制造工厂中的人工智能和大数据技术_人工智能和大数据在智能制造中的应用-程序员宅基地

智能制造工厂中的人工智能和大数据技术人工智能技术主要分四个方面1 通过神经网络技术对产品制造全流程数据进行分析，找到提高产品质量的办法；2 通过计算机视觉（ar/vr)和神经网络技术，智能制造设备具备自学习、自适应的能力3 通过车间无人小车（agv)，仓库无人分拣机器人生产线工业机器人的使用，达到无人化操作4 在产品上装上传感器，通过大数据和数据挖掘算_人工智能和大数据在智能制造中的应用

Windows蓝屏的解决办法（如：UNEXPECTED_STORE_EXCEPTION蓝屏）-程序员宅基地

可以通过以下方案收集您的dump日志文件：打开控制面板>>系统>>高级系统设置>>高级>>启动和故障恢复>>设置，写入调试信息>>选择“小内存转储（256KB）”，路径选择默认，确定并重启您的计算机。再次异常关机后，前往C:\Windows\Minidump提取相关文件进行分析，是哪个驱动出了问题。来源链接PS：最新版本的Windows“启动和故障恢复”已经有所区别，打开方式：方法1、开始菜单 - 齿轮（设置） - 系统 -_unexpected_store_exception

JS基本语法-JavaScript中的常用对象1-Date对象，即日期和时间对象_js date1-date2-程序员宅基地

date日期时间处理对象，获取日期时间，设置日期时间等相关方法的使用_js date1-date2

数据结构之双向链表详解------新手向C语言实现_双向链表,出入元素步骤混了,结果是怎样的_int Yang的博客-程序员宅基地

数据结构之双向链表详解------新手向C语言实现_双向链表,出入元素步骤混了,结果是怎样的

Rancher入门到精通-Kubernetes强制删除Terminating的ns_kubectl terminating ns-程序员宅基地

1. kubectl get ns 查看处于Terminating的ns[root@VM_1_4_centos ~]# kubectl get ns | grep testnstestns Terminating 21d2. 将处于Terminating的ns的描述文件保存下来[root@VM_1_4_centos ~]# kubectl get ns testns -o json > tmp.json[root@VM_1_4_centos _kubectl terminating ns

随便推点

设计模式之适配器模式(Java实现)_适配器模式java实现_长路 ㅤ 的博客-程序员宅基地

文章目录前言一、认识适配器模式二、实现适配器模式2.1、类适配器与对象适配器模式总结参考资料前言本篇博客是关于适配器模式的实现，若文章中出现相关问题，请指出！对应代码地址：Gitee（demo-exer/ java-Lear23designpatterns）、Github（java-demo/ java-Lear23designpatterns）所有博客文件目录索引：博客目录索引(持续更新)一、认识适配器模式目的：将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的_适配器模式java实现

hdu 2546 饭卡 01背包 Java_hdu2546 java代码-程序员宅基地

hdu 2546 饭卡贪心加 01 背包因为要使最后的余额最少，而且还需要大于等于5元才能购买，所以倒数第二次购买后的钱一定要大于或等于（余额-5），因此背包容量就是（余额-5）。把最贵的留到最后进行购买。import java.util.Arrays;import java.util.Scanner;/** * @author wangshaoyu */public class Hdu2546 { public static void main(String[] arg_hdu2546 java代码

Android STB ROM体积精简_bigfish_2.4.7.apk-程序员宅基地

Android STB开发、缩减update.zip体积_bigfish_2.4.7.apk

Spring AOP__微风轻拂的博客-程序员宅基地

AOP 技术2.1 AOP技术简介2.1.1 简介AOP（Aspect Orient Programming）是一种设计思想，是软件设计领域中的面向切面编程，它是面向对象编程(OOP)的一种补充和完善。实际项目中我们通常将面向对象理解为一个静态过程(例如一个系统有多少个模块，一个模块有哪些对象，对象有哪些属性)，面向切面理解为一个动态过程（在对象运行时动态织入一些扩展功能或控制对象执行）。AOP 与 OOP 字面意思相近，但其实两者完全是面向不同领域的设计思想。实际项目中我们通常将面向对象理解为一个

mpush 服务端配置 for windows 服务自动运行-程序员宅基地

mpush 服务端配置以下安装部分是参照官方的步骤，一、安装jdk1.8并配置环境变量示例： http://www.cnblogs.com/endv/p/6439860.html 二、Windows安装Redis下载地址Github （https://github.com/MSOpenTech/redis/releases）， Redis-x64-3....