网易云(HTML+CSS)
这是用HTML和CSS模仿的网易云静态页面
文章目录
- 具体的效果图如下:
- 补充:
- 具体代码如下s：
-
- HTML：
- CSS-1(base.css):
- CSS-2(commen.css):
- CSS-3(main-css):
具体的效果图如下:
补充:
-
因为时间关系所以好多地方时重复的,大家可以自行修改就可以
-
关于代码方法个人认为还是有很多不足的，代码冗长，不够精简，还是需要多多简练
-
同时希望大家指出不足之处，让我与各位共勉之
-
一年三百六十日，多是横戈马上行。 ——戚继光《马上作》
具体代码如下s：
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>网易云title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/main-common.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>
ul >
<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="音乐/视频/电台/用户">
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>
<div class="l-pr">
<img class="imgs" src="./images/pr-1.jpg" alt="pr1" >
div>
<div class="r-download">
<a class="download-p" href="javascript:;">a>
<p>PC 安卓 iPhone WP iPad Mac 六大客户端p>
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>
<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 src="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">618万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="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">618万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="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">618万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="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">618万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="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">618万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="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">618万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="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">618万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="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l">span>
<span class="img-buttom-m">618万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>
div>
div>
<div class="m-l-middle">
<div class="top-nav">
<span class="top-nav-logo">span>
<a class="top-nav-l" href="javascript:;">新碟上架a>
<div class="top-nav-r">
<a hidefocus="true" href="javascript:;" >更多a>
<i class="more-logo"> i>
div>
div>
<div class="middle-main">
<div class="m-inner">
<a class="click-flag-l" hidefocus="true" href="javascript:;" > a>
<div class="roll-imgs">
<ul>
<li>
<div class="cover-record">
<img src="./images/record_1.jpg" alt="img">
<a class="record" hidefocus="true" href="javascript:;" >a>
<a class="play-record" hidefocus="true" href="javascript:;" >a>
div>
<p class="song-title">
<a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHTa>
p>
<p class="songer">
<a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPSa>
p>
li>
<li>
<div class="cover-record">
<img src="./images/record_1.jpg" alt="img">
<a class="record" hidefocus="true" href="javascript:;" >a>
<a class="play-record" hidefocus="true" href="javascript:;" >a>
div>
<p class="song-title">
<a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHTa>
p>
<p class="songer">
<a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPSa>
p>
li>
<li>
<div class="cover-record">
<img src="./images/record_1.jpg" alt="img">
<a class="record" hidefocus="true" href="javascript:;" >a>
<a class="play-record" hidefocus="true" href="javascript:;" >a>
div>
<p class="song-title">
<a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHTa>
p>
<p class="songer">
<a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPSa>
p>
li>
<li>
<div class="cover-record">
<img src="./images/record_1.jpg" alt="img">
<a class="record" hidefocus="true" href="javascript:;" >a>
<a class="play-record" hidefocus="true" href="javascript:;" >a>
div>
<p class="song-title">
<a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHTa>
p>
<p class="songer">
<a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPSa>
p>
li>
<li>
<div class="cover-record">
<img src="./images/record_1.jpg" alt="img">
<a class="record" hidefocus="true" href="javascript:;" >a>
<a class="play-record" hidefocus="true" href="javascript:;" >a>
div>
<p class="song-title">
<a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHTa>
p>
<p class="songer">
<a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPSa>
p>
li>
ul>
div>
<a class="click-flag-r" hidefocus="true" href="javascript:;" > a>
div>
div>
div>
<div class="m-l-bottom">
<div class="top-nav">
<span class="top-nav-logo">span>
<a class="top-nav-l" href="javascript:;">榜单a>
<div class="top-nav-r">
<a hidefocus="true" href="javascript:;" >更多a>
<i class="more-logo"> i>
div>
div>
<div class="b-content">
<div class="bc">
<div class="bc-top">
<img src="./images/notice.jpg" alt="原创榜">
<div class="t-title">
<h3>飙升榜h3>
<a class="tt-play" title="播放" hidefocus="true" href="javascript:;" >a>
<a class="tt-collect" title="收藏" hidefocus="true" href="javascript:;" >a>
div>
div>
<dd>
<ol>
<li>
<span class="no no-top">1span>
<a hidefocus="true" href="javascript:;">ginger snapsa>
li>
<li>
<span class="no no-top">2span>
<a hidefocus="true" href="javascript:;">ginger snapsa>
li>
<li>
<span class="no no-top">3span>
<a hidefocus="true" href="javascript:;">ginger snapsa>
li>
<li>
<span class="no">4span>
<a hidefocus="true" href="javascript:;">ginger snapsa>
li>