HTML+CSS+JavaScript
结构+表现+交互
如何学习
css是什么css怎么用（快速入门）CSS选择器（重点+难点）美化网页（文字，阴影，超链接，列表，渐变…）盒子模型浮动定位网页动画（特效）Cascading Style Sheet 层叠样式表
CSS：表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
CSS1.0
CSS2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 浏览器兼容性~
style
基本入门
<head> <meta charset="UTF-8"> <title>Title</title> <!--规范，style可以写css代码，每一个声明，使用分号结尾。 语法： 选择器{ 声明1； 声明2； 声明3； } --> <style> h1{ color: #9932cc; } </style> </head> <body> <h1>我是标题</h1> </body>建议使用这种规范
CSS的优势：
内容和表现分离。网页结构表现统一，可以实现复用。样式十分的丰富。建议使用独立于html的css文件利用seo，容易被搜索引擎收录！Vue框架不易被搜索引擎收录！拓展：外部样式的两种写法
链接式：html
<link rel="stylesheet" href="css/style.css"> 导入式：@import 是css2.1特有的
<!--导入式--> <style> @import url("css/style.css"); </style>作用：选着页面上的某一个或者某一类元素
伪类：带冒号的，是伪类。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--避免使用类和id选择器--> <style> /*ul的第一个子元素*/ ul li:first-child { background: green; } /*ul的最后一个子元素*/ ul li:last-child { background: red; } /*选中p1,定位到父元素，选择当前第x个元素*/ /*nth-child:选中当前元素的父级元素，选择父级元素下的第x个元素， 并且是当前元素才生效(需要满足“第x个”和“p”两个条件)*/ p:nth-child(1) { background: darkorchid; } /*nth-of-type:选择父级元素下的第x个p元素*/ p:nth-of-type(2) { background: gold; } </style> </head> <body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>l1</li> <li>l2</li> <li>l3</li> </ul> </body> </html>id+class的结合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a { float: left; display: block; height: 50px; width: 50px; border-radius: 10px; background: blue; text-align: center; color: gainsboro; text-decoration: none; /*去除下滑线*/ margin-right: 5px; font: bold 20px/50px Arial; } /*存在id属性的元素 a[]{}*/ /*属性名，属性名=属性值（正则） =:绝对等于 *=：包含 ^=:以什么开头 $=:以什么结尾 */ a[id] { background: yellow; } /*id=first的元素*/ a[id=first] { background: aliceblue;/*淡青色*/ } /*class中有links的元素*/ a[class*="links"] { background: yellow; } /*选中href中以http开头的元素*/ a[href^=http] { background: deeppink;/*粉红色*/ } a[href$=pdf] { background: yellowgreen;/*黄绿色*/ } </style> </head> <body> <p class="demo"> <a href="http://www.baidu.com" class="links item first" id="first">1</a> <a href="" class="links item active" target="_blank" title="test">2</a> <a href="images/123.html" class="links item active">3</a> <a href="images/123.png" class="links item">4</a> <a href="images/123.jpg" class="links item">5</a> <a href="abc">6</a> <a href="/a.pdf">7</a> <a href="/abc.pdf">8</a> <a href="abc.doc">9</a> <a href="abcd.doc" class="links item last">10</a> </p> </body> </html>=:绝对等于 *=：包含 ^=:以什么开头 $=:以什么结尾
1、有效的传递页面信息。
2、美化网页，页面漂亮、才能吸引用户。
3、凸显页面的主题
4、提高用户的体验
span：标签：重点要突出的字，使用span标签套起来。
<head> <meta charset="UTF-8"> <title>Title</title> <style> #jyw { font-size: 50px; } </style> </head> <body> 欢迎学习<span id="jyw">java</span> </body>背景颜色
背景图片
<style> div{ width: 1000px; height: 700px; border: 1px solid red; background-image: url("images/timg.jpg"); /*默认是全部平铺的*/ } .div1{ /*行平铺*/ background-repeat: repeat-x; } .div2{ /*列平铺*/ background-repeat: repeat-y; } .div3{ /*不平铺*/ background-repeat: no-repeat; } </style>margin:外边距
padding：内边距
border：边框
盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容宽度
4个角
<style> /* border-radius:左上 右上 右下 左下，顺时针。 圆圈：圆角=半径 */ div { width: 100px; height: 100px; background-color: #e81717; border-radius: 50px 50px 50px 50px; } </style>块级元素：独占一行
h1~h6 p div 列表
行内元素：不独占一行
span a img strong
行内元素可以被包含在块级元素中
clear
/* clear:right;右侧不允许有浮动元素。 clear:left;左侧不允许有浮动元素。 clear:both;两侧不允许有浮动元素。 clear:none; */解决方案：
增加父级元素的高度~ #father{ border: 1px red solid; height: 800px; } 增加一个空的div标签，用于清除浮动 <div class="clear"></div> .clear { clear: both; margin: 0px; padding: 0px; } overfiow在父级元素中增加一个overflow: hidden;
#father { border: 1px red solid; overflow: hidden; } 父类添加一个伪类:after #father:after{ content: ''; display: block; clear: both; }小结：
浮动元素后面增加空div
简单，但是代码中尽量避免空div
设置父元素的高度
简单，元素有了固定的高度，就会被限制。
overflow
简单，下拉的一些场景避免使用。
父类添加一个伪类：after（推荐使用）
写法稍微复杂一点，但是没副作用，推荐使用。
方向不可以控制
float浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题。
相对定位： position: relative;
相对于原来位置，进行指定偏移。相对定位的话，它仍然在标准文档流中!原来的位置会被保留。
top: -20px; left: 20px; bottom: -10px; right: 20px;定位：基于xxx定位，上下左右。
没有父类元素定位的前提下，相对于浏览器定位。
假设父级元素存在定位，我们通常会相对于父级元素进行偏移。
父级元素存在定位时，在父级元素范围内移动。
相对于父级和浏览器位置，进行指定偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #27bf78; padding: 0; position: relative; } #first{ background-color: gainsboro; border: 1px dashed #1678e0; } #second{ background-color: wheat; border: 1px dashed #dc6e1a; position: absolute;/*绝对定位*/ left: 100px; } #third{ background-color: #efe1e1; border: 1px dashed #d90d5f; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>位置固定，移动滚动条时，固定定位的元素位置仍然不变。
<head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height:1000px ; border: 1px solid red; } /*绝对定位：此案例相对于浏览器*/ div:nth-of-type(1){ width: 100px; height: 100px; background: #e81717; position: absolute; right: 0; bottom: 0; } /*fixed固定定位.坐标原点固定，始终相对于浏览器窗口定位。 */ div:nth-of-type(2){ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body>图层
z-index:默认是0，最高无限
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="content"> <ul> <li><img src="images/bg.png" alt=""></li> <li class="tiptext">学习微服务，找狂神</li> <li class="tipBg"></li> <li>时间：2099-01-01</li> <li>地点：月球一号基地</li> </ul> </div> </body> </html> #content { width: 240px; padding: 0px; margin: 0px; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px #000 solid; } ul, li { padding: 0px; margin: 0px; list-style: none; } /*父级元素相对定位*/ #content ul{ position: relative; } /*父相子绝*/ .tiptext,.tipBg{ width: 240px; height: 25px; position: absolute; top:137px ; } .tiptext{ color: white; z-index: 999; } .tipBg{ background: black; opacity: 0.5;/*背景透明度*/ /*filter: alpha(opacity=50);*/ }