| HTML+CSS实训 | 您所在的位置：网站首页 › 网易云分享没有播放按钮 › HTML+CSS实训 |
HTML+CSS实训
|
仓库链接:https://github.com/MengFanjun020906/HTML_SX 主页歌曲推荐昨天做完了一大半了，今天要做中间的分类图片，原理其实和上面的banner很像，就不过多叙述了，但是这里面的父子级别关系很多，要注意在css中的写法。 html今天才学到html和css是可以分开的，之前几篇文章的html和css都比较乱，现在把它写的简单一点。 他们把故事唱成了歌曲 播放全部 就忘了吧(DJ版) -DJ蛇哥 SQ 永远记得你穿豆豆鞋的样子 ヨアソビ -YOASOBI SQ 将小说故事音乐化 像风一样 -薛之谦 SQ 希望你像风一样自由 css .story>.story-title { display: flex; justify-content: space-between; margin-top: 5px; align-items: center; color: #504e4a; } .story>.story-title>.fa-play { font-size: 12px; color: #999; border-radius: 5px; border: 1; background-color: white; border-color: gray; padding: 4px; } .story-box { margin-top: 10px; flex-direction: column; } .story-box>.item>.cover { width: 60px; height: 60px; border-radius: 5px; } .story-box>.item>.play { width: 30px; height: 30px; background-color: red; border-radius: 15px; margin-left: 50px; } .story-box>.item { display: flex; align-items: center; margin-bottom: 10px; } .story-box>.item>.info { display: flex; flex-direction: column; justify-content: space-between; height: 54px; margin-left: 7px; /* border: 1px solid red; */ width: 220px; } .story-box>.item>.info>.title>span:nth-child(1) { font-size: 15px; } .story-box>.item>.info>.title>span:nth-child(2) { font-size: 12px; color: gray; } .story-box>.item>.info>.ps { display: flex; align-items: center; } .story-box>.item>.info>.ps>span:nth-child(1) { font-size: 12px; color: red; border: 1px solid red; width: 34px; height: 18px; line-height: 18px; text-align: center; border-radius: 6px; margin-right: 10px; } .story-box>.item>.info>.ps>span:nth-child(2) { font-size: 12px; color: gray; }最终的实现效果是这样的 下面是发现页的所有代码了 Find.html DOCTYPE html> Find 每日推荐 歌单 排行榜 电台 直播 火前留名 畅聊 你的精选歌单 查看更多 成功人士都在听的歌曲，来看看吧～ 暮然回首，那人却在灯火阑珊处 温馨的歌曲，适合在家听 抖音热门歌曲循环 学习/工作/无聊/必备歌曲 乘风破浪会有时，直挂云帆济沧海/span> 赛车爱好者必听歌曲 他们把故事唱成了歌曲 播放全部 就忘了吧(DJ版) -DJ蛇哥 SQ 永远记得你穿豆豆鞋的样子 ヨアソビ -YOASOBI SQ 将小说故事音乐化 像风一样 -薛之谦 SQ 希望你像风一样自由 发现 视频 我的 云村 账号 Find.css .search>img { width: 30px; height: 30px; border: 3px solid gray; border-radius: 18px; margin-left: 10px; } .search { position: fixed; display: flex; align-items: center; justify-content: center; left: 0; right: 0; top: 0; padding-top: 10px; padding-bottom: 10px; background-color: white; z-index: 999; /* border: 1px solid red; */ } .search>input { /* 搜索放大镜图标 */ background-image: url("img/search.png"); background-size: 16px 16px; /* background-position: center; */ background-position-x: 11px; background-position-y: 7px; background-repeat: no-repeat; background-color: #f2f2f2; justify-content: space-evenly; border: none; height: 28px; width: 240px; border-radius: 14px; /* 搜夜曲的位置通过padding判断 */ padding-left: 30px; margin-left: 10px; } .search>fa fa-microphone { width: 20px; height: 20px; } .tab-bar { position: fixed; left: 0; right: 0; bottom: 0; background-color: white; height: 80px; /* border: 1px solid red; */ display: flex; justify-content: space-evenly; } .tab-bar>.item { display: flex; flex-direction: column; align-items: center; justify-content: center; } .tab-bar>.item>i { font-size: 30px; } .tab-bar>.item>span { margin-top: 6px; font-size: 14px; } .tab-bar>.active { color: red; } .banner { margin-top: 60px; position: relative; z-index: 2; } .banner>img { width: 100%; border-radius: 6px; } .banner>.pointer { display: flex; justify-content: center; position: absolute; bottom: 12px; left: 0; right: 0; } .banner>.pointer>span { width: 10px; height: 10px; background-color: gray; margin-left: 10px; border-radius: 5px; margin-right: 4px; } .banner>.pointer>.active { background-color: red; } .choice { margin-top: 10px; } .choice>.choice-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: #504e4a; } .choice>.choice-title>.right { font-size: 12px; color: #999; border-radius: 5px; border: 1; background-color: white; border-color: gray; } .choice-box { display: flex; /* 设置图像可以滚动显示 */ overflow: scroll; } /* 清除滚动条 */ .choice-box::-webkit-scrollbar { display: none; } .choice-box>.item>span { font-size: 12px; /* 让文本只显示2行,并且超出的部分显示... */ overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; word-wrap: break-word; } .choice-box>.item { display: flex; flex-direction: column; width: 80px; margin-right: 10px; } .choice-box>.item>img { width: 80px; border-radius: 8px; margin-bottom: 6px; } .choice-box>.item>span { font-size: 12px; } .category { /* position: absolute; */ left: 0; right: 0; bottom: 0; background-color: white; height: 80px; display: flex; justify-content: space-evenly; } .category>.item { display: flex; flex-direction: column; margin-top: 5px; margin-bottom: 5px; /* border: 1px solid red; */ align-items: center; justify-content: center; margin-left: 3px; } .category>.item>span { font-size: 10px; } .category>.item>i { color: white; font-size: 20px; border: 12px solid red; border-radius: 70px; background-color: red; } .story>.story-title { display: flex; justify-content: space-between; margin-top: 5px; align-items: center; color: #504e4a; } .story>.story-title>.fa-play { font-size: 12px; color: #999; border-radius: 5px; border: 1; background-color: white; border-color: gray; padding: 4px; } .story-box { margin-top: 10px; flex-direction: column; } .story-box>.item>.cover { width: 60px; height: 60px; border-radius: 5px; } .story-box>.item>.play { width: 30px; height: 30px; background-color: red; border-radius: 15px; margin-left: 50px; } .story-box>.item { display: flex; align-items: center; margin-bottom: 10px; } .story-box>.item>.info { display: flex; flex-direction: column; justify-content: space-between; height: 54px; margin-left: 7px; /* border: 1px solid red; */ width: 220px; } .story-box>.item>.info>.title>span:nth-child(1) { font-size: 15px; } .story-box>.item>.info>.title>span:nth-child(2) { font-size: 12px; color: gray; } .story-box>.item>.info>.ps { display: flex; align-items: center; } .story-box>.item>.info>.ps>span:nth-child(1) { font-size: 12px; color: red; border: 1px solid red; width: 34px; height: 18px; line-height: 18px; text-align: center; border-radius: 6px; margin-right: 10px; } .story-box>.item>.info>.ps>span:nth-child(2) { font-size: 12px; color: gray; } |
【本文地址】
公司简介
联系我们