关键词：
页面布局的选择是用户能够直观感受到的第一印象，简洁大方能够让用户更快速的在网站找到想要的资源，但往往一些新手web前端开发者经常会出现一些排版上面的问题，今天小千就来给大家总结一下，提供给大家参考。
1、每行文字太多
用户在阅读许多行文字时间久了会引起眼睛的疲劳，在从一行到另一行时读者不得不经常移动他们的眼睛和头部，而这种让人疲惫的布局模式是不受欢迎的,经网络有关调查表明每行文字保持文字在50 - 60个字符以下,看起来最为舒适,那这就要求在进行文字描述的时候尽可能的简洁简短。
2、没有足够的行间距
行间距能改善整页中文字块的阅读效果，这样做是为了当读者阅读下一行的时候不会找不到他们的位置.太小太密集的文字可能引起一种受压迫感。不同的字体需要不同的行间距这很重要。或多或少需要改变版本的高度来降低页面中文字之间的密集程度,因为页面中的文本重点突出有引导用户浏览的作用,所以要权衡好文本之间的间距也是非常重要的。
3、太多的级别的文本没有区分重点
在一页面上有太多的字体可能会使注意力不集中和不能突出重点。页面中的文字有些是需要突出让用户一眼能看到的重要文字,那么这模块就要弱化其他的文字,比如通过文本大小,颜色,文本粗细等方式来弱化。太多种字体可能会引起用户感觉得这个页面中找不到重点,这可能会使用户错过一些重要的东西,所以通常字体的选择器在3个甚至更少。
4、新手程序员对html标签的语法规则的检查
HTML5的语法规则没有之前版本的严格,包容性强大,但是我们尽可能的遵循他的语法规则,而关于标签的书写容易丢失的就是标签中所出现的一些符号容易丢失或者写成中文符号,比如尖括号,引号,斜杠等,在一个就是标签之间的嵌套关系,即使是非常熟练的程序员也经常弄错嵌套关系,有时候并不是自己写错了嵌套关系,而是因为丢失了某一个符号引起的,比如斜杆。
5、检查CSS语法是否正确
CSS的语法首先是选择器属性:值; 这条语句中出现的符号都是英文符号,常见的是拼写错误,冒汗成了等号,丢失分号,丢失大括号等。可以在浏览器中打开开发者工具中审查,错误的写法会直接体现出来可以利用CleanCSS工具来检查 CSS的拼写错误
6、快速找出错误模块
经常看到有小伙伴在写也页面的时候发现底下的元素突然跑到了已经写好的区域,或者嵌套关系出现了问题,这时候打乱了整个页面的布局结构，这时候我们可以使用排除法,通常在开发都是模块化开发,只要按照顺序将每个模块的div逐个注释掉,直到注释掉某个模块后页面显示正常,则最后注释掉的模块就是错误发生的模块。
7、页面样式初始化
我们都知道html中有些标签带有默认的内外边距或者间距,这些间距是我们不需要的,同时在不同的浏览器中某些间距解析大小还不一致,这就极大的影响我们对页面的布局,这些属性包括margin、padding等。因此最好在开发前根据需求将出现的标签对应的取消他们的默认margin、padding值,将他们的值设置为0等。
不要小看这些问题，在开发过程中往往就是这些小问题汇聚成一个大问题，最终导致你的网站开发过程出现问题。最后欢迎对 web前端开发感兴趣的同学关注小千，后期会继续分享更多web前端知识。
web前端攻城狮培养计划之前端小白入门：网页布局基础与常见网页特效
步骤1:HTML基础超文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言,为搭建网页结构做出第一步。本阶段主要介绍了HTML的语法基础、表格、表单、等标签，并有案例结合，... 查看详情
前端教程(10)css入门教程-css网页布局
一网页布局方式#1、什么是网页布局方式布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如word，nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的#2、网页布局/... 查看详情
前端技术学习路线及技术汇总
下面是简单整理的一些前端的学习路线：第一阶段：HTML+CSS：HTML主要就是网页编辑。包括HTML进阶、CSS进阶、div+css布局、HTML+css整站开发。Javascript语言：JavaScript是web前端中最重要的知识，包括Js基础教程、js内置对象常用方法、... 查看详情
html万能排版布局插件，web视图定位布局创意技术演示页
...head><metacharset="utf-8"><title>web视图定位布局创意技术演示页</title><metacontent="width=de 查看详情
前端必备技能~h5网页无法转发给朋友和分享朋友圈，解决方法汇总(代码片段)
...信分享功能的正常全流程2.微信分享官方资料3.微信分享常见问题4.微信分享3次实战开发，遇见的坑及解决方法汇 查看详情
前端布局方式汇总及概念浅析
一、基础布局方式0.普通/文档流布局早期 <table>，后来 <div> ，再后来 html5语意化标签按照自上而下的方式顺次排布。 1.Float布局 float:left/right最初设计目的是用于图文环绕排版、不过目前常用于左... 查看详情
web前端大神整理：css布局经典问题
本文来自前端大神的整理，主要对CSS布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负margin，清除浮动，居中布局，响应式设计，Flexbox布局，等等。 CSS基础知识 下面几个入... 查看详情
web前端技术分享：学习html和css的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发。但并不是只有Web开发人员才要学习HTML和CSS的核心技术。作为一个网络用户，你需要你掌握的相关技术很多，但下面小千总结了5个你无法拒绝学习HTML和CSS的理由。1、轻松... 查看详情
web前端需要学啥？
这里整理了一份web前端学习路线的思维导图，需要掌握和学习的内容如下：第一阶段：专业核心基础阶段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术... 查看详情
现在做网页前端的学习路线是啥
...dejs,ractjs,seajs,anuglarjs,webpack这些东西.还有现在一线城市的前端开发模式是怎么样的,都用了什么技术? 初学者必看干货web前端学习路线图，随着移动互联网的发展，web前端逐渐受到企业的重视，前端开发人员的薪资也水涨船高... 查看详情
web前端培训都有哪些课程
...技术-网站前后端交互、jQuery交互效果开发第三阶段NodeJS前端架构及后台开发：版本控制工具、NodeJS核心技术第四阶段前端框架：Vuejs全家桶-Vue、React框架-React、微信小程序、Flutter第五阶段小程序开发：能够独立开发小程序，提... 查看详情
北京web前端培训机构，出来好找工作吗，需要学哪些内容？
大部分人学习一项技术肯定是以就业为目标，那么学习web前端哪些知识才能找到一份工作？小蜗这里根据行业的变化以及企业的用人需求，整理了一份web前端的学习路线，只要掌握了以下内容，找到一份工作基本不难。第一阶段... 查看详情
前端开发必学的技术都有哪些？
前端开发必学的技术有哪些这里给大家整理了一份系统全面的前端学习路线，主要掌握以下技术：第一阶段：专业核心基础阶段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布... 查看详情
网页布局汇总
一、传统网页布局(PC端网页布局)1、标准流2、浮动3、定位二、移动端布局1、flex弹性布局在不考虑浏览器兼容性问题时，flex弹性布局也可以应用于pc端网页布局之中。2、流式布局3、rem适配布局4、响应式布局移动端布局中不... 查看详情
零基础学习前端开发要怎么开始
这里整理了一份web前端学习路线的思维导图，需要掌握和学习的内容如下：第一阶段：专业核心基础阶段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术... 查看详情
学前端都学啥比较好？
这里整理了一份系统全面的web前端学习路线，需要学习以下内容，希望能帮助各位小伙伴少走弯路。第一阶段：专业核心基础阶段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面... 查看详情
web开发需要学习啥？
这里整理了一份web前端学习路线，比较系统和全面，希望可以帮到你~第一阶段：专业核心基础阶段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术，动画... 查看详情
零基础学web前端-css
CSS指层叠样式表(CascadingStyleSheets)，CSS是标准的布局语言，用来控制元素的尺寸、颜色、排版。CSS由W3C发明，用来取代基于表格的布局、框架以及其他非标准的表现方法。样式(style)定义如何显示HTML元素；样式通常存储于样式表中... 查看详情