程序地带

我的前端自学之路2020/12/16


一. 列表标签 无序列表 ul>li 有序列表 ol>li 自定义列表 ol>dt+dd


二. 表单 input、label、textarea 一个完整的表单通常由三部分组成,表单控件(元素)、提示信息和表单域form input:
<input type="text" value="" name="" />

name属性:提交后台时,用于区分表单 value 属性:默认文本值,一般用placeholder type属性: text 文本 password 密码 radio 单选 (同个表单域多个单选框的name属性值相同时,用户只能选择一个) checkbox 复选(同个表单域的复选框的name属性值相同) button 普通按钮(也可以直接用button标签) submit 提交按钮 reset 重置按钮(submit和reset按钮必须在表单域中才有效果) image 图像形式的提交按钮 file 文件域(可选择文件上传) checked属性: checked 默认被选中(单选、复选框) maxlength属性: N 表单可输入的最大字符长度


label标签,和input表单搭配使用,目的仅用于提高用户体验 label标签直接包裹input表单,当用户点击标签里的文字时,会获得焦点
<label> 用户名 <input type="text" name="username" placeholder="请输入用户名"/></label>

或者使用for属性绑定input表单


<label for="username">请输入用户名</label>
<input type="text" id="username" />

文本域 textarea 防止拖拽: resize: none;


三.下拉列表 select selected="selected"设置默认选中项
地区:
<select>
<option selected="selected">中国</option>
<option>海外</option>
</select>

select控件在不同浏览器中显示的样式是不尽相同的,实际开发中常用无序列表来模拟下拉菜单


四.表单域form


<form action="url" name="表单名" method="post">
</form>

属性: action: 用于指定接收并处理提交数据的主机程序地址 method: 提交方式,表单一般为post name: 表单名,用来区分同个页面多个表单


作业:table表格搭建世纪佳缘注册页


CSS部分

作用:设置HTML页面的版面布局和外观样式 css写法:行内、内嵌、外链 一.css选择器 基础选择器: 1.标签选择器(元素选择器) 2.类选择器 3.id选择器 4.通配符选择器


标签常用类名:(标签允许多类名,类名之间用空格隔开) 头部 header(h5有新增标签) 内容 content 尾 footer(新增标签) 导航 nav (新增标签) 侧边栏 sidebar (aside标签) 栏目 column 版心 wrapper 水平方位 left、center、right 登陆条 loginbar 标志 logo 广告 banner 页面主体 main 热点 hot 新闻 news 下载 download 子导航 subnav 菜单 menu 子菜单 submenu 搜索 search 友情连接 friendlink 版权 copyright 滚动条 scroll 标签页 tab 文章列表 list 提示信息 mes 小技巧 tips 标题 title


二.字体 font 字体大小: font-size 字体样式: font-family 字体粗细: font- weight :normal 正常字体 相当于number 400(常用来让粗体恢复正常) -----------------------------------bold 粗体 相当于number 700 -----------------------------------bolder 特粗体 -----------------------------------lighter 细体 -----------------------------------100/200/300…900(不跟单位) 字体风格:font-style:normal 正常(常用来让斜体恢复正常) ------------------------------italic 斜体(常用em或i标签来实现斜体效果) ------------------------------oblique 倾斜的字体 字体综合样式: font :font-style    font-weight    font-size/line-height    font-family 注意:属性的顺序是固定的,其中style和weight可以省略


文本颜色: color: 预定义颜色/RGB/16进制
行高: line-height(可以使文字垂直居中)行高的测量方式:上一行的文字基线到下一行文字基线的高度就是行高
文本水平对齐方式: text-align: left/center/right
首行缩进: text-indent:值:正整数 ,单位:em(1em等于一个汉字的宽度)
文本装饰(去除链接标签默认的下划线): text-decoration:none/underline(底部下划线)/overline(顶部下划线)/line-through(删除线)

三. CSS复合选择器 1.后代选择器:父元素  子元素{属性:属性值;属性:属性值} 后代选择器选择指定的父元素下所有指定子元素 2.子元素选择器:父元素>子元素{属性:属性值;属性:属性值} 子元素选择器选择指定父元素的第一层指定子元素,指定子元素中的同名(同类)子元素则不被选中 3.交集选择器:并且,即,又的关系,如:div.demo{} 指带有demo类的div标签 4.并集选择器:用于拥有同样样式的元素集体声明,元素之间用逗号隔开:p,div,a,ul{} 5.伪类选择器:链接伪类选择器:重点,鼠标经过 a:hover 6.结构伪类选择器:重点,元素:nth-child(n) {} 数字n表示要选则第几个 除此之外还有第一个:元素:first-child {},最后一个:元素:last-child {},倒数第n个:元素:nth-last-child(n) {}


四.标签的显示模式 1.块级元素(block),有宽高,自占一行,常见的块元素有h1~h6,p,div,ul,ol,li等等 2.行内元素(inline),无宽高,多个行内元素一行显示,大小由内容撑开,常见的行内元素有a,strong,b,em,i,del,ins,s,u,span等,行内元素只能放其他行内元素或文本 3.行内块元素(inline-block),有宽高,多个元素一行显示,如img, input ,td 元素类型的相互转换:display:block/inline/inline-block


五.背景background 背景颜色:background-color:red;默认为trancparent,透明 背景图片:background-image:url(路径); 背景图片是否平铺:background-repeat:no-repeat;(基本都不平铺) 背景缩放:background-size:百分比/具体数值/预定义 cover(等比例铺满),contain(图片完整的前提下拉伸); 背景位置:background-position:方位名词/具体坐标


第二天结束,时长7小时


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gh100330/article/details/111246107

随机推荐

jQuery - 不同版本的差异對比

jQuery一共分了1.x、2.x、3.x这三个大版本。jQuery的版本都是不向后兼容的!jQuery的版本都是不向后兼容的!jQuery的版本都是不向后兼容的!重要的事情说三遍哈一、1.x、2.x...

鬼才 阅读(751)

lodash函数库 -- drop函数

drop函数drop函数功能:按顺序删除数组元素,当n为正数时,从左删除n个元素;当n为负数时,从右删除n个元素.;当n为0时,创建一个副本.drop返回值:返回一个新的数组./***创建一个切片数组...

破壳而出的蝌蚪 阅读(174)

vue指令

vue指令一个正在努力爱好运动的前端座右铭:越努力越幸运,越运动越健康,热爱编程,热爱运动。文章目录vue指令主要讲解指令一、v-bind&#x...

故心v 阅读(160)

nvm切换node的版本

nvm切换node的版本

有些奇葩的情况下,就是一个项目依赖的node版本和你本机的node不相同,这个时候,你有几种做法,自己亲测可行!就把找的博客整理一下,便于以后查看1.把你本地的node卸载,然后重新下载一个node2...

java小新人 阅读(662)

css display:flex 属性

一:display:flex布局display:flex是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得...

林恒 阅读(986)