1.一个有具体功能的完整网页，一般由三部分组成
HTML
网页具体内容和结构CSS
网页的样式（美化网页最重要的一块）JavaScript
网页的交互效果，比如用户对鼠标事件作出响应
学习网站：一个不错的网页学习网站
2.HTML常见标签
Snip20170727_6.png
- 演示：
Snip20170727_7.png
- 运行效果图
Snip20170727_9.png
3.CSS的编写格式是键值对形式的，比如：
color: red;
background-color: blue;
font-size: 20px;
4.CSS的三种书写形式
Snip20170727_11.png
5.CSS-选择器
Snip20170727_13.png
Snip20170727_14.png
Snip20170727_15.png
Snip20170727_16.png
Snip20170727_17.png
Snip20170727_18.png
Snip20170727_19.png
Snip20170727_20.png
Snip20170727_21.png
Snip20170727_22.png
Snip20170727_23.png
Snip20170727_25.png
Snip20170727_26.png
6.选择器优先级
Snip20170727_27.png
Snip20170727_29.png
7.HTML标签类型
Snip20170727_31.png
8.经常用到的属性
Snip20170727_38.png
- PS.块级标签可以修改宽度和高度，但是行内标签不能修改宽度和高度，其宽度和高度有其内部的内容决定。但是inline-block既可以显示在同一行，也可以设置宽度和高度。
9.CSS属性：
Snip20170727_40.png
Snip20170727_43.png
Snip20170727_45.png
10.盒子模型
Snip20170727_49.png
Snip20170727_50.png
Snip20170727_51.png
- 如果是块级元素，可以通过 margin: auto;来设置其居中显示，如果不是块级元素而是行内元素，可以通过设置其父元素的text-align: center;使其居中显示。img是非块级元素。
12.百度实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="CSS/index.css">
</head>
<body>
<div class="content">
<div class="logo">
</div>
<div class="nav">
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#" class="active">贴吧</a></li>
<li><a href="#">知道</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">百科</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">文库</a></li>
<li><a href="#">更多》》</a></li>
</ul>
</div>
<div class="search">
<input>
<button>百度一下</button>
</div>
</div>
</body>
</html>
index.css
body{
background-image: url("../Images/bg.jpg");
background-size: 100% 750px;
}
.content{
background-color: cadetblue;
width: 700px;
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto 0;
}
.content .logo{
text-align: center;
}
.content .logo img{
width: 270px;
height: 129px;
}
.content .nav ul{
list-style: none;
text-align: center;
}
.content .nav ul li{
display: inline;
}
.content .nav ul li a{
color: white;
font-size: 16px;
margin-right: 5px;
margin-left: 5px;
}
.content .nav ul li a.active{
text-decoration: none;/*去除文字的下划线*/
}
.content .search{
text-align: center;
}
.content .search input{
width: 521px;
height: 20px;
padding-bottom: 10px;
padding-top: 10px;
font-size: 18px;
border-left: 1px solid #add;
border-bottom: 1px solid #add;
border-top: 1px solid #add;
}
.content .search button{
width: 120px;
height: 40px;
font-size: 18px;
margin: 0px;
}
效果图：
Snip20170728_56.png
13.CSS布局
Snip20170728_57.png
如果想要设置垂直居中，就得设置inline-height属性和父节点的高度一样。
摆脱标准流的两种方式：
Snip20170728_58.png
Snip20170728_59.png
子绝父相，就可设置子标签随着父标签的位置
13.前端框架--bootstrap
