css
文章平均质量分 65
mintsolace
这个作者很懒,什么都没留下…
展开
-
Javascript——正则表达式的创建方式和边界符
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions正则表达式:用于匹配字符串中字符组合的模式。在Javascript中,正则表达式也是对象。通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。特原创 2020-08-28 10:42:37 · 376 阅读 · 0 评论 -
Javascript——事件对象和常用的鼠标事件
事件对象:event对象代表事件的状态,比如键盘按键的状态/鼠标的位置/鼠标按钮的状态事件发生后,跟事件相关的一系列信息数据的集合都放到这里,这对象就是事件对象event,有很多属性和方法。事件对象只有有了事件才会存在,是系统给我们自动创建的,不需要传递参数,当我们注册事件时,event对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)。事件对象是事件的一系列相关数据的集合,跟事件相关的,比如鼠标点击里面就包含了鼠标的相关信息,如果是键盘事件里面就包含键盘事件的信息,如判断用户按下了哪个原创 2020-08-22 19:03:48 · 356 阅读 · 0 评论 -
Javascript——冒泡排序和阻止事件冒泡
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。JS代码中只能执行捕获或者冒泡其中的一个阶段onclick和attachEvent只能得到冒泡阶段addEventListener(type,listener[, useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false(不写默认就是false),表示在事件冒泡阶段调用事件处理程序。DOM事件流三个阶段JS代码中只能执行捕获或者冒泡其中的一个阶段onclick和attachE原创 2020-08-21 20:07:18 · 660 阅读 · 0 评论 -
Javascript——<input>: 输入(表单输入)元素的type和样式属性
<label for="name">Name (4 to 8 characters):</label><input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">label { display: block; font: 1rem 'Fira Sans', sans-serif;}input,label {原创 2020-08-19 21:15:03 · 2066 阅读 · 0 评论 -
CSS——表格结构
使用表格布局时,可将表格划分为头部、主体和页脚(页脚有兼容性问题)。创建表格的基本格式:<table> <tr> <td>单元格内的文字</td> … </tr> …</table>table用于定义一个表格。tr用于定义表格中的一行,必须嵌套在table标签中,在table中包含几对tr,就有几...原创 2019-04-05 10:35:31 · 972 阅读 · 0 评论 -
CSS——常见属性和外部样式表(外链式)
嵌入式是将所有样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式:<head> <link href="CSS文件路径" type=“text/CSS” rel="stylesheet" /></head>该语法中,link标签需要放在head头部标签中,且必须指定link标签的...原创 2019-04-05 14:49:08 · 8807 阅读 · 0 评论 -
CSS——盒模型布局 | 圆角半径 | 盒子阴影
盒子模型布局稳定性何时使用内边距,何时使用外边距?大部分情况下可以混用,哪个方便用哪个。可以根据稳定性来分,建议:按照优先使用宽度(width)其次使用内边距(padding)再次外边距(margin)。原因:1.margin会有外边距合并还有ie6下面margin加倍的bug,所以最后使用。2.padding会影响盒子大小,需要进行加减计算(麻烦),所以其次使用。3.width没有...原创 2019-04-15 21:01:17 · 329 阅读 · 0 评论 -
CSS——margin的IE6兼容问题
*{ margin:0; padding: 0; } ul{ border: 1px solid #000; height:100px; list-style: none; } ul li{ float:left; width:120px; height:4...原创 2019-04-15 21:03:22 · 189 阅读 · 0 评论 -
CSS——浮动的三个性质
1.浮动元素脱标 <style type="text/css"> .box1{ float: left; width: 200px; height: 100px; background-color: yellowgreen; } .box2{ width: 400px; height: 400px; background-colo...原创 2019-04-15 22:01:29 · 272 阅读 · 0 评论 -
CSS——盒模型基本属性
盒模型width:内容的宽度,不是盒子的宽度height:内容的高度,不是盒子的高度padding:内边距border:边框margin:外边距 <style type="text/css"> div{ width: 200px; height: 200px; border:1px solid red; padding: 50px; } &...原创 2019-04-13 11:17:22 · 969 阅读 · 0 评论 -
CSS——高级属性
display设置或检索对象是否及如何显示。display: none隐藏对象,与它相反的是display:block 除了转换为块级元素之外,同时还有显示元素的意思。特点:隐藏之后不再保留位置。visibility设置或检索是否显示对象。visible:对象可视hidden:对象隐藏特点:隐藏之后继续保留原有位置。overflow检索或设置当对象的内容超过其指定高度及宽度时如...原创 2019-04-25 22:48:17 · 624 阅读 · 0 评论 -
CSS——Margin(外边距)| 宽高属性
外边距实现盒子居中必须是块级元素盒子必须指定宽度(width)给左右外边距都设置为auto就可使块级元素水平居中。如.header { width: 960px; margin: 0 auto; }文字盒子居中图片和背景区别1.文字水平居中是text-align: center2.盒子水平居中 左右margin改为auto如 text-align: center...原创 2019-04-14 22:12:54 · 558 阅读 · 0 评论 -
CSS——绝对定位
绝对定位比相对定位更灵活脱标绝对定位的盒子是脱离标准文档流的,所以所有的标准文档流的性质,绝对定位之后都不遵守了。绝对定位后,标签就不区分行内元素,块级元素了,不需要display: block;就可以设置宽高了。 span{ position: absolute; top: 100px; left: 100px; width: 100px; height: 100px;...原创 2019-04-22 21:03:55 · 188 阅读 · 0 评论 -
CSS——固定定位和Z-index值
固定定位就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。 .backtop{ position: fixed; width: 100px; height: 100px; background-color: gray; bottom: 100px; right: 30px; text-align: center; line-heig...原创 2019-04-22 21:08:22 · 1155 阅读 · 0 评论 -
CSS——精灵图 | 字体图标
本质:CSS精灵是一种处理网页背景图像的方式,将一个页面涉及到的所有零星背景图像都集中到一张大图中去,将大图应用于网页。这样当用户访问该页面时,只需向服务器发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图。使用:要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和ba...原创 2019-04-26 23:07:00 · 415 阅读 · 0 评论 -
扶朕起来,朕还能接着编!
HTML: HTML初步认识 HTML骨架及基本语法特性CSS: CSS——关于列表 CSS——div & span CSS——表单和input标签 CSS——常见属性和基础选择器 CSS——后代选择器 CSS——其他选择器(交集/并集/儿子/序) CSS——很多让p变红的方法 CSS——继承性和层叠性 CSS——关于继承性和层叠性的练习 CSS——important和盒...原创 2017-09-06 14:51:19 · 531 阅读 · 0 评论 -
CSS——相对定位
相对定位: position: relative; 绝对定位: position: absolute; 固定定位: position: fixed;相对定位 就是微调元素位置的。元素相对自己原来的位置,进行位置调整。 box2的相对定位: style type="text/css"> div{ width: 200px;原创 2017-11-13 21:42:27 · 871 阅读 · 0 评论 -
CSS——很多让p变红的方法
第一种情况——只有一个p标签:<body> <div id="wechat1" class="weixin1"> <div id="wechat2" class="weixin2"> <div id="wechat3" class="weixin3"> <p>Please make me red</p>原创 2017-09-13 21:47:51 · 1094 阅读 · 0 评论 -
CSS——关于继承性和层叠性的练习
1. <style type="text/css"> #haha .heiheihei p{ color:red; } div div #xixi p{ color:blue; } div.hahaha div.heiheihei div.xixixi p{原创 2017-09-14 16:30:15 · 646 阅读 · 0 评论 -
CSS——div & span
div: division,分割。div在浏览器中,默认是不会增加任何的效果改变的,但语义变了。div是一个容器级标签,里面什么都能放,甚至可以放div本身。div style="background-color: lightblue";> h2>金曲奖最佳作词嘻h2> h3>成名在望h3> p>那黑的终点可有光p> p>那夜的尽头可会亮p> p>那成名原创 2017-09-06 23:18:07 · 317 阅读 · 0 评论 -
CSS——important标记
important标记 style type="text/css"> p{ color:red; } #para1{ color:blue; } .spec{ color:green !important; } s原创 2017-09-14 18:44:47 · 693 阅读 · 0 评论 -
CSS——后代选择器
1.后代选择器: style type="text/css"> .div1 p{ color:red; } style>空格即表示后代,.div1 p就是.div1的后代的所有p,如下: style type="text/css"> .div1 p{ color:red; }原创 2017-09-12 15:19:02 · 702 阅读 · 0 评论 -
CSS——关于列表
无序列表:表示一个列表的语义,每个项目之间不分先后。 ul: unordered list; li: list item, 列表项。li不能单独存在,必须包裹在ul里。ul> li>芝士荔枝乌龙li> li>芝士茉莉绿妍li> li>桃乐粉粉优乐多li> li>满满红柚四季春li>ul> 错误示例:ul> h1>甜荟奶霜茶饮h1>原创 2017-09-06 16:16:56 · 457 阅读 · 0 评论 -
CSS——表单和input标签
表单:收集用户信息 div> h3>欢迎注册本站h3> form> p> 请输入您的姓名: input type="text" /> p> form> div>form标签里有action属性和method属性,act原创 2017-09-09 17:30:07 · 993 阅读 · 0 评论 -
CSS——基础选择器
CSS:cascading style sheet,层叠式样式表,即一个标签可以同时被多种选择器选择,标签选择器、id选择器、类选择器。这些选择器都可以选择上同一个标签,从而影响样式。常见属性:<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title原创 2017-09-10 22:21:53 · 352 阅读 · 0 评论 -
CSS——继承性和层叠性
继承性 有一些属性,当给自己设置的时候,自己的后代都继承上了,如color、text-开头的、line-开头的、font-开头的。 style type="text/css"> div{ color:blue; border: 2px solid red; } style>head>body>原创 2017-09-13 23:43:37 · 487 阅读 · 0 评论 -
CSS——Margin塌陷和盒子居中
margin的塌陷现象: 标准文档流中,竖直方向的margin不叠加,以较大的为准。 <style type="text/css"> *{ margin:0; padding:0; } .p1{ width:300px原创 2017-10-24 22:16:17 · 234 阅读 · 0 评论 -
CSS——background系列属性
关于颜色 1. 能够用英语单词来表述的颜色都是简单的颜色 2. 用rgb方法来表示: 光学显示器每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同颜色。 用逗号隔开, r, g, b的值,每个值的取值范围0~255,一共256个值。 如果此项值是255,就说明是纯色。原创 2017-10-30 22:37:16 · 1120 阅读 · 0 评论 -
CSS——行高和超链接
行高: CSS中所有的行,都有行高。盒模型padding不是直接作用在文字上的,而是作用在行上的。 文字是在自己的行里面居中的,比如文字字号是14px,行高是24px,那么文字上下的距离各为5px。 为了严格保证字在行里面居中,行高和字号一般都是偶数。这样它们的差就是偶数,能被2整除。单行文本垂直居中: 文本在行里面居中 公式:行高=盒子高,所以这行文本就在盒子里面垂直居中原创 2017-10-29 22:43:44 · 562 阅读 · 0 评论 -
CSS——标准文档流和浮动
web页面和photoshop等设计软件有本质区别,web页面的制作是个“流”,必须从上而下,而设计软件,想往哪里画都可以。标准流的微观现象: 1)空白折叠现象: 如果想让img标签之间没有空隙,必须紧密连接:<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />2)高矮不齐,底边对齐 3)自原创 2017-09-20 19:15:58 · 495 阅读 · 0 评论 -
CSS——浮动的清除
现在有两个div,div身上没有任何属性,每个div中都有li,这些li都是浮动的。 style type="text/css"> li{ float: left; width: 120px; height: 40px; margin-right: 10px;原创 2017-09-25 23:09:10 · 261 阅读 · 0 评论 -
CSS——其他选择器(交集/并集/儿子/序)
Pre 浏览器兼容问题: IE:微软的浏览器,随着操作系统安装的,所以每个window都有IE浏览器。 windows xp操作系统安装的IE6 windows vista操作系统安装的IE7 windows 7操作系统安装的IE8 windows 8操作系统安装的IE9 windows10操作系统安装的edge 一般来说IE6、7由于版本低级,经常存在浏览器的兼容问题。1.交原创 2017-09-13 00:22:12 · 497 阅读 · 0 评论