![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
x
奋斗的小菇凉
这个作者很懒,什么都没留下…
展开
-
HTML5/CSS3-03
目录HTML5 第三天一、 认识 3D 转换3D 的特点三维坐标系二、3D 转换3D 转换知识要点3D 移动 translate3d语法代码演示三、透视 perspective知识点讲解知识要点代码演示四、 translateZtranslateZ 与 perspecitve 的区别五、3D 旋转rotateX语法代码案例六、3D 旋转 rotateY七、 3D 旋转 rotateZ八、3D 呈现 transform-sty原创 2020-08-13 17:18:28 · 130 阅读 · 0 评论 -
HTML5/CSS3-02
目录HTML5 第二天一、rotate使用步骤:案例代码二、三角二、设置元素旋转中心点(transform-origin)transform-origin 基础语法重要知识点三、旋转中心案例四、2D 转换之 scale五、图片放大案例六、分页按钮案例七、 2D 转换综合写法以及顺序问题八、 动画(animation)九、动画序列十、动画常见属性十一、 动画简写方式十二、速度曲线细节十三、案例1.奔跑的熊大2.阴阳师动画行.原创 2020-08-13 10:38:43 · 212 阅读 · 1 评论 -
HTML5/CSS3
目录HTML5一、什么是 HTML5HTML5 的概念与定义HTML5 拓展了哪些内容HTML5 的现状二、HTML5 新增标签什么是语义化新增了那些语义化标签使用语义化标签的注意三、多媒体音频标签多媒体标签有两个,分别是audio 标签说明audio 支持的音频格式audio 的参数5、audio 代码演示四、多媒体视频标签video 视频标签语法格式video 参数video 代码演示多媒体标签总结五、新增 inpu原创 2020-08-13 09:29:28 · 289 阅读 · 0 评论 -
CSS综合案例-品优购电商04
目录1. 品优购项目(四)1). 详情页 detail.html 常用单词2). 面包屑导航3). 产品介绍 模块4). 预览区域制作3.1 preview_list 制作5). 产品详细信息区域制作 itemInfo_wrap6). 产品细节模块 product_detail6.1) aside 布局6.2) detail 布局7.详情页代码8. 注册页面 register8.1 registerarea布局9.注册页代码1. 品优购项目(.原创 2020-08-12 17:45:59 · 1720 阅读 · 0 评论 -
CSS综合案例-品优购电商03
目录品优购项目(三)1. 首页制作1). 楼层区 floor2). 家用电器模块3). box-hd 模块4). box-bd 模块5). 侧边栏 fixedtool 制作6). 知识点 -过渡(CSS3)2. 列表页制作1). 列表页准备工作2). 列表页 header 和 nav 修改3). 列表页主体盒子 sk _container4). sk_goods 布局5). 分页制作 page6). 知识点 -获得焦点元素3.综合代码1.f原创 2020-08-12 11:38:26 · 367 阅读 · 0 评论 -
CSS综合案例-品优购电商02
目录品优购项目(二)1. 品优购首页布局1). nav 导航栏制作2). footer 底部制作3). mod_service 服务模块制作4). main 主体模块制作5). newsflash 新闻快报模块6). news 新闻模块7). lifeservice 生活服务模块8). recommend 推荐模块2.综合代码index.htmlbase.csscommon.cssindex.css品优购项目(二)目标: 能课堂跟上p原创 2020-08-12 10:29:23 · 567 阅读 · 0 评论 -
CSS综合案例-品优购电商01
目录品优购项目(一)1. 品优购项目介绍2. 项目背景3. 设计目标4. 几点思考5. 代码规范6. 前期准备工作目录文件夹样式文件的分类7. 网站ico图标1). 使用ico图标2). 制作ico图标8. 网站优化三大标签9. 字体图标1. 字体图标优点2. 字体图标使用流程3. 设计字体图标4. 上传生成字体包5. 下载兼容字体包6. 字体引入到HTML7. 追加字体图标拓展@ 常见字体格式10. 品优购首页布局原创 2020-08-11 10:57:27 · 473 阅读 · 0 评论 -
CSS-07
目录CSS高级技巧1. 元素的显示与隐藏1.1 display 显示(重点)1.2 visibility 可见性 (了解)1.3 overflow 溢出(重点)1.4 显示与隐藏总结2. CSS用户界面样式2.1 鼠标样式cursor2.2 轮廓线 outline2.3 防止拖拽文本域resize2.4 用户界面样式总结3. vertical-align 垂直对齐3.1 图片、表单和文字对齐3.2 去除图片底侧空白缝隙4. 溢出的文字省略号显示原创 2020-08-11 07:43:44 · 311 阅读 · 0 评论 -
CSS-06
目录定位(position)目标1. CSS 布局的三种机制2. 为什么使用定位3. 定位详解3.1 边偏移3.2 定位模式 (position)3.2.1 静态定位(static) - 了解3.2.1 相对定位(relative) - 重要3.2.3 绝对定位(absolute) - 重要3.2.4 固定定位(fixed) - 重要4. 定位(position)的案例4.1 哈根达斯4.2 仿新浪头部和广告5. 定位(position)的扩展原创 2020-08-10 22:57:28 · 116 阅读 · 0 评论 -
CSS-05
目录1. 学成在线页面制作目标1.1 前期准备素材1.2 前期准备工作1.2 CSS属性书写顺序(重点)1.3 布局流程1.4 页面制作2. chrome调试工具2.1 怎样打开Chrome的开发者工具?chrome调试数值3.学成在线网页案例1. 学成在线页面制作目标 理解 能够说写单页面我们基本的流程 能说出常见的css初始化语句 能说出我们CSS属性书写顺序 应用 能利用ps切原创 2020-08-10 22:03:04 · 102 阅读 · 0 评论 -
CSS-04
目录1. 浮动(float)目标1.1 CSS 布局的三种机制1.2 为什么需要浮动?1.3 什么是浮动(float)1.4 浮动(float)小结1.5 浮动(float)的应用(重要)1.6 浮动(float)的扩展2. 清除浮动2.1 为什么要清除浮动2.2 清除浮动本质2.3 清除浮动的方法2.4 清除浮动总结pink 的秘密3. Photoshop 切图1). PS切片工具2). 切图插件4.案例1.导航栏案例2.原创 2020-08-10 17:05:04 · 111 阅读 · 0 评论 -
CSS-03
目录盒子模型(CSS重点)1.看透网页布局的本质2. 盒子模型(Box Model)3. 盒子边框(border)3.1 边框综合设置3.2 盒子边框写法总结表3.3 表格的细线边框4. 内边距(padding)4.1 内边距:4.2 设置4.3 课堂案例: 新浪导航4.4 内盒尺寸计算(元素实际大小)4.5 内边距产生的问题4.6 padding不影响盒子大小情况5. 外边距(margin)5.1 外边距5.2 设置:5.3 块级盒子原创 2020-08-10 16:26:57 · 82 阅读 · 0 评论 -
CSS-02
目录1. CSS复合选择器1.1 后代选择器(重点)1.2 子元素选择器1.3 交集选择器1.4 并集选择器(重点)1.5 链接伪类选择器(重点)1.6 复合选择器总结2. 标签显示模式(display)重点2.1 什么是标签显示模式2.2 块级元素(block-level)2.3 行内元素(inline-level)2.4 行内块元素(inline-block)2.5 三种模式总结区别2.6 标签显示模式转换 display3. 行高那些事(li原创 2020-08-10 11:40:26 · 184 阅读 · 0 评论 -
CSS-01
引入CSS样式表4.1 行内式(内联样式) 概念: 称行内样式、行间样式. 是通过标签的style属性来设置元素的样式 其基本语法格式如下: <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>实际上任何HTML标签都拥有style属性,用来设置行内式。 案例: <div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱&l原创 2020-08-10 10:52:19 · 239 阅读 · 0 评论 -
css综合
外部样式<link rel="stylesheet" href="">rel:指定资源跟页面的关系href:资源的地址CSS背景样式background-color:背景颜色background-image:背景图片(URL背景地址,默认水平垂直都铺满背景图)background-repeat:背景图片的平铺方式(repeat-x、repeat-y、repeat、no-repeat)background-positon:背景图片位置(x y)=>(数字[px/%] |原创 2020-07-31 09:41:18 · 60 阅读 · 0 评论 -
图片光影一闪而过
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>光影效果</title> <style> body{ background-color: #ccc; } .box{ position: relative; margin: 50px auto; width: 400px; height..转载 2020-07-30 18:05:26 · 76 阅读 · 0 评论 -
鼠标经过--图片切换
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图片切换</title> <style> *{ padding: 0px; margin: 0px; } body{ background-color:gainsboro; margin: 20px; } #box{ wi.原创 2020-07-30 17:52:45 · 121 阅读 · 0 评论 -
图片翻书效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>纯CSS3制作一个简单好看的翻书效果</title><link rel="stylesheet" href="css/style.css"></head><body class="mkeBody"><div class="mkeHeadBox"&g.原创 2020-07-30 17:37:03 · 175 阅读 · 0 评论 -
表单居中 与自适应图片背景图
表单居中:form本来就只是一个表单而已,对页面根本就没有布局上的作用.,因此无论怎么设置都是无法居中的,但是依旧有办法解决的;解决办法:在外面套一层<divstyle="width:100%;text-align:center"></div>自适应图片背景图:<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/.原创 2020-07-30 16:44:36 · 372 阅读 · 0 评论 -
动态背景用户登录
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态背景登录</title> <link rel="stylesheet" href="css/style.css"></head><body><!--背景--><div class="wel" id="back.原创 2020-07-30 16:26:16 · 191 阅读 · 0 评论 -
表单注册登录切换
<!DOCTYPE html><html><head><title>登录注册表单切换</title><meta name="viewport" content="width=device-width, initial-scale=1" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type=.原创 2020-07-30 11:18:06 · 505 阅读 · 1 评论 -
黑色二级导航菜单
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3黑色二级导航菜单</t.原创 2020-07-30 10:56:46 · 863 阅读 · 0 评论 -
垂直时间轴
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5+CSS3响应式垂直时间轴</title><link rel="stylesheet" href="style.css" /><st.原创 2020-07-30 10:45:07 · 349 阅读 · 0 评论 -
3D立方体旋转相册
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>萤火虫</title> <style> body{ background: black; width: 100%; height: 100%; overflow: hidden; }#wrap{ width:140px; height: 200px; margi.原创 2020-07-30 10:22:10 · 143 阅读 · 0 评论 -
图片阴影
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片阴影</title> <style> /*-webkit-box-reflect来做倒影: box-reflect属性值有:dirrection-方向:above向上,below向下,left向左,right向右。 offset距离:可以是数值,也可以是百分比:.原创 2020-07-30 10:16:24 · 54 阅读 · 0 评论 -
多面体
<!DOCTYPE html><html><head><title>多面体</title><style type="text/css">html, body {height: 100%;margin: 0;background:url(img/1.jpg) 450px 20px no-repeat;background-size: 500px 330px;-webkit-box-reflect: below 16p.原创 2020-07-30 10:14:18 · 139 阅读 · 0 评论