绝对定位的练习-网易云音乐案例

已于 2023-03-28 15:36:10 修改
阅读量104 收藏 1
点赞数
分类专栏： css 文章标签： html css html5
于 2023-03-28 15:28:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54327001/article/details/129815093
版权

如果想让某一个div居中,如果使用margin 0 auto必须添加width才能正常居中

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本

精灵图的引入图标必须增加dib才能正常显示

    .play-icon
    {
      background: url(../images/music_sprite_02.png) no-repeat 0 0px;
      width: 16px;
	  height: 17px;
      display: inline-block;
    }

将图片下面的多出来的区域去除 

.item .top img {
  /* 将图片下面的多出来的区域去除 */
  vertical-align: top;
  /* display: block; */
}

 已经写出来的初版

<!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>
    a{
      text-decoration: none;
      color: #000;
    }
    .item
    {
      width: 140px;
      margin: 0 auto;
    }

    .music-icon
    {
      background: url(../images/music_sprite_02.png) no-repeat 0 -24px;
      width: 14px;
	    height: 11px;
      display: inline-block;
    }

    .play-icon
    {
      background: url(../images/music_sprite_02.png) no-repeat 0 0px;
      width: 16px;
	    height: 17px;
      display: inline-block;
    }

    .item .top {
    position: relative;
    }
    .item .top .cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background: url(../images/music_sprite_01.png) no-repeat 0 0;
    width: 140px;
	  height: 141px;
    display: inline-block;
    }

    .item .info .count
    {
      color:#ccc;
      font-size: 12px;
    }
    /* 底部的样式 */
    .item .bottom {
    font-size: 14px;
    }
    .item .bottom:hover
    {
      text-decoration:underline;
    }
  </style>
</head>
<body>

  <div class="item">
    <div class="top" href="#">
      <img src="../images/music_album01.jpg" alt="音乐封面">
      <a class="cover" href="#"></a>
      <div class="info">
        <i class="music-icon"></i>
        <span class="count">62万</span>
        <i class="play-icon"></i>
      </div>
    </div>
    <a class="bottom" href="#">
      100首华语民谣，因为懂得才有共鸣
    </a>
    <i class="music-icon"></i>
    <i class="play-icon"></i>
  </div>

</body>
</html>

绝对定位基本上都没写出来

未完成

建议下面自己再写一遍,主要是定位时候的四个值+内外边距+行高居中,margin left与top

    .item .top {
    position: relative;
    }
    .item .top .cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background: url(../images/music_sprite_01.png) no-repeat 0 0;
    width: 140px;
	height: 141px;
    display: inline-block;
    }

没写出来

 .item .top .info
    {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 27px;
    padding-left: 10px;
    line-height: 27px;

    font-size: 12px;
    color: #ccc;

    background-image: url(../images/music_sprite_01.png);
    background-position: 0 -537px;
    }

没写出来



.item .top .info .icon-music {
  position: relative;
  top: 1px;
  /* display: inline-block; */
  /* width: 14px;
  height: 11px; */

  /* background-image: url(../images/music_sprite_02.png); */
  /* background-position: 0 -24px; */
}

.item .top .info .count {
  margin-left: 4px;
}

.item .top .info .icon-play {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  margin: auto 0;

  /* display: inline-block; */
  /* width: 16px;
  height: 17px; */
  /* background-image: url(../images/music_sprite_02.png); */
  /* background-position: 0 0; */
}


/* 底部的样式 */
.item .bottom {
  display: block;
  margin-top: 8px;
}

第二版

自己写第二遍,仍然是各种px有问题,定位几乎没问题

依然不足的地方,没有把共同代码抽取类,以及代码没有按层次写

一个tip是:公共用下划线,单独用连接线

我的代码

