HTML5标签选择,图文混排使用dl dt dd

时间:2019-04-15
本文章向大家介绍HTML5标签选择,图文混排使用dl dt dd,主要包括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="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="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="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="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="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>

===========================

 

上一页 下一页

原文地址:http://www.manongjc.com/article/103032.html