CSS(十六)——美化表单实操
CSS(十六)——美化表单实操
前言
本篇笔记中并不会记录一个真实的案例(太懒了,就想把核心记录下来),仅将一些基本的页面美化的操作记录下来,新知识点较少,依旧会先补充知识点说明后再进行相应的说明。
另:我们在做前端页面的时候都会提前先将浏览器页面的样式重置,这时候需要一个重置样式表,链接如下:
重置样式表
https://download.csdn.net/download/qq_40749255/21567692?spm=1001.2014.3001.5503
文章目录
- CSS(十六)——美化表单实操
- 前言
- 概述
- 补充知识点
- placeholder
- disabled
- 表单美化注意事项
- 表单的分区逻辑
- 表单的实现逻辑
- 总结
概述
表单美化一定要记住以下几点:
- 美化是由静态页面与动态效果共同完成的;
- 一般来说,下拉列表、单选、复选等可替换元素都是重新做出来的(即,使用元素和样式表来设计出同样的功能);
- 在设计表单样式之前一定要将表单的默认样式重置;
- 表单在设计之初就要进行细致的划分,划分的越细致越有助于我们做表单美化。
由上述四条可以看出,表单美化的步骤就是:重置,设计,美化。
补充知识点
placeholder
伪元素选择器,表示表单元素(主要就是input)元素中的placeholder属性,该属性的含义是文本框等该元素中提供的提示文字,在用户输入数据后就会被覆盖。
input[type="text"]::placeholder{color:#ccc;
}
上述CSS样式的含义是选择页面中input元素中type为text的元素,并设置其placeholder属性,将其提示的文字颜色改为#ccc。
disabled
伪类选择器,(其中,元素中出现disabled表示一个布尔属性,该布尔属性的含义是表示当前元素不可用)我们可以使用该伪类选择器设置元素的不可用样式。
<style>button:disabled{background-color: #f5f5f5;color:rgba(0,0,0,.25);border: 1px solid #d9d9d9;box-sizing: border-box;/*该鼠标样式显示未禁用符号*/cursor:not-allowed;}
</style><button disabled><a href="#">点击确认</a>
</button>
表单美化注意事项
表单的分区逻辑
**曾经学习前端的时候,一个表单都是用一个form元素来制作,比较规范化的就是使用table元素来使其看起来更加工整。**对于具体的前端逻辑并没有进行说明。下面详细说明:
- 首先在设计表单的时候,要先根据UI图中提供的页面将其功能划分。例如:登录界面的账号、密码(或验证码)等输入数据的位置都是input元素;登录(获取验证码)等按钮都是button元素。(或者是由其他元素或样式制作的——杠精别杠,举个例子)。
- 对于一些页面中样式一致的(例如边框,样色等)进行统一设置,如果有不同的地方后期增加样式。
- 在表单中可能会出现一些样式需要用到浮动和定位,要注意高度坍塌和定位的相关问题。
- 如果有需要自定义样式的可替换元素,记得使用关联(随便哪种关联方式都可以),如果需要隐藏的元素设置display属性。
表单的实现逻辑
- 表单从头开始做起,依次向下做;
- 先设置统一样式,然后再修改不同的地方;
- 横向排列一般使用浮动,纵向排列一般使用定位;(并不绝对,完成同一个样式的方法不止一个)
- 有些位置需要伪元素和伪类选择器对其进行修改样式(在之前的笔记中就有过讲解,可以翻回去复习)
博主跟着视频学习做的模仿小破站的注册页面中的静态效果,具体样式如下:
- 本次实现包括了文本框输入,按钮的样式等;
- 同意协议那里的复选框偷懒没使用图片来完美复原小破站的样式,采用了简单的自定义样式(上一篇笔记讲过)。
- 有些位置细致的修改边框样式,位置等,需要自己把握(水不深,自己能把握得住)
- 关于最上方注册二字需要说明一下。它是由连个样式覆盖形成的,在这里说明一下我学习到的方式(方式不止一种,仅仅觉得这种方便)
h2{text-align: center;font-size: 38px;border-bottom: 1px solid #ccc;height: 18px;margin-bottom: 30px;
}
h2>span{background-color: white;padding:0 20px;
}
该样式使用了两个元素来嵌套包裹文字,具体元素如下:
<h2><span>注册</span>
</h2>
解释如下:
- 首先设置设置h2元素的位置、字体大小以及边框(注意代码中设置的是下边框);
- 然后将h2的外边距设置为30px(同样设置的是下外边距);
- 复习知识点:元素的数据溢出了父元素的空间大小,默认不会将溢出部分隐藏;
- 然后把文字的背景颜色设置为页面背景色。
以上的方式就可以实现注册的样式,也可以做左右各一条线,中间一个字(具体实现可以参考网页导航栏中logo的嵌入方式)。
总结
本篇笔记仅仅提供了一个思路,各位可以自行实践一下,希望大家一起加油。
CSS(十六)——美化表单实操相关推荐
- 纯html的form表单实操练习
练习一 先看一下最终效果 代码如下 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
- JavaScript学习(六十八)—表单校验案例
JavaScript学习(六十八)-表单校验案例 学习内容 (一).如何获取页面的元素-利用id获取 格式:var 变量名称 =document.getElementById('要获取的元素的id的值 ...
- css复选框表单,用CSS来美化表单——复选按钮篇
原标题:用CSS来美化表单--复选按钮篇 今天,我们来学习如何利用CSS美化checkbox复选框按钮,过程非常简单,本文主要是提供美化复选框按钮的方法,至于美化到何种程度还需大家自己去举一反三,发挥 ...
- 第十六章、单表查询、多表查询
目录 第十六章.单表查询.多表查询 单表查询 去重:distinct 数据准备 常用函数 条件:where 分组与筛选:group by | having where与having 聚合函数 分组查询 ...
- Laravel教程 六:表单 Forms
Laravel教程 六:表单 Forms 此文章为原创文章,未经同意,禁止转载. Form laravel 5.2 之后请使用 laravelcollective/html 替换 illuminate ...
- html表单复选框样式,美化表单——自定义checkbox和radio样式
如果你对本站比较观注的话,应该很清楚,前面就有这方面的介绍.因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的,所以最近花全力在学习这方面的制作.在本站有关于这样制作有好几个教程了,比如说 ...
- struts2官方 中文教程 系列六:表单验证
先贴个本帖的地址,以免被爬:struts2教程 官方系列六:表单验证 即 http://www.cnblogs.com/linghaoxinpian/p/6906720.html 下载本章节代码 介 ...
- 任务二十九:表单(一)单个表单项的检验
任务二十九:表单(一)单个表单项的检验 面向人群: 初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度 ...
- 【前端学习之HTMLCSS进阶篇】-- HTML第四篇 -- 美化表单
[前端学习之HTML&CSS进阶篇]-- HTML第四篇 – 美化表单 文章目录 [前端学习之HTML&CSS进阶篇]-- HTML第四篇 -- 美化表单 前言 一.新的伪类 1. f ...
- css搜索的文本框,一个很不错的CSS改写的大表单文本框和搜索按钮组
<一个很不错的CSS改写的大表单文本框和搜索按钮组>要点: 本文介绍了一个很不错的CSS改写的大表单文本框和搜索按钮组,希望对您有用.如果有疑问,可以联系我们. 先看效果图: 开始爬取 C ...
最新文章
- 通信系统之信道(三)
- javascript中动态添加事件
- Redis 数据结构与内存管理策略(上)
- Pytorch(4)-模型保存-载入-eval()
- oracle安装前准备,Oracle 安装前准备
- 视频rtmp协议简介
- Java反射机制总结(实例分析)(一)
- 操作Visual Studio 2010中的SQL Server数据库比较工具
- 游戏内存读取工具_不因内存弃旧爱,东芝Canvio Gaming移动硬盘评测
- 理解SSD核心技术FTL
- html 指针图表,HTML5 canvas 指针时钟
- 最简单最快速csv超大文件入库并统计Top5
- Microsoft Excel 教程:如何在 Excel 中创建新工作簿、插入或删除工作表?
- 计算机房常配用的,计算机房常配用的是( )灭火器。
- librosa安装常见错误
- 国产设计软件都有哪些,国产设计工具推荐
- matlab命令(应该很全了,欢迎补充!)
- Spring Boot整合Freemarker
- 保险Insurance
- 一键部署SpringBoot到远程Docker容器