将企业站点的: 关于我们, 联系我们, 任选其一完成它。
实例
<!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/contact.css">
</head>
<!-- 头部 -->
<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="static/images/banner.jpg" alt="">
</div>
<!-- 1. 中间内容区块 -->
<div class="wrap">
<div class="main">
<h3><strong>联系我们</strong></h3>
<div class="info">
<p>xx教育为您提供电话、传真、Email、在线申请、面谈等全方位的联系方式，不论您在国内或者国外，都欢迎您预约咨询。</p>
<p><b>预约方式：</b></p>
<p>1.网络预约</p>
<p>2.电话预约：请致电：4001010***</p>
<p>请向客服代表留下您的联络方式和咨询意向，我们将为您预约专属服务。</p>
</div>
</div>
</div>
<!-- 2. 左侧分为上下二 -->
<div class="left">
<h3>栏目</h3>
<div class="category">
<ul>
<li><a href="">公司新闻</a></li>
<li><a href="">最新产品</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
</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>
点击 "运行实例" 按钮查看在线实例
css样式 ：contact.css:
实例
.container {
width: 1000px;
margin: 5px auto;
/* 参考色块: 整个主体容器是灰色背景 */
/*background-color: lightgray;*/
/*包住浮动的子元素*/
overflow: hidden;
}
.wrap {
width: inherit;
min-height: 800px;
/*参考背景色*/
/*background-color: cyan;*/
}
.info{
padding:20px 36px 10px;
margin-bottom:15px;
background-color: #edf2f7;
overflow:auto;
}
/* 左边栏样式 */
.left {
width: 280px;
min-height: 800px;
/*background-color: lightcoral;*/
}
/* 右边栏样式 */
.right {
width: 280px;
min-height: 800px;
/*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 h3 {
margin: 10px auto;
text-align: center;
border-bottom: 1px solid;
}
/*左侧样式*/
.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;
}点击 "运行实例" 按钮查看在线实例
footer.css样式：
实例
/******************* 底部样式开始 ******************/
/* 底部与头部的基本样式类似 */
.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;
}
/******************* 底部样式结束 ******************/点击 "运行实例" 按钮查看在线实例
header.css样式：
实例
/******************* 头部样式开始 ******************/
.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.1倍 */
font-size: 1.1rem;
}
/******************* 头部样式结束 ******************/点击 "运行实例" 按钮查看在线实例
2.将课堂上的JS基本语法的小案例全部写一遍,对照课件, 尽可能自己想一些案例, 不要照搬, 举一反三, 活学活用….
JS基本语法案例：
var n;
if(n===undefined){
n='zhulaoshi';
}
console.log(n);
// 传参到浏览器中
// 变量有数据类型，函数没有数据类型，数据类型的种类有：数值（number),字符串(int),bool值（true、false），null值（空）
// ，undefined(变量默认值)
// 对象：对象，函数，数组
// typeof a ; 判断类型
// b.toUpperCase();
// 变大写
// 变量声明：
// var b;
// if(b === undefined){
// b='abc';
// b=b.toUpperCase();
// console.log(b);
// }
// 函数声明：
// 样式：
// function 函数名（参数a,参数b）{
// 函数体：由零个或多个语句组成；
// return 返回值；
// 如不写，则默认返回undefined;
// }
// function sum(a,b){
// var c=0;
// 在函数内部声明的变量，在外部无法获取，此时c值为内部变量、局部变量、私有变量。因为此时作用域不同
// （a,b:占位符，形参，形式参数，可以没有形参，但如果有，形参必有值，如未设则为默认值-undefined）
// return a+b;
// }
// 作用域：使用来查找变量的途径，在JS中只有函数才可以创建作用域，为函数作用域
// 函数调用，按名调用
// sum(100,200);
// // 100与200实参，实际存在的参数
// console.log(sum(100,200));
// 或只有变量有值时可以传值，在函数外部声明的变量为全局变量；
// var x=200;
// var y=200;
// console.log(sum(x,y));
// 分支：单分支、双分支，多分支/switch
// var grade = 95;
// var res= '' ;
// 只要变量没有在函数中声明，则变量均为全局变量
// if(grade >= 60){
// res = '及格万岁！';
// }else{
// res = '补考';
// }
// console.log(res);
// 双分支简写:三元运算
// res = (grade >= 60) ? '及格万岁！':'补考';
// console.log(res);
// 多分支
// if(grade >=60 && grade <= 80)
// {
// res = '成绩良好';
// }else if(grade > 80 && grade <= 90)
// {
// res = '成绩优秀';
// }else if(grade > 90)
// {
// res =' 优秀';
// }
// console.log(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:
// console.log('成绩良好');
// break;
// case grade > 80 && grade <= 90:
// console.log('成绩优秀');
// break;
// default:
// console.log('优秀');
// }
// 循环 for/while
// for:计数式循环，循环次数已知
// var count=0;
// for(var i=0;i<=10;i++){
// count=count+i;
// }
// console.log(count);
// 输出55；
// var count=0;
// for(var i = 0;i <= 10;i++){
// console.log(count+ '+' + i + '='+ (count+i));
// count = count + i;
// console.log(count+ '+' + i + '='+ (count+i));
// 输出结果不同
// }
// console.log(count);
// 输出55.i++与++i区别详见md；
// var i=0;
// var count=0;
// while(i<=10){
// console.log(count+ '+' + i + '='+ (count+i));
// count = count + i;
// i++;
// // 更新循环条件
// }
// console.log(count);
// 入口判断型实验案例-输出星星
<script>
for (var i = 0;i <= 5; i++) {
switch (i) {
case 0:
console.log(' * ');
break;
case 1:
console.log(' * ' + '*');
break;
case 2:
console.log('* ' + '* ' + '*');
break;
default:
break;
}
}
</script>
Correction status：qualified
Teacher's comments：你这是补之前的作业, 看来落下了不少
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
