HTML5标签选择,图文混排使用dl dt dd
图文混排,可以使用
dl dt dd(dd 和 dt 是同级,不可以嵌套,没有先后顺序)
1,上面红色部分是标题,可以使用h1里面包含一个span标签,样式一样,所以两个可以一起写。
2,上面黑色部分是属于图文混排,可以使用个自定义列表:dl>dt ,dd进行设置,且排版需要进行定位。需要进行定位设置:
父元素dl使用position:relative;
子元素dt,dd使用position:absolute;设置合适的left,top;
3,蓝色部分是属于文章部分arcitle,文章可以使用p标签,图片可以直接使用一个img标签。
上面是HTML5的主题部分,代码如下:
<section class="main clear" >
<aside>
<h1>Recent <span>Course</span></h1>
<dl>
<dt>What time is it</dt>
<dd><img src="data:images/Course/02_09.png"></dd>
<dd>lksdf aslkfjlsak dfjlk asdkj k sdf asldkfj asl kasdfl asdfk alskdfj l dk k fj jdksdk fos j fdssd sosdokjsdlkj sdsd dsfs sd fsd sfsds f sdfwefwsd fsds sdf sd s f</dd>
</dl>
<dl>
<dt>What time is it?</dt>
<dd><img src="data:images/Course/05_05.png"></dd>
<dd>lksdf aslkfjlsak dfjlk asdkj k sdf asldkfj asl kasdfl asdfk alskdfj l dk k fj jdksdk fos j fdssd sosdokjsdlkj sdsd dsfs sd fsd sfsds f sdfwefwsd fsds sdf sd s f</dd>
</dl>
<dl>
<dt>What time is it?</dt>
<dd><img src="data:images/Course/06_04.png"></dd>
<dd>lksdf aslkfjlsak dfjlk asdkj k sdf asldkfj asl kasdfl asdfk alskdfj l dk k fj jdksdk fos j fdssd sosdokjsdlkj sdsd dsfs sd fsd sfsds f sdfwefwsd fsds sdf sd s f</dd>
</dl>
<dl>
<dt>What time is it?</dt>
<dd><img src="data:images/Course/09_07.png"></dd>
<dd>lksdf aslkfjlsak dfjlk asdkj k sdf asldkfj asl kasdfl asdfk alskdfj l dk k fj jdksdk fos j fdssd sosdokjsdlkj sdsd dsfs sd fsd sfsds f sdfwefwsd fsds sdf sd s f</dd>
</dl>
</aside>
<article>
<h1>Welcom <span>to aslkdf aslkd asdfkjl</span></h1>
<p>slkf sldfkjl s f j dsl fs p j j j fpjo jopf fjop fjp pof djo jp fj pj pj</p>
<img src="data:images/article.jpg">
<p>slkf sldfkjl s f j dsl fs p j j j fpjo jopf fjop fjp pof djo jp fj pj pj eff fw wf ewffwe few wf wfwf we we w
slkf sldfkjl s f j dsl fs p j j j fpjo jopf fjop fjp pof djo jp fj pj pj eff fw wf ewffwe few wf wfwf we we w
ewef </p>
<p>slkf sldfkjl s f j dsl fs p j j j fpjo jopf fjop fjp pof djo j dsl fs p j j j fpjo jopf fjop fjp pof djo jp fj pj pj eff fw wf ewffwe few wf wfwf we we w ewef wef wef wef wef ewf wef er wrg </p>
</article>
</section>
===========================
section标签,黑色宽度为:1200px;
aside标签,绿色宽度为:450px; 侧边栏的宽度一般是固定的,所以一定要注明:width属性值。
article标签,蓝色宽度为:720px; 文章的宽度设置时,注意与aside之间是否需要空隙,如果需要一定记得别把宽度设置满了。即:小于1200-450=750px;
margin外边距(这里是不需要设置的,因为aside向左浮动,article向右浮动,两个相加为1170px,还剩余30px;),橙色宽度为:30px;
HTML5标签选择,图文混排使用dl dt dd的更多相关文章
- html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...
- html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一.dl dt dd认识 ...
- [UGUI]图文混排(一):标签制定和解析
参考链接: https://github.com/SylarLi/RichText/tree/master/Assets/Scripts 正则表达式: https://blog.csdn.net/ly ...
- 【转】关于FLASH中图文混排聊天框的小结
原文链接 图文混排也是FLASH里一个很古老的话题了,我们不像美国佬那样游戏里面聊天框就是聊天框,全是文字干干净净,也不像日本人发明了并且频繁地使用颜文字.不管是做论坛.做游戏,必定要实现的一点就是带 ...
- EditText图文混排
下面就具体说一下我遇到的问题,首先是EditText里面的图文混排问题,这个问题的难点就是三点: 1.怎么插图片 2.怎么保存插入的图片和文字 3.怎么解析回图片和文字 解决: 一.怎么插入图片 在这 ...
- Unity琐碎(3) UGUI 图文混排解决方案和优化
感觉使用Unity之后总能看到各种各样解决混排的方案,只能说明Unity不够体恤下情啊.这篇文章主要讲一下个人在使用过程中方案选择和优化过程,已做记录.顺便提下,开源很多意味着坑,还是要开实际需求. ...
- Android图文混排-实现EditText图文混合插入上传
前段时间做了一个Android会议管理系统,项目需求涉及到EditText的图文混排,如图: 在上图的"会议详情"中.须要支持文本和图片的混合插入,下图演示输入的演示样例: 当会议 ...
- DIV+CSS 图文混排的图片居中办法
不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN.DIV.LI 等等,以便于使用 text-align来进行居中. <div>图文混排 <br> ...
- NGUI-制作位图字体以及图文混排
制作字体过程 首先得下载一个位图制作工具Bitmap font generator,可以点击这里下载 1.新建txt文件,输入字体里面包含的文字 2.保存为utf-8格式:点击文件另存为,选择编码格式 ...
随机推荐
- 使用FileZilla从Linux系统下载文件
需求:将Linux系统的的某个文件夹(里面包含文件夹和文件)下载到我Windows系统某个文件夹里 之前我使用xshell下载,但是通过 rz :上传sz:下载 命令中的sz命令,下载失败. 下载 c ...
- ruby-attr_accessor使用
ruby语法-attr_accessor方法使用 本文主要讲解下ruby下attr_accessor方法的使用. 示例1: class Person end person = Person.new p ...
- GCC的__attribute__ ((constructor))和__attribute__ ((destructor))
通过一个简单的例子介绍一下gcc的__attribute__ ((constructor))属性的作用.gcc允许为函数设置__attribute__ ((constructor))和__attrib ...
- Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)
笔者所在的趣店 FED 早在去年 10 月份就已全面使用 Taro 框架开发小程序(当时版本为 1.1.0-beta.4),至今也上线了 2 个微信小程序.2 个支付宝小程序. 之所以选用 Taro, ...
- eos开发(三)使用cleos命令行客户端操作EOS——关于钱包wallet和账户account
好了,上一节我们已经讲了关于wallet的一些基础操作,基本了解了怎么去创建一个钱包,怎么去查看钱包.上锁和解锁钱包等,这一节咱们就来开始操作账户account吧. 上一节讲到了每一个account都 ...
- 没搞懂的package.json
事情是这样的,今天上午,后端同学 clone 了我们的一个小程序项目,希望到自己的电脑上跑起来. 然而,令人尴尬的是,他在 npm install 之后,项目并没有如愿运行,并抛出一个大大的错误. 后 ...
- new Date()浏览器兼容性问题
不同浏览器有不同的差异,一般时间格式是“2018-11-13”,这种格式在Chrome下是可以正常执行的,不过在ie浏览器里面 就会变成NaN 解决方法:将时间转换成“2018/11/13” 这种格式 ...
- Code Complete-13/7/23
What is "construction"? Hava u ever used construction paper to make some things?What i ...
- 【干货】利用MVC5+EF6搭建博客系统(四)(下)前后台布局实现、发布博客以及展示
二.博客系统后台布局实现 2.1.这里所用的是MVC的布局页来实现的,后台主要分为三部分:导航.菜单.主要内容 代码实现: 这里把后台单独放在一个区域里面,所以我这里建立一个admin的区域 在布局页 ...
- Linux文本编辑器vim
目录 1.vim 的工作模式 2.插入命令 3.定位命令 4.删除命令 5.复制和剪切命令 6.替换和取消命令 7.搜索和搜索替换命令 8.保存和退出命令 9.vim 高级操作 10.总结 通过前面几 ...