我发现不知道些什么的根本原因是啥都不会，我就把这几天看的腾讯课堂（老师讲的是真滴好，我吹爆）的东西总结一下好了，感觉和大佬比起来真是蠢的不行，不管了反正我就是咸鱼( >﹏<。)～
一开始不知道怎么插代码块，看了看教程，牛逼啊Markdown,不愧是pj大佬提到的东西
html中的常用标签
1.强行打出空格和左右尖括号
是空格，<和>是左右尖括号
2.顺序列表的写法
<ol type="1" start="3" reversed="reversed">
<!-- 用数字排序，从三开始，倒序 -->
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ol>
3.A
2.B
1.C
0.D
3.给图片加链接
<a href="https://www.baidu.com" target="_blank">
<!-- 在一个空白标签页中打开百度 -->
<img src="abc.jpg" style="width: 200px" title="彭于晏" alt="这是彭于晏">
<!-- 图片的绝对/相对路径是abc，宽200px，鼠标移上去显示彭于晏，出错时显示这是彭于晏 -->
</a>
4.固定位置不动的导航栏
<div id="demo1" style="width: 100px;height: 100px;background-color: red">demo1</div>
<div id="demo2" style="width: 100px;height: 100px;background-color: green">demo2</div>
<!-- 两个100*100有各自id的块块 -->
<a style="position: fixed; display: block; bottom: 100px; right: 100px;
/*固定位置（距屏幕底部100px，右边100px），块级元素*/
border: 1px solid black; height: 50px;
/*有1px的黑边，高50px，宽200px，背景颜色#fcc，点击后跳转到id为demo1的元素*/
width: 200px; background-color: #fcc" href="#demo1">find demo1</a>
<a style="position: fixed; display: block; bottom: 150px; right: 100px;
/*固定位置（距屏幕底部150px，右边100px），也就是在find demo1的上面*/
border: 1px solid black; height: 50px;
width: 200px; background-color: #ffc" href="#demo2">find demo2</a>
5.a标签中加js
<a href="javascript:while(1){alert('让你点')}">点我啊</a>
<!-- 不断弹框让你点 -->
小扩展：name属性与id属性的不同
6.实现输入框空白时的提示
<p>
username： <input type="text" name="username" value="请输入用户名" style="color: #999"
onfocus="if (this.value=='请输入用户名') {this.value='';this.style.color='#000'} "
<!-- 输入框获得焦点，如果有提示，删除提示恢复正常字体颜色 -->
onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"
<!-- 输入框失去焦点，如果还是空白，显示提示，修改字体颜色 -->
>
</p>
7.单选与复选
<form method="get" action="">
1.apple <input type="checkbox" name="fruit" value="apple" checked="checked">
<!-- 复选，默认选中苹果 -->
2.orange<input type="checkbox" name="fruit" value="orange">
3.banana<input type="checkbox" name="fruit" value="banana">
<br>
<input type="submit" value="提交">
</form>
将type改为radio变为单选
点击提交后：
8.下拉菜单
<form method="get" action="">
<select name="province">
<option >tainjin</option>
<option >shanghai</option>
<option >beijing</option>
</select>
<input type="submit" value="提交">
</form>
点击提交后：
css
1.引入css文件
<head>
<meta charset="utf-8">
<title>document</title>
<link rel="stylesheet" type="text/css" href="lesson1.css">
</head>
2.各种选择器
<body>
<div id="only">1</div>
<div class="demo demo1">2</div>
<span>3</span>
</body>
#only{
background-color: gray;
/*让id为only的元素背景变灰*/
}
.demo1{
background-color: black;
/*让class为demo1的元素背景变黑*/
}
.demo2{
color: #fff;
/*让class为only的元素内容变白*/
}
span{
background: yellow;
/*让标签为span的元素背景变黄*/
}
*{
background: blue;
/*让所有的标签背景变蓝*/
}
[href='www.baidu.com']{
/*属性值等于选择器，为带有某种属性（href），且属性值是www.baidu.com（代表具体值）的所有元素设置样式*/
}
div em{
/*后代选择器，选择<div>元素内部的所有<em>元素。*/
}
div >em{
/*子元素选择器，选择父元素为<div>元素的所有<em>元素。*/
}
div,em{
/*选择所有<div>元素和所有<em>元素。*/
}
3.行高与缩进
<div >弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小，相对所指的是相对于元素父元素的font-size
</div>
div{
text-align:left;
/*左对齐，text-align属性指定元素文本的水平对齐方式*/
border:1px solid black;
height: 50px;
line-height: 25px;
/*每行字的高度25px，line-height属性设置行间的距离（行高）*/
text-indent: 2em;
/*将段落的第一行缩进2em，text-indent 属性规定文本块中首行文本的缩进。*/
}
4.模仿a标签
<span>www.baidu.com</span>
span{
/*长的特殊的标签只是预置了css样式*/
text-decoration: underline;
/*下划线*/
color: -webkit-link;
/*链接的蓝色*/
cursor: pointer;
/*鼠标挪上去的变化*/
}
5.行级元素和块级元素
inline和inline-block又叫文本类元素，具有文本的特点
<img src="css.jpg">
<img src="css.jpg">
<img src="css.jpg">
<img src="css.jpg">
莫名地有空隙
inline-block能被文字分割符（空格，回车）分割，去掉回车后就正常了
<span>123</span>
span{
width: 100px;
height: 100px;
background-color: red;
}
行级元素不可设置宽高
但是在样式中加上
position: absolute;
或者
float: left/right;
元素会在内部被转换成inline-block，就可以设置宽高了
6.盒子模型和远视图
<div class="wrapper">
<div class="box">
<div class="content">
<div class="content1"></div>
</div>
</div>
</div>
.content1{
width: 10px;
height: 10px;
background-color: #fff;
}
.content{
width: 10px;
height: 10px;
padding: 10px;
background-color: #000;
}
.box{
width: 30px;
/*padding四周都有，所以大小增加20px*/
height: 30px;
padding: 10px;
background-color: #fff;
}
.wrapper{
width: 50px;
height: 50px;
padding: 10px;
background-color: #000;
}
7.两种定位方式与两栏布局
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
<div class="right"></div>
<div class="left"></div>
*{
margin:0;
/*body标签自带8px的margin需要去除*/
padding:0;
}
.right{
position: absolute;
/*absolute脱离原来的位置（正常后面出生的的元素“看不见”会顶上来）相对于自己出生的位置定位*/
width: 100px;
height: 100px;
right: 0;
background-color: #fcc;
}
.left{
position: relative;
height: 100px;
background-color: #123;
margin-right: 100px
/*margin-right 属性设置元素的右外边距*/
opacity: 0.5;
/*opacity 属性设置元素的透明度*/
}
8.浮动元素
(1):
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
</div>
.wrapper{
width: 300px;
height: 300px;
border: 1px solid black;
}
.content{
float: left;
color: #fff;
background-color: black;
width: 100px;
height: 100px;
}
(2):用伪元素清除浮动流
<span>B</span>
span::before{
content: "A"
}
span::after{
content: "C"
}
在(1)中css样式中加上
.wrapper::after{
content: "";
clear: both;
display: block;
}
/*加上浮动自动变为block元素*/
清除浮动流，.warpper就可以不设置height了
9.单行打点多行截断
<p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
p{
height: 25px;
width: 300px;
border: 1px solid black;
white-space: nowrap;
/*超出部分不换行*/
overflow: hidden;
/*超出部分隐藏*/
text-overflow: ellipsis;
/*文字超出部分（最后半个字）变为...*/
}
p{
height: 50px;
line-height: 25px;
/*两行*/
width: 300px;
border: 1px solid black;
overflow: hidden;
}
10.背景图片
<div></div>
div{
height: 200px;
width: 200px;
border: 1px solid black;
background-image: url(css.jpg);
background-size: 100px 100px;
background-repeat: no-repeat;
/*不要平铺*/
background-position: center center;
}
无法加载css的时候显示文字：
<a href="https://www.taobao.com" target="_blank">淘宝网</a>
a{
display: inline-block;
height: 0;
width: 200px;
background-image: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png) ;
background-size: 200px 100px;
padding-top: 100px;
/*padding中可以有背景图片，但是不能有内容*/
overflow: hidden;
/*隐藏挤出去的文字*/
}
11.自适应的留白
<div class="wrapper">
<div class="content"></div>
</div>
.wrapper{
height: 30px;
background-color: black;
}
.content{
margin: 0 auto;
/*宽度自我调节*/
height: 30px;
width: 800px;
background-color: green;
}
淘宝导航栏
<ul class="nav">
<li class="list-item">
<a href="">天猫</a>
</li>
<li class="list-item">
<a href="">聚划算</a>
</li>
<li class="list-item">
<a href="">天猫超市</a>
</li>
</ul>
*{
margin: 0;
padding: 0;
color: #424242;
font-family: arial;
/*默认字体与颜色*/
}
a{
text-decoration: none;
/*去除a标签的下划线*/
}
.nav{
list-style: none;
/*去除无序表的圆点*/
}
.nav .list-item{
float: left;
/*从左到右排列*/
margin: 0 10px;
/*外边距，左右留出10px空隙*/
height: 30px;
line-height: 30px;
/*行高要等于元素高度*/
}
.nav::after{
clear: both;
content: "";
display: inline-block;
/*去浮动流*/
}
.nav .list-item a{
color: #f40;
padding: 0 10px;
/*内边距，左右突出10px用于圆角*/
border-radius: 20px;
/*边框变圆*/
font-weight: bold;
/*字体加粗*/
display: inline-block;
/*inline-block既不会独占一行，又能设置宽高*/
}
.nav .list-item a:hover{
/*伪类选择器，当鼠标移上去时设置颜色变化*/
background-color: #f40;
color: #fff;
}
居中的五环
<div class="plat">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
*{
padding: 0;
margin: 0;
}
.circle1,.circle2,.circle3,.circle4,.circle5{
position: absolute;
height: 100px;
width: 100px;
border-radius: 50%;
/*50%时变成正圆*/
border:10px solid black;
}
.circle1{
left: 130px;
top: 0px;
border-color: blue;
z-index: 1;
/*用z轴坐标让circle1显示在上面*/
}
.circle2{
left: 260px;
top: 0px;
border-color: green;
}
.circle3{
left: 65px;
top: 55px;
border-color: red;
}
.circle4{
left: 195px;
top: 55px;
border-color: yellow;
}
.plat{
width: 380px;
height: 180px;
/*border:10px solid black;*/
position: absolute;
left:50%;
top:50%;
margin-top:-90px;
margin-left:-190px;
/*用absolute和left、top50%实现左上角居中，再用margin向左上调整半个身位*/
}
