web前端
关注
分享
扫一扫
克罗地亚狂想曲
Human is great,because they can use fire
展开
-
CSS高级技巧（7）伸缩布局
伸缩布局1. 使用：display:flex;flex:2;/*可以自由设置占据份数*/min-width: 200px; /*限制宽度不被挤压太多*/max-width: 500px; /*限制最大宽度*/2. 排列方向：flex-direction: row; //默认水平flex-direction: row-reverse...原创 2020-04-30 19:30:16 · 365 阅读 · 0 评论 -
CSS高级技巧（6）动画 animation（单个动画 ，多组动画 ），画廊案例
<html><head> <style> div { width: 200px; height: 100px; background-color: pink; transition: all 0.5s; transform-origin: l...原创 2020-04-30 16:51:12 · 1339 阅读 · 0 评论 -
CSS高级技巧（5）2D 变形、3D变形、开门示例、硬币3D翻转示例
2D 变形 transform实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式配合过渡和其它动画，取代大量只能靠Flash才可实现的效果旋转：translate缩放：rotate倾斜：skew<html><head> <style> div { width: 200px; height:...原创 2020-04-30 14:43:00 · 505 阅读 · 0 评论 -
CSS高级技巧（4）鼠标经过显示边框； trasition动画
鼠标经过显示边框<html><head> <style> div { width: 296px; height: 180px; margin: 100px auto; background-color: gray; position: relative; ...原创 2020-04-29 18:55:01 · 734 阅读 · 0 评论 -
CSS高级技巧（3）css精灵技术（sprite）
css sprite概念一种处理网页背景图像的方式。将一个页面涉及到的所有零散背景图像都集中到一张大图中去，将大图应用于网页。这样，当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图就可以全部显示。这个大图称为精灵图。使用方法小的项目背景图很少，没必要啊使用精灵技术，背景图很多的情况可以使用使用定位取出图片background-image;background...原创 2020-04-29 16:07:27 · 188 阅读 · 0 评论 -
CSS高级技巧（2）溢出的文字隐藏
溢出的文字隐藏word-break 自动换行normal 默认break-all 允许单词内执行keep-all 只能在半角空格或连字符处换行white-space 用于强制一行显示内容normal默认nowrap 强制在同一行内显示所有文本，知道文本结束或者遭遇br标签才换行text-overflow 文字溢出text-...原创 2020-04-29 14:01:53 · 228 阅读 · 0 评论 -
CSS高级技巧（1）css用户界面样式
css用户界面样式鼠标样式cursorcursor : default 小白 | pointer 小手 | move 移动 | text 文本尽量不要用hand 因为火狐不支持 pointer le6以上都支持的尽量使用<ul> <li style="cursor:default">小白箭头</li> <li style...原创 2020-04-29 13:46:00 · 186 阅读 · 0 评论 -
web前端基础 （9）元素的显示与隐藏
元素的显示与隐藏三个常见属性display、visibility、overflowdisplay 显示display: none隐藏对象与它相反的是display:bloick 除了转换为块级元素，同时还有显示元素的意思特点：隐藏之后，不再保留位置visibility 可见性visibility: visible; //对象可见visibility: hidd...原创 2020-04-27 21:30:32 · 599 阅读 · 0 评论 -
web前端基础 （8）轮播图
<html> /* 边偏移+定位模式 组成定位布局 */ <head> <style> /* 清除不同浏览器默认属性*/ * { margin: 0; padding: 0; } .slider{ ...原创 2020-04-27 18:03:53 · 264 阅读 · 0 评论 -
web前端基础 （7）三种布局之--定位布局；元素的叠加顺序
元素的定位属性1.边偏移top | bottom | left | right |2.定位模式静态定位 | 相对定位 | 绝对定位 | 自动定位position： static | relative | absolute | fixedstatic:静态定位(默认的)网页中所有元素都默认是静态定位，也就是标准流的特性无法通过边偏移属性来改变元素的位置...原创 2020-04-27 18:27:57 · 605 阅读 · 0 评论 -
web前端基础 （6）三种布局----标准流，浮动
三种布局1.普通流（normal flow）默认的布局块级元素自上而下显示行内元素同行显示2.浮动（float）2.1 概念3个参数float： left; (默认)float： right;float： none;1. 浮动可以用来做文字环绕效果2.浮动可以让多个div同一行显示3.浮动脱离标准流，不占位置，会影响标准流，浮动只...原创 2020-04-27 14:09:10 · 690 阅读 · 0 评论 -
web前端基础 （5）CSS3 盒子(box)模型，盒子阴影
CSS3盒模型CSS3可以通过box-sizing 来指定盒子模型box-sizing: content-box; //（默认的）盒子大小为 width + padding + border；box-sizing: border-box;盒子大小为 width； padding 和border 包含在width中，自动调整<style l...原创 2020-04-25 14:40:03 · 493 阅读 · 0 评论 -
web前端基础 （4）css复合选择器
交集选择器2个选择器组成，第一个为标签选择器，第二个为类选择器，2个选择器之间不能有空格，如： div1.classname/* */<head> <style> .test1 { color: red; } p.test1 { /* 只选择同时包含的标签，也就是标签5 */ font-...原创 2020-04-23 13:20:16 · 226 阅读 · 0 评论 -
web前端基础 （3）background； 凹凸文字效果; 示例； 调用外部样式表; block/inline/blockinline的特点
背景相关属性-background/* */<head> <style> body { background-color: #000; background-image: url(images/1.jpg); background-repeat: no-repe...原创 2020-04-23 00:07:29 · 229 阅读 · 0 评论 -
web前端基础 （2）css布局：border，内外边距， image，规则，display，类、伪类、伪元素选择器
1.盒子边框border，内外边距，image背景图片和插入图片border: border-widthborder: border-styleborder: border-color//其中border-stylenone: 无边框。默认的solid: 边框单实线（最常用）dashed: 边框虚线dotted: 点线double: 双实线//圆角border-ra...原创 2020-04-22 23:21:31 · 358 阅读 · 0 评论 -
web前端基础 （1） css字体，外观属性，权重优先级规则
1.几个css常用的css属性box-sizing:border-box; 让组件自动减速box的宽高，写宽高的时候不计算item之间border的宽高，如下：（不加这个属性，就需要计算时减去border的宽度，写成：width:49%）<style lang="scss" scoped > .recommend_wrap { display: flex; f...原创 2020-04-22 14:44:50 · 1000 阅读 · 0 评论