当前位置: 首页 > news >正文

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

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

1、每行文字太多

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

2、没有足够的行间距

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

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

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

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

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

5、检查CSS语法是否正确

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

6、快速找出错误模块

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

7、页面样式初始化

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

上面七条就是比较常见的页面布局会遇到的问题,其实还有很多布局过程中会遇到的问题,经验丰富的开发者都有自己的一套解决办法,平时多做项目练习就好。最后如果你对前端开发感兴趣的话不妨关注小千,后期会继续分享前端技术知识。

本文来自千锋教育,转载请注明出处。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.exyb.cn/news/show-35401.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

采坑记录之node-sass

node-sass这货很容易安装失败 下面是node-sass官网给出的对应node.js版本的图 一定要按照node-sass官网给出的对应node.js版本来安装,不然很容易安装失败 下面是sass-loader版本图 我自己安装的是node.js 14.x版本的,对应的node-sass的版本是4.14.x&a…...

C# 打包windows服务安装包后,安装后自动启动服务

在服务的安装程序,通常是ProjectInstaller,重写他的Commit方法 public override void Commit(IDictionary savedState){base.Commit(savedState);ServiceController sc new ServiceController("你的服务名称");if (sc.Status.Equals(Service…...

OverScroll介绍

OverScroll OverScroll作用 首先,OverScroll虽然内置了很多看起来像执行滑动效果的方法名,比如startScroll(int, int, int, int),springBack(int, int, int, int, int, int)等等,但是他们并不实际执行滑动效果,只是用于辅助计算…...

MATLAB 数学应用 微分方程 时滞微分方程 ddesd

求解带有常规时滞的时滞微分方程 (DDE) 语法 sol ddesd(ddefun,delays,history,tspan) sol ddesd(ddefun,delays,history,tspan,options) 参数 参数说明ddefun用于对微分方程 y′(t) f(t,y(t),y(d(1),…,y(d(k))) 的右侧进行计算的函数句柄。此函数必须为以下形式&#…...

Java 从多线程到并发编程(七)—— wait notify 生产者消费者问题 管程法 信号灯法

文章目录前言 ・ᴗ・wait 与 notifynotify 和 notifyAll深入了解 阻塞线程的状态切换生产者消费者模型wait notify深入一点管程法管程法 仓库管程法 生产者管程法 消费者管程法 main调用管程法结果if还是while信号灯法总结 ◡前言 ・ᴗ&#xff…...

雨课堂期末考试答案----查了好多份答案,一道一道的进行查找正确答案,基本可以保证是正确答案

1.主观题 (10分) 工程为何总是伴随着风险?导致工程风险的因素有哪些? 2.判断题 (1分) 目前对水利工程价值的伦理判断基本是遵循功利主义原则。()对 3.单选题 (1分) 下列哪一项不属于工程实践全球性特征?( )C A 生态性 B 深远性 C 社会性 D 整体性 4.单选题 (1分) …...

阿里面试官力荐:Java面试必刷的17套一线大厂真题(含答案)

金三银四过去之后,回顾好多同学的面试经历,总结出了这份大厂面试真题的合集(含答案),里面包含了Java中级到Java架构师的方方面面,其中大厂也包含了阿里巴巴,京东,百度,拼…...

Vue系列3——Vue计算属性、监视属性和生命周期

点赞多大胆,就有多大产!开源促使进步,献给每一位技术使用者和爱好者! 干货满满,摆好姿势,点赞发车 路漫漫其修远兮,吾将上下而求索 前言 本章节咱们来说一下Vue中两个非常重要的计算属性、监视…...

学习第五篇:【SpringBoot-Labs】Spring Boot 调试环境、热部署入门、Lombok、MapStruct入门

本周(8.21-8.27)将学习芋道 Spring Boot的以下文章: 8.21: 快速入门 8.22:Spring Boot 自动配置原理 、Jar 启动原理 8.23:调试环境、 热部署入门、消除冗余代码 Lombok 入门 8.24:对象转换 Map…...

剑指 Offer 11. 旋转数组的最小数字

class Solution:def minArray(self, numbers: List[int]) -> int:left 0right len(numbers) - 1while left < right:# 取中点mid left (right - left) // 2# 如果 numbers[mid] > numbers[right] ,分界点落在 (mid, right]if numbers[mid] > numbers[right]:le…...

offer来了读书笔记-数据库三范式

面试中被问到了数据库三范式&#xff0c;只知道范式是数据库的设计规范&#xff0c;但是具体文档化的内容一下子却想不起来了&#xff0c;回顾平时的数据库表设计&#xff0c;其实也没有特别遵守范式&#xff0c;一切都是以方便开发为第一要素&#xff0c;这里对数据库的几个范…...

Linux 之 RAID 磁盘阵列

目录一、RAID磁盘阵列1.1 RAID磁盘阵列介绍1.2 常用的RAID级别1.2.1 RAID 0&#xff08;条带化存储&#xff09;1.2.2 RAID 1 (镜像存储)1.2.3 RAID5 磁盘列阵1.2.3 RAID6 磁盘列阵1.2.4 RAID 10&#xff08;先做镜像&#xff0c;再做条带&#xff09;1.2.5 RAID 01&#xff08…...

740_CTEX安装

全部学习汇总&#xff1a; https://github.com/GreyZhang/g_Tex 最终还是走上了这条路&#xff0c;没有抵制住这个神秘的诱惑。其实&#xff0c;TEX对我来说似乎并不是一个必须要接触的东西&#xff0c;接触的最大原因也是因为高德纳创造了他&#xff0c;我想看看这一套工具背后…...

Flutter面试常见开发问题

本文主要介绍Flutter面试常见开发问题 Flutter 使用了一种全新的方法&#xff0c;您可以使用 widgets代替 Views 。Android 中的 View 主要是布局的一个元素&#xff0c;但在 Flutter 中&#xff0c;Widget 几乎就是一切。从按钮到布局结构的一切都是小部件。这里的优势在于可定…...

matplotlib 3D绘图警告;MatplotlibDeprecationWarning: Axes3D(fig) adding itself to the figure is deprecate

警告内容&#xff1a; MatplotlibDeprecationWarning: Axes3D(fig) adding itself to the figure is deprecated since 3.4. Pass the keyword argument auto_add_to_figureFalse and use fig.add_axes(ax) to suppress this warning. The default value of auto_add_to_figur…...

【论文阅读笔记】Partial Convolution based Padding

论文地址&#xff1a;https://arxiv.org/abs/1811.11718 代码地址&#xff1a;https://github.com/NVIDIA/partialconv 论文小结 本文提出一种有效地解决因padding造成的无效信息增加的方案。   本文提出的解决方案借鉴于partial convolution的思想&#xff0c;以此一起解决…...

用 Python 进行 OCR 图像识别

数据采集就怕遇到图片,只能看不能复制怎么办。手动将文字提取出来,要耗费很大的工作量。 例如下图,某楼盘的一房一价表,怎么样发现单价低位的房子?光凭肉眼很难发现吧,能否让计算机进行文字的识别,然后再对这些数值型信息进行数据分析? 首先把图片中的单价提取出来, …...

大端小端存储二进制与字节的转换

大端小端二进制与字节的转换 单位换算 位&#xff1a;“位(bit)”是电子计算机中最小的数据单位。每一位的状态只能是0或1。 字节&#xff1a;8个二进制位构成1个“字节(Byte)”&#xff0c;它是存储空间的基本计量单位。1个字节可以储存1个英文字母或者半个汉字&#xff0c…...

787. K 站中转内最便宜的航班

787. K 站中转内最便宜的航班...

5个实用提速深度学习模型的方法

您是否通过深度学习模型获得了良好的准确性&#xff0c;却发现推理时间不足以部署到生产环境中&#xff1f;您是否对如何优化模型的推理速度迷失了方向&#xff1f;那么这篇文章是给你的。众所周知&#xff0c;数据科学项目有一个奇特的特性&#xff0c;即项目者需要不断转换关…...

Linux - 时钟

本文是《Linux内核设计与实现》中“定时器与时间管理”的学习笔记。 节拍率Hz 系统定时器频率是通过静态预处理定义的。我的Ubuntu配置的是250Hz&#xff08;4ms一个周期&#xff09;。 rootjohn-virtual-machine:/boot# grep CONFIG_HZ config-4.15.0-154-generic # CONFIG…...

阿里云边缘云全新架构升级,助力CDN操控新体验

简介&#xff1a; 本次升级根据上万企业客户的使用反馈和行业应用特征&#xff0c;从简单开通到个性化定制&#xff0c;从内容分发到边缘计算完整解决方案&#xff0c;对客户侧的使用体验进行了全局梳理和全链路优化&#xff0c;推进边缘云CDN操控革新&#xff0c;并逐步构建面…...

Django

Django 简介 基本介绍 Django 是一个由 Python 编写的一个开放源代码的 Web 应用框架。 使用 Django&#xff0c;只要很少的代码&#xff0c;Python 的程序开发人员就可以轻松地完成一个正式网站所需要的大部分内容&#xff0c;并进一步开发出全功能的 Web 服务 Django 本身基…...

关于在vue2.0中使用wangeditor富文本的一些问题

1.先下载相关依赖 npm install wangeditor 2. 引入相关包 import E from "wangeditor"; 3.注册相关内容 name: "picLibraryDetail", 4.相关代码如下&#xff1a; import E from "wangeditor"; export default {name: "picLibraryDetai…...

关于新手指导IntroJS,vue项目(vue3)和react项目(ant-design)的引用

安装插件 npm i introJs 一、vue3项目中引用intro作新手引导 src/utils/util.js文件 import introJs from intro.js/*** name: 新手指导* param {String} pathname 当前页面的path* param {Array} stepsArr 步骤内容&#xff08;包括element、intro&#xff09;* return {*}…...

nuxt中使用svg 开发svg组件

为什么要使用SVG 虽然我们在日常开发的时候&#xff0c;在使用iview 或者element ui等组件时&#xff0c;通常会包含一些常用icon&#xff1b;但是在面对一些特定的需求时&#xff0c;或者自己想high一下&#xff0c;这些通用的icon并不能很好的满足我们。这个时候我们可能会拿…...

A - Til the Cows Come Home POJ - 2387

A - Til the Cows Come Home POJ - 2387 最短路 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #include<queue> using namespace std; const int maxn 2010; typedef pair<int, int> PII; // first 存距离…...

C#不同状态的按钮 消失or显示

效果展示&#xff1a; 点击前 点击后 //而且 ”备注“ 变成可编辑状态 点击确定后 编辑成功 并变为初始 只有一个的” 编辑 “按钮 并在listView更改成功 列表样式 解决方案&#xff1a; 首先创建三个Button 都放在一个位置上 当然需要有一个按钮重合在编辑上面&#xff08;为…...

vue--CompositionAPI 中如何使用 VueX

a.同步方法改变数据&#xff1a; Home.vue <template><div class"home"><img alt"Vue logo" src"../assets/logo.png"><h1>{{name}}</h1></div> </template><script> import {toRefs} from v…...

5. 断路器hystrix dashboard turbine

hystrix使用 feign中使用 hystrix feign:hystrix:enabled: true #必须配置Component public class EurekaClientHystrix implements EurekaClientFeign{}使用feign配置了&#xff0c;这些&#xff0c;即可进行回退 Feign 的起步依赖中已经包含Hystrix依赖&#xff0c;所以只…...

JAVA中equalsIgnoreCase的用法

equalsIgnoreCase( )方法可以执行忽略大小写的比较。当比较两个字符串的时候&#xff0c;忽视大小写&#xff0c;认为A-Z与a-z是相同的。 “Aynor”.equalsIgnoreCase(“aynor”)返回的值是true。...

equalsIgnoreCase()方法和equals()方法

equalsIgnoreCase()方法和equals()方法都是用来比较两个字符串是否相等。 equals()方法在使用时严格规定两个字符串之间的大小写&#xff0c; 当字母的大小写或者字母不同时都是返回false。 equalsIgnoreCase()方法在使用时不区分左右两边字符串的大小写&#xff0c;只关注字…...

equalsIgnoreCase方法

boolean equalsIgnoreCase(String str) String的方法 判断两个字符串是否相等&#xff0c;忽略字符串的大小写 与equals的区别&#xff0c;equals严格区分大小写&#xff0c;equalsIgnoreCase忽略大小写...

equalsIgnoreCase( )方法

** equalsIgnoreCase( )方法 ** Java中若想进行忽略大小写的比较&#xff0c;可以调用equalsIgnoreCase( )方法。 当比较两个字符串时&#xff0c;它会认为&#xff1a; A至Z和对应的a至z是一样的。 AaBb––Zz 其一般形式如下&#xff1a; boolean equalsIgnoreCase(String…...

equalsIgnoreCase的使用

当进行string类型变量的相等比较时&#xff0c;一般采用StringUtils.equals这个方法&#xff0c;此方法比较时是区分大小写的&#xff0c;即abc和AbC之间比较是不相等的。但有些时候我们比较的时候并不关心大小写&#xff0c;只要字母相同即可&#xff0c;此时就可以使用String…...

equalsIgnoreCase()方法与equals()、“==”的区别

equalsIgnoreCase()方法与equals()、“”的区别 1.equalsIgnoreCase()是从词意上直译就能大概知道他的意思了。equalsIgnoreCase()和equals()都是比较字符串的内容&#xff0c;但equalsIgnoreCase()忽略大小作比较。equals()比较时区分大小写 2.“ ” 和前两个都不一样&#…...

equalsIgnoreCase() 方法

equalsIgnoreCase() 方法用于将字符串与指定的对象比较&#xff0c;不考虑大小写。 实例 equals() 会判断大小写区别&#xff0c;equalsIgnoreCase() 不会判断大小写区别&#xff1a; public class Test {public static void main(String args[]) {String s1 new String(&qu…...

equalsignorecase和equals区别

今天写代码&#xff0c;突然忘了equalsignorecase和equals区别&#xff0c;赶紧记录一下。 先下结论&#xff1a; 区别&#xff1a;equals()是Object类中定义的方法&#xff0c;判断两个对象是不是“相等”&#xff0c;会区分大小写&#xff1b;equalsIgnoreCase是string类中定…...

equalsIgnoreCase()的作用

equalsIgnoreCase()的作用equals与equalsIgnoreCase简单来说是比较字符串使用的equals大家应该都了解 – equalsIgnoreCase有些人特别眼生 String sb"DsHazi";boolean end sb.equalsIgnoreCase("dshaZI");//end为trueequalsIgnoreCase作用一般是用来比较字…...

Java - String equalsIgnoreCase() 方法

说明 此方法将此 String 与另一个 String 进行比较&#xff0c;忽略大小写考虑。如果两个字符串的长度相同&#xff0c;并且两个字符串中对应的字符是相等的忽略大小写&#xff0c;则认为两个字符串是相等的忽略大小写。 语法 这是此方法的语法 - public boolean equalsIgn…...

StringUtils.equalsIgnoreCase与equals的区别

一、简要概述 equalsIgnoreCase() 方法用于将字符串与指定的对象比较&#xff0c;不考虑大小写。equalsIgnoreCase() 方法中如果给定对象与字符串相等&#xff0c;则返回 true&#xff1b;否则返回 false。equals() 方法用于将字符串与指定的对象比较。String 类中重写了 equa…...

JAVA中字符串比较equals()和equalsIgnoreCase()的区别

引 今天在开发中&#xff0c;遇到一个很有意思的问题。有个工作计划列表&#xff0c;填写工作计划列表有几个输入框。1.工作计划时间 2.工作计划标题 3.工作计划内容。其中&#xff0c;需要判断标题是否已经存在。 方法一 在创建工作计划时&#xff0c;通过标题名称查询数据库…...

equalsIgnoreCase()和equals()的区别(从源码分析)

在项目中校验验证码是否正确的时候用到了equalsIgnoreCase()方法&#xff0c;就很好奇为什么不使用equals()方法&#xff0c;于是去查看了源码&#xff1a; 都在String.class里面 public boolean equalsIgnoreCase(String anotherString) {return (this anotherString) ? tru…...

html equls比较方法,equalsignorecase和equals区别是什么?

equalsignorecase和equals区别&#xff1a;equals方法来自于Object类&#xff0c;equalsIgnoreCase方法来自String类。equals对象参数是Object用于比较两个对象是否相等&#xff0c;equals在Object类中方法默然比较对象内存地址,所有我们应该重写这个方法&#xff0c;equals在把…...

Java String equalsIgnoreCase()方法的功能说明

转自: Java String equalsIgnoreCase()方法具有什么功能呢&#xff1f; Java String equalsIgnoreCase()方法的功能说明 Java String equals()方法的功能: 对字符串和指定的对象进行比较。 如果参数不为null并且对象中的字符系列和String相同…...

equals 和 equalsIgnoreCase

equals &#xff1a;将此字符串与指定的对象比较。当且仅当该参数不为 null&#xff0c;并且是与此对象表示相同字符序列的 String 对象时&#xff0c;结果才为 true。equalsIgnoreCase &#xff1a;将此 String 与另一个 String 比较&#xff0c;不考虑大小写。如果两个字符串…...

equals与equalsIgnoreCase

String fileName".SHP"; fileName.equals(".shp")为false; fileName.equalsIgnoreCase(".shp")为TRUE; equalsIgnoreCase与equals区别在于前者不区分大小写...

java equals equalsignorecase 性能_Java中equals()、equalsIgnoreCase()和==的区别

用久了C#&#xff0c;在Java中&#xff0c;判断一个字符串还是习惯性的用了&#xff0c;但是总是不能按照正确的判断分支运行&#xff0c;后来才想起来Java中是有equals的&#xff0c;然后就有引出了equalsIgnoreCase。这三种的正确运用能对敲代码的时候减少不少烦躁的机会。一…...

【NDVI:注意力机制:遥感图像】

NDVI-Net: A fusion network for generating high-resolution normalized difference vegetation index in remote sensing &#xff08;NDVI-Net&#xff1a;一种生成高分辨率归一化植被指数的遥感融合网络&#xff09; 归一化植被指数&#xff08;Normalized Difference Ve…...

java equals equalsignorecase 性能_JAVA中字符串比較equals()和equalsIgnoreCase()的差别

1、使用equals( )方法比較两个字符串是否相等。它具有例如以下的一般形式&#xff1a;boolean equals(Object str)这里str是一个用来与调用字符串(String)对象做比較的字符串(String)对象。假设两个字符串具有同样的字符和长度&#xff0c;它返回true&#xff0c;否则返回false…...