02 2021 档案
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> body, div, ul, li { margin: 0; padding: 0; } #header, #nav, #content-main, #content-2,
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #header, #nav, #content-main, #content-2, #content-3, #content-4, #content-5, #content
阅读全文
摘要：页面大致分为： 一、页头（header）、导航栏（nav）、内容（content）、页脚（footer） 页面宽度： 一般有960px、1000px、1200px 页面布局雏形练习： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
阅读全文
摘要：浮动，就是使元素脱离标准流，移动到其父元素指定的位置的过程，包括float: left float: right； 浮动只对后面的块元素有影响，不会影响到前面的块以及本身，但是块级元素对前后都产生影响 浮动常见的问题： 1.浮动的子元素无法超出父元素的范围； <head> <style type="
阅读全文
摘要：<style type="text/css"> div { width: 200px; height: 200px; /*水平阴影（必选） 垂直阴影（必选） 模糊距离 阴影尺寸 阴影颜色*/ /*box-shadow: 5px 5px 5px 5px #ccc;*/ } div:hover { bo
阅读全文
摘要：当宽度没有设定的时候，padding不会撑开宽度； 当高度没有设定的时候，padding不会撑开高度； <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #fate
阅读全文
摘要：当子级设置margin-top时，父级也会随着子级设置的margin-top下沉 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
阅读全文
摘要：当两个盒子都设置margin的时候，两个盒子的真实距离，是两个盒子的margin中最大的那个，而不是两个盒子的margin之和; 不要给两个盒子同时设定margin，把margin的值设定到一个盒子上；要不只设置div1的margin-bottom，要不只设置div2的margin-top <hea
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 这种方式效率更高 */ body, div { margin: 0; padding: 0; } body>
阅读全文
摘要：<head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; } div { /*width和height是指盒子中东西的实际大小*/ width: 150px; height: 150px;
阅读全文
摘要：设置顺序依次是上、右、下、左； 举例：margin: 50px 100px 200px 250px;
阅读全文
摘要：/* padding也是上右下左四个方向 */ /* 覆盖写法 */ /* padding: 5px; padding-left: 1px; */ /* 一次性给出四个方向的设定 */ padding: 5px 5px 5px 1px; 练习： <head> <style type="text/cs
阅读全文
摘要：边框宽度： border-width 边框样式： border-style:none,solid,dashed,dotted 边框颜色： border-color 圆角： border-radius，单位可以是百分比，也可以是px 举例：border-radius:50%; border-radiu
阅读全文
摘要：只请求一次图片加载，然后通过控制图片的background-position来获得想要的样式效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
阅读全文
摘要：背景颜色： background-color 备注：除了可以用十六进制数表示以外，还可以用rgb以及rgba形式来表示，其中第四个参数alpha表示透明度，并且小数点前的0可以省略不写。 背景图片： background-image: url(图片路径); 平铺模式： no-repeat:不平铺；
阅读全文
摘要：CSS冲突：两个选择器针对同一个元素，设定同一个CSS属性 一、CSS层叠性： 两个选择器选到了同一个元素，并且对同一个CSS属性进行设定，那么后定义的CSS属性将覆盖先前定义的属性； 如果是针对不同的CSS属性进行设定，互不影响； 如果有些CSS属性冲突，有些不冲突，那么冲突的层叠，不冲突的互不影
阅读全文
摘要：一、格式规范： 1.选择器和后面的“{”之间要有一个空格； 2.属性名和“：”之间没有空格，“：”和属性值之间有一个空格，结尾有“；”，且无空格分隔； 二、选择器规范： 3.当选择器是并集选择器时，每个并集选择器独占一行； 4.后代/子代选择器不建议超过5层，在能达到选择并且层数可控的条件下，优先使
阅读全文
摘要：[]：放入元素的属性名以及属性值，属性值不需要加双引号或者单引号； {}：放入元素对应的内容 ()*数字：按数字重复展示多遍 >：表示子级 举例： div[id=nav]>(a[href=#]{测试菜单})*6，然后按tab键 输出的代码为： <div id="nav"> <a href="#">测
阅读全文
摘要：显示模式共三种：block、inline、inline-block； 第一种：block（块级元素）： 常见块级元素：div、h1-h6、p、ul、ol、li，其中div元素经常被当做布局元素使用 块级元素的特点： 所有的块级元素自己占用一行，无论宽度是多少； 块级元素可以设定宽度（width）和高
阅读全文
摘要：伪类选择器： 一、链接伪类选择器： <style type="text/css"> body{ font-size:18px; } /*没有访问过得标签：初始状态下字体颜色是黑色*/ a:link { color: black; } /* 访问过的标签: 点击过后字体颜色变成蓝色 */ a:visi
阅读全文
摘要：一、后代选择器： 用空格分隔 二、子代选择器： 用大于号分隔 备注：后代选择器和子代选择器可以混合起来使用 三、交集选择器： 直接把选择器拼接在一起，中间无空格以及其他字符 备注：必须满足所有拼接的选择器，样式才可以生效 举例： <style type = "text/css"> .red { co
阅读全文
摘要：水平方向： text-align：设定内容在盒子中的对齐方式(即块级元素中的行内元素居中的方式) left，center，right 垂直方向： line-height：设定行高，一般来说，比字体大7/8px 文字居中： 水平方向： text-align： center 垂直方向： line-hei
阅读全文
摘要：颜色的三种表示方式： 1.名称：red，green，pink 2.十六进制数来表示：RGB（red红色，green绿色，blue蓝色） 2.1.三位十六进制数：0-9，a-f 红色：#f00, 绿色：#0f0, 黑色：#000, 白色：#fff 2.2 六位十六进制数： #ff0000 #00ff0
阅读全文
摘要：一、字体大小：font-size xx-small、large、单位：px(像素)、em(字体高的整数倍)、% 二、字体集： font-family 1，字体的名字里可以有中文、特殊字符，字体的名字需要用双引号包裹； 2，在一个font-family中可以设定多个字体，并且需要用逗号分隔； 举例：
阅读全文
摘要：清除内外边距的原因：不同的浏览器默认的内外边距是不一样的 <style type="text/css"> /*第一种：把所有的元素都列出来， 这种方式效率更高 */ body, div { margin: 0; padding: 0; } /*第二种：用*号代表所有的元素都默认清除内外边距*/ *
阅读全文
摘要：选择器：一种规则，用于将一类标记选择出来，然后对这些标记使用样式(style) 选择器{属性名：属性值；属性名：属性值；...} 一、标签选择器： 标签选择器：标签名，多个标签的话，之间可以用逗号分隔开。 div { color: #F00; font-size: 45px; background-
阅读全文
摘要：一、行内样式： style="属性名：属性值；属性名：属性值" 二、内部样式表，写在head中： <head> <style type="text/css"> div { color: #f00; font-size: 45px; background-ccolor: #000; } p { col
阅读全文
摘要：action:如果点击了submit按钮，浏览器会向服务器发送请求，action就是请求的页面。如果action为空，那么就是还是请求刚刚的页面 method:get/post get:把form中的控件的参数，用 ?<name>=<value>&<name>=<value> post:把form中
阅读全文
摘要：标题标记：h1-h6 段落标记：p 水平线标记：hr 换行标记：br 布局标记：div (独立一行) span（不独立一行） 文本格式化标记： strong-b,em-i,del-s,ins-u 图像标记：img-属性：src alt title width height border 链接标记：a
阅读全文
摘要：空格：&nbps; 小于号：< 大于号：> &：&
阅读全文
摘要：压缩的内容： 删除注释、空格和换行； 删除多余的分号； 删除空的CSS样式 压缩的工具： 第一种：命令行工具-YUI Compressor： 1.安装jdk环境，jdk下载地址：https://www.oracle.com/java/technologies/javase-jdk15-downloa
阅读全文
摘要：1.Class的用法 class Person{ constructor(name, age){ this.name = name; this.age = age; } say(words){ console.log(`${this.name} is saying ${words}.`); } }
阅读全文
浙公网安备 33010602011771号