2018年11月_H_Cisco

12月 11月 10月 08月 07月 06月 03月

原创 CSS3——手机端百度贴吧

做一个：前面有一个小logo，后=后面有一个小三角。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *

2018-11-24 16:41:57 6901 2

原创 CSS3——对其规则

对其规则：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; pad

2018-11-24 15:51:19 6844

原创 CSS3——span问题

Span问题：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; p

2018-11-24 15:49:17 7302

原创 CSS3——去掉图片之间的空格

元素一共就有三种：inline，inline-bolck，block，其中inline，inline-bolck都带有inline，凡是带有inline的元素都是文本类元素。文本有什么特点呢？比如现在有一堆文字，中间用很多个空格隔开，在浏览器中你会发现文字之间只有一个空格，因为空格表示的是文字分隔符，所以中间会有一个小的空隙。文本类元素也符合这个概念，比如<span>123&l...

2018-11-24 15:48:10 8931

原创 CSS3——淘宝留白

做一个淘宝的留白：当你在缩小浏览器页面的时候他的内容区并没有缩小，是留白的变小。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css&quo

2018-11-24 15:46:49 7202

原创 CSS3——元素嵌套规则

元素嵌套规则：行级元素只能嵌套行级元素，块级元素可以嵌套任何元素。Div里面可以加任何东西，但是span就只能加行级元素，行级元素嵌套行级元素很正常，行级元素本来空间就小，不可能嵌套块级元素，但是有个特殊的，p标签是块级元素，p标签里面套个div是不是无可厚非，就不行，这就是规定，P标签里面就是不能嵌套块级元素，咱写一写试试。<!DOCTYPE html>&lt...

2018-11-24 12:45:25 8105

转载如何让网页“看起来”展现地更快？骨架屏二三事

让网页展现的更快，官方说法叫做首屏绘制，First Paint 或者简称 FP，直白的说法叫做白屏时间，就是从输入 URL 到真的看到内容（不必可交互，那个叫 TTI, Time to Interactive）之间经历的时间。当然这个时间越短越好。但这里要注意，和首屏相关的除了 FP 还有两个指标，分别称为 FCP (First Contentful Paint，页面有效内容的绘制) 和...

2018-11-23 20:55:08 7189

原创 CSS3——在网速不好的情况下，如何让一个网站还可以用

