Avocado--CSDN博客

原创 2.8css3 新特性；结构伪类、伪元素选择器过渡

HTML5新特性HTML5新增的语义化标签：<header>：头部标签<nav> ：导航栏标签<article>：内容标签<section>：定义文档某个区域<aside>：侧边栏标签<footer>：尾部标签注意：语义化标签主要是针对搜索引擎的新标签在页面中可以使用多次在IE9中，需要把这些元素转换为块级元素移动端更喜欢使用这些标签HTML5新增多媒体标签：2....

2022-01-23 13:42:08 424

原创 2.7css精灵图字体图标三角用户界面样式布局技巧文字溢出省略号

精灵图（sprites）精灵图的目的：为了有效减少服务器接受和发送请求的次数，提高页面的加载速度background-position: x y;使用精灵图核心：精灵图技术针对背景图片使用。把多个小背景图片合到一张大图片中移动距离就是这个目标图片的x和y坐标，且精灵图一般都是负值（一般情况都是往左往上移动，所以数值是负值）使用精灵图时要精确测量每个小背景图片的大小和位置精灵图有诸多优点，但缺点很明显：图片文件还是较大图片本身放大和缩小会失真一旦图片制作完毕想要换非常

2022-01-23 13:41:01 204

原创 2.6css定位、网页布局总结、元素显示与隐藏

定位为什么需要定位？答：（1）浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子定位则可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子（例如：网页中的侧边栏即使滚动下拉页面也可以固定在可视窗口中）定位特殊特性：绝对定位和固定定位也和浮动类似。行内块元素添加绝对或者固定定位，可以直接设置高度和宽度块级元素添加绝对或者固定定位，若不给宽度或高度，默认大小为内容的大小绝对定位（固定定位）会完全压住盒子：浮动元素不同，只会压住它下面

2022-01-23 13:39:24 120

原创 2.5css ps切图、

PS切图常见的图片格式：jpg：产品类图片经常用jpg格式gif：可保存透明背景和动画效果，实际经常用于一些图片小动画效果png：如果想要切成背景透明的图片选择psd：对前端来说最大的优点是可以直接从上面复制文字获得图片，还可以测量大小和距离图层切图（1）用鼠标选中图层>右击图层>快速导出为PNG（2）合并图层再导出：选中需要的图层，图层菜单，合并图层（ctrl+e），在快速导出为PNG切片切图利用切片工具手动划出导出选中图片：文件菜单>...

2022-01-18 13:08:38 205

原创 2.4css圆角边框、阴影、浮动

圆角边框（重点）border-radius: length;（可以输入像素或百分比）radius：半径（圆的半径）如果是正方形想要设置成一个圆，把数值修改为高度的一半即可，或直接写为50%border-radius: 50%;如果要做一个圆角矩形，设置为高度的一半即可矩形高度 height：100px；border-radius：50px；该属性是简写属性，可跟四个值，分别为左上角、右上角、右下角、左下角（顺时针）分开写：border-top-l...

2022-01-18 13:07:02 417

原创 2.3css特性、权重、盒子模型、ps基本操作

CSS三大特性层叠性：样式冲突，遵循就近原则（哪个样式离结构近就执行哪个）、样式不冲突的不会层叠继承性：子元素可以继承父元素的样式（text，font-，line-，color属性）行高的继承性：body { font: 12px/1.5 Microsoft yahei ; }行高可以跟单位也可以不跟单位若子元素没有设置行高，则会继承父元素行高（12*1.5） body行高1.5 这样写的优势是子元素可以根据自己文字大小自动调整行高优先级：权重：优先级.

2022-01-18 13:06:07 229

原创 2.2css复合选择器、元素显示模式、背景

Emmet语法快速生成html结构语法div再tab键就可以生成<div></div> div*3再tab键就可以生成3个<div></div> 若有父子级关系的标签，如ul>li再tab 若有兄弟关系的标签，如div+p再tab 带有类名或者id名字的，如p.text或p#text再tab 若生成div类名是有顺序的，用自增符号$，如p.text$*3 若想在生成标签内部写内容可以用{}例：p.btn${我爱你}*3 再tab就会变

2022-01-18 13:04:58 120

原创 2.1css基础选择器、引入方式、字体文本样式、

CSS：css基础选择器可以理解为：选择器{样式}（给谁改样式{改什么样式}）例： p { color: red;font-size: 12px;}选择器：用于指定css样式的html标签{}花括号内：对该对象设置的具体样式，如字体大小、文本颜色等属性（选择器）和属性值（样式）以“键值对”的形式出现属性和属性值间用冒号（：）隔开，键值对之间用分号（；）隔开3、css代码风格：展开式（如上例）1、标签选择器：指用ht...

2022-01-18 13:03:56 227

原创 html表格、列表、表单

一、表格标签：（表格是用来展示数据的）<table></table>：用于定义表格的标签（ align：规定表格相对周围的对齐方式<可选left、center、right>border：规定表格单元是否有边框<1或0>cellpadding：规定文字与单元格之间的距离<默认1像素>cellspacing：规定单元格与单元格之间的距离<默认2像素>width：规定表格的宽度...

2022-01-18 13:01:07 194

原创 html链接、标签、字符

Web标准：包括结构、表现、行为三个方面结构：用于对网页元素进行整理和分类，现阶段主要学的是html表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS行为：指网页模型的定义及交互的编写，现阶段主要学Javascriptweb标准指出的最佳体验方案：结构、样式、行为相分离（结构写到html文件中，表现写到css文件中，行为写到JavaScript文件中）文字标签：标题标签：h1-h6段落标签：<p></p>...

2022-01-18 12:59:15 355

weixin_65223633的博客