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

已于 2022-07-14 22:26:10 修改
阅读量1.2k 收藏 6
点赞数 1
文章标签： html 前端
于 2022-07-14 20:22:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53566222/article/details/125791598
版权
本文通过HTML代码展示了如何制作一个喜马拉雅的静态页面。页面主要依赖于在线图片，部分图片需单独下载。成品中‘猜你喜欢’区域需要后端渲染或采用替代方案来显示图片。
摘要由CSDN通过智能技术生成

html代码
编写的是喜马拉雅的页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index1.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <header>
        <div class="title">
            <div>
                <img src="../img/W9~1MZTF0UAH]GC$1A[Z`UY.png" alt="">
                <a href=""><span>发现</span></a>
                <span class="pindao">频道
                    <ul class="select">
                        <li>小说</li>
                        <li>儿童</li>
                        <li>相声小品</li>
                        <li>评书</li>
                        <li>娱乐</li>
                        <li>悬疑</li>
                        <li>头条</li>
                        <li>音乐</li>
                        <li>历史</li>
                        <li>情感</li>
                        <li>理财投资</li>
                        <li>个人提升</li>
                        <li>影视</li>
                        <li>商业管理</li>
                        <li>英语</li>
                        <li>少儿素养</li>
                        <li>科技</li>
                        <li>教育考试</li>
                    </ul>
                </span>
                <a href=""><span>电台</span></a>
                <input type="text" placeholder="专辑/声音/主播">
                <!-- </div>
            <div class="right"> -->
                <ul>
                    <li><img src="../img/NPQQKED)169EJSB8K[0K0(M.png" alt="">
                        <p>上传</p>
                    </li>
                    <li><img src="../img/EEQ4$7FS$KRH~KATY8IXN]C.png" alt="">
                        <p>创作中心</p>
                    </li>
                    <li><img src="../img/6]C3]TY24UKN1829LLM`Q)B.png" alt="">
                        <p>有声出版</p>
                    </li>
                    <li><img src="../img/H]_EPF9PRVU35D046K{T}DV.png" alt="">
                        <p>客户端</p>
                    </li>
                    <li><img src="../img/5H2XJMV5IN4I[C7N84V4IGK.png" alt="" class="irl"></li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 中间内容区域 -->
    <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="one">
        <div class="title1">
            <ul>
                <li><img src="../img/fenlei.png" alt="">
                    <p>分类</p>
                </li>
                <li><img src="../img/pinpaitemai.png" alt="">
                    <p>频道</p>
                </li>
                <li><img src="../img/paixingbang.png" alt="">
                    <p>排行</p>
                </li>
            </ul>
        </div>
        <div class="title2">
            <ul>
                <li>
                    <a href="#"><span>小说 |</span>
                        <a href=""><span>男频</span></a>
                        <a href=""><span>女频</span></a>
                </li>
                <li>
                    <a href=""><span>相声 |</span></a>
                    <a href=""><span>郭麒麟</span></a>
                    <a href=""><span>岳云鹏</span></a>
                </li>
                <li>
                    <a href=""><span>音乐 |</span></a>
                    <a href=""><span>电音</span></a>
                    <a href=""><span>流行</span></a>
                </li>
                <li>
                    <a href=""><span>建党 |</span></a>
                    <a href=""><span>学党史</span></a>
                    <a href=""><span>学党史</span></a>
                </li>
                <li>
                    <a href=""><span>健康 |</span></a>
                    <a href=""><span>饮食</span></a>
                    <a href=""><span>科普</span< /a>
                </li>
                <li>
                    <a href=""><span>科技 |</span></a>
                    <a href=""><span>智能树</span></a>
                    <a href=""><span>互联网</span></a>
                </li>
                <li>
                    <a href=""><span>英语 |</span></a>
                    <a href=""><span>听力</span< /a>
                            <a
