首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ;
在上一篇博客中 , 实现了 搜索栏 , 在本篇博客开始实现 搜索栏 下方的 Banner 栏 ;
在调试模式下 , 该父容器的尺寸为 390 x 44 像素 , 该父容器的高度是 44 像素 ;
将布局中的 三个 链接图片 , 放置在 单独的 标签中 , 每个 标签中放置一个 链接标签 , 在 链接标签中包裹一个 图片 ;02【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )该导航栏的宽度自动充满整个屏幕 , 宽度为 100% , 高度也不需要设置 , 设置自适应即可 ;04Html5+CSS3命名规范（前端web开发命名规范，符合SEO规范）任何代码编程都有各自特点的常用命名规范，div+css页面设计也不例外。遵守常用的css命名规范有利于代码的升级和扩展，也有利于让别人读懂你的css代码，让你的页面显得清晰有条理。01【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )使用 标签作为父盒子 , 其中容纳三个 链接 标签 , 每个链接标签中包含一个 标签 ;04【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )在上一篇博客中实现的搜索栏 , 使用 固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ;02前端设计开发常用命名规则“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为:“wrapper“, “wrap“, “page“.05使用标签承载内容结构 head title meta body 文本 标题和段落 粗体和斜体 上标和下标 空白（白色空间折叠） 折行和水平标尺 语义化标记 加粗和强调 引用 缩写词和首字母缩写词 引文 所有者联系信息 内容的修改 列表（list） 有序列表（ordered list） 无序列表（unordered list） 定义列表（definition list） 链接（anchor） 页面链接 锚链接 功能链接 图像（image） 图像存储位置 图像及其宽高 选择正确的图像格式 JPEG GIF PNG 矢量图 fi02【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )该 Banner 条宽度填充整个浏览器 , 不需要给出宽度 , 只需要设置高度即可 ;022016.04第4周 群问题分享HTML+CSS img图片下面产生3px间隙问题 2016.4.25~2016.4.29 核心概念 行元素垂直方向的对齐方式和行块元素转换 参考答案 方法一：设置图片的垂直对齐方式。设置该元素vertical-align:top/bottom/text-top/text-bottom/middle 只要vertical-align不取baseline，这个空隙就消失了。 方法二：设置父级元素font-size: 0;可以解决这个问题。 方法三：将图片转换为块级元素。转换img行内元素的特性为块元素，设置d014JavaScript/CSS制作一个简易表格搜索功能提示: 如果你要搜索第二列，可以将 tr[i].getElementsByTagName('td')[0] 中的 [0] 变为 [1]。02CSS英文命名规范整理及参考我们在对网页进行布局时，比较困惑和纠结的事就是CSS命名，特别是新手不知道什么地方该如何命名，怎样命名才是好的方法。 规范使用CSS命名规则，可以改善优化功效，特别是在团队合作的时候可以有效提高开发效率。 一、命名规则说明 所有的命名最好都小写 属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5" 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离，代码中不涉及任何的表现元03vuejs初体验-Chrome插件开发实录背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生，它把一些常见的动画效果都封装起来了，非常实用。但是有时候在开发中，仅仅只是需要某一两个动画效果，把整个CSS文件都引入，这样不是太好。 需求就出现了，能不能有一个工具可以直接预览Animate.css对应的动画效果，并且生成对应的动画代码呢？ 作为一个UI开发，平时跟Chrome浏览器打交道最多，于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码，这样在实际开发中碰到一些需要02【CSS】课程网站头部制作 ⑤ ( 用户栏测量 | 用户栏代码编写 | 代码示例 )用户与左侧搜索栏 , 间隔 30 像素 , 这里设置 用户栏 左外边距 30 像素 ;03第152天：表单短标题的两端对齐在做前端界面的时候，比如一些文字的列表或者一些表单的标题，经常是2个字，3个字，4个字的类型。02结合LeanCloud做一个查询术语的单页应用计算机领域中存在大量的术语，如果恰好是自己未接触的领域，看到一连串不懂的英文缩写，一定是一件令人困惑的事。虽然有百度和谷歌等搜索引擎，如果我们能自建一个更专业的数据库，似乎对我们有很大帮助（可玩性很高）。03【CSS】课程网站头部制作 ③ ( 搜索栏表单测量 | 搜索栏表单代码编写 | 代码示例 )导航栏文本 有 10 像素内边距 , 20 像素外边距 , 文本输入框 表单 , 距离 导航栏外边距有 65 像素 ;03HTML-CSS基础学习HTML代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。 CSS代表了样式，样式是网页的外观，从审美的角度，美化页面。 JavaScript代表行为，行为是网页的交互逻辑，从交互的角度，提升用户体验。03sublimeText3之码上有爱相信对于很多写代码的小伙伴来说,对于开发编辑器都不会陌生,什么editplus,dw,webstorm,hubuilder,vscode,esciplse,vim等萝卜青菜都各有所爱,每个编辑器都有它的独特之处,本质上并无优劣之分,然而工欲善其事必先利其器,好的工具就是成功的一半,最近一直都在想着,怎么样提高自己的效率,如果总是复性的劳动一件事情,时间久了,觉得是毫无意义的,让自己远离刀耕火种的时代,提高效率,同时也是为了减少手残腰椎痛(说得好像不是搬砖的,可是我依旧是个搬砖的),那么今天就我平时的使用跟大家分享一款自己喜欢编辑sublinmeText3,本文适合小白,有志于解脱鼠标手崇尚键盘侠的键客,对于它的使用和学习,我也一直在摸索中,初学者学习笔记使用心得,希望对正在路上的你有些用…03html+css网页开发 之 头部导航条（logo、导航栏、搜索框）发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140268.html原文链接：https://javaforall.cn05sublime text3优秀插件汇总（含安装教程）1. 自主安装sublime text3 2. ubuntu下使用下面命令安装01【FE前端学习】第二阶段任务-基础1.需要熟练掌握HTML标签以及CSS各个常用属性。 2.掌握CSS3 常用属性 3.掌握jquery的基本用法，对于JS基本逻辑语句需要熟练掌握01【云端架构】前端必备“层叠样式表”精选大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD013面试题必备-web页面基础html标签是由<>包围的关键词 html标签是成对出现的 有部分标签是没有结束标签的，叫单标签， 页面中所有的内容，都是要放在HTML标签中的01【分享干货】做网页设计的常用css代码大全color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白 三、CSS符号属性 list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/ list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/ 四、CSS背景样式 background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置 background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/ 五、CSS连接属性 a /*所有超链接*/01css样式大全字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体 {font-variant: small-c04【CSS】课程网站头部制作 ④ ( 搜索栏按钮测量 | 搜索栏按钮代码编写 | 代码示例 )文章目录 一、搜索栏按钮测量 1、按钮测量 2、按钮切图 二、搜索栏按钮代码编写 1、HTML 标签结构 2、CSS 样式 3、展示效果 一、搜索栏按钮测量 ---- 1、按钮测量 右侧的按钮大小 , 50 x 40 像素 ; 📷 按钮颜色值 #00a4ff ; 📷 2、按钮切图 使用 切片工具 , 将 按钮图片 进行选择 , 然后进行切图 ; 📷 选择 " 菜单栏 / 文件 / 导出 / 存储为 Web 所用格式 " , 📷 选择导出的格式 , 以及 📷 切好的图片如下 : 📷 二、搜索栏按钮07从零开始学 Web 之 CSS（四）CSS初始化、定位、overflow、标签规范CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。03如何学习 CSS很多人想让我给他们推荐有关CSS部分的教程，或者问我如何学习CSS。 我也看到很多人对CSS的部分内容感到困惑，一部分原因是由于对语言的过时认识。 鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机。 即使CSS只是你所做工作的一小部分（因为你使用其他技术栈），CSS是你最终希望在屏幕上显示的结果，所以值得合理去学习。01前端成神之路-学成在线欲先善其事，必先利其器。 先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。0318.2.14日报1，找到上次的提示null脚本错误原因，是protocol json参数没没对上。主要是03常用的CSS属性大全1. 动画属性 属性 描述 CSS @keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。 3 animation 复合属性。检索或设置对象所应用的动画特效。 3 animation-name 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 3 animation-duration 检索或设置对象动画的持续时间 3 animation-timing-func03【移动端网页布局】Flex 弹性布局案例 ① ( 案例框架搭建 | html 标签结构框架 | css 初始样式 )在 html 中设置 meta 视口标签 , 设置宽度等于设备宽度 , 初始比例为 1.0 , 用户不可缩放 , 最大缩放比例和最小缩放比例都设置为 1.0 ;03html学习笔记（一）单标签 <! Doctype html> 双标签 <html> </html> <head></head> <title></title>05网页组成单标签 <! Doctype html> 双标签 <html> </html> <head></head> <title></title>01TDesign 更新周报（2022年4月第1周）详情见：https://github.com/Tencent/tdesign-vue/releases/tag/0.40.102CSS笔记link rel=”stylesheet” href=”文件名” margin:0px auto;（块级元素居中）和width：的组合 写2个数：第一个代表上下，第二个代表左右 写3个数:第一个代表上，第二个代表左右,第三个下 写4个数：上，右，下,左 text-align:center；（行级元素居中） list-style：none （去除符号） clear：both（去除浮动） overflow:hidden;(超过大小就不显示) overflow:scroll 滚动条 border:none;outline:none;去除按钮边框01flex深度剖析-解决移动端适配问题！上回说到，移动端适配，推荐了，使用px为主，vw,百分比为辅助，再搭配flex的布局方式，于是有人就开始问我了，这个flex搭配布局应该怎么用，梳理一遍，巩固一下01Web前端开发 HTML设计 经验与技巧总结加入oninput事件oninput = "value=value.replace(/[^\d]/g,'')" 代码示例：02第64天：CSS常用命名规范，有用！CSS常用命名，必须记住 一、常用命名 标题：title 摘要：summary 箭头：arrow 商标：label 网站标志：logo 转角/圆角：corner 横幅广告：banner 子菜单：subMenu 搜索框：searchBox 登录：login 登录条：loginbar 工具条：toolbar 下拉：drop 标签页：tab 当前的：current 列表：list 滚动：scroll 服务：service 提示信息：msg 热点：hot 新闻：news 小技巧：tips 下载：download 栏03CSS——可视化格式模型 some inline text more text 02你可能还不知的 7 个 CSS 好用的属性学习CSS是构建好看网页的一种方式。 但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。 毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。02HTML+CSS纯干货就业前基础到精通系统学习2016/9/31：HTML纯干货学习后的达到的效果 （1）：会使用HTML的基本结构，创建网页 （2）：会使用文本字体相关标签，实现文字修饰和布局 （3）：会使用图像、超链接相关标签，实现图文并茂的页面 （4）：会09HTML+CSS基础到精通系统学习1：HTML纯干货学习后的达到的效果 （1）：会使用HTML的基本结构，创建网页 （2）：会使用文本字体相关标签，实现文字修饰和布局 （3）：会使用图像、超链接相关标签，实现图文并茂的页面 （4）：会使用表格相关标签，实现简单表格，跨行、跨列的复杂表格，并对表格进行美化修饰 （5）：会使用表单及表单元素标签，实现表单页面的制作 （6）：理解post和get两种提交方式的区别 2：HTML的基本结构 2.1：标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内，<05前端基础篇之CSS世界我想你每天写css代码有时候也会觉得很痛苦：这个布局的css怎么这么难实现！我也经常会有这种感觉，一个看似简单的布局总是要琢磨半天才能实现，偶尔还会出现一些怪异的超出理解的现象。这是因为我们对css只是大概知道个形，并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》，才发现css跟想象中的不太一样。本文为《css世界》个人总结笔记，为缩减篇幅丢弃了张老师冗余的小幽默，丢掉了些含金量较低的章节内容，因为ie已经被淘汰出局，所以有关css兼容性的地方也全部忽略不记，同时对个人觉得不易理解的地方加上了一些自己的理解和验证，所以错误之处还望指正。顺便推荐个好用的在线代码编辑工具，国内镜像站点，方便各位对本文实例进行测试。另外本文会随着作者对css的更深入理解而逐步更新，希望到最后能够文如标题展现出真正的css世界。05vue.js 初体验：Chrome 插件开发实录背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生，它把一些常见的动画效果都封装起来了，非常实用。但是有时候在开发中，仅仅只是需要某一两个动画效果，把整个CSS文件都引05css规则定义的分类,CSS规则定义英汉对照表[通俗易懂]《CSS规则定义英汉对照表》由会员分享，可在线阅读，更多相关《CSS规则定义英汉对照表(4页珍藏版)》请在人人文库网上搜索。02【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果最近无论是工作还是自我学习提升都很忙，面对长篇大论的博文总是心有余而力不足，但又不断的接触学习到零碎的但是很有意义的知识点，很想分享给大家，所以本篇可能会很短。 本篇接我另一篇讲述 CSS 伪元素的文章： 【CSS进阶】伪元素的妙用–单标签之美，看完本文觉得有意思的可以再去看看上一篇，分享了一些伪元素的妙用。 正文从这里开始： 哪些标签不支持伪元素？ 我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。 伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。 诸如04
该导航栏的宽度自动充满整个屏幕 , 宽度为 100% , 高度也不需要设置 , 设置自适应即可 ;
任何代码编程都有各自特点的常用命名规范，div+css页面设计也不例外。遵守常用的css命名规范有利于代码的升级和扩展，也有利于让别人读懂你的css代码，让你的页面显得清晰有条理。
使用 标签作为父盒子 , 其中容纳三个 链接 标签 , 每个链接标签中包含一个 标签 ;04
在上一篇博客中实现的搜索栏 , 使用 固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ;
“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为:“wrapper“, “wrap“, “page“.
结构 head title meta body 文本 标题和段落 粗体和斜体 上标和下标 空白（白色空间折叠） 折行和水平标尺 语义化标记 加粗和强调 引用 缩写词和首字母缩写词 引文 所有者联系信息 内容的修改 列表（list） 有序列表（ordered list） 无序列表（unordered list） 定义列表（definition list） 链接（anchor） 页面链接 锚链接 功能链接 图像（image） 图像存储位置 图像及其宽高 选择正确的图像格式 JPEG GIF PNG 矢量图 fi
该 Banner 条宽度填充整个浏览器 , 不需要给出宽度 , 只需要设置高度即可 ;
HTML+CSS img图片下面产生3px间隙问题 2016.4.25~2016.4.29 核心概念 行元素垂直方向的对齐方式和行块元素转换 参考答案 方法一：设置图片的垂直对齐方式。设置该元素vertical-align:top/bottom/text-top/text-bottom/middle 只要vertical-align不取baseline，这个空隙就消失了。 方法二：设置父级元素font-size: 0;可以解决这个问题。 方法三：将图片转换为块级元素。转换img行内元素的特性为块元素，设置d
提示: 如果你要搜索第二列，可以将 tr[i].getElementsByTagName('td')[0] 中的 [0] 变为 [1]。
我们在对网页进行布局时，比较困惑和纠结的事就是CSS命名，特别是新手不知道什么地方该如何命名，怎样命名才是好的方法。 规范使用CSS命名规则，可以改善优化功效，特别是在团队合作的时候可以有效提高开发效率。 一、命名规则说明 所有的命名最好都小写 属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5" 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离，代码中不涉及任何的表现元
背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生，它把一些常见的动画效果都封装起来了，非常实用。但是有时候在开发中，仅仅只是需要某一两个动画效果，把整个CSS文件都引入，这样不是太好。 需求就出现了，能不能有一个工具可以直接预览Animate.css对应的动画效果，并且生成对应的动画代码呢？ 作为一个UI开发，平时跟Chrome浏览器打交道最多，于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码，这样在实际开发中碰到一些需要
用户与左侧搜索栏 , 间隔 30 像素 , 这里设置 用户栏 左外边距 30 像素 ;
在做前端界面的时候，比如一些文字的列表或者一些表单的标题，经常是2个字，3个字，4个字的类型。
计算机领域中存在大量的术语，如果恰好是自己未接触的领域，看到一连串不懂的英文缩写，一定是一件令人困惑的事。虽然有百度和谷歌等搜索引擎，如果我们能自建一个更专业的数据库，似乎对我们有很大帮助（可玩性很高）。
导航栏文本 有 10 像素内边距 , 20 像素外边距 , 文本输入框 表单 , 距离 导航栏外边距有 65 像素 ;
HTML代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。 CSS代表了样式，样式是网页的外观，从审美的角度，美化页面。 JavaScript代表行为，行为是网页的交互逻辑，从交互的角度，提升用户体验。
相信对于很多写代码的小伙伴来说,对于开发编辑器都不会陌生,什么editplus,dw,webstorm,hubuilder,vscode,esciplse,vim等萝卜青菜都各有所爱,每个编辑器都有它的独特之处,本质上并无优劣之分,然而工欲善其事必先利其器,好的工具就是成功的一半,最近一直都在想着,怎么样提高自己的效率,如果总是复性的劳动一件事情,时间久了,觉得是毫无意义的,让自己远离刀耕火种的时代,提高效率,同时也是为了减少手残腰椎痛(说得好像不是搬砖的,可是我依旧是个搬砖的),那么今天就我平时的使用跟大家分享一款自己喜欢编辑sublinmeText3,本文适合小白,有志于解脱鼠标手崇尚键盘侠的键客,对于它的使用和学习,我也一直在摸索中,初学者学习笔记使用心得,希望对正在路上的你有些用…
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140268.html原文链接：https://javaforall.cn
1. 自主安装sublime text3 2. ubuntu下使用下面命令安装
1.需要熟练掌握HTML标签以及CSS各个常用属性。 2.掌握CSS3 常用属性 3.掌握jquery的基本用法，对于JS基本逻辑语句需要熟练掌握
大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
html标签是由<>包围的关键词 html标签是成对出现的 有部分标签是没有结束标签的，叫单标签， 页面中所有的内容，都是要放在HTML标签中的
color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白 三、CSS符号属性 list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/ list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/ 四、CSS背景样式 background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置 background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/ 五、CSS连接属性 a /*所有超链接*/
字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体 {font-variant: small-c
文章目录 一、搜索栏按钮测量 1、按钮测量 2、按钮切图 二、搜索栏按钮代码编写 1、HTML 标签结构 2、CSS 样式 3、展示效果 一、搜索栏按钮测量 ---- 1、按钮测量 右侧的按钮大小 , 50 x 40 像素 ; 📷 按钮颜色值 #00a4ff ; 📷 2、按钮切图 使用 切片工具 , 将 按钮图片 进行选择 , 然后进行切图 ; 📷 选择 " 菜单栏 / 文件 / 导出 / 存储为 Web 所用格式 " , 📷 选择导出的格式 , 以及 📷 切好的图片如下 : 📷 二、搜索栏按钮
CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。
很多人想让我给他们推荐有关CSS部分的教程，或者问我如何学习CSS。 我也看到很多人对CSS的部分内容感到困惑，一部分原因是由于对语言的过时认识。 鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机。 即使CSS只是你所做工作的一小部分（因为你使用其他技术栈），CSS是你最终希望在屏幕上显示的结果，所以值得合理去学习。
欲先善其事，必先利其器。 先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。
1，找到上次的提示null脚本错误原因，是protocol json参数没没对上。主要是
1. 动画属性 属性 描述 CSS @keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。 3 animation 复合属性。检索或设置对象所应用的动画特效。 3 animation-name 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 3 animation-duration 检索或设置对象动画的持续时间 3 animation-timing-func
在 html 中设置 meta 视口标签 , 设置宽度等于设备宽度 , 初始比例为 1.0 , 用户不可缩放 , 最大缩放比例和最小缩放比例都设置为 1.0 ;
单标签 <! Doctype html> 双标签 <html> </html> <head></head> <title></title>
详情见：https://github.com/Tencent/tdesign-vue/releases/tag/0.40.1
link rel=”stylesheet” href=”文件名” margin:0px auto;（块级元素居中）和width：的组合 写2个数：第一个代表上下，第二个代表左右 写3个数:第一个代表上，第二个代表左右,第三个下 写4个数：上，右，下,左 text-align:center；（行级元素居中） list-style：none （去除符号） clear：both（去除浮动） overflow:hidden;(超过大小就不显示) overflow:scroll 滚动条 border:none;outline:none;去除按钮边框
上回说到，移动端适配，推荐了，使用px为主，vw,百分比为辅助，再搭配flex的布局方式，于是有人就开始问我了，这个flex搭配布局应该怎么用，梳理一遍，巩固一下
加入oninput事件oninput = "value=value.replace(/[^\d]/g,'')" 代码示例：
CSS常用命名，必须记住 一、常用命名 标题：title 摘要：summary 箭头：arrow 商标：label 网站标志：logo 转角/圆角：corner 横幅广告：banner 子菜单：subMenu 搜索框：searchBox 登录：login 登录条：loginbar 工具条：toolbar 下拉：drop 标签页：tab 当前的：current 列表：list 滚动：scroll 服务：service 提示信息：msg 热点：hot 新闻：news 小技巧：tips 下载：download 栏
some inline text more text
more text
学习CSS是构建好看网页的一种方式。 但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。 毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。
1：HTML纯干货学习后的达到的效果 （1）：会使用HTML的基本结构，创建网页 （2）：会使用文本字体相关标签，实现文字修饰和布局 （3）：会使用图像、超链接相关标签，实现图文并茂的页面 （4）：会
1：HTML纯干货学习后的达到的效果 （1）：会使用HTML的基本结构，创建网页 （2）：会使用文本字体相关标签，实现文字修饰和布局 （3）：会使用图像、超链接相关标签，实现图文并茂的页面 （4）：会使用表格相关标签，实现简单表格，跨行、跨列的复杂表格，并对表格进行美化修饰 （5）：会使用表单及表单元素标签，实现表单页面的制作 （6）：理解post和get两种提交方式的区别 2：HTML的基本结构 2.1：标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内，<
我想你每天写css代码有时候也会觉得很痛苦：这个布局的css怎么这么难实现！我也经常会有这种感觉，一个看似简单的布局总是要琢磨半天才能实现，偶尔还会出现一些怪异的超出理解的现象。这是因为我们对css只是大概知道个形，并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》，才发现css跟想象中的不太一样。本文为《css世界》个人总结笔记，为缩减篇幅丢弃了张老师冗余的小幽默，丢掉了些含金量较低的章节内容，因为ie已经被淘汰出局，所以有关css兼容性的地方也全部忽略不记，同时对个人觉得不易理解的地方加上了一些自己的理解和验证，所以错误之处还望指正。顺便推荐个好用的在线代码编辑工具，国内镜像站点，方便各位对本文实例进行测试。另外本文会随着作者对css的更深入理解而逐步更新，希望到最后能够文如标题展现出真正的css世界。
背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生，它把一些常见的动画效果都封装起来了，非常实用。但是有时候在开发中，仅仅只是需要某一两个动画效果，把整个CSS文件都引
《CSS规则定义英汉对照表》由会员分享，可在线阅读，更多相关《CSS规则定义英汉对照表(4页珍藏版)》请在人人文库网上搜索。
最近无论是工作还是自我学习提升都很忙，面对长篇大论的博文总是心有余而力不足，但又不断的接触学习到零碎的但是很有意义的知识点，很想分享给大家，所以本篇可能会很短。 本篇接我另一篇讲述 CSS 伪元素的文章： 【CSS进阶】伪元素的妙用–单标签之美，看完本文觉得有意思的可以再去看看上一篇，分享了一些伪元素的妙用。 正文从这里开始： 哪些标签不支持伪元素？ 我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。 伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。 诸如
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