<!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>
    a{
      text-decoration: none;
      color: #000;
    }

    .music-icon
    {
      background: url(../images/music_sprite_02.png) no-repeat 0 -24px;
      width: 14px;
	    height: 11px;
      display: inline-block;
    }

    .play-icon
    {
      background: url(../images/music_sprite_02.png) no-repeat 0 0px;
      width: 16px;
	    height: 17px;
      display: inline-block;
    }

    .item
    {
      width: 140px;
      margin: 0 auto;
    }
    .item .top img {
    /* 将图片下面的多出来的区域去除 */
    vertical-align: top;
    /* display: block; */
    }

    .item .top {
    position: relative;
    }
    .item .top .info
    {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    
    height: 27px;
    padding-left: 10px;
    line-height: 27px;

    background-image: url(../images/music_sprite_01.png);
    background-position: 0 -537px;
    }

    .item .top .cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background: url(../images/music_sprite_01.png) no-repeat 0 0;
    width: 140px;
	  height: 141px;
    display: inline-block;
    }

    .item .info .count
    {
      color:#ccc;
      font-size: 12px;
    }
    /* 底部的样式 */
    .item .bottom {
    font-size: 14px;
    }
    .item .bottom:hover
    {
      text-decoration:underline;
    }
    .item .info .play-icon
    {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 10px;
      margin: auto 0;
    }
    /* 底部的样式 */
    .item .bottom {
    display: block;
    margin-top: 8px;
    }

  </style>
</head>
<body>

  <div class="item">
    <div class="top">
      <img src="../images/music_album01.jpg" alt="音乐封面">
      <a class="cover" href="https://music.163.com/#/playlist?id=391125700"></a>
      <div class="info">
        <i class="music-icon"></i>
        <span class="count">62万</span>
        <i class="play-icon"></i>
      </div>
    </div>
    <a class="bottom" href="https://music.163.com/#/playlist?id=391125700">
      100首华语民谣，因为懂得才有共鸣
    </a>
    <i class="music-icon"></i>
    <i class="play-icon"></i>
  </div>

</body>
</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>
    /* 重置代码 */
    a {
      text-decoration: none;
      color: #333;
    }
 
    /* 公共的CSS */
    .sprite_01 {
      background-image: url(../images/music_sprite_01.png);
      display: inline-block;
    }
 
    .sprite_02 {
      background-image: url(../images/music_sprite_02.png);
      display: inline-block;
    }
 
    .sprite_02_icon_music {
      width: 14px;
      height: 11px;
      background-position: 0 -24px;
    }
 
    .sprite_02_icon_play {
      width: 16px;
      height: 17px;
      background-position: 0 0;
    }
 
    /* 布局代码 */
    .item {
      width: 140px;
      margin: 0 auto;
    }
 
    .item .top {
      position: relative;
    }
 
    .item .top img {
      /* 将图片下面的多出来的区域去除 */
      vertical-align: top;
      /* display: block; */
    }
    
    .item .top .cover {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
 
      background-image: url(../images/music_sprite_01.png);
      background-position: 0 0;
    }
 
    .item .top .info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 27px;
      padding-left: 10px;
      line-height: 27px;
 
      font-size: 12px;
      color: #ccc;
 
      background-image: url(../images/music_sprite_01.png);
      background-position: 0 -537px;
    }
 
    .item .top .info .icon-music {
      position: relative;
      top: 1px;
      /* display: inline-block; */
      /* width: 14px;
      height: 11px; */
 
      /* background-image: url(../images/music_sprite_02.png); */
      /* background-position: 0 -24px; */
    }
 
    .item .top .info .count {
      margin-left: 4px;
    }
 
    .item .top .info .icon-play {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 10px;
      margin: auto 0;
 
      /* display: inline-block; */
      /* width: 16px;
      height: 17px; */
      /* background-image: url(../images/music_sprite_02.png); */
      /* background-position: 0 0; */
    }
 
 
    /* 底部的样式 */
    .item .bottom {
      display: block;
      margin-top: 8px;
      font-size: 14px;
    }
 
    .item .bottom:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
   
  <div class="item">
    <div class="top">
      <img src="../images/music_album01.jpg" alt="音乐封面">
      <a class="cover" href="https://music.163.com/#/playlist?id=2312165875"></a>
      <div class="info">
        <i class="sprite_02 sprite_02_icon_music icon-music"></i>
        <span class="count">62万</span>
        <i class="sprite_02 sprite_02_icon_play icon-play"></i>
      </div>
    </div>
    <a class="bottom" href="https://music.163.com/#/playlist?id=2312165875">
      天气好的话，把耳机分给我一半吧
    </a>
    <i class="sprite_02 sprite_02_icon_play"></i>
    <i class="sprite_02 sprite_02_icon_music"></i>
  </div>
 
