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>

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

 

section标签,黑色宽度为:1200px;

aside标签,绿色宽度为:450px;  侧边栏的宽度一般是固定的,所以一定要注明:width属性值。

article标签,蓝色宽度为:720px; 文章的宽度设置时,注意与aside之间是否需要空隙,如果需要一定记得别把宽度设置满了。即:小于1200-450=750px;

margin外边距(这里是不需要设置的,因为aside向左浮动,article向右浮动,两个相加为1170px,还剩余30px;),橙色宽度为:30px;

原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/10710079.html