图文混排,可以使用

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的更多相关文章

  1. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  2. 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认识 ...

  3. [UGUI]图文混排(一):标签制定和解析

    参考链接: https://github.com/SylarLi/RichText/tree/master/Assets/Scripts 正则表达式: https://blog.csdn.net/ly ...

  4. 【转】关于FLASH中图文混排聊天框的小结

    原文链接 图文混排也是FLASH里一个很古老的话题了,我们不像美国佬那样游戏里面聊天框就是聊天框,全是文字干干净净,也不像日本人发明了并且频繁地使用颜文字.不管是做论坛.做游戏,必定要实现的一点就是带 ...

  5. EditText图文混排

    下面就具体说一下我遇到的问题,首先是EditText里面的图文混排问题,这个问题的难点就是三点: 1.怎么插图片 2.怎么保存插入的图片和文字 3.怎么解析回图片和文字 解决: 一.怎么插入图片 在这 ...

  6. Unity琐碎(3) UGUI 图文混排解决方案和优化

    感觉使用Unity之后总能看到各种各样解决混排的方案,只能说明Unity不够体恤下情啊.这篇文章主要讲一下个人在使用过程中方案选择和优化过程,已做记录.顺便提下,开源很多意味着坑,还是要开实际需求. ...

  7. Android图文混排-实现EditText图文混合插入上传

    前段时间做了一个Android会议管理系统,项目需求涉及到EditText的图文混排,如图: 在上图的"会议详情"中.须要支持文本和图片的混合插入,下图演示输入的演示样例: 当会议 ...

  8. DIV+CSS 图文混排的图片居中办法

    不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN.DIV.LI 等等,以便于使用 text-align来进行居中. <div>图文混排 <br> ...

  9. NGUI-制作位图字体以及图文混排

    制作字体过程 首先得下载一个位图制作工具Bitmap font generator,可以点击这里下载 1.新建txt文件,输入字体里面包含的文字 2.保存为utf-8格式:点击文件另存为,选择编码格式 ...

随机推荐

  1. 使用FileZilla从Linux系统下载文件

    需求:将Linux系统的的某个文件夹(里面包含文件夹和文件)下载到我Windows系统某个文件夹里 之前我使用xshell下载,但是通过 rz :上传sz:下载 命令中的sz命令,下载失败. 下载 c ...

  2. ruby-attr_accessor使用

    ruby语法-attr_accessor方法使用 本文主要讲解下ruby下attr_accessor方法的使用. 示例1: class Person end person = Person.new p ...

  3. GCC的__attribute__ ((constructor))和__attribute__ ((destructor))

    通过一个简单的例子介绍一下gcc的__attribute__ ((constructor))属性的作用.gcc允许为函数设置__attribute__ ((constructor))和__attrib ...

  4. Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)

    笔者所在的趣店 FED 早在去年 10 月份就已全面使用 Taro 框架开发小程序(当时版本为 1.1.0-beta.4),至今也上线了 2 个微信小程序.2 个支付宝小程序. 之所以选用 Taro, ...

  5. eos开发(三)使用cleos命令行客户端操作EOS——关于钱包wallet和账户account

    好了,上一节我们已经讲了关于wallet的一些基础操作,基本了解了怎么去创建一个钱包,怎么去查看钱包.上锁和解锁钱包等,这一节咱们就来开始操作账户account吧. 上一节讲到了每一个account都 ...

  6. 没搞懂的package.json

    事情是这样的,今天上午,后端同学 clone 了我们的一个小程序项目,希望到自己的电脑上跑起来. 然而,令人尴尬的是,他在 npm install 之后,项目并没有如愿运行,并抛出一个大大的错误. 后 ...

  7. new Date()浏览器兼容性问题

    不同浏览器有不同的差异,一般时间格式是“2018-11-13”,这种格式在Chrome下是可以正常执行的,不过在ie浏览器里面 就会变成NaN 解决方法:将时间转换成“2018/11/13” 这种格式 ...

  8. Code Complete-13/7/23

    What is "construction"?    Hava u ever  used construction paper to make some things?What i ...

  9. 【干货】利用MVC5+EF6搭建博客系统(四)(下)前后台布局实现、发布博客以及展示

    二.博客系统后台布局实现 2.1.这里所用的是MVC的布局页来实现的,后台主要分为三部分:导航.菜单.主要内容 代码实现: 这里把后台单独放在一个区域里面,所以我这里建立一个admin的区域 在布局页 ...

  10. Linux文本编辑器vim

    目录 1.vim 的工作模式 2.插入命令 3.定位命令 4.删除命令 5.复制和剪切命令 6.替换和取消命令 7.搜索和搜索替换命令 8.保存和退出命令 9.vim 高级操作 10.总结 通过前面几 ...