高认知的一句话,增加对莆田系医院的认识:莆田系医院-你有病,病很重,我有药,药很贵
关键词:
1修改表的边框显示,表宽度,高度,表位置
2如何给Excel做表头
3如何给Excel做标题
内容:
web前端-html
0.修改表宽度,高度,位置
body
table
在这里修改
width=500宽度
height=300高度
align=center,居中显示
table
/body
成果:
齐是一种常见的设计方式,它符合用户的观看习惯。作为B端设计,对齐有多少种方式?设计的时候有什么讲究呢?本文作者对此进行了分析,与你分享。
关于对齐,大部分设计师可能会觉得非常简单,不就是那几种对齐方式嘛,难道还有很复杂的操作?深入研究才发现,B端对齐还真没你想象的那么简单。如果不信,请接着往下看。
对齐,顾名思义就是将文字或图片等信息以某种对齐规则进行排列。我们常用的对齐规则分为三类,即:左对齐、右对齐、居中对齐。
左对齐是最为常见的场景,因为它符合人们的阅读动线——从左到右进行阅读。在大部分的设计场景中都可以运用左对齐。比如我们常见的工作台卡片、导航栏等都可以使用左对齐。
在使用左对齐时,不仅需要考虑物理对齐,在特定场景下需要考虑视觉对齐:比如在对于图标和文字混排时,记得文字跟文字对齐,视觉效果会更加整齐(因为格式塔原理,人们对于类似的东西会将其看做同一类,而同一类对齐视觉上会舒适)。
右对齐可能在很多时候运用得比较少,在普通设计场景的右对齐用来填补设计中右侧的视觉空缺,比如以下两种应用场景:
1.内容或者辅助信心使用右对齐。
2.操作类的右对齐,比如移动端表单或者web端操作。
居中对齐则一般是根据设计场景而选择使用的,一般在两种场景中:
1.特定状态,比如空状态中插画与文字相结合,地图标志等都是使用居中对齐的形式
2.特定组件,对于步骤条或者加载等特殊组件,一般也使用居中对齐
表单在B端设计中是非常常见的一种设计方式,表单中三种对齐方式都存在,目前有以下区分:
在默认情况下基本都按照左对齐来进行排列,因为大部分表格字段都是非固定的,左对齐能够让整体有一个比较良好的展示效果。
2.居中对齐一般针对固定长度类型的数据,比如我们常见的性别、状态和楼层等。采用居中对齐能够很好的和表头进行对齐,视觉上更舒适。
而右对齐则一般针对金融类,比如价格等数字,因为数字采用右对齐能够更好地进行价格的比较。
在这里要注意,使用数字时最好使用等宽的数字,第一是为了避免因为数字不同的宽度而不太整齐,第二则是为了更好地进行金额等的对比。
比如DIN字体、微软雅黑、思源黑体都属于等宽字体,而我们常见的苹方字体则为非等宽。
在录入场景中,一般分为标题和内容两个字段进行展示,因此这两种字段可以组合成以下几种对齐方式:标题左对齐、标题右对齐、整体左对齐、顶对齐。
那么这几种到底有什么区别呢?我们接着往下看。
这是一种目前在很多B端产品中比较常见的对齐方式。
比如在神策或者coding等很多产品的配置场景中,基本采用左对齐的方式进行配置。
coding的:
这种对齐方式牺牲了视觉对齐,换来了标签和内容的间距一致,让其亲密性更强,从操作效率上来讲会得到一定的提高。比如在钉钉的新版后台中,基本采用了此种对齐方式。
我们在使用此类对齐方式时对于标题的字数有一个合理的限制。
这种方式就是标题与内容进行贴合设计,整体左对齐。
运用此方式的场景大部分在多列字段的设计场景中,因为相较于前两种方式来讲,多列字段(2列及以上)同步呈现时,该类方式会让整体表单显得更紧凑与合理。
但从目前市场上的竞品来看,运用此类排列方式的场景比较少,仅有少部分在展示字段时运用了此种方式。
猜测有2点原因:
所以某些配置场景为了让编辑也保持一致性,会放弃上述的对齐方式改为标题右对齐,比如acro design的设计案例:
虽然目前应用得不多,但我们在平日的运用中,也需要留意此种应用场景。
这种相对于是另外一种方式,这种方式降低了对页面宽度的要求,提供了更多的横向空间。从用并且目前很多产品已经在各个功能模块运用顶对齐来记性录入:
目前国外产品和国内录入场景顶对齐用的也比较多。
那么我们在进行表单设计时如何选择呢,这就需要根据我们的实际情况了。
因此我们需要考虑当前页面的使用场景:
1.更偏向于录入场景的话,且横向空间充足,选择标题右对齐,否则顶对齐。
2.更偏向于阅读或浏览的话,选择标题左对齐或整体左对齐。而这两者的细致场景区分,需要考虑当前场景标题字段的差异性:
A.如果标题字段都比较接近,选择标题左对齐;
B.如果标题字段相差比较大,尤其是字段需要配置的场景,那么可以选择整体左对齐。比如我举一个例子你就明白了:
当标题差异过大的时候,标题左对齐会让某些标题与内容间隔特别长,阅读体验就会降低很多。
通过这样的场景和使用分析,我们就能够更加清晰地使用各类对齐方式,来让我们整体的使用体验更好。那么看到这里,你有掌握关于B端对齐的全部细节吗?
本文由 @蒙东东 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自Unsplash,基于 CC0 协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
TML5 为前端开发者带来了许多表单增强功能,这些功能使得创建交互式和用户友好的表单变得更加容易。在本文中,我们将介绍几种 HTML5 新增的表单功能,并提供完整的 HTML 示例,以帮助你了解如何在实际项目中应用这些功能。
HTML5 引入了一系列新的 input 类型,以支持更多种类的数据输入,比如电子邮件、日期等。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>电子邮件和网址输入示例</title>
<style>
body {
font-family: Arial, sans-serif; /* 设置字体 */
padding: 20px; /* 页面内边距 */
}
form {
max-width: 400px; /* 表单最大宽度 */
margin: 0 auto; /* 居中显示 */
padding: 20px; /* 表单内边距 */
border: 1px solid #ccc; /* 边框样式 */
border-radius: 5px; /* 边框圆角 */
background-color: #f9f9f9; /* 背景颜色 */
}
label {
display: block; /* 使标签独占一行 */
margin-bottom: 5px; /* 标签下方间距 */
font-weight: bold; /* 字体加粗 */
}
input[type="email"],
input[type="url"] {
width: 100%; /* 输入框宽度 */
padding: 8px; /* 内边距 */
margin-bottom: 20px; /* 与下一个元素的间距 */
border: 1px solid #ccc; /* 边框样式 */
border-radius: 4px; /* 边框圆角 */
}
input[type="submit"] {
background-color: #007bff; /* 背景颜色 */
color: white; /* 字体颜色 */
padding: 10px 20px; /* 内边距 */
border: none; /* 无边框 */
border-radius: 4px; /* 边框圆角 */
cursor: pointer; /* 鼠标样式 */
font-size: 16px; /* 字体大小 */
}
input[type="submit"]:hover {
background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}
</style>
</head>
<body>
<form>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required>
<label for="url">个人网站:</label>
<input type="url" id="url" name="url">
<input type="submit" value="提交">
</form>
</body>
</html>
在这个示例中,我们使用了 type="email" 和 type="url" 来要求用户输入有效的电子邮件地址和网址。如果用户输入的不符合格式,浏览器会在提交表单前显示一个警告。
placeholder 属性允许我们在输入字段中设置一个提示文本,当输入字段为空时显示,一旦开始输入,提示文本就会消失。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>带占位符的输入框示例</title>
<style>
body {
font-family: Arial, sans-serif; /* 设置字体 */
padding: 20px; /* 页面内边距 */
}
form {
max-width: 300px; /* 表单最大宽度 */
margin: 0 auto; /* 居中显示 */
padding: 20px; /* 表单内边距 */
border: 1px solid #ccc; /* 边框样式 */
border-radius: 5px; /* 边框圆角 */
background-color: #f9f9f9; /* 背景颜色 */
}
label {
display: block; /* 使标签独占一行 */
margin-bottom: 10px; /* 标签下方间距 */
font-weight: bold; /* 字体加粗 */
}
input[type="search"] {
width: calc(100% - 22px); /* 输入框宽度,减去内边距和边框的宽度 */
padding: 10px; /* 内边距 */
margin-bottom: 20px; /* 与下一个元素的间距 */
border: 1px solid #ccc; /* 边框样式 */
border-radius: 4px; /* 边框圆角 */
box-sizing: border-box; /* 盒子模型,使宽度包含边框和内边距 */
}
input[type="submit"] {
background-color: #007bff; /* 背景颜色 */
color: white; /* 字体颜色 */
padding: 10px 20px; /* 内边距 */
border: none; /* 无边框 */
border-radius: 4px; /* 边框圆角 */
cursor: pointer; /* 鼠标样式 */
font-size: 16px; /* 字体大小 */
}
input[type="submit"]:hover {
background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}
</style>
</head>
<body>
<form>
<label for="search">搜索:</label>
<input type="search" id="search" name="search" placeholder="请输入搜索关键字">
<input type="submit" value="搜索">
</form>
</body>
</html>
这里的 placeholder="请输入搜索关键字" 就是一个占位符,它会在用户输入之前显示在搜索框中。
autofocus 属性可以让页面加载时自动将焦点放到某个表单元素上。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自动聚焦的输入框示例</title>
</head>
<body>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" autofocus>
<input type="submit" value="提交">
</form>
</body>
</html>
在这个示例中,当页面加载完成后,姓名输入框将自动获得焦点。
HTML5 为表单验证提供了内置支持,通过简单的属性如 required、min、max 和 pattern 等,可以在不使用 JavaScript 的情况下进行基本的验证。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单验证示例</title>
<style>
body {
font-family: 'Arial', sans-serif;
padding: 20px;
background-color: #f4f4f4;
}
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
color: #333;
}
input[type="number"],
input[type="text"] {
width: 100%;
padding: 8px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* 包括边框和内边距在内的宽度 */
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
</style>
</head>
<body>
<form>
<label for="age">年龄:</label>
<input type="number" id="age" name="age" min="18" max="99" required>
<label for="zipcode">邮编:</label>
<input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="请输入5位数字的邮编" required>
<input type="submit" value="提交">
</form>
</body>
</html>
在这个示例中,年龄字段要求用户输入一个介于 18 到 99 之间的数字,而邮编字段要求用户输入一个符合特定模式(5位数字)的文本。
HTML5 的表单增强功能大大简化了表单处理和验证的工作,使得开发更加高效,同时也提高了用户体验。通过上述示例,我们可以看到,利用 HTML5 的新特性,可以创建功能强大且易于使用的表单。随着技术的不断进步,我们作为开发者应该不断学习和实践,以便更好地利用这些新工具来构建更好的网页。
*请认真填写需求信息,我们会在24小时内与您取得联系。