第一种方法：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } a{ display: inline-block

2018-11-23 17:24:26 6975

原创 CSS3——给div设置背景图片

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 200px; height: 2

2018-11-19 17:43:53 29686

原创 CSS3——溢出容器，打点展示

溢出容器，打点展示：1.但行文本2.多行文本单行文本：三件套 white-space: nowrap;/* 强制不换行 */ overflow: hidden;/* 超过的部分隐藏 */ text-overflow: ellipsis;/* 打点展示 */<!DOCTYPE html><...

2018-11-19 17:43:01 7659

原创 CSS3——解决父级元素包裹子级元素的方法（伪元素+其他）

利用伪元素清除浮动：你要解决浮动的为题必须在父级的逻辑的后面加上一个p元素来清除浮动吧，你加完p元素之后破坏结构了，不好，咱相加，又不能加，就用伪元素最合适了吧！<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"&

2018-11-18 10:49:23 12314 2

原创 CSS3——伪元素

伪元素天生存在于任意元素里面，任意元素里面有两个特殊的伪元素，一个叫before一个叫after。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; paddi

2018-11-18 10:17:12 7562

原创 CSS3——浮动模型

咱们一共有三大模型，盒模型，层模型，浮动模型。浮动模型最恶心，就一条float:left/right;，你别看这一条，他能引发很多问题。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{

2018-11-18 09:53:36 7246

原创 CSS3——margin合并，塌陷与合并的总结

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } .demo1{ background-color: red;

2018-11-17 10:37:21 7790

原创 CSS3——垂直定位的小bug（margin塌陷）

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; width: 0; } .demo1{ /* margin-left: 100px;

2018-11-16 16:19:04 8607

原创 CSS3——两栏布局

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; width: 0; } .demo1{ height: 100px; width:

2018-11-16 16:11:58 8635

原创 CSS3——五元环

练习2：写出一个五元环，让这个五环在屏幕的正中间，永远居中。提示：.demo1{ height: 100px; width: 100px; border: 10px solid black; border-radius:/* 50%;设置四个角都是50%的圆角,他就会形成一个园 */ z-index: 1;/* 默认为0,值越大,他就越...

2018-11-15 14:01:54 8703

原创 CSS3网页定位技术（3）——fixed浮动定位

三：Position还有第三个值：fixedFixed和absolute差不多，有一点小的不同。你会发现一些广告的页面，无论你怎样滚动滑轮，广告是不东的。 <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"&a

2018-11-15 13:29:34 9480

原创 CSS3网页定位技术（2）——相对定位

二：position: relative;——相对定位<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } .demo{

2018-11-15 13:27:16 8498

原创 CSS3的网页定位技术（1）——绝对定位

一：position: absolute;——绝对定位div{ height: 100px; width: 100px; background-color: red; position: absolute; } ...

2018-11-15 13:21:02 9626 2

原创远视图

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> .demo6{ height: 10px; width: 10px; background-color: #fff; }

2018-11-15 13:18:11 10466

原创盒模型：

盒子模型是针对于HTML的每一个元素的，每一个元素咱们都可以把它叫做盒子，他都符合盒子模型的一个语法特点。盒子有三大部分：盒子壁 border内边距 padding盒子内容 width+height 盒子模型有四部分：margin+border+padding+(content=width+height)现在来一个盒子：div{ ...

2018-11-14 17:54:55 8454

原创 CSS初始化标签

自定义标签-标签选择器比如你在百度搜索的时候，你搜索的关键词会变红，他就是用em写的。所以用这样的方式咱们可以初始化很多标签。还比如ul和li出生的时候有大圆点，咱么可以通过ul{list-style:none;}把它去掉，他天生还带与padding和margin，你如果把他的padding和margin值都设成0，他的间距和空格就会全部没有了。这就叫做初始...

2018-11-13 21:19:10 9114

原创 css-企业团队开发技巧

在实际开发中，我们大多采用先定义功能再选配功能，而不是先写内容再写功能。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> .demo1{ height: 100px; width: 10

2018-11-12 11:23:38 8524

原创 css-淘宝网站——实现几张图片横排中间没有空隙

淘宝网站——实现几张图片横排中间没有空隙凡是带有inline的元素都有文字特性，有文字属性就该被分割。 1.<img src="1.jpg"> <img src="1.jpg"> <img src="1.jpg"> <img src="1.jpg">把img之间的

2018-11-12 11:21:52 9470 4

原创 css小技巧-元素分类、字体的样式、画三角形、光标样式

行级元素（span，strong，em，a，del）-内联元素Feature：内容决定元素所占位置不可以通过css改变宽高display:inline;2.块级元素（div,p,ul,li,ol,form,address）-块元素Feature：独占一行可以通过css改变宽高display:block;3.行级块元素 Featu...

2018-11-12 11:20:00 8601

原创 css权重

！important>行间样式>id>class或属性或伪类>标签选择器>通配符 infinity 1000 100 10 1 0 256进制父子选择器/派生选择器 <!DOCTYPE html><html> <head> ...

2018-11-10 21:28:59 4996

原创数组的常用方法(4)--es3.0:烧脑小练习

视频：https://ke.qq.com/course/231577?taid=3983676656552089练习23：给一个有序的数组乱序，而且每次的顺序还不一样。用sort（）排序，乱序也得用sort（）；Math.random()返回的是0-1之间的开区间的数。那要产生负数，怎么办？减一，减一不就减没了吗？减0.5是不是就完事了！ ...

2018-11-08 20:53:39 5361

原创数组的常用方法(3)--es3.0:sort

视频：https://ke.qq.com/course/231577?taid=3983676656552089Sort：排序现在是升序，我想降序怎么办呢？，reverse吧，这不就完事了。那现在看个例子：var arr = [1,3,5,4,10];//拍完顺序之后应该是1，3，4，5，10但是你看，怎么回事？他被你这个当成了字符，按ASCII排的，...

2018-11-07 09:53:03 4967

原创数组的常用方法(2)--es3.0:unshift，shift，reverse，splice与数组的负位

视频：https://ke.qq.com/course/231577?taid=3983676656552089unshift：他是往数组里面加东西的！！！而且还是在数组的前面开始加咱看看能不能和push那样加好几个进去。可以！现在怎么写呢？还和push一样？ var arr = [1,2,3]; Array.prototype....

2018-11-05 16:49:01 5861

原创数组的常用方法(1)--es3.0:push与pop

视频：https://ke.qq.com/course/231577?taid=3983676656552089数组的常用方法：---es3.0改变原数组push pop,shift,unshift,sort,reverse,splice不改变原数组Concat,joinàsplit,toString,slice补充：这样归类还不太好，应该分成es3.0，es5....

2018-11-04 10:16:01 1056