关于html页面布局
之前做的一个网站,结果今天这几天测试发现在19寸屏幕和手机屏幕上页面布局全乱了,今天刚刚改好,发现还是自己经验不足,做个小总结。
一、div布局要固定宽高
当div不设计长宽高而是自动由内部控件”撑“尺寸的话,我们发现当屏幕缩小时其布局会变乱,(推测原因可能和使用的bootstrap框架的自适应有关),于是我们将所有的宽度设死,这样当屏幕缩小或改变屏幕尺寸时虽然不会自动适应当前窗口大小,而是出现滚动条,但起码能保证不会出现之前的布局错乱的现象。(不过我相信应该能有更优的解决方案)
二、整体页面宽度设定的小细节
之前看各种网站都发现一个小细节,很多网页的主体不会占满整个窗口,在左右两边会留下空位,内容写在中部。
根据这次网站开发的经验,我感觉到了这么做的好处(肯定不是所有网站都是这个原因)。
举个例子,假设你将网页的总体宽度设死,设置成1520px(写死的原因是上一条),那么你在15寸笔记本上看可能会刚刚好占满屏幕。但如果你在14寸电脑上看,就会发现超出了屏幕(因为14寸屏幕的宽度小于1520px),此时底部就会出现滚动条,而在19寸屏幕上可能又会占不满屏幕的现象。
此时我们的解决办法就是将整体的主体宽度设死为一个比较小的值(比如1170px)并水平居中,而两边”自动补白“。这样就可以保证在各种尺寸的显示器上不会出现网站内容超过窗口或小于窗口的现象。原因是此时的主体宽度小于任何一个尺寸的屏幕自然就不会超出,而且居中显示,那么即使没有占满屏幕也不会显得很奇怪。
三、网页头部布局的小细节
虽然像第二条说的,在很多网页上主体都是居中且两边补白,但很多网页的头部都是宽度占满屏幕的。这次修改网页我们也发现了,最终的解决方案其实是头部主体依然用第二条的解决方案(小尺寸宽度且居中),但两边不是补白而是补”背景色“。如现在我所处的这个csdn的写博客页面,它的头部背景颜色就和主体不一样,是黑灰色。要是让我设计我会将头部内容尺寸固定居中,两边补灰黑色,制造出一种占满屏幕宽度的”假象“。
关于html页面布局的更多相关文章
- 前端框架 EasyUI (2)页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- Xamarin+Prism开发详解五:页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 【Android】纯代码创建页面布局(含异步加载图片)
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
- 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]
如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- SharePoint 2013 入门教程之创建页面布局及页面
在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...
随机推荐
- HTML5火焰文字特效DEMO演示---转载
只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- Python入门神图
国外某小哥制作的Python入门神图
- ++i与i++的区别
1. ++i 和 i++,在单独使用时,就是 i=i+1. 2. a = ++i,相当于 i=i+1; a = i; (先i = i + 1,再使用i的值).也可以写成 i++; a=i 3. a = ...
- 提取Windows用户密钥文件cachedump
提取Windows用户密钥文件cachedump Windows系统将用户信息和密钥存储在系统存档文件(System hive)和安全存档(Security hive)中.只要提取这些内容,就可以 ...
- .NET方向高级开发人员面试时应该事先考虑的问题
(澄清一下,我发帖的目的不是用来专门给人评价这些问题的好坏的,实际上我所在 的公司就考察这些问题.而能够基本上答出来的可以说百里挑一.如果各位觉得这些问题很简单,那么基本上在.NET面试环节就没有什么 ...
- JavaScript 笔记 ( Prototype )
这阵子实在好忙 ( 这样说好像也不是一两个月了... ),然后因为工作伙伴都是 JavaScript 神之等级的工程师,从中也学到不少知识,毕竟就是要和强者工作才会成长呀!为了想好好瞭解他们写的程式码 ...
- C# 词法分析器(六)构造词法分析器
系列导航 (一)词法分析介绍 (二)输入缓冲和代码定位 (三)正则表达式 (四)构造 NFA (五)转换 DFA (六)构造词法分析器 (七)总结 现在最核心的 DFA 已经成功构造出来了,最后一步就 ...
- ural 1072. Routing
1072. Routing Time limit: 1.0 secondMemory limit: 64 MB There is a TCP/IP net of several computers. ...
- BZOJ3068 : 小白树
枚举每条树边,将其断开,那么两侧肯定取带权重心最优. 考虑如何求出每个子树的重心,枚举其所有儿子,通过重量关系就可以判断出重心位于哪棵子树. 然后将那棵子树的重心暴力往上爬即可,因为每个点作为重心肯定 ...
- php访问url的四种方式
1.fopen方式//访问指定URL函数 function access_url($url) { if ($url=='') return false; $fp = fopen($url, 'r') ...