</body>
</html>

usrname为username
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
绝对定位元素的布局
weixin_43339334的博客
06-03 245
水平布局 left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度 - 当我们开启了绝对定位后: 水平方向的布局等式就需要添加left 和 right 两个值 此时规则和之前一样只是多添加了两个值：
html+CSS布局绝对定位练习实例：采用绝对定位 使box2在box1里面 水平垂直居中
qq_51066068的博客
03-22 481
问题描述：采用绝对定位 使box2在box1里面 水平垂直居中实现以下效果： 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev..
h5的相对定位、绝对定位、固定定位以及案例练习
热门推荐
xuemoKingDeath的博客
04-24 1万+
html> html lang="en"> head> meta charset="UTF-8"> style> #right,#left,#center{ float: left; } #left{ width: 200px; height: 200px;
相对定位和绝对定位的练习
ztt0918的博客
04-26 885
html> html lang="en"> head> meta charset="UTF-8"> title>title> style> #container{ height: 300px; background-color: #ff7300; position: relative;
HTML作业-仿网易云音乐项目
04-29
在这个“HTML作业-仿网易云音乐项目”中，我们可以深入探讨HTML在构建交互式音乐应用中的运用。 首先，HTML是网页的基础，用于定义页面结构。在这个项目中，HTML元素被用来创建各种组件，如播放器界面、音乐列表、...
模仿网易云音乐制作的云音乐平台.zip
03-31
该压缩包文件“模仿网易云音乐制作的云音乐平台.zip”是某位开发者或团队的暑期专业实训练习成果，其目标是复刻并实现网易云音乐的部分核心功能。通过这个项目，我们可以学习到以下几个重要的IT知识领域： 1. **...
JavaScript二阶段-周2-案例练习.zip
05-12
这个压缩包"JavaScript二阶段-周2-案例练习.zip"包含了与课程内容对应的代码实例，每个文件都是一个精心设计的小案例，旨在帮助学习者通过动手实践来巩固所学知识。 1. **原型链**：JavaScript中的对象继承是基于...
JavaScript二阶段-周3-案例练习.zip
05-17
在这个“周3案例练习”中，我们可以预见到一系列精心设计的练习，以帮助学习者巩固他们在JavaScript二阶段所学的知识。 首先，我们要理解JavaScript的二阶段学习可能包括的内容：函数式编程、异步操作、闭包、原型...
bootstrap案例练习-仿星巴克
10-11
在这个"bootstrap案例练习-仿星巴克"中，你将深入理解如何利用Bootstrap的强大功能来创建一个类似星巴克的网页布局。以下是对各个组件的详细说明： 1. **栅格系统**： Bootstrap的栅格系统基于12列的布局，允许你...
相、绝对定位的使用和练习
m0_48219937的博客
08-08 74
相对定位 练习相对定位 绝对定位 z-index
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 2672
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
apple_68589597的博客
07-21 1058
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
[HTML]一文掌握
CSDN20221005的博客
07-21 871
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 330
iframe 预览邮件 + 打印邮件 + 模拟滚动条
前端与HTML
m0_65544927的博客
07-21 476
HTML 不是一种编程语言，而是一种标记语言HyperTextMarkupLanguage。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 457
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
xcLeigh
07-25 834
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
【HTML — 构建网络】HTML 入门
07-24 584
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
html仿网易云音乐
12-03
使用HTML来仿制网易云音乐是一个有趣的挑战。首先，我们需要一个网页布局来展示音乐播放器和音乐列表。...但通过HTML仿制网易云音乐的界面是一个有趣的练习，可以帮助我们更好地理解前端开发的基本原理和技术。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值