![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML+CSS
绿皮德鲁伊
这个作者很懒,什么都没留下…
展开
-
前端笔记—从入门到坟墓[CSS][CSS盒子模型][7]
borderborder边框属性,以空格为分割可传入属性分别是:边框宽度,边框样式,边框颜色。border:5px solid red;border-style边框样式,属性:none无样式,solid实线,dashed虚线,dotted点线。border-style:solid;注:在table表格里,有一个特殊样式:border-collapse:collapse可以设置相邻的...原创 2018-10-11 11:23:45 · 141 阅读 · 0 评论 -
前端笔记—从入门到坟墓[mate标签做简单优化][12.2]
meta标签作用<meta>元素可提供有关页面的元信息(meta-information)具体作用1,针对搜索引擎添加描述页面的关键词。2,元数据不会显示在页面上,但机器是可读,它告诉机器该如何解析这个页面。3,可以添加服务器发送到浏览器的http头部内容(http-equiv)。4,标签始终位于 head 元素中。典型的情况是:meta 元素用于规定页面的描述、关键词、...原创 2019-01-15 11:47:25 · 149 阅读 · 0 评论 -
前端笔记—从入门到坟墓[CSS3][CSS3新增样式][16]
@import方式引入CSS文件在css文件内引入css文件可以使用@import方式,具体做法:@import url('./style.css');引入CSS的方法有两种,一种是@import,一种是link1,@import url('地址');2,<link href="地址" rel="stylesheet" type="text/css" /&a原创 2018-12-15 15:48:01 · 140 阅读 · 0 评论 -
前端笔记—从入门到坟墓[CSS][CSS继承性、background样式][6]
CSS 的继承性样式的继承性总结:CSS中可以和不可以继承的属性> 有继承性与文本有关的如颜色(color),字号,以text-、font-、line-开头的都可以继承。除上面外还有一些特殊的样式具有继承性:元素可见性(visibility)列表布局属性(list-style-type等)光标属性(cursor)页面样式属性(page、windows、orphans)> ...原创 2018-10-10 21:16:32 · 145 阅读 · 0 评论 -
前端笔记—从入门到坟墓[CSS][字体相关样式,display,行高][5]
调试工具谷歌浏览器自带调试工具,点击F12可以唤出。如图:详细使用教程:前端chrome浏览器调试总结chrome调试工具高级不完整使用指南(基础篇)字体相关样式font-size:设置字体大小,尽量设置为偶数,如:16px。font-family:设置字体。font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragi...原创 2018-10-10 16:48:56 · 267 阅读 · 0 评论 -
前端笔记—从入门到坟墓[CSS3][CSS3内减模式][15]
css与css3盒子模型对比css盒子模型盒子内容宽实际等于width+padding而css3盒子内容宽就等于width由于以上盒子模型的不同之处,所以衍生出两个模式原创 2018-10-19 15:01:14 · 457 阅读 · 0 评论 -
前端笔记—从入门到坟墓[CSS][选择器、伪类与伪元素][4]
CSS的使用CSS又称为层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。> 1 在标签内使用在标签内利用style(英译:样式;风格)属性直接可以设置css样式,如:<div style="col原创 2018-10-09 19:02:17 · 140 阅读 · 0 评论 -
前端笔记—从入门到坟墓[HTML][表格与表单][3]
值得一说的是,在进行html编写工作时为了方便和语义化,通常<i><em>标签会使用css样式去掉其倾斜样式,反而放一些特定的内原创 2018-10-09 14:34:52 · 213 阅读 · 0 评论 -
前端笔记—从入门到坟墓[HTML5][视频与音频引入][14]
插入视频方式1,利用优酷,腾讯视频,b站等各大视频网站平台,上传自己的视频。然后点击分享,复制带有iframe的标签粘贴的程序内,可实现视频插入。优点:减轻服务器负担,缺点:有广告用户体验不佳。2,第二个方法利用video标签。audio与video标签的属性autoplay如果出现该属性,则视频在就绪后马上播放。controls如果出现该属性,则向用户显示控件,比如播放按钮。h...原创 2018-10-18 19:48:43 · 182 阅读 · 0 评论 -
前端笔记—从入门到坟墓[HTML5][新增语义化标签与属性][13]
IE浏览器兼容性h5标签在ie浏览器上只兼容ie8以上版本(ie8不兼容)。所以为了兼容ie6-8浏览器,我们可以引入html5shiv.js。html5shiv.js是什么html5shiv.js下载地址引入方式:<!--[if lt IE 9]><script type="text/javascript" src="js/html5shiv.js"&原创 2018-10-18 15:10:25 · 266 阅读 · 0 评论 -
前端笔记—从入门到坟墓[HTML][标签学习][2]
常用标签值得一说的是,在进行html编写工作时为了方便和语义化,通常<i><em>标签会使用css样式去掉其倾斜样式,反而放一些特定的内容(如:图标文字)方便css与js的选择. &a原创 2018-10-08 19:17:10 · 142 阅读 · 0 评论 -
前端笔记—从入门到坟墓[HTML][知识准备][1]
原创 2018-10-08 17:56:02 · 152 阅读 · 0 评论 -
前端笔记—从入门到坟墓[网站基础与优化][12.1]
网站icon图标引入方式:<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"原创 2018-10-14 20:39:38 · 184 阅读 · 0 评论 -
前端笔记—从入门到坟墓[CSS][滑动门技术与字体图标][11]
滑动门门技术所谓滑动门技术就是利用背景图片的分割,实现不同内容长度下,按钮的可伸缩性。具体思路:根据文本自适应大小,我们可用两个独立的背景图像来创造它。一个在左边,一个在右边。把这两幅图像想象成两扇可滑动的门,它们滑到一起并交迭,占据一个较窄的空间;或者相互滑开,占据一个较宽的空间。所用图片:a{ height: 92px; line-height: 92px; ...原创 2018-10-14 09:33:37 · 166 阅读 · 0 评论 -
前端笔记—从入门到坟墓[CSS][精灵图与溢出样式][10]
css精灵图技术(Sprites)产生原因:网页上面的每张图片都要经历一次请求才能展示给用户,小的图标频繁的请求服务器,降低页面的加载速度,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,因此,产生了css精灵技术。CSS Sprites 的优点:原文链接1、减少图片的字节。2、减少了网页的http请求,从而大大的提高了页面的性能。3、解决了网页设计师在图片命名上的困扰...原创 2018-10-13 11:43:23 · 159 阅读 · 0 评论 -
前端笔记—从入门到坟墓[CSS][CSS定位][9]
定位模式position定位模式,属性:1,absolute生成绝对定位的元素,相对于有定位属性(static除外)以外的第一个父元素进行定位。2,fixed生成绝对定位的元素,相对于浏览器窗口进行定位。3,relative生成相对定位的元素,相对于其正常位置进行定位。4,static默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index...原创 2018-10-13 09:47:54 · 154 阅读 · 0 评论 -
前端笔记—从入门到坟墓[CSS][CSS浮动][8]
浮动特性1,浮动的盒子会影响下面盒子的布局。第一个盒子浮动,会对第二个盒子影响。第二个盒子会到第一个盒子下面去。浮动就是把自己脱离标准流,自己的位置没有了。2,浮动盒子如果用于布局,且对下面盒子不影响,可以嵌套一个父级盒子(不过父级元素需要清除浮动)。为什么清除浮动,如何清除?有的时候为了让子元素(设置浮动的元素)自动调整大小。父元素没有设置高度或宽度,这时父级元素会因为子元...原创 2018-10-11 16:22:10 · 144 阅读 · 0 评论 -
前端笔记—从入门到坟墓[CSS][垂直居中,display属性补充][5.1]
垂直居中1,使用display: table-cell此方式,只有一层元素时(.child元素)也可以居中,但无法设置对于屏幕的百分比,如果要设为相对于屏幕的百分比需要加入一个display: table的父级元素。 .parent{ display: table; width: 100%; height:200px; } ...原创 2019-01-31 13:26:23 · 261 阅读 · 0 评论