最低0.47元/天 解锁文章
et1125
关注
如何制作PC端Html网页
kerryqpw的博客
05-18 3111
如何制作PC端Html网页
PC端网页版商城静态页面
03-11
商城前端静态页面完整版、网页版PC端WEB开发前端静态页面
如何制作PC端静态网页
weixin_42306249的博客
04-08 911
开发流程 需求分析-》整体规划-》界面设计-》前端程序设计-》前后端系统整合-》测试验收 开发前准备 确定页面版心（常见的版心宽度值包括960px、980px、1000px、1200px等） 版心一般水平居中显示（使用标准流中的margin:0 auto;居中） 分析页面中的行模块，以及每个行模块中的列模块 – 确定布局类型（一列固定宽度且居中、两列左窄右宽型、通栏平均分布型，更多情况下，一个网页中可能同时包括2种以上的布局类型） 开发 制作HTML页面，CSS文件等 <head>内的
关于PC 端静态页面HTML标签使用注意的小事项 以及CSS可以使用的一些简单小技巧
LRQQHM的博客
05-10 318
HTML标签需要注意的： 对于行内元素a标签而言 a标签里面不能嵌套a标签 文本类标签里面如：p标签 h1-h6标签里面最好不要套块级标签 CSS简单的小技巧 1.在一些地方合理利用继承性可以使代码更加简洁 可以被继承的属性fon- line- text- color 2.在布局中有一些导航栏居中显示 可以充分使用行内块将齐转换成行内块 利用text-align：center居中 解决行内块中的缝隙问题 可以用font-size:0;然后再单独设置样式 不过此处使用要注意继承的问题 3.对于解决图片底
PC端超炫登录页面HTML5+CSS3
11-22
这是一个超炫的登录界面，使用HTML5+CSS3 实现的登录界面，效果是使用canvs画出来的，可惜这里不能上传展示图片，能上传我就上传一个了，个人感觉很好看，背景图可以自己进行更换，背景图是通过CSS文件引入放的，在demo.css文件中可以找到进行更换 background-image: url(../img/Starry.jpg)
【项目】pink老师-PC端静态页面项目实战-品优购.7z
01-13
在本项目"pink老师-PC端静态页面项目实战-品优购"中，作者通过实践应用CSS和HTML技术，构建了一个模拟的电商网站静态页面。这个项目旨在提升前端开发技能，特别是对于初学者来说，是一个很好的实践平台。下面将详细...
10几个纯静态HTML小游戏，适配移动端PC端
01-22
这些资料构成了一组纯静态HTML小游戏集合，适合在移动端和PC端运行，无需任何特定的运行环境或服务器支持。这体现了HTML技术的强大之处，它能够跨平台地展示内容，为用户提供便捷的游戏体验。 HTML（HyperText ...
华为pc端官网静态页面
11-16
在这个项目中，我们关注的是华为PC端官网的静态页面设计与实现，这是一个非常适合前端初学者和新手实践的案例。通过构建这三个静态页面，开发者可以深入理解和掌握HTML、CSS等基础前端技术，提升网页开发技能。 ...
PC端电脑端商城模板前端静态页面商城模板
06-15
【标题】"PC端电脑端商城模板前端静态页面商城模板"是一个专为个人计算机（PC）设计的在线购物平台的前端界面。这个模板是静态的，意味着它主要由HTML、CSS和JavaScript等前端技术构建，不包含服务器端的动态交互...
品优购-PC端静态页面实战项目
06-06
HTML+CSS静态页面布局，无JS，基础阶段完结
meizu静态pc端主页面仿写.zip
03-29
前端学习——meizu静态pc端主页面仿写（html+css)
html5pc静态模板01（22套）
08-26
html5适合移动开发，直接支持多媒体功能，是未来移动应用跨平台解决方案之一。
完整的商城静态网页(适配手机端和电脑端)
03-11
完整的商城静态网页(适配手机端和电脑端) 完整的商城静态网页(适配手机端和电脑端)
大气美观的静态网页模板_html静态网页素材
01-06
国外旅游行业大气又好看的静态网站源码，可作为前端模板学习使用，简洁大方，扁平炫酷，响应式设计。
PC端静态页走过的坑
一个有趣、有料、有内涵的地方!
02-27 598
一、PC端响应式     结构上无非就是DIV+CSS。     主要的页面布局是非常经典的双飞翼布局，主要通过三个样式实现：浮动float、负边距negative margin、相对定位relative；这种布局产生的低版本浏览器bug非常少。     响应式对应的宽度有三种。然后根据产品需求来进行不同区块的隐藏和显现。     比如：一整行结构，没有需求显示固定区块，body内定义的响
静态pc端页面，你一定用得上的技巧
最新发布
qq_65359222的博客
04-24 1766
如上图，每个盒子都有一个属于自己的padding值，也就是内边距，是盒子内容与自己的边框的一个距离。 用法: 在盒子属性里面写 注意：在css盒子模型中内边距会撑大盒子。外边距margin主要是来控制盒子与盒子之间的距离，用法与padding相似。 例如：我有两个div盒子，现在两盒width:100px height:100px。 我给他们分别设置一个margin值 黑色盒子间就有一个距离。 外边距合并 ,盒子塌陷问题： 什么是盒子塌陷，简单的来说就是如果我有两个盒子是父子关系，给父亲和儿子分别设置一
页面布局设计与PC端后台界面实战
weixin_39218464的博客
06-16 804
前端页面布局初探
HTML+CSS在线做题网页版-数据结构版
振云博客
10-21 4815
下面图片是网页的效果示意图： 第一步：首先要下载js文件 去本人博客就能免费下载 本人博客链接：http://zhenyunboy.icu/?p=302 第二步：将下面html代码复制到你的html代码中运行即可： <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=de
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值