![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：document.write(), 这种语法早已不推荐使用, 在未来的标准中, 有可能被删除, 建议将结果打印到控制台查看,这才是主流: console.log()
Collection
Collection
一、css布局小案例
运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局小案例</title>
<style>
body{
margin:0;
padding:0;
font-size: 16px;
}
.header,.footer{
width: 100%;
height: 60px;
background-color: #000;
}
.nav,.tab{
width: 1000px;
height:60px;
background-color: #000;
overflow: hidden;
margin:0 auto;
text-align: center;
}
a{
text-decoration:none;
color:#fff;
}
ul{
padding:0;
margin:0;
}
li{
list-style-type: none;
}
.header .nav .list li{
width: 110px;
height:60px;
text-align: center;
line-height: 60px;
color:#fff;
float: left;
padding: 0 15px;
}
.header .nav .list li:hover{
background-color: #f50;
font-size: 18px;
}
.footer .tab a{
height:60px;
line-height: 60px;
color:#ddd;
padding: 0 15px;
}
.footer .tab a:hover{
color: #fff
}
span{
line-height: 60px;
color:#ddd;
}
/*主体样式*/
.container{
width: 1000px;
overflow: hidden;
margin:0 auto;
}
h3{
padding:0;
text-align: center;
}
hr{
border:1px solid #000;
}
.left{
width:280px;
}
.container .left ul{
margin:20px 0;
}
.container .left ul li{
height: 58px;
text-align: center;
background-color: #000;
border-bottom: 1px solid #fff;
line-height: 60px;
}
.container .left ul li:hover{
background-color: #f50;
}
.main{
width:700px;
margin-left:20px;
}
.left,.main{
float:left;
}
.content{
padding:0 20px 40px;
}
.content img{
display: block;
width: 500px;
margin:0 auto;
}
p{
text-indent: 2em;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="nav">
<ul class="list">
<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>
<!-- 头部 -->
<!-- 主体内容 -->
<div class="container">
<div class="left">
<h3>栏目</h3>
<hr>
<ul>
<li><a href="#">公司新闻</a></li>
<li><a href="#">最新产品</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="main">
<h3>关于我们</h3>
<hr>
<div class="content">
<p>京东方科技集团股份***（BOE）创立于1993年4月，是一家为信息交互和人类健康提供智慧端口产品和专业服务的物联网公司 。京东方的核心事业包括端口器件、智慧物联、智慧医工。端口器件产品广泛应用于手机、平板电脑、笔记本电脑、显示器、电视、车载、可穿戴设备等领域；智慧物联为新零售、交通、金融、教育、艺术、医疗等领域，搭建物联网平台，提供“硬件产品+软件平台+场景应用”整体解决方案；在智慧医工领域，京东方通过移动健康管理平台和数字化***为用户提供了全面的健康服务。</p>
<img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/e14057771a667385275b68942c91f05b_367_252.jpg" alt="图片">
<p>2018年，京东方新增专利申请量9585件，其中发明专利超90%，累计可使用专利超7万件。全球创新活动的领先指标——汤森路透《2016全球创新报告》显示，BOE（京东方）已跻身半导体领域全球第二大创新公司。 美国商业专利数据显示，2018年BOE（京东方）美国专利授权量全球排名第17位，成为美国IFI Claims TOP20中增速最快的企业。世界知识产权组织（WIPO）发布2018年全球国际专利申请（PCT）情况，BOE（京东方）以1813件PCT申请位列全球第七。</p>
<p>根据***咨询机构IHS数据，2018年BOE（京东方）液晶显示屏出货数量约占全球25%，总出货量全球第一 。2019年第一季度，BOE（京东方）智能手机液晶显示屏、平板电脑显示屏、笔记本电脑显示屏、显示器显示屏、电视显示屏出货量均位列全球第一 。</p>
</div>
</div>
</div>
<!-- 主体内容 -->
<!-- 底部 -->
<div class="footer">
<div class="tab">
<div>
<a href="#">© PHP中文网版权所有</a>
<span> | </span>
<a href="#">0551-88889999</a>
<span> | </span>
<a href="#">皖ICP2016098801-1</a>
</div>
</div>
</div>
<!-- 底部 -->
</body>
</html>点击 "运行实例" 按钮查看在线实例
二、js基础语法
1.单分支： if (true) {}
<script>
var money=5000;
if(money>=5000){
document.write("来一场说走就走的***");
}
</script>点击 "运行实例" 按钮查看在线实例
2.双分支： if (true) {} else {}
<script>
var money=1000;
if (money>=5000) {
document.write("来一场说走就走的***");
} else {
document.write("附近的景点也不错哦");
}
</script>点击 "运行实例" 按钮查看在线实例
3.三元运算： 条件?表达式1:表达式2;
<script>
var money=1000;
res = money >= 5000 ? document.write("来一场说走就走的***") : document.write("附近的景点也不错哦");
</script>点击 "运行实例" 按钮查看在线实例
4.多分支： if (true) {} else if{} else if{} else{}
<script>
var money=5000;
if(money>=10000){
document.write("你可以出国了");
}else if(10000>money>=2000){
document.write("来一场说走就走的***");
}else if(2000>money>=1000){
document.write("附近的景点也不错哦");
}else{
document.write("和朋友一起逛逛街吧");
}
</script>点击 "运行实例" 按钮查看在线实例
5.switch
switch(true){
case 1:;
break;
case 2:;
break;
default:;
}
<script>
var money=2000;
switch(true){
case money>10000 : document.write("你可以出国了") ;
break;
case 10000>=money && money>2000 : document.write("来一场说走就走的***") ;
break;
case 2000>=money && money>1000 : document.write("附近的景点也不错哦") ;
break;
default : document.write("和朋友一起逛逛街吧") ;
}
</script>点击 "运行实例" 按钮查看在线实例
6.for循环
for(初始值;执行条件;更新条件){循环体; }
<script>
var mul=1;
for (var i=1;i<10;i++){
document.write(mul +'*'+ i +'=' + (mul*i)+ '</br>');
mul *= i;
}
</script>点击 "运行实例" 按钮查看在线实例
7.while循环
初始值；
while(执行条件){循环体;更新条件; }
<script>
var mul=1;
var i=1;
while(i<10){
document.write(mul +'*'+ i +'=' + (mul*i)+ '</br>');
mul *= i;
i++;
}
</script>点击 "运行实例" 按钮查看在线实例
8. do while循环
初始值;
do{循环体;更新条件; }while(执行条件);
<script>
var mul=1;
var i=1;
do{
document.write(mul +'*'+ i +'=' + (mul*i)+ '</br>');
mul *= i;
i++;
}while(i>5);
</script>点击 "运行实例" 按钮查看在线实例
9.break,结束循环
<script>
for (var i = 0; i < 10; i++) {
if (i===6) break;
document.write(i+ '</br>');
}
</script>点击 "运行实例" 按钮查看在线实例
10.continue,结束本次循环进入下一轮
<script>
for (var i = 0; i < 10; i++) {
if (i===4) continue;
document.write(i+ '</br>');
}
</script>点击 "运行实例" 按钮查看在线实例
