100字范文 > 使用html编写一个（pc端）静态页面

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

时间：2021-11-23 21:16:14

相关推荐

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

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="/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="">发现</a>频道<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><a href="">电台</a><input type="text" placeholder="专辑/声音/主播"><ul><li><img src="../img/NPQQKED)169EJSB8K[0K0(M.png" alt="">上传</li><li><img src="../img/EEQ4$7FS$KRH~KATY8IXN]C.png" alt="">创作中心</li><li><img src="../img/6]C3]TY24UKN1829LLM`Q)B.png" alt="">有声出版</li><li><img src="../img/H]_EPF9PRVU35D046K{T}DV.png" alt="">客户端</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="/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="/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="/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="/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="/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="">分类</li><li><img src="../img/pinpaitemai.png" alt="">频道</li><li><img src="../img/paixingbang.png" alt="">排行</li></ul></div><div class="title2"><ul><li><a href="#">小说 |<a href="">男频</a><a href="">女频</a></li><li><a href="">相声 |</a><a href="">郭麒麟</a><a href="">岳云鹏</a></li><li><a href="">音乐 |</a><a href="">电音</a><a href="">流行</a></li><li><a href="">建党 |</a><a href="">学党史</a><a href="">学党史</a></li><li><a href="">健康 |</a><a href="">饮食</a><a href="">科普</span< /a></li><li><a href="">科技 |</a><a href="">智能树</a><a href="">互联网</a></li><li><a href="">英语 |</a><a href="">听力</span< /a><a href="">实用</spa< /a></li><li><a href="">头条 |</a><a href="">实时快讯</a><a href="">民生</a></li></ul></div></section><section class="two"><a href="#">| 猜你喜欢</a></section><section class="three"><div class="cnxh"><script> 这里需要链接后端选择下面那个可以不用链接axios.post('http://127.0.0.1:7001/hong',).then(function(res){console.log(res.data)var fa = document.querySelector('.cnxh')for (var i=0;i<res.data.length;i++){var div = document.createElement('div')div.innerHTML=`<img src="http://127.0.0.1:7001${res.data[i].img}" alt=""><div>"${res.data[i].wenzi}</div>`fa.appendChild(div)}})</script>选择这个可以不用链接后端但是需要自行改一下代码</div></section><section class="four"><a href="">| 有声书</a><ul><li>斗破苍穹 |</li><li>盗墓笔记 |</li><li>一剑独尊 |</li><li>三体 |</li><li>大魏读书人 |</li><li>免费听全版小说</li></ul></section><section class="five"><div><ul><li><img src="/group40/M03/BD/2C/wKgJT1q6Ba2g4hl0AAKy0v-Sj8o053.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本她是天才特工，第一次任务却惨遭失败穿越掉落龙床，打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>骤雨惊弦</a></li><li><img src="/group52/M06/E7/A3/wKgLcFw3eNLwxgaiAA1et8_djW8389.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>有声的紫襟</a></li><li><img src="/group53/M0B/61/A9/wKgLfFv_sxmT2gMmAAPRuOuTIRE310.png!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>王明军演播</a></li><li><img src="/group52/M02/D7/83/wKgLe1wKJL_yfRirAAMCR_QeSjQ497.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>有声的紫襟</a></li><li><img src="/group38/M04/16/FA/wKgJolqBROqhrQ2cAAFiBxC87jQ543.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>喜马拉雅</a></li><li><img src="/group35/M03/E0/1F/wKgJnFoWLtqiwzAlAADxe_USeUs587.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>君言讲故事</a></li><li><img src="/group67/M06/9D/A8/wKgMd13fX6Wx4veOAAIkq--NGsg449.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>有声的紫襟</a></li><li><img src="/group48/M08/FA/CF/wKgKlVtqooCTulSYAAGSDEoPsL4051.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>王明军演播</a></li><li><img src="/group35/M00/42/B0/wKgJnVoT5fDDglWsAADu1F7yuTs472.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>有声的紫襟</a></li><li><img src="/group44/M08/58/60/wKgKjFsg56qAGZ5gAAKz1wPpVu8869.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>喜马拉雅</a></li></ul></div></section><section class="four"><a href="#">| 相声评书</a><ul><li>隋唐演义 |</li><li>相声 |</li><li>杨家将 |</li><li>听相声学成语 |</li><li>相声大全 |</li><li>岳飞传</li></ul></section><section class="five"><div><ul><li><img src="/group51/M06/31/EC/wKgKnlvuivzzUWKOAAXjTSxd884058.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>君言讲故事</a></li><li><img src="/storages/5951-audiofreehighqps/F2/58/GKwRIJIFfkkKAALXdwD9zZLW.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>有声的紫襟</a></li><li><img src="/group49/M05/06/A7/wKgKl1vgAOviN-b_AACL-e92UCA779.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>王明军演播</a></li><li><img src="/group77/M02/41/EA/wKgO3159jZWDbAogAAJZGCbNlWU509.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>有声的紫襟</a></li><li><img src="/group20/M05/6D/C2/wKgJJ1f8bS3hHVx6AAG1GC8ndaQ207.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>喜马拉雅</a></li><li><img src="/group21/M06/32/EA/wKgJLVgkEE6C5PfEAADWc15xzno889.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>君言讲故事</a></li><li><img src="/group23/M02/5D/93/wKgJL1g0SKzTRwU9AAG1LGWoXWg235.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>有声的紫襟</a></li><li><img src="/group19/M03/52/87/wKgJJlfzTvqzi--8AADlf_dRfg0874.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>王明军演播</a></li><li><img src="/group25/M0B/32/D0/wKgJNlgkB_vBNsYpAADe8MgmIUg900.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>有声的紫襟</a></li><li><img src="/storages/b45c-audiofreehighqps/85/F7/GMCoOSMFdLd-AAPPzAD7BSii.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本打断暴君的动作片。身中迷药的她，却把暴君当做了鸭，吃干抹净就走，还留下小费？这个女人欺人太甚！然而暴君是用来虐的，钱是随便花的，武功是欺负弱小的，美貌嘛嘿嘿自然是拿来挑逗帅哥的……<a>喜马拉雅</a></li></ul></div></section><section class="four"><a href="#">| 儿童</a><ul><li>莫西西魔法日记 |</li><li>闹闹别闹上学计 |</li><li>装在口袋里的爸 |</li><li>十万个为什么 |</li><li>成语故事 |</li><li>猫爪怪探团</li></ul></section><section class="five"><div><ul><li><img src="/group50/M05/26/4A/wKgKnVvJmHzDD5FcAAQcD8h-i5E891.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>君言讲故事</a></li><li><img src="/group44/M04/01/E9/wKgKjFsoq5iR0KMQAACtstA_wMk211.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。…<a>有声的紫襟</a></li><li><img src="/group52/M01/A9/8A/wKgLcFwSRh3yfWf1AAGfrgabxkY760.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。…<a>王明军演播</a></li><li><img src="/group47/M0B/76/EB/wKgKk1tMCoXjFyxqAAFTYhvVppo850.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>有声的紫襟</a></li><li><img src="/group20/M05/6D/C2/wKgJJ1f8bS3hHVx6AAG1GC8ndaQ207.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>喜马拉雅</a></li><li><img src="/group53/M04/3E/55/wKgLfFwYowfTdTQaAAYW3mkTab8818.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>君言讲故事</a></li><li><img src="/group23/M02/5D/93/wKgJL1g0SKzTRwU9AAG1LGWoXWg235.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>有声的紫襟</a></li><li><img src="/group44/M00/A0/4D/wKgKkVsvaoHiK4K7AAIhmufrEXc566.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>王明军演播</a></li><li><img src="/group46/M03/49/83/wKgKlltFsPyiKYdUAAIbAShoIq0910.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>有声的紫襟</a></li><li><img src="/group48/M01/3C/49/wKgKnFt6ViWhn0rNAAou2CvAIUE073.png!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>喜马拉雅</a></li></ul></div></section></section><section class="four"><a href="#">| 娱乐</a><ul><li>莫西西魔法日记 |</li><li>闹闹别闹上学计 |</li><li>装在口袋里的爸 |</li><li>十万个为什么 |</li><li>成语故事 |</li><li>猫爪怪探团</li></ul></section><section class="five"><div><ul><li><img src="/group44/M07/1A/41/wKgKjFsXlKKQFk8mAAE6lOJKgeY675.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>君言讲故事</a></li><li><img src="/storages/2549-audiofreehighqps/DE/79/CMCoOSEDvMZaAAEwgAB1IO2H.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。…<a>有声的紫襟</a></li><li><img src="/group80/M05/FB/9C/wKgPDF6q7NOS0zfiAAKUHq9tv88001.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。…<a>王明军演播</a></li><li><img src="/group45/M03/9A/25/wKgKjlt7t4ziNdhJAADd26fyYto703.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>有声的紫襟</a></li><li><img src="/group46/M02/86/80/wKgKllt7vovw_BobAADuU-Q6I7g050.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>喜马拉雅</a></li><li><img src="/group46/M02/86/B1/wKgKllt7we-CgRE2AADclikRQOM363.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>君言讲故事</a></li><li><img src="/group57/M05/8E/B1/wKgLgVyIsF_CxRriAAIt1u9fqso449.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>有声的紫襟</a></li><li><img src="/group43/M06/20/A3/wKgKklsN_pvgZ6CeAAIa_Ys8L28623.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>王明军演播</a></li><li><img src="/storages/a1d6-audiofreehighqps/A5/7B/CMCoOSUD7XOoAAGL5QCCWxo_.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>有声的紫襟</a></li><li><img src="/group33/M02/85/08/wKgJTFpcaUCS86jcAADx8I4Z1Fs369.jpg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"alt="">完本每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。在他们求知欲强、记忆力强的最美好的童年时光，用各种优秀、美妙的故事浸润心灵，必将对其成长产生深远的影响，并决定孩子的一生是否会感到幸福和满足。<a>喜马拉雅</a></li></ul></div></section><section class="six"><div class="six1"><h4>热播榜</h4></div><div class="six2"><ol><li><img src="/storages/5a86-audiofreehighqps/D8/E5/GKwRIJEFfkl9AAOIigD9zcBJ.png!strip=1&quality=7&magick=webp&op_type=5&upload_type=cover&name=web_large&device_type=ios"alt=""><div>郭德纲相声精选德云社郭德纲相声vip</div></li><li><img src="/storages/01d4-audiofreehighqps/CB/9F/GKwRIW4Fm0fRAAWzMgEGTa17.jpg!strip=1&quality=7&magick=webp&op_type=5&upload_type=cover&name=web_large&device_type=ios"alt=""><div>大奉打更人头陀渊讲故事</div></li><li><img src="/group47/M0A/9C/59/wKgKk1tYNLzyfxrAAAIVC-YGMlU958.jpg!strip=1&quality=7&magick=webp&op_type=5&upload_type=cover&name=web_large&device_type=ios"alt=""><div>米小圈上学记米小圈</div></li><li>4 重生八零，媳妇有点辣 | 免费多人有声剧</li><li>5 先快报</li><li>6 雪中悍刀行无删减版免费听|大斌</li><li>7 一剑独尊（叶玄叶灵 | 有声的紫襟 | 男女双播）</li><li>8 白眉大侠 | 单田芳（400回完）</li><li>9 德云社相声精选集（365天高清伴睡版）</li><li>10 晚安妈妈睡前故事</li></ol></div></section><div class="six5"><img src="../img/%Q{7$5ON6_Q52@HG$M{3[FP.png" alt=""></div><div class="six6"><img src="../img/9Q~{R}V5XY~T2L}2YYX~_ES.png" alt=""></div><footer><div><img src="../img/``85[AKN)6Y[W`~A83U9PZJ.png" alt=""></div></footer></body></html>

