对于作者您的代码的需求
问题遇到的现象和发生背景
仿造作者您的作品进行了贴图,发现界面并没有达到好的视觉效果,和真正的网易云界面有点差别
贴图是自己找的,也加入了轮播动画,但感觉总是差一点意思,(
问题相关代码，请勿粘贴截图
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="base.css">
<link rel="stylesheet" href="commen.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="swiper-bundle.min.css" />
head>
<body>
<div id="g-topbar">
<div class="m-top">
<div class="wrap">
<h1 class="logo">
h1>
<ul class="m-nav">
<li class="first">
<span>
<a href="javascript:;" >
<em>发现音乐em>
<span class="cor"> span>
a>
span>
li>
<li>
<span>
<a href="javascript:;">
<em>我的音乐em>
a>
span>
li>
<li>
<span>
<a href="javascript:;">
<em>朋友em>
a>
span>
li>
<li>
<span>
<a href="javascript:;">
<em>商城em>
a>
span>
li>
<li>
<span>
<a href="javascript:;">
<em>音乐人em>
a>
span>
li>
<li class="last">
<span>
<a href="javascript:;">
<em>下载客户端em>
a>
span>
<sup class="hot"> sup>
li>
<div class="m-tophead">
<a hidefocus="true" href="javascript:;" class="link">登录a>
div>
<a hidefocus="true" href="javascript:;" class="m-create-center">创作者中心a>
<div class="m-search">
<div class="searchbg">
<span class="parent">
<input type="text" class="txt" placeholder="音乐/视频/电台/用户">
<label class="ph" @click="change" v-if="show1">{{message}}label>
span>
div>
div>
div>
div>
<div class="m-subtop">
<div class="ms-set">
<div class="navitems">
<ul>
<li>
<a href="javascript:;">
<em>推荐em>
a>
li>
<li>
<a href="javascript:;">
<em>排行榜em>
a>
li>
<li>
<a href="javascript:;">
<em>歌单
<span class="f-icon"> span>
em>
a>
li>
<li>
<a href="javascript:;">
<em>主播电台em>
a>
li>
<li>
<a href="javascript:;">
<em>歌手em>
a>
li>
<li>
<a href="javascript:;">
<em>新碟上架em>
a>
li>
ul>
div>
div>
div>
div>
<div class="w">
<div class="subw">
<a class="arrow-l arrow ft-u" hidefocus="true" href="javascript:;" >a>
<a class="arrow-r arrow ft-u" hidefocus="true" href="javascript:;" >a>
<script src="swiper-bundle.min.js">script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="imgs" src="1.jpg" alt="pr1" >div>
<div class="swiper-slide"><img class="imgs" src="3.jpg" alt="pr1" >div>
<div class="swiper-slide"><img class="imgs" src="4.jpg" alt="pr1" >div>
<div class="swiper-slide"><img class="imgs" src="5.jpg" alt="pr1" >div>
<div class="swiper-slide"><img class="imgs" src="2.jpg" alt="pr1" >div>
div>
<div class="swiper-pagination">div>
<div class="swiper-button-prev">div>
<div class="swiper-button-next">div>
div>
div>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true,
autoplay: 3000,
speed: 1000,
pagination: {
el: '.swiper-pagination',
},
// 前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
});
script>
<div class="r-download">
div>
<div class="dots">
<a class="a-red" hidefocus="true" href="javascript:;" >a>
<a hidefocus="true" href="javascript:;" >a>
<a hidefocus="true" href="javascript:;" >a>
<a hidefocus="true" href="javascript:;" >a>
<a hidefocus="true" href="javascript:;" >a>
<a hidefocus="true" href="javascript:;" >a>
<a hidefocus="true" href="javascript:;" >a>
<a hidefocus="true" href="javascript:;" >a>
<a hidefocus="true" href="javascript:;" >a>
<a hidefocus="true" href="javascript:;" >a>
div>
div>
<div class="main">
<div class="main-l">
<div class="m-l-top">
<div class="top-nav">
<span class="top-nav-logo">span>
<a class="top-nav-l" href="javascript:;">热门推荐a>
<div class="top-nav-m">
<a class="ft-u" hidefocus="true" href="javascript:;" >话语a>
<span>|span>
<a class="ft-u" hidefocus="true" href="javascript:;" >流行a>
<span>|span>
<a class="ft-u" hidefocus="true" href="javascript:;" >摇滚a>
<span>|span>
<a class="ft-u" hidefocus="true" href="javascript:;" >民谣a>
<span>|span>
<a class="ft-u" hidefocus="true" href="javascript:;" >电子a>
div>
<div class="top-nav-r ft-u">
<a hidefocus="true" href="javascript:;" >更多a>
<i class="more-logo"> i>
div>
div>
<div class="top-main">
<ul class="top-main-news">
<li>
<div class="news-a">
<img class="imga" src="6.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">1732万span>
<a class="img-buttom-r" hidefous="true" href="javascript:;">a>
div>
div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >「女声控」直抵内心深处的电子女声a>
p>
li>
<li>
<div class="news-a">
<img class="imga" src="8.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">2512万span>
<a class="img-buttom-r" hidefous="true" href="javascript:;">a>
div>
div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >还记得你的梦想吗？别让你的梦只有想a>
p>
li>
<li>
<div class="news-a">
<img class="imga" src="7.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">912万span>
<a class="img-buttom-r" hidefous="true" href="javascript:;">a>
div>
div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >『日系/ACG』打破次元壁的宅音⊙▽⊙a>
p>
li>
<li>
<div class="news-a">
<img src="9.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">1218万span>
<a class="img-buttom-r" hidefous="true" href="javascript:;">a>
div>
div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >好好去爱这个世界 因为你值得a>
p>
li>
<li>
<div class="news-a">
<img src="10.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">1347万span>
<a class="img-buttom-r" hidefous="true" href="javascript:;">a>
div>
div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >「纯音乐｜节奏控」一杯提神的薄荷茶。a>
p>
li>
<li>
<div class="news-a">
<img src="11.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">5669万span>
<a class="img-buttom-r" hidefous="true" href="javascript:;">a>
div>
div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >日系/无前奏：开口即跪 一秒沦陷a>
p>
li>
<li>
<div class="news-a">
<img src="12.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">10894万span>
<a class="img-buttom-r" hidefous="true" href="javascript:;">a>
div>
div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >[华语速爆新歌]许嵩一曲《纸上雪》感受诗画交融，共赏盛景佳韵a>
p>
li>
<li>
<div class="news-a">
<img src="13.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">537万span>
<a class="img-buttom-r" hidefous="true" href="javascript:;">a>
div>
div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >该释怀了 - （抖音版）a>
p>
li>
ul>
下面的内容基本和作者一样
body>
html>
主界面的代码是用你的,CSS没改多少个,自己加入了JS函数尝试实现轮播效果
运行结果及报错内容
运行可以出稍微能看的界面,但不够美观,差一点意思
我的解答思路和尝试过的方法
自己尝试改了很多,但因为是出于作者你的模板,不好多改,没有图,好像又少一个CSS,不好改,因此来直接询问作者您.
我想要达到的结果
能发一下图片还有缺失的CSS文件嘛,我自己也尝试了很久(5天反复改),不是为了抄作品,希望借鉴思考一下,谢谢.
这个如果没有CSS可以把引入去掉，自己写一下，图片用网图代替，这种界面展示难度不大
仿造代码这样很好写,复制 黏贴
