![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：jS的基本语法其实并不多, 关键是它的灵活运用
Collection
Collection
一、企业站点：关于我们 页面
关于我们页面是网站中比较简单的网页，以下是关于我们页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于我们</title>
<!--
<link rel="stylesheet" href="static/css/header.css">
<link rel="stylesheet" href="static/css/footer.css">
<link rel="stylesheet" href="static/css/about.css">-->
<style>
/******************* 头部样式开始 ******************/
.header {
/* 参考色块,上线时应该删除或替换 */
/*background-color: lightgray;*/
background-color: black;
}
/*头部内容区*/
.header .content {
/* 头部内容区,应该居中显示,所有要有宽度 */
width: 1000px;
height: 60px;
/* 参考色块 */
background-color: black;
/* 上下外边距为0,左右自动居中 */
/* 因为上下相等,左右也相等,所以可以简写为: margin: 0 auto; */
margin: 0 auto;
}
/*头部内容区中的导航*/
.header .content .nav {
/* 清空导航UL元素的默认样式 */
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
/*如果记不住究竟要清空哪些,可以粗暴点:margin:0;padding:0;*/
}
/*头部导航中的列表项样式*/
.header .content .nav .item {
list-style-type: none;
}
/*头部导航中的链接样式: 重点*/
.header .content .nav .item a {
/* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */
float: left;
/* 设置最小宽度与最小高宽,以适应导航文本的变化 */
min-width: 80px;
min-height: 60px;
/* 设置行高与头部区块等高,使导航文本可以垂直居中显示 */
line-height: 60px;
color: white;
/* 设置民航文本的左右内边距,使导航文本不要挨的太紧 */
padding: 0 15px;
/* 去掉链接标签默认的下划线 */
text-decoration: none;
/* 让导航文本在每一个小区块中居中显示 */
text-align: center;
}
.header .content .nav .item a:hover {
/* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */
background-color: red;
/* 将导航文本设置为系统根字体大小的1.2倍 */
font-size: 1.1rem;
}
/******************* 头部样式结束 ******************/
/******************* 底部样式开始 ******************/
/* 底部与头部的基本样式类似 */
.footer {
/*background-color: lightgray;*/
}
.footer .content {
width: 1000px;
height: 60px;
background-color: #444;
margin: 0 auto;
}
.footer .content p {
text-align: center;
line-height: 60px;
}
.footer .content a {
text-decoration: none;
color: lightgrey;
}
/* 鼠标移入时显示下划线并加深字体前景色 */
.footer .content a:hover {
color: white;
}
/******************* 底部样式结束 ******************/
.container {
width: 1000px;
margin: 5px auto;
/* 参考色块: 整个主体容器是灰色背景 */
/*background-color: lightgray;*/
/*包住浮动的子元素*/
overflow: hidden;
}
.wrap {
width: inherit;
min-height: 400px;
/*参考背景色*/
/*background-color: cyan;*/
}
/* 左边栏样式 */
.left {
width: 280px;
min-height: 400px;
/*background-color: lightcoral;*/
}
/* 右边栏样式 */
.right {
width: 280px;
min-height: 400px;
/*background-color: lightseagreen*/
}
.wrap, .left, .right {
float: left;
}
.left {
margin-left: -100%;
}
/*.right {*/
/* margin-left: -280px;*/
/*}*/
.main {
padding-left: 280px;
/*padding-right: 280px;*/
/*添加主体边框*/
/*border: 1px solid #444444;*/
}
.main .img-list {
/*加到中间div上不会撑大盒子的*/
padding: 0 15px;
}
.main h3 {
margin: 10px auto;
text-align: center;
border-bottom: 1px solid;
}
.main .img-list ul {
padding: 0;
margin: 0;
list-style: none;
}
/*使用伪类在最后一个ul后面清除掉浮动,让分页条正常显示*/
.main .about-list ul:last-of-type::after {
content: '';
display: table;
clear:both;
}
/*每个产品水平排列 */
.main .about-list ul li.item {
float: left;
margin: 0 20px;
}
/*将a标签设置为块元素让它垂直排列*/
.main .about-list ul li a {
display: table;
text-decoration-line: none;
color:#444;
}
.main .about-list ul li a:hover {
color: red;
}
.main .about-list img{
float: left;
padding: 20px;
}
.main .about-list p{
text-align: left;
text-indent: 2em;
padding: 0px 10px;
font-size: 14px;
line-height: 28px;
}
/*左侧样式*/
.left h3 {
margin: 10px auto;
text-align: center;
border-bottom: 1px solid;
}
.left ul {
margin: 0;
padding: 0;
list-style: none;
}
.left li a {
display: inline-block;
width: 100%;
height: 50px;
background-color: black;
color: white;
text-decoration-line: none;
line-height: 50px;
text-align: center;
}
.left li a:hover {
background-color: red;
font-size: 1.1em;
}
/*联系我们*/
.contact {
padding: 0 20px;
text-align: left;
line-height: 1.5em;
}
.contact dt {
float: left;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="index.html">首页</a></li>
<li class="item"><a href="news.html">公司新闻</a></li>
<li class="item"><a href="products.html">最新产品</a></li>
<li class="item"><a href="about.html">关于我们</a></li>
<li class="item"><a href="contact.html">联系我们</a></li>
</ul>
</div>
</div>
<!-- 中间主体 -->
<div class="container">
<!-- banner图-->
<div class="banner">
<img src="https://img.php.cn/upload/image/617/971/704/1563162051291284.jpg" alt="">
</div>
<!-- 1. 中间内容区块 -->
<div class="wrap">
<div class="main">
<div class="about-list">
<h3>关于我们</h3>
<!--关于我们内容-->
<img src="https://img.php.cn/upload/image/242/748/161/1563162058812986.jpg" width="300" >
<p class="about-c">
百度（纳斯达克：BIDU），全球最大的中文搜索引擎、最大的中文网站。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。 [1]
“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于 2000年1月1日在中关村创建了百度公司。
百度拥有数万名研发工程师，这是中国乃至全球最为优秀的技术团队。这支队伍掌握着世界上最为先进的搜索引擎技术，使百度成为中国掌握世界尖端科学核心技术的中国高科技企业，也使中国成为美国、俄罗斯、和韩国之外，全球仅有的4个拥有搜索引擎核心技术的国家之一。
</p>
</div>
</div>
</div>
<!-- 2. 左侧分为上下二 -->
<div class="left">
<h3>推荐栏目</h3>
<div class="category">
<ul>
<li><a href="news.html">公司新闻</a></li>
<li><a href="products.html">最新产品</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
<div class="contact">
<h3>联系我们</h3>
<dl>
<dt>电话:</dt>
<dd>+86-010-56778899</dd>
<dt>手机:</dt>
<dd>+86-13801090876321</dd>
<dt>地址:</dt>
<dd>北京市通州区京沈高速旁</dd>
<dt>微信:</dt>
<dd>与手机同号</dd>
</dl>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">
<p>
<a href="">© PHP中文网版权所有</a> |
<a href="">0551-88889999</a> |
<a href="">皖ICP2016098801-1</a>
</p>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
案例用到的图片
本地运行效果如下：
第二、JS基本语法
（1）JS的注释、变量、函数定义调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的注释、变量、函数定义调用</title>
</head>
<body>
<script>
//变量提升，定义变量，默认会跑到最前面，函数会跑到最前面
var x;//声明, undefined
var y;//声明
//单行注释
/*
多行注释
*/
var n = 100+10; //语句,后面有一个分号，就是语句
//变量
//1.声明
var username;
if(username === undefined)
{
//2.初始化：第一次赋值,变量的第二次赋值叫更新
username = "朱老师";
}
console.log(username);//变量赋值打印到控制台
//数据类型：类型一旦确定，那么取值范围就确定了，并且在上面的可执行操作也确定了
//数值型、字符串、布尔、null/undefined
//对象：对象、函数、数组
//其实，数值、字符串、布尔、叫包装对象
//类型--取值范围--操作
//boolean -->true|false ---->逻辑判断
//int -->(xxx-xxx)--> 算术运算
//string ---->('a'-'z','A'-'Z')-->拼接,查询
//null
//undefined
//控制台操作
typeof null //查看数据类型
typeof Number('180') //转化数据类型，把字符型转换为数值型
//string(180) === '180' //返回true
//三个等号也叫全等，要求值相等，类型也要相同。
//180 === parseInt('180') //parseInt把字符串转化为整数
//function 函数名称(参数列表) {
// 函数体：由0条或多条语句组成
// return 结果
//}
//如果没有return，返回是undefined
//函数声明
function sum(a,b) { //a,b为形参：形式参数，占位符
//内部变量/私有变量/局部变量：在函数内部声明的变量，外部不可访问
var c = 0;
//在函数内部可以访问到全局变量
c = a+b+x;
return c; // 可以这样写：return a+b;
}
//作用域：是用来查找变量的途径,在JS中只有函数才可以创建作用域，函数作用域
//函数调用:按名调用
//定义全局变量：在函数外部声明的变量
// var x = 100; //声明+初始化 二合一
x = 100;//初始化为100
// var y = 200; //声明+初始化 二合一
y = 200;//初始化200
console.log(sum(x,y)); //其中：x可以直接写100,y可以直接写200，称为实参：实际参数
// console.log(c);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
（2）流程控制（单分支、双分支、多分支）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制</title>
</head>
<body>
<script>
//分支：单分支、双分支、多分支/switch
var grade = 35;
var res = '';
//双分支
//if(grade >= 60){
// res = '及格万岁';
//}else {
// res = '不及格，等着补考吧';
//}
//双分支的简写：三运运算符，也叫三元运算
res = (grade >= 60) ? '及格万岁':'不及格，等着补考吧';
//多分支
if(grade >= 60 && grade < 80){
res = '成绩还不是错嘛';
} else if(grade >= 80 && grade <90){
res = '要成为学霸的节奏呀';
}else if(grade >=90 && grade <= 100){
res = '你来上课吧';
} else {
res = '等着补考吧';
}
//多分支用switch
//var n =1;
//
//switch (n){
// case 0:
// console.log('验证失败');
// break;
// case 1:
// console.log('验证成功');
// break;
//
// default:
// console.log('未知错误');
//}
//改下上面的成绩判断案例
switch (true){
case grade >= 60 && grade < 80:
res = '成绩还不是错嘛';
break;
case grade >= 80 && grade <90:
res = '要成为学霸的节奏呀';
break;
case grade >=90 && grade <= 100:
res = '你来上课吧';
break;
default:
res = '等着补考吧';
}
//console.log(res); //输出结果到控制台
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
（3）循环控制(for/while)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环控制</title>
</head>
<body>
<script>
//for /while
//for语句：计数式
//循环次数已知
var sum = 0;
//for(初始化循环变量;判断循环条件;更新循环条件)
// 案例：0到10累加功能,for写
// for(var i = 0;i <= 10;i++){
// console.log(sum+'+'+i+'='+(i+sum));
// sum = sum+i;
// }
//while循环：根据条件来进行循环，只要为真就执行
//while (条件 === true){
//// 循环体代码
//// 更新循环条件，否则进入死循环
//
//}
// 案例：0到10累加功能,while改写
//1.循环变量初始化
//var i = 0;
////2.判断循环条件,入口判断型
//while (i <= 15){
// console.log(sum+'+'+i+'='+(i+sum));
// sum = sum+i;
//
// //更新循环条件
// i++;
//
//}
// 案例：0到10累加功能,do...while改写
//1.循环变量初始化
var i = 0;
//2.判断循环条件,出口判断型
do {
console.log(sum+'+'+i+'='+(i+sum));
sum = sum+i;
//更新循环条件
i++;
}while (i <= 10);
console.log(sum);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结，本次案例把HTML+CSS知识进行了串联,算是对HTM+CSS进行了学习总结，除此之外，本节课学习了JS的基本语法，包括单行注释、多行注释，定义函数以及程序中用到的流程控制，单支、双支、多支，以及循环控制，对JS基础学习进行了深刻的研究，收获多多。
