HTML CSS + DIV实现排版布局

mylxsw 发布于2019-07-01 10:18 / 756人阅读

HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个“盒子”组成，如图：

由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，
中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个
的盒子，这些"盒子"中放置着各种内容，页面就是由这些"盒子"拼凑起来

案例布局分析：

单列布局案例：

代码如下：

运行结果：

双列布局案例：

代码如下：



    
        
        双列布局

运行结果如下图：

三列布局案例：

代码如下：



    
        
        三列布局

运行结果如下图：

混合布局案例：

代码如下：



    
        
        混合布局

运行结果如下图：

总结：

排版布局需要掌握的知识

div 相关属性

float 浮动属性

position 定位属性

clear 清除浮动的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/29021.html

HTML CSS + DIV实现排版布局

摘要：实现排版布局网页可以看成是由一个一个盒子组成，如图由上图可以看出，页面分为上网站导航中下版权声明三个部分，中间部分又分为左商品分类中主要部分右，这些版块就像一个个的盒子，这些盒子中放置着各种内容，页面就是由这些盒子拼凑起来案例布局分析单列布 HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个盒子组成，如图： showImg(https://segmentfault....

xiaodao 2019-08-02 10:53 评论0 收藏0
HTML CSS + DIV实现排版布局

摘要：实现排版布局网页可以看成是由一个一个盒子组成，如图由上图可以看出，页面分为上网站导航中下版权声明三个部分，中间部分又分为左商品分类中主要部分右，这些版块就像一个个的盒子，这些盒子中放置着各种内容，页面就是由这些盒子拼凑起来案例布局分析单列布 HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个盒子组成，如图： showImg(https://segmentfault....

keke 2019-08-30 15:54 评论0 收藏0
HTML+CSS基础课程-imooc-【更新完毕】

摘要：包含后代选择器包含选择器，即加入空格用于选择指定标签元素下的后辈元素。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过进行选择。 6-1 认识CSS样式 CSS全称为层叠样式表 (Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可...

Heier 2019-08-01 15:04 评论0 收藏0
前端基础-CSS如何布局以及文档流

摘要：一网页布局方式二标准流三浮动流四定位流一网页布局方式什么是网页布局方式布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如，等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的网页布局排版的三种方式标准一、网页布局方式二、标准流三、浮动流四、定位流一、网页布局方式　1、什么是网页布局方式布局可以理解为排版，我们所熟知的文本编辑...

番茄西红柿 2019-04-23 13:40 评论0 收藏0