CSS排版练习小作业，文字围绕图片显示，基本的float浮动定位
简单的css排版
基本的float浮动定位
文字围绕图片显示
css代码，float分成两块
<style type="text/css">div.float1{float: left;;width: 570px;height:auto;}div.float2{float: right;;width: 600px;height:auto;}</style>body代码 选取豆瓣中diplo的新专辑的信息```html
<body><center><h1>LABRINTH, SIA & DIPLO PRESENT... LSD</h1></center><br/><br/><br/><div class="float1"><h2 style="font: larger;color: black;">Music List</h2><hr/><ul><li><a href="https://music.douban.com/subject/33407365/" target="_blank">Welcome to the Wonderful World Of (feat. Sia, Diplo & Labrinth)</a></li><li><a href="https://music.douban.com/subject/33407365/" target="_blank">Angel in Your Eyes (feat. Sia, Diplo & Labrinth)</a></li><li><a href="https://music.douban.com/subject/33407365/" target="_blank>">Genius (feat. Sia, Diplo & Labrinth)</a></li><li><a href="https://music.douban.com/subject/33407365/" target="_blank">Audio (feat. Sia, Diplo & Labrinth)</a></li><li><a href="https://music.douban.com/subject/33407365/" target="_blank">Thunderclouds (feat. Sia, Diplo & Labrinth)</a></li><li><a href="https://music.douban.com/subject/33407365/" target="_blank">Mountains (feat. Sia, Diplo & Labrinth)</a></li><li><a href="https://music.douban.com/subject/33407365/" target="_blank">No New Friends (feat. Sia, Diplo & Labrinth)</a></li><li><a href="https://music.douban.com/subject/33407365/" target="_blank">Heaven Can Wait (feat. Sia, Diplo & Labrinth)</a></li><li><a href="https://music.douban.com/subject/33407365/" target="_blank">It's Time (feat. Sia, Diplo & Labrinth)</a></li><li><a href="https://music.douban.com/subject/33407365/" target="_blank">Genius (feat. Lil Wayne, Sia, Diplo & Labrinth) [Lil Wayne Remix]</a></li></ul><hr/></div><div class="float2"><img id="LSD" align='left' class="transition-all" src="IMG_3169(20200915-141312).JPG" width="160">“When you put Lab and Sia in a room, it’s the craziest concoction,” Diplo told Beats 1 host Zane Lowe. “Two of the most creative people I’ve ever met, like in a boxing match: bam-bam-bam-bam!” Following hits like “Thunderclouds” and “Mountains,” the A-list supergroup—made up of visionary songwriter/producers Labrinth and Diplo alongside the extraordinary Sia—present their first collaborative full-length of shape-shifting, hyperactive pop. Full of left turns and flamboyant instrumental flair, the songs here value largesse: You can hear Diplo’s dancehall rhythms, Sia’s dramatic balladry, and Labrinth’s taste for oddball pairings like gospel-inspired choruses over skittering trap breaks. The intro track, “Welcome to the Wonderful World Of,” swirls together chopped vocals, Jock Jams synths, dizzying digital pings, and a grinding bassline—an amuse-bouche for what follows. It's not quite the vision quest the name suggests; with catchy hooks, soaring melodies, and an appearance from Lil Wayne, the project is closer to classic pop. But it's just strange enough to open a door: Mainstream music just got a little bit weirder.</body>
显示效果
CSS排版练习小作业，文字围绕图片显示，基本的float浮动定位相关推荐
- CSS 文字和图片的组合（float）——每天一遍小知识
前言 这是我在这个网站整理的笔记,接下来还会持续更新. B站用户名:RodmaGO 转载说明:务必注明来源,附带本人博客连接. 浮动--float 1.介绍 2.文字环绕图片 3.清除浮动--clea ...
- html图片环绕文字,CSS_如何让文字环绕图片显示？
总得来说,文字环绕图片显示的实现方式有这样两种: 通过img的 align 属性, 设置img的停靠位置,文字会环绕显示: 给img单独加一个父级div容器,设置css属性:float:left ; ...
- html 文字显示图片左侧,CSS_如何让文字环绕图片显示？
总得来说,文字环绕图片显示的实现方式有这样两种: 通过img的 align 属性, 设置img的停靠位置,文字会环绕显示: 给img单独加一个父级div容器,设置css属性:float:left ; ...
- html图片在wps中不显示文字大小,WPS文字插入图片显示不全怎么办 WPS文字插入图片显示不完整的解决方法...
在wps文字编辑文档时,如果我们在使用时插入图片显示不全,这种情况我们该怎么解决呢?想必有不少的用户遇到过这种问题,下面教程之家网为大家带来WPS文字插入图片显示不完整的解决方法,不知道怎么解决的朋友 ...
- 微信小程 文字在图片正下方
先上图 图片地址 https://www.iconfont.cn/ .wxml <view class='navs'><view class='nav-item'><im ...
- 微信小程序的的图片显示不出来
图片的路径分两种 1.本地的图片如images文件夹下面的 /images/t1.jpg 或者是http://localhost:8080/Teacher/news/t1.jpg 2.网络连接的 ...
- ArcGIS api 4.x label文字，图片显示
一.实现思路 (一)地图上添加div,用于展示点信息和图片: (二)添加监听事件,在地图缩放.拖动时监听: (三)将地理坐标转成屏幕坐标,刷新div坐标,通过top.left属性控制: (四)球体地图 ...
- css背景透明文子不透明,CSS 实现背景透明 内容文字不透明 显示
思路主要是 IE9+ 谷歌 火狐等使用rgba(0,0,0,0.5)来确定透明度 前三个值是RGB值 可以直接参考PS里对应的值 最后一个是透明度 例子 background:rgba(255,255 ...
- 【微信小程序开发】— 图片显示错误：VM24966:2
VM24966:2 Failed to load image http://1042065718.debug.open.weixin.qq.com/pages/detail/detail/detail ...
最新文章
- noip复赛普及组2020_我校学子在2020年“外研社·国才杯”全国英语写作大赛（高职组）复赛中斩获佳绩...
- @程序员，“10倍工程师”都在追这四大AI风向
- 【MySQL】记一次线上重大事故：二狗子竟然把线上数据库删了！！
- 当前流行的J2EE WEB应用架构分析
- mysql主从复制简单配置
- redis value多大会影响性能_选择合适Redis数据结构，减少80%的内存占用
- 大学计算机教学ppt数制,大学计算机基础 第3讲 数制及其相互转换 国家精品课程课件(可编辑)...
- react学习系列1 修改create-react-app配置支持stylus
- python递归求5!_Python | 递归
- DCL 管理权限 mysql
- baidu google 下拉框 的简单实现
- Win32 SDK - 打开文件对话框
- docker镜像的使用及相关
- smartbi连接mysql数据库_Smartbi_V9配置MySQL8作为知识库
- 2017年十本必读的大数据人工智能领域书籍，你都读过吗？
- 高能所客座用户计算机申请,2020年中科院高能所招收联合培养硕士博士生、客座研究生多名...
- H5经纬度百度定位不准问题
- Openwrt pppoe demand拨号问题
- AMBA总线---APB总线协议
- vulnhub靶场之HA: Joker