css的代码

header .title {width: 100%;height: 60px;border-bottom: 2px solid silver;}header .pindao .select {position: absolute;z-index: 10;display: none;width: 600px;height: 200px;}header .pindao .select li {list-style: none;display: inline-block;width: 80px;height: 20px;background-color: silver;border-radius: 20px;margin-top: 40px;}header .pindao .select li:hover {background-color: red;}header .pindao:hover .select {display: block;}header img {width: 290px;height: 60px;display: flex;}header span {display: inline-block;height: 60px;width: 32px;margin-left: 70px;}header a:hover span {color: red;}header input {width: 298px;height: 40px;border-radius: 30px;border: 1px solid red;margin-left: 300px;margin-top: 20px;margin-bottom: 20px;}header ul {float: right;}header ul li {list-style: none;display: inline-block;margin-top: 10px;margin-right: 5px;text-align: center;}header ul li img {width: 44px;height: 32px;text-align: center;}header ul li p:hover {color: red;}header ul li img.irl {width: 50px;height: 50px;}section.picture {width: 100vw;overflow: hidden;margin-top: 20px;}section.picture .picture-img {width: 500vw;height: 280px;display: flex;justify-content: space-around;animation: mylunbo 8s infinite;}section.picture img {width: 60vw;height: 280px;border-radius: 10px;}@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.one .title1 li {list-style: none;display: inline-block;}section.one .title1 li img {margin-top: 10px;width: 40px;height: 40px;margin-left: 180px;}section.one .title1 li p {margin-left: 182px;margin-bottom: 10px;}section.one .title1 li p:hover {color: red;}section.one .title2 li {display: inline-block;list-style: none;margin-left: 180px;margin-top: 10px;}section.one .title2 span {color: #40404c;}section.one .title2 a {text-decoration: none;}section.one .title2 a:hover span {color: red;}section.two a {text-decoration: none;}section.two span {display: inline-block;margin-left: 180px;margin-top: 20px;font-size: 35px;font-weight: 600;color: #40404c;}section.two a:hover span {color: red;}section.three .cnxh {width: 1400px;height: 250px;margin: auto;display: flex;justify-content: space-around;align-items: center;}section.three .cnxh div {margin: 10px;}section.three .cnxh div div {width: 140px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 600;}section.three .cnxh div:hover {box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);}section.three .cnxh div:hover img {margin-left: 8px;}section.three li {list-style: none;display: inline-block;margin-top: 20px;margin-left: 130px;}section.three li:hover {box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);}section.three img {width: 145px;height: 145px;}section.three p {width: 140px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 600;}section.three p:hover {color: red;}section.three a:hover span {color: red;}section.four a {text-decoration: none;}section.four span {display: inline-block;margin-left: 180px;margin-top: 20px;font-size: 35px;font-weight: 600;color: #40404c;}section.four a:hover span {color: red;}section.four ul {margin-left: 180px;}section.four li {list-style: none;display: inline-block;width: 160px;}section.four li:hover {color: red;}section.five li {list-style: none;display: inline-block;margin-top: 20px;margin-left: 130px;}section.five li:hover {box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);}section.five img {width: 145px;height: 145px;}section.five p {width: 140px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 600;}section.five p span.w {background-color: #78c10a;color: white;}section.five p:hover {color: red;}section.five a:hover span {color: red;}section.six {margin-left: 120px;margin-top: 20px;float: left;margin-left: 360px;}section.six h4 {color: #463e31;font-size: 22px;}section.six .six2 img {width: 60px;height: 60px;margin-top: 10px;}section.six .six2 li {width: 240px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}section.six .six2 li div {float: right;margin-top: 20px;margin-right: 30px;}section.six .six2 li .six3 {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 14px;line-height: 20px;max-width: 100%;color: #40404c;}section.six .six2 li .six4 {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 12px;max-width: 100%;color: #a3a3ac;line-height: 20px;}section.six .six2 li:hover {color: red;}.six5 {float: right;margin-right: 400px;}.six5 img {height: 400px;width: 250px;}.six6 {float: right;}.six6 img {height: 400px;width: 250px;}footer {margin-top: 30px;}

至于图片就自行搞定吧大部分都是有网就行的，少数图片是需要下载的在网上下载就行了

成品展示

猜你喜欢哪里是需要后端渲=渲染才能出现图片的的，或者使用第二种方法

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。