基础
关注
分享
扫一扫
时松
这个作者很懒，什么都没留下…
展开
-
media案例
ul { list-style: none; margin: 0; padding: 0;}li { list-style: none;}a { color: #666; text-decoration: none;}a:hover { text-decoration: none;}/* 修改container的最大宽度为 1280 根据设计稿来走 */@media screen and (min-width: 1280) {原创 2021-06-02 10:56:34 · 170 阅读 · 0 评论 -
slot
slot目的让原来的设备具备更多扩展性组件的插槽使封装组件更具扩展性灵活更改组件内部一些内容 <div id="app"> <cpn> <span slot="center">change</span> </cpn> <cpn> <button slot="right">return</button&原创 2021-04-04 11:49:36 · 135 阅读 · 0 评论 -
v-bind
对属性动态绑定， 如a元素的href属性，img元素的src属性作用： 动态绑定属性缩写：:预期：any (with argument) | Object (without argument)参数: attrOrProp (optional)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa.原创 2021-03-11 22:57:53 · 123 阅读 · 0 评论 -
Mustache
可以通过Mustache语法(也就是双大括号)，将data中的文本数据，插入到HTMLmustache语法，不仅可以直接写变量，也可以写简单的表达式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo原创 2021-03-09 21:16:32 · 298 阅读 · 0 评论 -
Vue 中 el data methods
el:类型: string | HTMLElement作用：决定之后Vue实例会管理哪一个DOMdata:类型：Object | Function作用：Vue实例对应的数据对象methods:类型： {[key: strig]: Function}作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用...原创 2021-03-09 19:54:24 · 295 阅读 · 0 评论 -
margin: 0 auto未生效原因
要使用margin: 0 auto就需要加上width否则无法达到预想效果原创 2020-11-25 21:25:53 · 191 阅读 · 0 评论 -
媒体查询
什么是媒体查询媒体查询（Media Query）是CSS3新语法使用@media查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果实际、Android手机，平板等设备都用得到媒体查询语法规范@media mediatype and|not|only (media feature) { CSS-Code;}用@media 开头 注意@符号mediatyp原创 2020-11-13 22:27:22 · 479 阅读 · 0 评论 -
js表单验证
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .one { width: 600px; margin: 100px auto; } .message { display: inline-block; font-size: 1原创 2020-07-27 11:01:25 · 103 阅读 · 0 评论 -
flex布局
目前在移动端用的最多，pc端也使用的越来越多两个重要的概念：1.开启了flex布局的元素叫 flex container2.flex container 里面的直接子元素叫做 flex items开启flex布局1.flex块级元素；2.inline-flex行内级元素设置display属性为flex或者inline-flex可以为flex container。（display：inline-flex）flex布局模型主轴（相当于x）：main axis； 主轴的开始位置叫main star原创 2020-06-28 16:44:00 · 205 阅读 · 0 评论 -
常见的鼠标事件（js）
鼠标事件 触发条件 onclick 鼠标点击触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 ...原创 2020-06-25 19:05:22 · 299 阅读 · 0 评论 -
文本框内容的隐藏与显示（ onfocus 与 onblur ）
获得焦点： onfocus失去焦点： onblur<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input { color: #999999; } </style> </head> <body> <原创 2020-06-25 18:27:18 · 593 阅读 · 0 评论 -
精灵图背景（js）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: ; } li { list-style-type: none; } .box { width: 250px;原创 2020-06-25 18:21:37 · 304 阅读 · 0 评论 -
点击关闭广告
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { position: relative; width: 74px; height: 88px; border: 1px solid #ccc; margin: 100px原创 2020-06-25 18:14:36 · 376 阅读 · 0 评论 -
密码的显示与隐藏（js）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; position: relative;原创 2020-06-25 18:10:06 · 317 阅读 · 0 评论 -
更清晰的查看网页结构
想看一些网页结构时候给div增加outline结构 div { outline: 2px solid red !important; }打开检查的快捷键ctrl+shift+i 或者 f12 键原创 2020-03-13 21:22:48 · 829 阅读 · 0 评论 -
去掉li前的点,取消a下划线等问题
ul { list-style: none; /*去掉列表样式小点*/ }a { color: #050505; text-decoration: none; /*取消下划线*/ } header { height: 100px; /*background-color: skyblue;*/ over...原创 2020-03-12 15:43:02 · 3247 阅读 · 0 评论 -
a元素的相关使用 与 URL
<div> <p>打开别人的网页</p> <div> <a href="http://www.baidu.com" target="_blank">百度一下</a> </div> <p>打开自己的网页</p> <div> ...原创 2020-03-10 18:44:29 · 260 阅读 · 0 评论 -
JavaScript
java 服务器端的编程语言JavaScript 是一种运行在 客户端 的 脚本语言可用地方1.网页特效2.服务端开发(Node.js)3.命令行工具(Node.js)4.桌面程序(Electron)5.APP(Cordova)6.控制硬件-物联网(Ruff)7.游戏开发(cocos2d-js)分为ECMAScript-javaScript的核心网景:JavaScript ...原创 2020-02-11 18:20:34 · 181 阅读 · 0 评论 -
旋转轮插图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /* body { perspective: 1000px; } div { width: 100px; ...原创 2019-11-09 17:40:17 · 309 阅读 · 0 评论 -
BFC
BFC(block formatting context)直译为“块级元素上下文”BFC它是一个独立的渲染区域，只有block-level box 参与，它规定了内部block-level box如何布局，并且与这个区域外部毫不相干。（封闭的区域）以下属性可以触发BFCfloat属性不为noneposition为absolute或fixeddisplay为inline-block，ta...原创 2019-11-06 21:25:16 · 167 阅读 · 0 评论 -
伸缩布局 css3
css3在布局方面做了非常大的改进，使的我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向方向：默认主轴从左向右，侧轴默认从上到下主轴和侧轴并不是固定不变的，通过flex-direction可以互换<!DOCTYPE html...原创 2019-11-02 16:27:03 · 262 阅读 · 0 评论 -
html滚动
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; ...原创 2019-11-02 12:14:39 · 179 阅读 · 0 评论 -
sublime快捷方式
sublime可以提高代码的书写方式1.生成标签可以直接输入标签名 ，按tab键即可例如：div 然后tab键，就生成<div></div>2.如果想生成多个相同标签 加上 * 即可例如：div*3就可以快速生成3个div3.如果是父子关系的标签，可以用>例如：ul>li 即可4.如果是兄弟关系的标签，用+即可例如：div+p5.如果生成带有...原创 2019-07-18 22:14:38 · 184 阅读 · 0 评论 -
元素的显示与隐藏
在css中有三个显示和隐藏的单词比较常见，我们要区分开，它们分别是display visibility和overflow它们主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！display 显示 （常用）display 设置或检索对象是否及如何显示display:none 隐藏对象与它相...原创 2019-08-22 21:15:38 · 155 阅读 · 0 评论 -
定位
定位（position）如果说浮动关键在一个“浮”字上面，那么我们的定位，关键在于一个”位“上ps：定位是我们css算是数一数二的难点了，但是，需要务必学好，css离不开定位，特别是后面的is特效，天天和定位打交道。定在某一个位置简称定位元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。1.边偏移 边偏移属性 描述 ...原创 2019-08-17 19:25:07 · 505 阅读 · 0 评论 -
网页部分案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>我的第一个网页（仿）</title> <style type="text/css"> /*样式*/ /*css初始化*/ * { margin: 0;...原创 2019-08-17 18:09:26 · 246 阅读 · 0 评论 -
定位案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } ul { ...原创 2019-08-22 10:20:45 · 257 阅读 · 0 评论 -
网页
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*样式*/ /*css初始化*/ * { margin: 0; ...原创 2019-08-15 23:40:42 · 114 阅读 · 0 评论 -
css用户界面样式
所谓界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等，但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们放弃了，防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状cursor: default小白/pointer 小手/move 移动/text 文本千万不要用hand 因为 火狐不支持pointer ie6以上都支持的...原创 2019-08-24 17:21:57 · 217 阅读 · 0 评论 -
溢出的文字隐藏
word-break：自动换行normal 使用浏览器默认的换行规则break-all 允许在单词内换行kepp-all 只能在半角空格或连字符处换行主要处理英文单词white-spacewhite-space设置或检索对象内文本显示方式，通常我们使用于强制一行显示内容normal： 默认处理方式nowrap： 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象换行...原创 2019-08-28 08:49:17 · 356 阅读 · 0 评论 -
css精灵技术
css精灵技术简单的说，css精灵是一种处理页面 背景图像 的方式，它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于页面，这样，当用户访问该页面时只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图测量时，精灵图一般拿过来第一时间锁起来，不要移动位置，否则网页中的坐标全乱。<!DOCTYPE htm...原创 2019-08-28 12:12:09 · 287 阅读 · 0 评论 -
icomoon
1.在样式里声明字体：告诉别人我们自己定义的字体@font-face { /*电脑中没有的字体，我们需要声明*/ font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype')...原创 2019-08-29 18:21:23 · 407 阅读 · 0 评论 -
滑动门
使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强，常见于各种导航栏的滑动门核心技术利用的是css精灵（主要是背景位置）和盒子padding撑开宽度，来适应不同字数的导航栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g...原创 2019-08-30 08:42:36 · 142 阅读 · 0 评论 -
过渡效果
属性 描述 transition 简写属性，用于在一个属性中设置四个过度属性 transition-property 规定应用过渡的css属性的名称 transition-duration 定义过渡效果花费的时间（默认为0） t...原创 2019-08-31 19:42:40 · 185 阅读 · 0 评论 -
定位盒子居中对齐写法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 200px; height: 200px; ...原创 2019-09-01 11:30:16 · 208 阅读 · 0 评论 -
旋转
transform-origin可以调整元素转换变形的原点div {transform-origin: left top;transform: rotate(45deg);} /改变元素原点到左上角，然后进行顺时旋转45度/是4个角可以用bottom right（top left）需要精确位置可以用px像素<!DOCTYPE html><html lang="en"&g...原创 2019-09-01 19:18:08 · 116 阅读 · 0 评论 -
透视
3D变形（css3）transform左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方，建立一个左手坐标系，拇指、食指和中指分别代表x、y、z轴的正方向（2D x y）css3中的3D坐标系与3D坐标系有一定区别x坐标是负的，右边是正的y上面是负的，下面是正的z里面是负的，外面是正的rotateX就是沿着x立体旋转透视（perspective）电...原创 2019-09-02 17:20:23 · 283 阅读 · 0 评论 -
翻转
翻转 （backface-visibility: hidden;）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { ...原创 2019-09-03 18:56:58 · 203 阅读 · 0 评论 -
ps颜色填充
颜色填充前景色 alt+delete背景色 CTRL+delete原创 2019-08-06 22:39:27 · 302 阅读 · 0 评论 -
导航栏
Document 首页 手机新浪网 网站导航 新浪网原创 2019-07-28 17:35:36 · 175 阅读 · 0 评论