HTML&&CSS
浅笑0104
只有足够努力,才能看起来毫不费力
展开
-
HTML5语义化标签
HTML5语义化标签原创 2020-12-09 17:47:59 · 176 阅读 · 0 评论 -
使用百度地图api制作地图名片
http://api.map.baidu.com/mapCard/setInformation.html制作地图名片原创 2020-08-04 15:11:06 · 458 阅读 · 0 评论 -
psd设计图转换为css的box-shadow
h-shadow = 距离 * cos(180 - Angle)h-shadow = 距离 * cos (180 - Angle)spread = 扩展 * 大小blur = 大小 - spreadcolor = rgba (a显示透明度)原创 2020-08-04 13:39:12 · 344 阅读 · 0 评论 -
CSS基础知识汇总{主要内容:多背景及背景尺寸}
一、多背景多背景写法:背景尺寸: 设置背景图片的大小◆通过background-size设置背景图片的大小◆background-size的取值:✔可以设置具体值✔可以设置一个值,另外一个默认代表auto✔可以设置预定义的值 cover将背景图片按照缩放比例,将整个父容器沾满✔可以设置预定的值 contain将背景图片按照缩放比例,将整个背景图片完整的显示到容器中。二、...原创 2020-04-03 19:10:12 · 225 阅读 · 0 评论 -
CSS基础知识汇总{主要内容:过渡、位移、旋转、缩放}
一、过渡(transition) /* 设置过渡的属性 */ transition-property: width,height;/* 设置过渡的时间 */transition-duration: 1s; /* 设置过渡的类型 为匀速*/ transition-timing-function: linear; /* 设置延时效果 */transition-delay: 2s;/*...原创 2020-04-03 17:37:47 · 364 阅读 · 0 评论 -
CSS基础知识汇总{主要内容:精灵图、滑动门、web字体、图标字体}
一、精灵图精灵图作用: ◆用来设置背景图片的。◆提高网页加载速度步骤:◆先将精灵图作为背景图片设置给容器◆通过background-position 移动精灵图的位置备注:◆精灵图移动的位置是依据图片的横坐标和纵坐标来的◆在设置坐标值的时候,记住需要设置为负数。二、滑动门☞作用: 使用滑动门制作网页导航。☞注意事项:◆滑动门导航必须使用背景图片◆滑动门导航不能设置固定宽度...原创 2020-04-02 22:01:09 · 224 阅读 · 1 评论 -
CSS基础知识汇总{主要内容:定位及特点}
一、定位定位的分类:◆静态定位◆绝对定位【重点】◆相对定位【重点】◆固定定位静态定位:position: static;如果我们希望使用静态定位改变元素位置,是实现不了的。【静态定位无法改变元素位置】,因为静态定位的元素和标准流的元素默认显示方式是一样的。【静态定位元素就是标准流的元素】绝对定位:position:absolute;特点:绝对定位的元素也是脱标的元素(不占位置)...原创 2020-04-01 17:20:31 · 359 阅读 · 0 评论 -
CSS基础知识汇总{主要内容:浮动特点,网页布局,清除浮动}
一、box-sizingbox-sizing有两个值:当给一个盒子设置box-sizing: border-box;的时候,那么当前这个盒子的实际大小就是我们设置的宽度和高度的大小。当给一个盒子设置box-sizing: content-box的时候,那么当前这个盒子的实际大小=盒子的内容区域(宽度和高度)+边框+内边距。二、浮动浮动的使用:如果要实现图片和文字环绕的效果,我们给图片设...原创 2020-03-30 18:34:23 · 159 阅读 · 0 评论 -
CSS基础知识汇总{主要内容:行高的定义、盒子模型}
一、行高line-height的定义及使用行高指的是两行文字两条基线之间的距离行高的作用:1、让文字垂直居中(只要设置文字的行高值=当前文字所在容器的高度)2、可以通过行高调整文字上下的间距(具体的使用测量还没待学习,后续更新)二、盒子模型1、边框(border)border-color: 设置边框颜色border-style: 设置边框样式的(none 默认没有边框、sol...原创 2020-03-26 16:45:09 · 256 阅读 · 0 评论 -
CSS基础知识汇总{主要内容: 元素的模式分类,CSS特性}
1、palcehoder的兼容性问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...原创 2020-03-22 22:14:47 · 295 阅读 · 0 评论 -
CSS基础知识汇总{主要内容: CSS语法结构,类选择器,后代选择器,交集选择器等}
1、CSS的作用: 通过css达到美化网页的效果2、选择器:✔ 基础选择器(重点)◆标签选择器(重点学习)◆类选择器(重点学习)◆ID选择器◆通配符选择器✔ 复合选择器(重点)◆后代选择器(重点)◆子代选择器◆伪类选择器(重点)◆并集选择器(重点)◆标签指定式选择器(重点)类选择器示例:类选择器特点注意事项:◆不能使用数字定义类名◆不能使用特殊字符定义类名(%,/...原创 2020-03-14 21:08:44 · 601 阅读 · 0 评论 -
HTML知识汇总
1、html的作用是用来制作网页(PC端和移动端),其中移动端又分为安卓和ios。2、组成网页的规范:结构标准(html)、表现标准(css)、行为标准(js)。3、浏览器:主流的浏览器有谷歌(内核是blink)、火狐(内核是gecko)、IE高版本(内核是trident)、苹果(内核是webkit)、欧鹏(内核是presto)。世界范围内以上浏览器的使用频率更高,都有属于自己的内核,内核即...原创 2020-03-14 16:01:08 · 129 阅读 · 0 评论 -
HTML5新增标签及新增属性
一、 HTML5出现及与之前版本的异同点HTML5是2008年出现的!+ TAB生成html5的框架结构<!DOCTYPE html> //文档类型写法<meta charset="UTF-8"> //字符集写法二、HTML5新增标签具体的HTML5新增标签的学习可以在www.w3cschool.com.cn中学习常见的HTML5新增标签如下:<h...原创 2020-02-02 20:31:55 · 425 阅读 · 1 评论 -
字蛛的使用总结—用于网页中需要使用特殊字体的情况
一、第一步在找字网中找出自己需要的字体并下载发现下载的字体文件的格式为otf二、第二步使用工具对字体文件进行转换使用这个FontCreator软件可以将字体文件转换为ttf文件三、第三部在自己的项目中建立一个文件夹font将ttf格式的字体文件放到font文件夹中1、下载字蛛 全局安装npm install font-spider -g2、安装完毕 检查是否安装成功fon...原创 2019-07-03 22:45:56 · 222 阅读 · 0 评论