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

手机站
千锋教育

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

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

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

当前位置:首页  >  技术干货  >  网页排版布局常见问题有哪些?

网页排版布局常见问题有哪些?

来源:千锋教育
发布人:wjy
时间: 2022-06-06 11:40:00 1654486800

  关于排版布局,好的页面排版重点突出,看起来舒适不费劲,整体简洁大方,更重要的是能让用户更好的更方便的浏览网站,而在书写的过程中,无论你写的是什么代码,都会犯一些小错误,而小错误往往不起眼难以引起注意,结果花大量的时间来调试和排错.查看下面这份CSS网页布局中易犯的7个小错误,努力的修正可能会犯的错误,加速你的前端开发效率。所以列举以下网页在排版中常见的问题

网页排版布局常见问题有哪些

  **1: 每行文字太多**

  用户在阅读许多行文字时间久了会引起眼睛的疲劳,在从一行到另一行时读者不得不经常移动他们的眼睛和头部,而这种让人疲惫的布局模式是不受欢迎的,经网络有关调查表明每行文字保持文字在50 - 60个字符以下,看起来最为舒适,那这就要求在进行文字描述的时候尽可能的简洁简短。

  **2: 没有足够的行间距**

  行间距能改善整页中文字块的阅读效果,这样做是为了当读者阅读下一行的时候不会找不到他们的位置.太小太密集的文字可能引起一种受压迫感。不同的字体需要不同的行间距这很重要。或多或少需要改变版本的高度来降低页面中文字之间的密集程度,因为页面中的文本重点突出有引导用户浏览的作用,所以要权衡好文本之间的间距也是非常重要的.

  **3: 太多的级别的文本没有区分重点**

  在一页面上有太多的字体可能会使注意力不集中和不能突出重点。页面中的文字有些是需要突出让用户一眼能看到的重要文字,那么这模块就要弱化其他的文字,比如通过文本大小,颜色,文本粗细等方式来弱化。太多种字体可能会引起用户感觉得这个页面中找不到重点,这可能会使用户错过一些重要的东西,所以通常字体的选择器在3个甚至更少,

  **4: 新手程序员对html标签的语法规则的检查**

  HTML5的语法规则没有之前版本的严格,包容性强大,但是我们尽可能的遵循他的语法规则,而关于标签的书写容易丢失的就是标签中所出现的一些符号容易丢失或者写成中文符号,比如尖括号,引号,斜杠等,在一个就是标签之间的嵌套关系,即使是非常熟练的程序员也经常弄错嵌套关系,有时候并不是自己写错了嵌套关系,而是因为丢失了某一个符号引起的,比如斜杆

  **5、检查CSS语法是否正确**

  CSS的语法首先是选择器{属性:值;} 这条语句中出现的符号都是英文符号,常见的是拼写错误,冒汗成了等号,丢失分号,丢失大括号等。可以在浏览器中打开开发者工具中审查,错误的写法会直接体现出来可以利用CleanCSS工具来检查 CSS的拼写错误

  **6、快速找出错误模块**

  经常看到有小伙伴在写也页面的时候发现底下的元素突然跑到了已经写好的区域,或者嵌套关系出现了问题,这时候打乱了整个页面的布局结构,这时候我们可以使用排除法,通常在开发都是模块化开发,只要按照顺序将每个模块的div逐个注释掉,直到注释掉某个模块后页面显示正常,则最后注释掉的模块就是错误发生的模块。

  **7、页面样式初始化**

  我们都知道html中有些标签带有默认的内外边距或者间距,这些间距是我们不需要的,同时在不同的浏览器中某些间距解析大小还不一致,这就极大的影响我们对页面的布局,这些属性包括margin、padding等。因此最好在开发前根据需求将出现的标签对应的取消他们的默认margin、padding值,将他们的值设置为0等。

  上面的网站布局方式只是一些常见的企业类网站页面布局,布局的方式还有更多。实际上,布局就像是摆积木,只要遵循重要信息靠左、靠上,次要信息靠右、靠下的原则即可,并没有规定一定要怎么布局,或者这种布局方式要比那种更好,只能说某种布局方式更为合适某个页面而已。所以,大家多做尝试,从你手头正在做的项目开始,尝试一下不同的布局方式,给你的设计增加一些创意和新鲜感。更多关于web培训的问题,欢迎咨询千锋教育在线名师。千锋教育拥有多年IT培训服务经验,采用全程面授高品质、高体验培养模式,拥有国内一体化教学管理及学员服务,助力更多学员实现高薪梦想。

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