将企业站点的: 关于我们, 联系我们, 任选其一完成它。
实例
<!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>