博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML CSS + DIV实现排版布局
阅读量:6087 次
发布时间:2019-06-20

本文共 979 字,大约阅读时间需要 3 分钟。

HTML CSS + DIV实现排版布局

1.网页可以看成是由一个一个“盒子”组成,如图:

图片描述

由上图可以看出,页面分为上(网站导航)、中、下(版权声明)三个部分,

中间部分又分为左(商品分类)、中(主要部分)、右,这些版块就像一个个
的盒子,这些"盒子"中放置着各种内容,页面就是由这些"盒子"拼凑起来

  • 案例布局分析:

图片描述

单列布局案例:

代码如下:
            
单列布局
头部
主题
运行结果:

图片描述

双列布局案例:

代码如下:
            
双列布局
运行结果如下图:

图片描述

三列布局案例:

代码如下:
            
三列布局
运行结果如下图:

图片描述

混合布局案例:

代码如下:
            
混合布局
运行结果如下图:

图片描述

总结:


排版布局需要掌握的知识

  • div 相关属性
  • float 浮动属性
  • position 定位属性
  • clear 清除浮动的应用

转载地址:http://favwa.baihongyu.com/

你可能感兴趣的文章
网页底部工具条
查看>>
Python实现经典排序算法
查看>>
[SQL in Azure] Windows Azure Virtual Machine Readiness and Capacity Assessment
查看>>
J2EE项目安全的考虑(SSH2)
查看>>
栈和堆的区别
查看>>
20天的突击,还有一波三折的惊喜!感谢51CTO学员!
查看>>
mysql cluster 配置
查看>>
实用cmd指令(2)
查看>>
linux下快速切换目录的方法
查看>>
Spring AOP嵌套调用的问题 (同一类方法内调用切面切不到)
查看>>
10月19日作业
查看>>
纯css实现高度与宽度成给定比例的效果
查看>>
轻松娱乐
查看>>
高级人工智能汇总
查看>>
Netty实现自定义简单的编解码器(一)
查看>>
MySQL Cursor在存储过程中的使用
查看>>
我的友情链接
查看>>
10046事件和tkprof命令
查看>>
关于linux的连接数问题
查看>>
javaIO流
查看>>