- 博客(31)
- 收藏
- 关注
RSS订阅原创 CSS3 -- 文本效果和字体
text-shadow: 水平偏移量h-shadow 垂直偏移量v-shadow 模糊距离blur 颜色color
2022-07-18 18:25:14
322
原创 CSS3 -- 多列布局和用户界面
内容盒子，盒子宽度=内容的宽度+左右内间距+左右边框的宽度 盒子高度=内容的高度+上下内间距+上下边框的宽度，css中的width和height只设定内容部分的宽高，为默认值(标准盒模型)。
2022-07-17 17:16:17
226
原创 CSS3--过渡和动画
过渡transition实际就是两种样式逐渐转换之间的效果，使两种样式之间的转变不会生硬。有两个重要要素：添加效果的属性和效果的持续时间。若没有指定持续的时间将没有过渡效果。
2022-07-17 16:02:45
220
原创 CSS3--2D/3D转换
在二维平面中对元素进行转换，包括旋转、缩放、平移和倾斜。这个方法含有两个参数，分别为x轴和y轴移动距离，坐标轴以左上角为原点，参数类型为数字+单位。其中正值表示向右向下平移，负值向左向上平移。2 旋转rotate()需要给定一个参数，即旋转的角度，正值为逆时针旋转，负值为顺时针。默认绕中心点旋转。 我们可以用transform-origin属性定义旋转的中心点。参数的值可以是数值...
2022-07-14 16:09:27
140
原创 CSS3--背景：图片大小、位置区域和剪裁
img1所在图层位于img2的上方，会对img2造成遮盖效果，因此可以利用这个特点合理定位背景图片和其他属性从而创造出由多张图片组合而成的背景。二、背景图片的位置区域background-origin对于盒子模型，包含外边距、边框、内边距和内容几部分，这几部分内容是一层层嵌套的。该属性设置的就是背景图片将从哪里开始显示，参数值和其代表意义如下：三、背景图片剪裁background-clip参数值和origin一样有三种，background-origin是...
2022-07-14 11:35:18
3386
原创 CSS3--边框：圆角、阴影和边框图片
使用border-radios，指定值为数值带单位或者百分比，不同指定值个数带来的圆角效果不同。 百分比一般用于设定椭圆边角和很多属性一样，可以分别设定每一个圆角二、盒阴影使用新增的box-shadow属性。其基础参数依次为：box-shadow: 水平偏移距离 垂直偏移距离 模糊半径 扩散半径 阴影颜色;参数个数不同同样造成的效果不同。 除此之外还可以通过可选字段i............
2022-07-10 22:07:05
479
转载 HTML5--Web存储
前端缓存主要分为http缓存和浏览器缓存，http缓存是在http请求传世时用到的缓存，在服务器代码上设置；浏览器缓存主要由前端开发，在前端js上进行设置。
2022-07-08 23:22:00
643
原创 HTML5--新增input类型、表单属性和元素
并不是所有浏览器都支持新增的input类型，但若是不被支持仍可以显示为常规的文本域。规定输入域的选项列表，当用户在自动完成域中开始输入时，将显示可填内容的选项列表。以下代码段中，当input被选中后会自动提供datalist中的可选列表。 在使用过程中，我们使用的list属性来绑定。首先，该元素已经从web标准中删除了。提供验证用户的可靠方法。...
2022-07-08 19:25:26
916
原创 HTML5--语义化标签
语义标签实际就是含有语言意义的，能够为浏览器和开发者描述其意义的标签。比如标签，能够作为导航栏、底边栏，也有可能是一个普通的盒子。相反，能够清楚知道该标签定义的内容。之前，在对html页面进行布局时，最常使用的是div盒子，比如、。html5新增的语义化标签能够明确定位一个web页面的不同部分，belike：...
2022-07-08 16:48:15
2075
1
原创 HTML5--多媒体viedo和radio
由于每个浏览器支持的视频格式不同，我们通常会将视频链接用标签来提供，让浏览器选择自己支持的第一个视频格式进行播放。下面是各个浏览器支持的视频格式表格：我们能够通过JS来控制 元素的方法、属性和事件，下面是它的各种属性： 补充一些题外：谷歌浏览器不支持非静音自动播放，需要添加muted属性。同样不同浏览器支持的音频格式也各有...
2022-07-08 15:54:35
1068
原创 HTML5--拖放、地理定位和web worker
拖动：将整个拖放事件拆分开，发现事件存在一个拖动主体A，一个放置对象B，首先发生拖动事件的前提是A可拖动，其次将拖动事件的主体设置为A，除此之外还需要设定一个放置的地方B，再然后发生拖动事件。地理定位：有两个方法获取地理位置，getCurrentPosition() 和watchPosition()。2 设置拖动对象首先介绍拖动目标，即A元素身上会触发的事件：此处要用到的ondragstart事件，在开始拖动时就会触发，为这个事...
2022-07-07 17:06:54
431
原创 HTML5--画图
html5的绘图除了外，还支持内联SVG。标签默认没有边框和内容，同一个HTML页面可以存在多个元素。getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 can...
2022-07-06 17:54:06
1865
原创 HTML5
1 语义化标签 都为块元素，如、、、等2 制图 元素3 多媒体元素 视频(viedo)和音频(radio)4 新表单输入类型与表单元素 5 存储机制 localStorage和sessionStorage
2022-07-06 17:53:07
68
原创 一些《点石成金》笔记
写在前面和一些杂七杂八krug可用性Krug 可用性第一定律：别让我思考。 Krug 可用性第二定律：点击多少次没有关系，只要每次点击都是无序思考、明确无误的选择。 Krug 可用性第三定律：去掉每个页面上一半的文字，然后把剩下的文字再去掉一半。1 user experience design(uxd) 2 一条可用性原则：看上去使用需要大量时间的东西，将来久会用得越来越少3 可用性：有用|可学习（能否知道如何使用）|可记忆（能否记住如何使用）|有效|高效（能否在合...
2022-04-13 19:54:08
158
原创 CSS--flex布局、一般css书写顺序
/* 父盒子常见属性 */ .fa { display: flex; /* 设置主轴方向 flex-direction:row(从左到右（默认）)/row-reverse(从右到左)/column(从上到下)/column-reverse(从下到上)*/ flex-direction: row; /* 设置主轴上子元素的排列方式 jus...
2022-01-12 17:24:00
422
原创 CSS--界面显示、文字溢出、杂七杂八的
1 界面 /* 更改鼠标样式 mouse:default(默认)/pointer(手)/move(移动)/text(文本)/not-allowed(禁止)*/ .mouse { width: 80px; height: 80px; background-color: purple; cursor: move; } /* 轮廓线（
2022-01-12 17:23:21
120
原创 CSS--元素显示、三角
1 元素显示 /* 显示和隐藏 display:none(隐藏)/block(显示/转化为块) 隐藏后不再占有位置*/ .display { display: none; background-color: pink; height: 30px; } /* 可见性 visibility：visble(可视)/hidden(隐藏)/inherit(继承父
2022-01-12 17:19:54
252
原创 CSS--定位
<!-- 定位：使盒子自由地在盒子内移动/固定在某个位置，并压缩其他盒子 --> <!-- 定位=定位模式+边偏移 --> <!-- 定位模式：position:static静态/relative相对/absolute绝对/fixed固定 --> <!-- 边偏移：top/bottom/left/right：xxpx top向下走left向右走 --> <!-- static静态定位：默认，即无定位，盒子按标准流...
2022-01-12 16:27:06
146
原创 CSS--浮动
<!-- 浮动:可以改变元素标签默认的排列方式,常用于使多个块级元素在一行内排列显示 --> <!-- 原理:创建浮动框,将其移动到一边,直到左边缘或右边缘触及包括块或另一个浮动框边缘 --> <!-- 语法:选择器{float:none(不浮动)/left/right} --> <!-- 特性:1脱离标准流,浮动的盒子不再保留原先位置,不会影响前面的标准流 2 会在一行内显示且顶部对齐,装不下时另起一行...
2022-01-12 14:49:08
62
原创 CSS--盒子水平居中、圆角、阴影
1 水平居中 /* 块级元素：1 指定宽度 2 左右外边距为auto */ .div { background-color: pink; width: 300px; height: 200px; margin: 0 auto; } /* 行内/行内块元素：父元素添加text-align：center */
2022-01-12 14:45:57
260
原创 CSS--盒子模型
/* 盒子模型包括：边框、外边距、内边距和实际内容 */ /* 盒子模型分为两种，一种是w3c标准盒，一种是IE盒子 */ /* 前者盒子content为用户设置大小，实际总大小=content（内容区）+padding+border box-sizing:content-box;*/ /* 后者盒子用户设置大小=content+padding+border box-sizing: border-box; */ /* bo...
2022-01-11 20:35:07
66
原创 CSS--引入方式、元素显示方式、三特性
1 引入方式 <!-- 外部样式表(链接式):样式单独写在css文件中,之后将其引用到html页面 --> <link rel="stylesheet" href="css.css"> <!-- 内部样式表(嵌入式):放在html页面内<style>标签中,一般放在<head>,范围为当前html页面 --> <style> .div { text-alig
2022-01-11 20:00:53
80
原创 CSS--基本属性
.family { /* 定义文本字体，字体间用逗号隔开，多单词加引号，显示时优先级递进，前一个无法显示就用后一个 */ font-family: serif; } .size { /* 定义字体大小，一定要加单位px，标题标签需要单独指定 */ font-size: 80px; } .weight { ..
2022-01-11 19:21:18
218
原创 CSS--复合选择器
/* 后代选择器:所有后代 不直接跟着div1的p元素也会有样式*/ #d1 p { color: pink; } /* 子选择器:只能选择最近一级子元素 即p一定是直接跟着div2的p */ #div2>p { color: blue; } /* 并集选择器:集体声明,选择多组标签定义相同的样式 */...
2022-01-11 15:22:10
63
原创 CSS--基础选择器
/* 通配符选择器 */ * { font-size: 20px; } /* 标签选择器 */ div { background-color: pink; } /* id选择器 */ #haha { font-weight: lighter; ...
2022-01-11 15:21:08
161
原创 HTML--表单
<!-- 表单：由表单域、表单控件（表单元素）和提示信息构成 --> <!-- 由<form></form>标签包围，将其范围内的表单元素信息提交给服务器 --> <!-- <form action=url地址" target="" method="get/post" name="xxx"></form> --> <!-- action：定义提交表单时要执行的操作，一般是用户点击提交表单数据..
2022-01-11 15:14:30
189
原创 HTML--列表
<!-- 无序列表 --> <ul> <li> <h3>上课时间</h3> </li> <li> <div>9.30am</div> </li> </ul> <!-- 有序列表 --> <ol> .
2022-01-11 15:06:54
46
原创 HTML--表格标签
<!-- 基本语法： <table> <tr> 表格的行 <th></th> 表格的表头 <th></th> </tr> <tr> <td></td&.
2022-01-11 15:04:26
174
原创 HTML--基本标签
<!-- 标题：自带加粗 --> <h1>我是一级标题</h1> <h2>我是二级标题</h2> <h3>我是三级标题</h3> <h4>我是四级标题</h4> <h5>我是五级标题</h5> <h6>我是六级标题</h6> <!-- 段落 --> <p>我是第一个.
2022-01-11 15:02:45
113
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人