图文混排，可以使用

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的主题部分，代码如下：   

        
        

            

Welcom to aslkdf aslkd  asdfkjl

            

slkf sldfkjl s f j dsl fs p  j j j fpjo jopf fjop fjp pof djo jp fj pj pj

            
            

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

            

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

        

    

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！