千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > web开发技巧-网页排版布局常见问题及解决办法

web开发技巧-网页排版布局常见问题及解决办法

来源:千锋教育
发布人:小千
时间: 2021-08-24 08:28:00 1629764880

      在前端开发过程中比较麻烦的地方其实并不是开发,而是考虑用哪些页面布局样式,一个好的布局排版重点突出,看起来舒适不费劲,整体简洁大方,更重要的是能让用户更好的更方便的浏览网站。今天小千就来给大家介绍几种常见的布局问题和解决办法,看看有没有你用得上的。

<a href=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前端培训班参加我们的前端培训课程的学习,为期两周的免费试听,更有免费学习资料可以领取,赶紧来找在线老师了解一下吧。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT