- 博客(22)
- 收藏
- 关注
RSS订阅
原创 H5开发应用小知识，不看后悔
背景：超大背景图位置用background-position: center top; 背景图像固定，后期可以制作视差滚动效果： background-attachment: scroll / fixed;内边距：导航栏：如果每个盒子字数不一样，可以不用设置宽度，用padding更合适；总体：盒子里放图片，图片和父元素宽度一样，否则缩放时会影响布局；...
2020-09-19 00:05:53
71
原创 动画原理：给不同对象添加不同定时器
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>div,...
2020-10-20 21:09:25
122
原创 溢出的文字省略号显示
一般的web新闻页面快报栏都会有溢出的文字用省略号显示的效果。单行文字用省略号显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl.
2020-09-19 13:45:53
150
原创 鼠标样式cursor
常用的几种：default 小白箭头，默认样式pointer 小手move 移动十字text 文本样式not-allowed 禁止
2020-09-19 13:28:37
89
原创 定位的小技巧
固定定位小技巧： 固定在版心右侧位置。小算法： 1. 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。 2. 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置 就可以让固定定位的盒子贴着版心右侧对齐了。绝对定位的盒子居中不能用margin: 0 auto;1.水平居中：left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；margin-left: -100p...
2020-09-19 12:50:13
507
原创 元素的显示与隐藏，让一个元素在页面中隐藏或显示出来
displaydisplay: none ；隐藏对象 display：block ；除了转换为块级元素之外，同时还有显示元素的意思 display 隐藏元素后，不再占有原来的位置。 后面应用及其广泛，搭配 JS 可以做很多的网页特效。visibilityvisibility：visible ; 元素可视 visibility：hidden; 元素隐藏 visibility 隐藏元素后，继续占有原来的位置。overflowvisible 默认可见 hidden 超..
2020-09-19 12:35:27
754
原创 web页面常用布局：定位，可以使盒子自由移动位置或固定位置
定位 = 定位模式 + 边偏移；决定元素的最终位置。定位模式：static:是默认值，在文档流中就是这个值。 relative：相对自身原来的位置定位，不脱标，原来位置仍保留 fixed：相对浏览器窗口来定位,脱离了文档流 absolute：相对第一个已经定位（position属性值不是static）的祖先元素定位，脱离文档流 如果没有祖先元素定位，就会相对浏览器窗口定位 如果有祖先元素使用了定位，就会相对第一个（从内到外）使用了定位的祖先元素定位 边偏移：top，left，r.
2020-09-19 00:04:59
3367
原创 CSS 属性书写顺序，我们是专业的前端开发人员，要遵循属性书写顺序
CSS 属性书写顺序建议遵循以下顺序： 1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 2. 自身属性：width / height / margin / padding / border / background 3. 文本属性：color / font / text-decoration / text-align / vertica...
2020-09-18 23:34:48
472
原创 浮动布局注意点
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。网页布局第二准侧：先设置盒子的大小, 之后设置盒子的位置注意点：浮动元素会脱离标准流(脱标) ，不再保留原先的位置 浮动的元素会一行内显示并且元素顶部对齐，互相贴靠在一起没有缝隙，如果父级宽度装不下会另起一行显示 浮动的元素会具有行内块元素的特性浮动元素经常和标准流父级搭配使用 为了约束浮动元素位置, 我们网页布局一般采取的策略是: 先用标准流的父元素排列上下位置, 之后内部...
2020-09-18 23:27:35
257
原创 图片和文字对齐，vertical-align的用法
vertical-align设置行内元素垂直对齐的方式，属性值有：baseline：与基线对齐top：与顶端对齐text-top－将支持valign特性的对象的文本与对象顶端对齐middle－将支持valign特性的对象的内容与对象中部对齐bottom－将支持valign特性的对象的文本与对象底端对齐text-bottom－将支持valign特性的对象的文本与对象顶端对齐...
2020-09-18 10:48:52
2079
原创 H5和CSS做出三角形，利用border，同时宽高设为0
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { .
2020-09-17 16:53:56
440
原创 行高和高度的三两事：行高 ＞ 高度 文字靠下；行高 ＜ 高度 文字靠上
先明白行高的原理，行高包含内容区域的高度、上半行间距和下班行间距。如果line-heigt:300px; font-size:20px;算出间距280px，上下半行间距都为140px。行高 > 高度 文字靠下；height: 200px;line-height: 300px;行高 < 高度 文字靠上；height: 200px;line-height: 100px;...
2020-09-16 19:52:45
747
原创 清除浮动的几种方法——浮动元素脱离标准流，会影响页面的排版布局
浮动元素脱离标准流，会影响页面的排版布局，对后面的元素有影响，但不影响前面的元素。清除浮动：给父元素添加高度，那么父元素会占据空间而且是标准流，包含了浮动的元素不会影响下面的元素。 给父元素设置了overflow:hidden;属性，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局作用域内，声明了一个function就会生成 一个独立的作用域一样，使这个块圾元素内部的排版完全独立隔绝。（涉及BFC） 在父元素内部，最后面添加类名为clear的盒子，设置样式clear: bot.
2020-09-16 15:17:52
1043
原创 子元素选择器，以 ＞ 分隔开，会选择亲儿子元素
菜单栏显示，某一级菜单获得焦点会展开对应的下一级菜单；需要选择该菜单的亲儿子元素，使用 > 子选择器。如果使用后代选择器，某一级菜单获得焦点其下一级、下下一级……都会显示。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
2020-09-16 14:29:24
739
原创 border-collapse的使用，属性值collapse可以使边框合并，默认值sparate边框分开
border-collapse属性，属性值collapse可以使边框合并，默认值sparate边框分开在表格中不加collapse，默认值是sparate：添加border-collapse:collapse;边框合并：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid..
2020-09-15 21:34:21
1487
原创 margin 只能使块级元素水平居中，垂直居中需要用到定位
首先我们要理解auto的意思是什么，auto是自动填充剩余空间。块级元素，即便我们设置了宽度，他还是自己占一行，在css的规范中，元素他的左外边距+左边框宽度+左内边距+内容的宽度+右内边距+右边框+右外边距=包含块的宽度，如果我们给他的左右外边距设置为auto的时候，他会实现平分剩下的距离，从而达到一个水平居中的效果。但是块级元素的高度并不会自动扩充，所以他的外部尺寸是不自动充满父元素的，也没有剩余的空间，因此margin上下设置auto不能实现垂直居中。但是我们可以通过 定位+margi..
2020-09-15 19:05:36
350
原创 HTML表单元素
表单标签 手机信息把范围内的表单元素信息提交给服务器<formaction="url地址" method="提交方式" name="表单域名称">各种表单控件</form>input输入表单元素单选框实现多选一必须name相同，复选框也要有name属性value，规定默认值（文本框用placeholder更合适）checked 当页面打开时就默认选中的label标签 绑定一个表单元素（label标签for的属性值与表单元素id相同），点击lab..
2020-09-14 22:54:20
72
原创 HTML 表格列表
表格用来展示数据<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr></tody></table>合并单元格 先确定跨行还是跨列，找到目标单元格，
2020-09-14 22:24:27
103
原创 HTML 常用标签
常用标签标题标签 ：<h1>~<h6> HTML提供六个等级的网页标题 段落标签： <p> 段落paragraph </p> 会根据浏览器窗口大小自动换行 换行标签 ：<br> break缩写，意为打断 文本格式化标签：加粗 <strorgs</storng>或者<b> </b>倾斜 <em></em>或者<i></i>删除...
2020-09-14 22:04:39
67
原创 HTML 结构
1.<!DOCUTYPE>文档声明类型 告诉浏览器使用哪个版本的HTML来显示网页，位于文档最前面，处于<html>标签之前。不是一个HTML标签，是文档类型声明标签2.lang语言种类 <html lang='en'>en 英语网站，zh-CN中文网站3.<meta charset="UTF-8"> 规定HTML文档使用哪种字符等编的，必须写,避免乱码charset宇符集UIF-8万国码，基本包含全世界所有国家用到的宇符...
2020-09-14 21:40:48
79
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人