1.文件整理：css+fonts+images+js+…；结构html样式css行为js分离；
2.做注释ctrl+/ ：<!--
-->;css注释：/* */
文章创建于解析
<!DOCTYPE html>
<!-- 第一行代码对当前文档做了一个文档类型的声明。当前是一个html5的文档；---必须要有； -->
<html lang="en">
<!-- HTML开始标签，根标签文档由此开始，默认语言属性是英文“en” -->
<head>
<!-- 开始标签用来对当前文档做辅助性的设置和说明 -->
<meta charset="UTF-8">
<!-- 元信息标签用来做辅助说明的多功能标签 -->
<meta name = "viewport" content="width=device-width,initial-scale = 1.0">
<!-- 元信息设置 设置当前文档的视窗，视口；宽度直接等于浏览此窗口的宽度，初始缩放比例为一
做自适应。响应式网站开发而定-->
<meta http-equiv="X-UA-Compatible" content = "ie=edge">
<!-- edge浏览器内核，设置浏览器当前文档兼容处理方式，支持最新内核，采用最新内核解析渲染当前页面 -->
<title>网页文档</title>
<!-- 部署当前文档标题。必须设置 -->
</head>
<body>
<!-- 主题标签。存放浏览器窗口中看到的元素 -->
</body>
3.html是静态语言，直接浏览器解析；一种符号两种标签；三个组成，属性名，标签和值；
新文件单页面布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>一篇好玩的新闻</title>
</head>
<body>
<header>头部导航栏内容</header>
<aside>左边侧边栏内容</aside>
<article>
<header>
<h1>老师留作业让孵小鸡，家长崩溃称“闻所未闻”</h1>
人民日报
<time> 发布时间：03-1416:35人民日报社</time>
</header>
<p>近日，有网友爆料称，杭州某小学四年级老师布置了一项奇葩的科学实践作业——在家孵小鸡。学生要每天进行观察记录、拍照，最终出一张记录表，写下总结，不完成就得不到相应的学分，而且学分值相当大。</p>
<p> 对此作业，不少家长表示不解，实在不能明白这位科学老师的奇葩想法，孵小鸡？用什么孵？孵蛋机器每家去买一台？被窝里孵？受精蛋哪里去买？每天照蛋，你知道蛋会被照死吗？大难不死的出来了怎么处置？养着还是直接弄死？ 真是孵不出来愁，孵出来更愁。
实践是对的，为什么不能全班一起观察呢？一台机器足够了。非要折腾我们这些家长，用意何在？养个蚂蚁，蜗牛，蚕宝宝也就罢了，孵鸡真是闻所未闻。
面对这位家长的疑问，网友们也看不下去了：
“这不切实际啊”</p>
<img src="image/d9b1e7e5fd4b86c2f82d17d56327f219.jpg" alt = "图片1">
</article>
<aside>右边内容</aside>
<footer>下面内容</footer>
</body>
</html>
3.css样式：行间样式，内联，外链；优先级：行间>内联>外链(就近原则)；
外链：,先做外部链接在做内部管理；
4.css选择符：标签选择符，ID选择符(#)唯一性,类选择符（.）自定义的类别归纳。
优先级：id>class>tag;
①通配选择符：*;所有的；*{ margin: 0; padding: 0; }
消除标签默认的内外边距；
②后代选择符：div p a{ }；样式仅仅作用于最后一个对象；
③子代选择符:div>p{};对应父级的子级；
④群组选择符：a，b，c；
⑤指定选择符:标签名.class类名；
5.选择符优先级；权重值；
通配选择符：0；标签选择符：1；class类选择符：10；id选择符：100； ！important:绝对优先；
6.css盒模型
从外到里：margin外边距,border边框,padding内边距,content;
盒子：</div/>:节点，box，块；</section/>:很大的article区域；
盒模型计算的两种模式：
标准模式：content-box;怪异模式：border-box;
标准：宽高代表盒子模型content区域；
怪异：定义box-sizing：border-box;直接定义盒子最终大小，然后自动计算定义content区域大小；
7.css取值及单位
可用于任何html元素上的任何css属性。
inherit:继承值：指定css属性从父级对象的对应属性继承值；
initial:初始值：指定css属性为最初的默认值；
auto:自动，自定义；
none：无；
bottom：底部
%的参照对象是父级；
相对单位：vw:viewport width = 视口宽度；//基准宽度的定义随着页面缩小放大。
vh:viewport height = 视口高度；参照对象为viewport；
em:倍数，参照对象为当前的字号尺寸（font-size）;
rem:root em:根元素倍数参照对象为根标签< html>的字号尺寸（font-size）;
min-width:最小宽度；
盒子居中：margin：0 auto;//主体内容横向居中处理代码；上下边距0，左右自动。
圆角边框：border-radius:10px;
8.css布局基础类型：
display的基础类型：
block:块元素，盒模型属性直接适用，独占一行（该元素前后的其他内容都要换行）；//< div>< /div>，常见块元素：< div>< section>< header >< article>< footer> < aside>< nav>< h1>-< h6>< p> < ul> < ol>< dl> < li>
inline：行间元素：超级链接< a href>,部分和模型属性失效,width无效，转换成填充内容决定；转化成块状：display:block;常见行元素：< span>< a>< b>粗体< i>斜体< strong>< em>
inline-block:行间块元素：在一行中呈现块状显示效果；搜索框，下拉菜单，音频文件；< img>< video>< input>< select>< textarea>
inline-block布局的缝隙处理：缝隙是由换行引起的，解决：对inline-block的父级对象设定字号控制【font-size=0】,对inline-block元素自身重新设定字号；
9.float浮动的原理及特点：①浮动元素脱离默认文档流，漂浮在文档流之上；
②浮动元素并不受默认文档流的限制，直接适用于盒模型。
③浮动元素是以父级元素或同级元素的相对浮动方向为参考方向进行对齐排列；
④浮动元素虽然脱离默认文档流，但是仍然会对文档流中的内容造成影响。
10.图文环绕：图片向左float，margin设置；box-shadow加阴影；
11.clear:清除浮动清楚父级浮动clear：both；全部清除，不去考虑前者的浮动方向；
clear清除浮动应用，主要可以用来解决浮动布局中，父级对象高度“塌陷”的问题；
元素浮动后，就不在整个文档流的管辖范围。那么他之前存在在父级元素内的高度就随着浮动不复存在了，而此时父级元素会默认自己里面没有任何内容，这个现象叫做“父级塌陷”；
在父级元素内部创建一个新的元素，用来使用clear清楚属性消除浮动的影响，可以解决塌陷问题；
常用解决父级塌陷：创建一个用来清除浮动的css样式（.clearfix）,针对包裹的全是浮动的元素的父级容器使用（.clearfix）；为容器创建一个处于最末尾的伪元素，伪元素设置clear清楚属来消除浮动元素的影响；
.clearfix::after{
content:"";
display:block;
clear:both;
}
13.浮动导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel = "stylesheet" href = "123.css">
</head>
<body>
<nav>
<div>
<a href="">首页</a>
<a href="">点点</a>
<a href="">手打</a>
<a href="">爱的</a>
<a href="">是否</a>
<a href="">佛山</a>
<a href="">阿达</a>
<a href="">啊啊</a>
<a href="">浮动</a>
</div>
</nav>
</body>
</html>
*{
margin: 0;
padding: 0;
}
nav{
background-color: rgb(255,67,67);
color:white;
height: 42px;
}
nav a{
float: left;
color: white;
height: 42px;
line-height: 42px;
border-left: 1px solid rgba(255,255,255,.3);
border-right: 1px solid rgba(0,0,0,.2);
font-size: initial;
box-sizing: border-box;
padding: 0 20px;
text-align: center;
}
nav div{
margin :0 auto;
width:1200px;
}
14.页面布局；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel = "stylesheet" href = "123.css">
</head>
<body>
<div class="box">
<div class="menu">menu</div>
<div class="header">header</div>
<div class="content">content</div>
<div class="sidebar">sidebar</div>
<div class="footer">footer</div>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
.box{
width: 1200px;
margin: 30px auto;
}
.menu{
height: 25px;
background-color: red;
text-align: center;
}
.header{
height: 120px;
background-color: blue;
text-align: center;
}
.content{
height: 320px;
background-color: green;
float: left;
width: 70%;
}
.sidebar{
height: 320px;
background-color: yellow;
float: left;
width:30%;
}
.footer{
clear:both;
background-color: orange;
width: 1200px;
}
全屏布局
*{
padding:0px;
margin: 0px;
}
div{
width: 100vw;
height: 100vh;//利用视口参照单位实现；
overflow: hidden;//若文字溢出设置此属性
background-color: bisque;
}
一列居中
*{
padding:0px;
margin: 0px;
}
div{
width: 800px;
min-height: 200px;
margin: 0 auto;
background-color: bisque;
}
两列布局:一列定宽加一列自适应，定宽列在前；
*{
padding:0px;
margin: 0px;
}
aside{
width: 400px;
float: left;
height: 500px;
background-color: bisque
}
div{
height: 700px;
background-color:aqua;
margin-left: 400px;//左侧推移。
}
两列布局自适应在前，定宽在后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel = "stylesheet" href = "123.css">
</head>
<body>
<div>
<section>maincontent</section>
</div>
<aside></aside>
</body>
</html>
*{
padding:0px;
margin: 0px;
}
div{
float:left;
/* background-color: aquamarine; */
height: 300px;
width: 100%;
padding-right: 300px;
box-sizing: border-box;
}
aside{
float: left;
background-color: bisque;
height: 200px;
width: 300px;
margin-left:-300px;
/* 当margin值为-100%时，为左定宽右自适应； */
}
div section{
background-color:darkgreen;
height: 400px;
}
//两列都需要浮动起来脱离文档流；
自适应主体区需要设定宽度：100%；
自适应的边栏区实现margin负值的操作，使其往上推移一行；
自适应主体区在确保总宽度为100%时（box-sizing的转换），设置内部padding来控制内容呈现的区域；
三列布局
①定宽列在前，自适应列在后；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel = "stylesheet" href = "123.css">
</head>
<body>
<aside class="left">left</aside>
<aside class="right">right</aside>
<div class="main">main</div>
</body>
</html>
*{
padding:0px;
margin: 0px;
}
.left,.right{
width:200px;
background-color: antiquewhite;
height: 300px;
}
.right{
float: right;
background-color: aqua
}
.main{
min-height: 400px;
background-color: brown;
margin-left: 200px;
margin-right: 200px;
}
.left{
float: left;
}
②自适应列在前，定快列在后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel = "stylesheet" href = "123.css">
</head>
<body>
<aside class="main">
<section>main</section>
</aside>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
*{
padding:0px;
margin: 0px;
}
.main{
height: 200px;
/* background-color: aqua; */
float: left;
width: 100%;
box-sizing: border-box;
padding: 0 200px;
}
.main section{
background-color: black;
min-height: 300px;
}
.left{
height: 100px;
background-color: bisque;
width: 200px;
float: left;
margin-left: -100%;
}
.right{
height: 100px;
background-color: blueviolet;
width: 200px;
float: left;
margin-left: -200px;
}
15.border-radius:四个值：左上，右上，右下，左下；
三个值：左上，右上左下，右下；
两个值：左上右下，右上左下；