使用html编写一个（移动端）静态页面

et1125

已于 2022-07-14 22:28:53 修改

阅读量5.1k

点赞数 7

文章标签： html 前端 css

于 2022-07-14 22:21:23 首次发布

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

版权

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>