零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好
温馨提示:被【】包裹的是专有名词,详细介绍见下文的恋爱宝典,你可以在目录中快速找到它们,有任何问题/建议,欢迎随时微信我,我是朝阳 13908056224!
这是姐姐传授给我的恋爱秘籍 —— 投其所好
对她/他的喜好表示感兴趣,并帮其实现。
那么首先要做好的第一件事就是 —— 了解喜好
这次是双方的,所以,我给它取名叫 《喜好互通表》
最终效果
注意事项:此设计仅供前端学习使用,你不会真的傻到打印一张表让她填吧? (笑哭)
哇,看起来不错哦,下面来一起实现它吧!
先完成页面布局(水平居中 + 背景图),这些我们在第4天就学会啦!
零基础学前端系列教程 | 和前端谈恋爱的第004天——打扮漂亮
<div class="page">
</div>
主体页面的宽和高,设定为和背景图片的宽高比相同!
.page {margin: 0px auto;width: 512px;height: 910px;background-image: url(./images/背景_彩虹樱花.jpg);background-position: center top;background-repeat: no-repeat;
}
艺术字
前端本身并没有太强的艺术字设计能力(CSS顶尖高手除外),一个简单易行的小白套路为——使用在线艺术字生成器
https://www.qt86.com/
点背景选项时,按下图操作将背景设置为透明 (以便和背景图片融合) :
另一个艺术字生成器操作方式类似:
http://www.akuziti.com/
下面,将艺术字以图片的方式,作为标题添加到页面中
<div class="titleBox"><img height="70" src="./images/艺术字_喜好互通表_.png" />
</div>
.titleBox {text-align: center;padding: 20px;
}
表单 form
好,重头戏来啦!
还记得我曾告诉过你,网站有两大核心功能“传播信息”和 “收集信息”
了解喜好,就是在收集信息,这便需要用到 html 中的 form 系列标签来制作表单啦!
先用 fomr
标签绘制一个水平居中,左右留空的表单容器
<form>
这是一个表单容器,在这里添加具体的表单元素
</form>
form {margin: 0px auto;width: 96%;
}
接着,依次放入表单元素
单行输入框 input
<div class="formItem"><label class="formLabel">人生格言:</label><input /></div>
- ’
label
标签用于包裹表单中的文字,含义就是“标签” - ’
input'
标签为单行输入框,即只能输入一行文字的输入框,是个单标签。
为了表单元素的对齐和样式的统一,我们为每一个表单元素都添加样式
.formItem {margin-bottom: 18px;
}
为每个表单元素前方描述相关功能的标签添加样式:
.formLabel {width: 120px;text-align: right;float: left;
}
这里用到了【CSS 浮动布局】,详见下文的恋爱宝典。
多行输入框 textarea
<div class="formItem"><label class="formLabel">理想伴侣:</label><textarea rows="5"> </textarea>
</div>
- ’
textarea'
标签为多行输入框,即可以输入多行文字的输入框 - 属性
rows
可以指定默认的行数,若输入的内容超过默认行数,则会出现垂直滚动条
将鼠标移动到多行输入框的右下角箭头处,还能拖拽调整多行输入框的大小,赶紧试试吧!
单选 radio
<div class="formItem"><label class="formLabel">购物方式:</label><input type="radio" name="buyType" value="web" checked /><label>网购</label><input type="radio" name="buyType" value="shop" /><label>线下实体店</label>
</div>
- 通过改变
input
标签的type
属性可以渲染出各种各样的表单元素,当type="radio"
时,便是单选啦,即在多个选项中只能选择一项。 - 那么怎么知道哪几个选项是存在互斥关系(若已经选择A,则当选择B时,会清除对A的选择)呢?通过
name
属性确定,name
属性值相同的单选标签为一组,最终对应的【数据项】为buyType,彼此间为互斥关系! value
属性顾名思义,表示值,上文的 单行/多行 输入框的值都由用户输入的内容直接决定,但单选不同,如上方例子所示,当选择网购时,最终收集到的值为 web;当选择线下实体店时,最终收集到的值为 shop;
使用英文/数字来代替中文的值,主要是为了节约存储空间,当然,也方便了以后随时修改中文标签名,比如“网购”改成“网上购物”,只是换了个说法,本质意思没变。
多选/复选 checkbox
<div class="formItem"><label class="formLabel">兴趣爱好:</label><input type="checkbox" name="hobbies" value="travel" /><label>旅游</label><input type="checkbox" name="hobbies" value="food" /><label>美食</label><input type="checkbox" name="hobbies" value="game" /><label>游戏</label><input type="checkbox" name="hobbies" value="sport" /><label>运动</label><input type="checkbox" name="hobbies" value="read" /><label>读书</label><input type="checkbox" name="hobbies" value="makingFriends" /><label>交友</label>
</div>
- 当
type="checkbox"
时,便是多选啦,即可以同时选择任意数量的选项。 name
属性值相同的多选标签为一组,最终对应的【数据项】为name
的属性值 hobbies,最终的值为被选中选项的value
属性值构成的【数组】
下拉选择 select
<div class="formItem"><label class="formLabel">定居城市:</label><select name="city"><option value="chengdu">成都</option><option value="wuhan">武汉</option><option value="lanzhou">兰州</option></select>
</div>
select
标签用于渲染下拉选择器,最终对应的【数据项】为name
的属性值 cityoption
标签用于渲染下拉选择器的具体选项,页面显示的中文写在option
标签内部,最终的值为被选中选项的value
属性值。
颜色输入框 color
<div class="formItem"><label class="formLabel">钟情颜色:</label><input type="color" />
</div>
- 当
type="color"
时,百变的input
标签便会渲染成一个颜色输入框,最终会得到一个颜色值。
上传文件 file
<div class="formItem"><label class="formLabel">手机铃声:</label><input type="file" />
</div>
- 当
type="file"
时,input
标签渲染成一个文件选择按钮,点击该按钮,便能从当前电脑中选择一个文件进行上传。
数字输入框 number
<div class="formItem"><label class="formLabel">幸运数字:</label><input type="number" />
</div>
- 当
type="number"
时,input
标签渲染为数字输入框(只能输入数字,不能输入中英文等其他字符)。输入状态时,末尾会出现上下箭头,可以便捷实现数字的加减1。
表单组 fieldset
<fieldset><legend align="center">温馨提示</legend><div class="center"><p>输入 520 有惊喜哦!</p><div class="formItem"><label>爱情密码:</label><input type="password" /><button class="myBtn" onclick="alert('我也爱你!')">查看惊喜</button></div></div><div></div>
</fieldset>
fieldset
标签用于给表单元素分组,表现为如图所示的框线。所有同一组的表单元素,都写在fieldset
标签里面。legend
标签用于给表单组添加上分组的名称,align
属性控制分组名称的位置,另外两个align
属性值为 left 和 right ,快自行试试效果吧!
根据页面设计的需求,对 fieldset 和 legend 也添加了样式,主要是加粗和内部元素水平居中
fieldset {border: 2px solid black;
}
legend {font-weight: bold;
}
.center {text-align: center;
}
密码输入框 password
<div class="formItem"><label>爱情密码:</label><input type="password" />
</div>
- 当
type="password"
时,input
标签渲染为密码输入框(输入的字符都会显示为小黑点,以便在输入时,防止被偷看)
按钮 button
<button class="myBtn" onclick="alert('我也爱你!')">查看惊喜</button>
button
标签用于渲染按钮,表示该元素可以被点击执行对应的操作,比如保存按钮、取消按钮、提交按钮等,按钮上的文字写在button
标签里面。onclick
表示点击事件,alert('我也爱你!')
是一段 【JavaScript】代码,当点击按钮时,便会执行这段代码,效果为弹窗显示如下信息:
- 按钮的默认样式不太好看,所以通常都需要重新定义样式
.myBtn {background: red;color: yellow;font-weight: bold;border: 1px solid red;
}
日期输入框 date
<div class="infoBox"><label>填表日期:</label><input type="date" />
</div>
- 当
type="date"
时,input
标签渲染为日期输入框,用于录入标准的日期。 - 可以通过点击输入框末尾的日历【图标】,来选择目标日期,也可以直接用键盘输入
落款通常在右下角,所以给它添加样式
.infoBox {margin-top: 20px;text-align: right;
}
清除默认样式
每个html标签,在浏览器中都有各自的默认样式,比如下图中的body标签,默认有 8px 的外边距。
当这些默认样式和我们的设计不同时,就需要重新设置它们 !
/* 清除默认的body样式 */
body {margin: 0px;
}
完工!
完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>和前端谈恋爱的第006天——了解喜好</title></head><body><div class="page"><div class="titleBox"><img height="70" src="../images/艺术字_喜好互通表_.png" /></div><form><div class="formItem"><label class="formLabel">人生格言:</label><input /></div><div class="formItem"><label class="formLabel">理想伴侣:</label><textarea rows="5"> </textarea></div><div class="formItem"><label class="formLabel">购物方式:</label><input type="radio" name="buyType" value="web" checked /><label>网购</label><input type="radio" name="buyType" value="shop" /><label>线下实体店</label></div><div class="formItem"><label class="formLabel">兴趣爱好:</label><input type="checkbox" name="hobbies" value="travel" /><label>旅游</label><input type="checkbox" name="hobbies" value="food" /><label>美食</label><input type="checkbox" name="hobbies" value="game" /><label>游戏</label><input type="checkbox" name="hobbies" value="sport" /><label>运动</label><input type="checkbox" name="hobbies" value="read" /><label>读书</label><input type="checkbox" name="hobbies" value="makingFriends" /><label>交友</label></div><div class="formItem"><label class="formLabel">定居城市:</label><select name="city"><option value="chengdu">成都</option><option value="wuhan">武汉</option><option value="lanzhou">兰州</option></select></div><div class="formItem"><label class="formLabel">钟情颜色:</label><input type="color" /></div><div class="formItem"><label class="formLabel">手机铃声:</label><input type="file" /></div><div class="formItem"><label class="formLabel">幸运数字:</label><input type="number" /></div><fieldset><legend align="center">温馨提示</legend><div class="center"><p>输入 520 有惊喜哦!</p><div class="formItem"><label>爱情密码:</label><input type="password" /><button class="myBtn" onclick="alert('我也爱你!')">查看惊喜</button></div></div></fieldset><div class="infoBox"><label>填表日期:</label><input type="date" /></div></form></div><style>/* 页面 */.page {margin: 0px auto;width: 512px;height: 910px;background-image: url(../images/背景_彩虹樱花.jpg);background-position: center top;background-repeat: no-repeat;}/* 表单 */form {margin: 0px auto;width: 96%;}.formItem {margin-bottom: 18px;}.formLabel {width: 120px;text-align: right;float: left;}/* 标题 */.titleBox {text-align: center;padding: 20px;}/* 表单组-温馨提示 */fieldset {border: 2px solid black;}legend {font-weight: bold;}.center {text-align: center;}/* 按钮 */.myBtn {background: red;color: yellow;font-weight: bold;border: 1px solid red;}/* 落款 */.infoBox {margin-top: 20px;text-align: right;}/* 清除默认的body样式 */body {margin: 0px;}</style></body>
</html>
恋爱宝典
CSS 浮动布局
浮动布局是 CSS 的一种布局方式,主要用于实现图文混排时文字环绕图片的效果。
使用方法:给需要浮动的元素(被文字环绕的元素)添加样式float:left
或 float:right
本案例中,则是给所有表单元素的标签添加了float:left
,来确保标签在左侧浮动,同时,浮动后的元素会有以下变化:
label
标签原本的display
样式值为inline
(内联盒子:无法设置宽度和水平方向的左中右对齐),浮动后display样式值会变为block
(块级盒子:可以设置宽度和水平方向的左中右对齐)- 位置尽量靠上、左浮动则靠左,右浮动则靠右
数据项
在表单中,数据项表示通过此表单可以采集到的某一项数据。
比如本案例会获取对方的“幸运数字”、“人生格言”等,那么这个“幸运数字”就是一个数据项。
案例中将决定表单数据项的 name
属性值都设置为英文,主要是为了方便存储。(表单采集来的数据,若想长期保存,通常都会使用数据库,而数据库的设计都是英文的)
数组
多个数据,按照一定的顺序排列,这些数据作为一个整体被称为“数组”。
如本案例中可以多选的兴趣爱好,当我们如下勾选时
最终获取到的对方的兴趣爱好就是:旅游、读书、交友
用 【JavaScript】语言来描述就是:
["旅游","读书","交友"]
用一对中括号[]
表示数组,每个数据之间用逗号 ,
隔开,若是中文则需要加上英文输入法下的引号""
,是不是一目了然,挺好理解的呢 ?
JavaScript
JavaScript(简称“JS”)也是一种编程语言,排行前端开发三剑客(html,css,js)的老三,主要负责页面的逻辑(即实现页面的动态交互 / 特定功能)。
比如本案例中,点击查看惊喜按钮后,弹出“我也爱你!”的弹窗。
再复习一下:
- html 构建内容(房子)
- css 调整样式(装修)
- js 实现功能(家电)
整个前端开发都是建立在这三大语言基础上的,搞定它们,你也就学会前端啦!
图标 i
图标,是具有指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。
如本案例中的日历图标
简单明了,一眼就知道它是一个日历。
在 html 中,使用 i
标签来渲染图标,如:
<i style="font-style:normal">☎</i>
最终在页面上会渲染成一个电话的图标
这里的样式
font-style:normal
是必须的,否则整个图标会是倾斜的状态,因为i
标签的默认样式是斜体。
样式
font-style
用于描述文本风格,即是否倾斜,当值为normal
时不倾斜,当值为italic
时倾斜。☎
是特殊字符(如电话图标)在html 中对应的代码,见下表
若想获取其他特殊符号对应的代码,可以在 网页特殊符号(HTML字符实体)大全 中查找。
但你不觉得这样去实现图标非常麻烦,也很受限制吗?
怎样更便捷地获取到无穷无尽的图标代码呢?
下面这两个第三方图标库,可以帮到你!
- 阿里图标
- Font Awesome
具体使用方法,详见网站中的配套教程,若还是搞不定,加我微信(13908056224)手把手教你哦!
说不完的情话
- 于千万人之中遇见你所要遇见的人,于千万年之中,时间的无涯的荒野里,没有早一步,也没有晚一步,刚巧赶上了,那也没有别的话可说,唯有轻轻地问一声:“噢,你也在这里吗?”——张爱玲
- 是微风、是晚霞、是心跳不止、是无可代替!
- 你看,这么多人,这么大的世界。我遇到了你,你也遇到了我,真好!
- 我拼命地想要了解你,只是因为我想一辈子和你在一起! —— 朝阳
零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好相关推荐
- 零基础学Arcgis系列教程
教程地址:点击查看 零基础学Arcgis(七)|空间数据采集与管理(4)数据检查 (一)创建地理数据库拓扑 1.创建地理数- 零基础学Arcgis(六)|空间数据采集与管理(3)数据编辑 (一)使用要 ...
- 零基础学前端系列教程 | 和前端谈恋爱的第003天——电影海报
温馨提示:被[]包裹的是专有名词,详细介绍见下文的恋爱宝典,你可以在目录中快速找到它们,有任何问题/建议,欢迎随时微信我,我是朝阳 13908056224! 约会邀请函已经做好了,但迟迟没有发出去 零 ...
- 免费视频教程!零基础学Python系列(7) - 数据类型之bytes(上)
本节我们开始讲python数据类型之bytes类型,我们分为上下两个章节. 你可以直接到这个页面观看本节视频:免费视频教程!零基础学Python系列(7) - 数据类型之bytes(上) 以下为对应的 ...
- python零基础入门教程视频下载-零基础学Python入门教程,视频资源下载
课程名称 零基础学Python入门教程,视频资源下载 课程目录 第一章 :Python介绍和安装 01.Python语言的特点 02.Python的发展历史与版本 03.Python的安装 第二章 : ...
- 中秋佳节速成C语言_老九零基础学编程系列之C语言【章节1-章节5】
前言 现在是北京时间2019.09.13 11:16 今天是月饼节啊!祝大家月饼节快乐~ 然而~作为一个本科来自生科院的工科女 为了当C语言助教 只能? 值此佳节,凿壁偷光/勤学苦练/悬梁刺骨/孙康映 ...
- 辛巴学院-Unity-剑英陪你零基础学c#系列(四)函数和封装
辛巴学院:正大光明的不务正业. 国庆长假结束了,我的心情是这样的: 你总是起不早,起不早 独自一个人沉睡到天亮 你无怨无悔的梦着那副本 我知道你根本就不想上班 你总是起不早,起不早 放假总是短暂,上班 ...
- 零基础学python-Python入门教程完整版(懂中文就能学会)
提取码:sjfo 目录大纲: 本套教程15天 学前环境搭建 1-3 天内容为Linux基础命令 4-13 天内容为Python基础教程 14-15 天内容为 飞机大战项目演练 视频概括: 第一阶段(1 ...
- 辛巴学院-Unity-剑英陪你零基础学c#系列(二)顺序
这不是草稿 辛巴学院:正大光明的不务正业. 上一次的教程写出来之后,反馈还是挺多的,有很多都做了修改,也有一些让人崩溃,不得不说上几句. 有些人有些很奇怪的地方,你写篇东西,被看了以后不说他感觉怎么样 ...
- 辛巴学院-Unity-剑英陪你零基础学c#系列(一)Hello World
这不是草稿 辛巴学院:正大光明的不务正业. 辛巴学院:攻城狮与荣耀石. 剑英陪你系列又来啦.剑英是一个有大爱的人,热爱每一个程序员,尤其是年轻漂亮的女程序. 最近组织朋友们玩了一次即兴团体诗创作,无论 ...
最新文章
- Unable to merge dex
- 转!mysql 查询 distinct多个字段 注意!!
- boost::geometry模块Linestring多边形叠加示例
- UIKit 框架之UIActionSheet
- 批量kill掉包含某个nginx的进程
- 博客转移至 https://www.babac.cn/
- Linux命令 — 设置或查看网络配置命令ifconfig
- 你需要了解操作系统发展历程
- axios请求拦截器错误_Axios使用拦截器全局处理请求重试
- html设置按钮样式变为椭圆,css border-radius圆形变为椭圆形,位置:绝对
- 使用Quartz来实现动态定时任务
- .net下samus Mongo-Cshap 引擎中的find原生查询
- TagSupport标签的应用
- Unity中使用Curvy快速生成路径,并使物体沿着路线运动
- Mac 好用的 Android 模拟器整理(玩游戏、装应用、支持咸鱼、拼多多...)
- 17.半拗(小拗)可救可不救
- focal loss详解
- Linux下core文件介绍与使用方法
- 微信小程序把图片下载到本地相册(附源码)
- MVT模型<->前后端不分离前后端分离模板引擎