网页页面设计与布局

页面布局设计方式：

1.框架布局[+CSS]
应用范围：小型的商业网站，论坛，后台管理，学习教程网站，例如：chinaRen社区
优点：支持滚动条，便于导航，节省页面下载时间
缺点：页面样式不美观

2.表格布局[+CSS]
应用范围：组织有规律的数据，例如：账目，考勤，用户信息等
优点：
1.表格可嵌套
2.表格布局比较方便，快捷
缺点：
1.大量布局表格，造成代码臃肿，下载速度缓慢
2.嵌套后的表格，如需修改样式，需要重新设计，修改麻烦

3.DIV+CSS[要点：div的样式属性：diaplay,float,clear,z-index,margin,padding]
应用范围：大型的门户网站，例如：网易，搜狐，新浪，淘宝等。
优点：
1.支持所有的浏览器
2.搜索引擎更加友好
3.样式调整更加方便
4.结构清晰，代码简洁
5.表现[CSS]和结构[DIV]相分离，在团队开发中便于分工合作而减少相互关联
缺点：
1.对CSS高度依赖，使得网页设计变得比较复杂
2.CSS文件异常将会影响整个网站的正常浏览
3.CSS网站设计的浏览器的兼容性问题比较突出

问题1：现在什么布局方式最流行？
DIV+CSS

问题2：是不是过时的页面布局方式就不能用了？
不是，因为目前我们的浏览器都能解释 以上3种布局方式。

问题3：是不是每个网站的页面布局方式，只能选择以上其中一种？
不是，可以以1种为主题，其他辅助使用。

 
————————————————————————————
版权声明：本文为博主[夏小安Lily]的原创文章，如有侵权请联系删除。
原文链接：https://blog.csdn.net/vera514514/article/details/7771378

 
 
 

网页布局的思路

对于我这种初学者来说，浮动真的是让我待如初恋（咬牙切齿），有的时候你让它往东，它偏向西，真的是脑壳疼，所以打算整理一下思路：

对于一个网页的排版可分为两种情况（横向和纵向）
1.纵向区块，则每个区块写出一个div即可，因为div是独占一行的（块级元素）
2.横向区块，则
a . 同样每个区块写出一个div，且每个div都进行浮动；
b . 有需要则设置各个div需要的宽度，但总和不超过父盒子的宽度。
c . 有必要也设置各自高度，以及颜色背景或边框，以出现明显的视觉效果，这样有助于排错；
d . 处理父盒子的高度：在最后位置设置一个用于清除浮动的div（这样父盒子才“表现正常”），或对父盒子使用overflow:hidden;或设置一个固定的高度以包住里面的盒子（里面盒子高度固定的情况下可用）。这一点很有必要。

布局一定要注意：

横向排列的布局需要用到浮动（一左一右，两左一右，或者都靠左）
只要有浮动元素，一定要考虑父元素的高度问题，如果不对其进行约束，就会使得父元素受其子元素的影响浮动起来，就会使得纵向位于父元素下面的纵向区块向上移动，从而使的父元素无法正常的显示
约束方式：
a. 设定固定高；
b. 清除浮动以获得自然高
• 父元素使用overflow：hidden；
• 父元素的最后位置额外加一个div并设置其clear:both。

 
————————————————————————————
版权声明：本文为博主[0菜鸡小白0]的原创文章，如有侵权请联系删除。
原文链接：https://blog.csdn.net/weixin_43932553/article/details/105033914