上截图
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
margin:0;
padding:0;
}
.header{
min-width:1200px;
height:60px;
background-color: black;
margin:0 auto;
overflow: hidden;
}
.logo a{
background-image: url(http://www.php.cn/static/images/logo.png);
background-repeat: no-repeat;
width:160px;
height: 76px;
float:left;
font-size: 14px;
position: relative;
margin-top: -10px;
}
.nav{
margin:0;
padding:0;
list-style: none;
}
.nav li a{
float:left;
text-decoration: none;
color: #ccc;
padding:0 30px;
font-size: 14px;
line-height:60px;
height:60px;
}
.nav li a:hover{
background-color: coral;
font-weight: bold;
color: white;
}
.footer{
height:160px;
background-color: #393D49;
width:1900px;
margin:0 auto;
}
.footer ul{
margin:0 150px;
padding:0 180px;
list-style: none;
}
.footer ul li a{
float:left;
color: white;
text-decoration: none;
padding:30px 10px;
font-size: 14px;
}
.footer p{
clear:both;
color:#ddd;
padding-left:340px;
font-size: 14px;
}
.container{
min-height:600px;
width: 1200px;
overflow: hidden;
margin:8px auto;
}
.wrap,.left{
float:left;
}
.wrap{
width:100%;
/*border:1px solid #ddd;*/
/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}
.left{
width:250px;
min-height:620px;
border:1px solid #ddd;
margin-left:-100%;
background-color: #fff;
}
.middle{;
min-height:600px;
border:1px solid #ddd;
margin-left: 270px;
padding-top: 20px;
}
.middle h2{
margin:0;
text-align: left;
color: #656e73;
padding-left:40px;
}
.middle p{
font-size: 14px;
margin:35px 40px;
color: #656e73;
}
.banner{
margin:10px auto;
width: 1200px;
}
.left h2{
margin:30px 40px;
color: #656e73;
}
.left ul{
margin:0;
padding:0;
list-style: none;
}
.left ul li{
margin:20px 40px;
}
.left ul li a{
text-decoration: none;
color: #656e73;
font-size:18px;
}
</style>
<title>关于我们</title>
</head>
<body>
<div class="header">
<div class="logo">
<a href=""></a>
</div>
<ul class="nav">
<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>
<li><a href="">菜鸟学堂</a></li>
</ul>
</div>
<div class="banner">
<img src="http://www.php.cn/static/images/index_ad222.jpg" alt="情怀">
</div>
<div class="container">
<div class="wrap">
<div class="middle">
<h2>关于我们</h2>
<p>一、php中文网提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱：
a@php.cn，我们会在看到邮件的第一时间内为您处理，或直接***Q：88526。</p>
<p>二、网友通过php.cn途径发表的一切信息，本站有权在本网站范围内引用、发布、转载用户在本站发布的内容。本站对于用户发布的内容所引发的版权、署名权的异议、纠纷不承担任何责任。传统媒体转载须事先与原作者和本站联系。提交者发言纯属个人行为，与本网站立场无关。</p>
</div>
</div>
<div class="left">
<h2>栏目</h2>
<ul>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JAVASCRIPT</a></li>
<li><a href="">PHP</a></li>
</ul>
</div>
</div>
<div class="footer">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="">PHP视频</a></li>
<li><a href="">PHP实战</a></li>
<li><a href="">PHP代码</a></li>
<li><a href="">PHP手册</a></li>
<li><a href="">词条</a></li>
<li><a href="">手记</a></li>
</ul>
<p>PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
<p>Copyright 2014-2019 http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号 免责申明赞助与捐赠</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
双飞翼的3列布局替换成2列
js我们一般写在head标签里面，用script 包裹
<head>
<script>
alert("弹出语句");
</script>
</head>
也可以像css那样用src外部文件调用。
<script src=""></script>
1、语句和表达式
var a=1+1; 语句后面带上;号
1+1 这叫做表达式，不带;号
2、变量
var a = 1; 变量的声明和赋值
console.log(typeof a); 查看变量类型
var a=1;
var A=1;
这是2个变量，变量区分大小写。
A = 2;变量声明赋值后可以再次赋值。
3、变量声明提升
js代码解析原则
首先js引擎在读取js代码时会进行两个步骤，第一个步骤是扫描所有的Js代码，第二个步骤是执行。
会先通篇扫描所有的Js代码，然后把所有声明提升到顶端，第二步是执行，执行就是操作一类的。
<script type="text/javascript">
console.log(a); //输出结果 undefined
var a=10;
</script>
以上代码输出 undefined
原因： 变量提升（把变量声明提升到当前执行环境的最顶端）
上段代码相当于：
var a;
console.log(a);//由于未赋值 所以输出undefined
a=10;
4、函数声明提升
foo();
function foo(){ console.log("aaa");
}
结果输出： aaa
原理：函数声明提升 （函数声明提升直接把整个函数提到执行环境的最顶端）
相当于：
function foo(){ console.log("aaa");
}
foo();
5、 单分支
<script>
var score=60;
if (score>=60)
{
alert("你合格了");
alert("不用补课了");
}
</script>
<script>
var score=69.5;
if (score>=60 && score<70) {
alert("你合格了,但是不到70分");
}
</script>
6、双分支
<script>
var age=50;
if (age >= 60){
alert("你可以退休了")
}else{
alert("你接着上班")
}
</script>
小练习
实例
<script>
var score= prompt("请输出成绩");
if (score>100 || score<0 || isNaN(score)){
alert("你这是来捣乱的");
} else {
if (score>=80){
alert ("这是优秀")
} else if(score>=60){
alert("你这合格了");
}else{
alert("不合格");
}
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
7、三元运算符
<script>
var result=(10>5)?(5):(2);
alert(result);
</script>
8、switch语句
实例
var a=2;
switch (a) {
case 1:
alert ("一");
break;
case 2:
alert ("二");
break;
case 3:
alert ("三");
break;
case 4:
alert ("四");
break;
default:
alert("不知道是什么");
break;
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
while循环的用法
实例
<script>
while (true){
var number = +prompt("请输入0-100之内的分数");
if (number>=0 &&number<=100){
break;
}
else{
alert("按照要求输出分数，别捣乱");
}
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
for循环
在for的()里面写上初始值，判断表达式，更新表达式