- 博客(21)
- 收藏
- 关注
RSS订阅原创 移动web开发之流式布局（百分比布局）
移动WEB开发之流式布局移动端基础视口视口：就是浏览器显示页面内容的屏幕区域，分为布局视口，视觉视口，和理想视口。布局视口：layout viewport设备的默认宽度（980px）（不好，此宽度让移动端显示的事物物理大小过小，不容易分辨）通过缩放去操作视觉窗口，不会影响布局，布局视口仍保持原来的宽度理想视口：ideal viewport最合适的设备的宽度（decive-width）（同样px大小的事物，在PC端和移动端显示的物理大小相同）meta视口标签:（设置viewport
2020-11-24 16:54:26
163
原创 2D转换 动画 3D转换 浏览器私有前缀
一、transform(2D转换)translate:位移transform:translate(水平位移,竖直位移1、坐标轴正方向X轴：水平向右Y轴：竖直向下2、位移的起点：标签的原来位置3、保留标签原来的位置，不会影响其他标签4、做2D位移的盒子压在标准流、浮动元素的上面5、行内元素无效百分比作为单位X轴的百分比是相对于标签自身宽度Y轴的百分比是相对于标签自身高度让标签在其父标签中水平垂直居中position: absolute;top: 50%;left: 50%;t
2020-11-19 21:48:06
116
原创 SEO(TDk SEO 优化, logo SEO优化 ) favicon图标
SEO :（Search Engine Optimization） 搜索引擎优化TDk SEO 优化T – Title（网站标题）title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。**建议：**网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）例如：京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站D – descript
2020-11-19 21:31:08
193
2
原创 css3(属性选择器，结构伪类选择器，伪元素选择器 ,css3盒子模型，滤镜filter, cale, 过渡transition))
css31.属性选择器2.结构伪类选择器 /* 找li标签里面 最后一个li标签 */ li:last-child { background-color: #ffff55; } /* 找li标签里面 第一个li标签 */ li:first-child { background-color: chartreuse; }nth-child: 只按顺序找，类型必须匹配
2020-11-19 21:27:48
215
原创 HTML5（新语义化标签，多媒体标签，新增的 input 类型 和 表单属性）
新语义化标签多媒体标签:1.音频支持三种音频格式：MP3 Wav Ogg常见属性autoplay=“autoplay” 自动播放controls=“controls” 向用户显示播放插件（按钮）loop=“loop” 循环播放preload=“preload” 音频在页面加载时进行加载谷歌把视频 音频的自动播放都禁止了，视频可以加muted 来静音播放， 音频则只能用js属性 和 属性值 相同，都可简写， 如autoplay=“autoplay” 可简写成 auto
2020-11-19 20:53:43
155
原创 精灵图，字体图标，用户界面样式（鼠标样式，表单轮廓，表单域拖拽，文字对齐，省略号）
精灵图原理： 将网页中的一些小背景图像整合到一张大图中，这样服务器就只需要一次请求。background-position用ps 的矩形工具，测出 宽高 和xy 坐标。因是精灵图移动 找到盒子的位置，所以 x,y 写负值字体图标 iconfont主要用于显示网页中 通用，常用的一些小图标展示的是图标，本质是字体字体图标的下载：icomoon 字体 http://icomoon.io阿里 iconfont 字体 http://www.iconfont.cn/1.把下载包里面的 fo
2020-11-19 18:42:41
131
27
原创 元素的隐藏和显示(display ,visibility ,overflow)
元素的隐藏和显示display 隐藏元素后，不占有原来位置。 display: none ; 隐藏对象 display: block ; 显示元素 （转化为块元素）visibility 隐藏元素后，继续占有原来位置。visibility: visible; 元素可视visibility: hidden; 元素隐藏overflow 溢出overflow: visible; 不剪切内容，也不添加滚动条。overflow: hidden; 不
2020-11-19 12:20:46
158
3
原创 定位 position
定位 position: 定位可以让盒子自由的在某个盒子内移动位置，或者 固定在屏幕中的某个位置定位= 定位模式 +边偏移1.静态定位 static()无定位，2.相对定位 position:relative;相对于它自己原来的位置移动没有脱标，仍继续占有标准流位置，（应用：子绝父相 或 相对移动自己的位置）3.绝对定位 position:absolute;相对于有定位的祖级元素移动，以就近一级为参考点（爸爸没有找爷爷）如果没有族级元素 或祖级元素都没有定位，则以浏览器为
2020-11-19 12:16:57
88
原创 浮动 , 常见的网页布局
浮动（float : none/ left /right）为什么需要浮动？浮动可以改变元素标签默认的排列方式。如：可以让多个块级元素一行内排列。行内块元素也可以一行显示，但inline 有文本特点 ，中间会有空白缝隙浮动元素是挨在一起的，如果父盒子不够宽，装不下，多出来的子盒子就会另起一行显示特点：脱离标准文档流，不占标准流的位置（标准文档流：元素没有浮动之前的默认显示方式，块元素独占一行，从上到下排列。行内元素会从左到右的排列）浮动元素会显示一行上，如果超过父元素的宽度就会自动换行显示。
2020-11-19 09:57:25
274
原创 盒子模型(边框,内外边距 ,合并和塌陷问题) 圆角边框 , 阴影
网页布局的核心本质： 就是利用 CSS 摆放盒子。网页布局的三大技术：盒子模型，浮动，定位。盒子模型组成部分，从外到内：外边距、边框、内边距、内容盒子的大小包括 ：边框、内边距、内容边框（border）：border-style: sloid (实线) ； dashed (虚线) ； dotted (点线)；border:border-width ( 边框粗细 ) border-style ( 边框样式 ) border-color( 边框颜色)
2020-11-19 09:54:47
216
原创 页面中将元素进行居中的几种方式
页面中将元素进行居中的几种方式1.文本居中.将盒子中的文本水平居中： text-algin:center 垂直居中：line-height= height2.div居中在父窗口中设置text-align:center，要注意的是，此方法只对内联元素起作用，所以要在居中的div中设置display:inline-block外边距可以让 单个块级盒子水平居中：1.盒子必须指定了宽高. 2.盒子左右边距都要设置为 auto..header{
2020-11-19 09:01:06
267
原创 CSS三大特性(层叠性,继承性,权重)
CSS三大特性1.层叠性前提：相同的选择器，设置相同的样式属性。原则：就近原则；2.继承性一般情况下：子元素可以继承父元素的 字体和文本相关的样式font- text- line-height color (宽高不能继承)行高的继承性body{font:12px/1.5 Microsoft YaHei}如果子元素没设置行高，则会继承父元素的行高为1.5此时子元素的行高是：当前元素的文字大小*1.5优势：子元素可以根据自己文字的大小自动调节行高3.
2020-11-18 15:19:58
132
2
原创 背景相关样式属性
背景相关样式属性背景色background-color: transparent;透明色背景图像background-image ：url();背景图像平铺background-repeat:no-repeat属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。背景定位background-position: center;1、
2020-11-18 15:17:36
170
原创 元素的显示模式(块元素,行内元素,行内块元素)
元素显示模式元素显示模式就是元素以什么 方式显示。块元素特点：独占一行；可以在样式里设置宽高，内外边距；宽度默认是父容器的100%； 可以装其他的块元素或行内元素。注意：文字类的元素内不能使用块元素。 例 p， 主要用于存放文字，里面不能放块级元素 如div。 h1-h6都是文字类块级标签，不能放其他块元素。块元素 div p h1-h6 ul li行内元素特点：一行可显示多个；高宽直接设置是无效的；默认宽度就是本身内容的宽度；
2020-11-18 14:58:47
266
原创 复合选择器
复合选择器多个基础选择器的组合后代选择器（重要）又称为包含选择器元素1 元素2 { 样式声明} /*选择的是元素1里面的所有元素2*/ ul li {样式声明} /*选择 ul 里面所有的 li 标签元素*/元素1 元素2{样式声明}元素1和元素2之间用空格隔开；元素1是父级，元素2是子级，最终选择的是子集；元素1 元素可以是任意的基础选择器。子元素选择器只能选择作为某元素的最近一级子元素元素1 > 元素2 {样式声明} /* 选择元素1里的所有直接后代元素2*/div
2020-11-18 14:41:40
91
1
原创 Emmet语法, 查阅文档
Emmet语法（了解）p#p01生成的是一个快速生成html语法骨架：英文!,tab键快速生成多个相同标签：tr*5父子集关系标签（>）：ul>li兄弟关系(+)：div+p（快速生成div标签和p标签）如果生成带有类名或者id名： .sex<div class="sex"></div>:自增符号例如“.demo:自增符号例如“.demo:自增符号例如“.demo*5”<div class="demo1"></div>&
2020-11-18 14:39:34
124
1
原创 字体属性 文本属性
字体属性（重点）font-family：“微软雅黑”； （字体）font-size：“16px”; 浏览器默认大小：16px （字号大小）font-weight：400代表正常；700代表加粗 （字体粗细）font-style：normal 默认正常；italic 斜体 （文字样式）字体复合属性：（顺序：swsf）font：font-style font-weight font-size/line-height font-family;font：ital
2020-11-18 14:37:17
348
原创 css基础选择器 ,引入样式
csscss简介：（ cascading style sheet ）作用：美化页面（html的标签元素）；布局页面；页面注释标签：/*注释内容 */（ctrl+/）css基础选择器作用：根据不同需求选中页面中需要更改样式的标签。（1）标签选择器：使用HTML的标签名称作为选择器。（2）类选择器：（可多个）在属性后添加class类名。<!--一个属性可以添加多个类名，用空格隔开--><p class="p_01 p_02"> 我有两个类名 </p>
2020-11-18 14:29:10
81
原创 a标签 img标签 特殊字符
链接a标签target:_blank 在新的选项卡打开链接分类：外部链接 加http:// 百度内部链接空链接 # 下载链接 href里是一个文件/压缩包网页元素链接 如文本、图像、表格、音频、视频等都可以添加超链接锚点链接：点击可以迅速定位到某一位置在href中 设置#名字1在目标位置 添加 id=“名字1” <h1 id="title">题目</h1> /*很多内容*/ <a href="#ti
2020-11-18 14:21:19
388
原创 html基础
开发前的三个概念:1.网站:有一定规则.使用HTML编写的网页的集合.2.网页:使用HTML标签编写的一个文件.3.HTML:超文本标记语言Web的标准1.结构HTML2.表现:CSS3.行为 javascript基本的HTML页面骨架<html><head> <title></title></head><body> </body></html>HTML常用标签无
2020-11-18 14:18:44
113
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人