摘要: 目录盒模型代码简写颜色值缩写字体缩写盒模型代码简写还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:margin:10p... 阅读全文
posted @ 2018-11-21 22:37 strawqqhat 阅读(124) 评论(0) 推荐(0) 编辑
摘要: 目录 css布局模型流动模型(一)流动模型(二)浮动模型什么是层模型?层模型--绝对定位层模型--相对定位层模型--固定定位Relative与Absolute组合使用css布局模型清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。... 阅读全文
posted @ 2018-11-21 22:30 strawqqhat 阅读(81) 评论(0) 推荐(0) 编辑
摘要: 目录 元素分类元素分类--块级元素元素分类--内联元素元素分类--内联块状元素盒模型--边框(一)盒模型--边框(二)盒模型--宽度和高度盒模型--填充盒模型--边界元素分类在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种... 阅读全文
posted @ 2018-11-21 22:22 strawqqhat 阅读(138) 评论(0) 推荐(0) 编辑
摘要: 目录 文字排版--字体文字排版--字号、颜色文字排版--粗体文字排版--斜体文字排版--删除线段落排版--缩进段落排版--行间距(行高)段落排版--中文字间距、字母间距段落排版--对齐文字排版--字体我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。... 阅读全文
posted @ 2018-11-21 22:14 strawqqhat 阅读(95) 评论(0) 推荐(0) 编辑
摘要: 目录 继承特殊性层叠重要性继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元... 阅读全文
posted @ 2018-11-21 22:03 strawqqhat 阅读(104) 评论(0) 推荐(0) 编辑
摘要: 目录 什么是选择器?标签选择器 类选择器ID选择器类和ID选择器的区别子选择器包含(后代)选择器伪类选择符分组选择符什么是选择器?每一条css样式声明(定义)由两部分组成,形式如下:选择器{ 样式;}在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式... 阅读全文
posted @ 2018-11-21 21:57 strawqqhat 阅读(104) 评论(0) 推荐(0) 编辑
摘要: 设计链表的实现。您可以选择使用单链表或双链表。单链表中的节点应该具有两个属性:val 和 next。val 是当前节点的值,next 是指向下一个节点的指针/引用。如果要使用双向链表,则还需要一个属性 prev 以指示链表中的上一个节点。假设链表中的所有节点都是 0-... 阅读全文
posted @ 2018-11-21 16:37 strawqqhat 阅读(114) 评论(0) 推荐(0) 编辑
摘要: 给定一个字符串,你需要反转字符串中每个单词的字符顺序,同时仍保留空格和单词的初始顺序。示例 1:输入: "Let's take LeetCode contest"输出: "s'teL ekat edoCteeL tsetnoc" 注意:在字符串中,每个单词由单个空格分... 阅读全文
posted @ 2018-11-21 15:24 strawqqhat 阅读(91) 评论(0) 推荐(0) 编辑
摘要: 目录 内联式css样式,直接写在现有的HTML标签中嵌入式css样式,写在当前的文件中外部式css样式,写在单独的一个文件中三种方法的优先级内联式css样式,直接写在现有的HTML标签中CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种... 阅读全文
posted @ 2018-11-21 00:12 strawqqhat 阅读(132) 评论(0) 推荐(0) 编辑
摘要: 目录 认识CSS样式CSS样式的优势 CSS代码语法CSS注释代码任务认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。如下列代码:p{ fo... 阅读全文
posted @ 2018-11-21 00:08 strawqqhat 阅读(148) 评论(0) 推荐(0) 编辑
#home h1{ font-size:45px; } body{ background-image: url("放你的背景图链接"); background-position: initial; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-origin: initial; background-clip: initial; height:100%; width:100%; } #home{ opacity:0.7; } .wall{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; } div#midground{ background: url("https://i.postimg.cc/PP5GtGtM/midground.png"); z-index: -1; -webkit-animation: cc 200s linear infinite; -moz-animation: cc 200s linear infinite; -o-animation: cc 200s linear infinite; animation: cc 200s linear infinite; } div#foreground{ background: url("https://i.postimg.cc/z3jZZD1B/foreground.png"); z-index: -2; -webkit-animation: cc 253s linear infinite; -o-animation: cc 253s linear infinite; -moz-animation: cc 253s linear infinite; animation: cc 253s linear infinite; } div#top{ background: url("https://i.postimg.cc/PP5GtGtM/midground.png"); z-index: -4; -webkit-animation: da 200s linear infinite; -o-animation: da 200s linear infinite; animation: da 200s linear infinite; } @-webkit-keyframes cc { from{ background-position: 0 0; transform: translateY(10px); } to{ background-position: 600% 0; } } @-o-keyframes cc { from{ background-position: 0 0; transform: translateY(10px); } to{ background-position: 600% 0; } } @-moz-keyframes cc { from{ background-position: 0 0; transform: translateY(10px); } to{ background-position: 600% 0; } } @keyframes cc { 0%{ background-position: 0 0; } 100%{ background-position: 600% 0; } } @keyframes da { 0%{ background-position: 0 0; } 100%{ background-position: 0 600%; } } @-webkit-keyframes da { 0%{ background-position: 0 0; } 100%{ background-position: 0 600%; } } @-moz-keyframes da { 0%{ background-position: 0 0; } 100%{ background-position: 0 600%; } } @-ms-keyframes da { 0%{ background-position: 0 0; } 100%{ background-position: 0 600%; } }