CSS布局小案例：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于我们</title>
<style>
/*头部样式*/
.header{
background-color: black;
}
.header .content {
width: 1000px;
height: 60px;
margin: 0 auto;
background-color: black;
}
.header .content .nav {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.header .content .nav .item{
list-style-type: none;
}
.header .content .nav .item a {
float: left;
min-width: 80px;
min-height: 60px;
line-height: 60px;
padding: 0 15px;
text-decoration: none;
color:white;
text-align: center;
}
.header .content .nav .item a:hover{
background-color: red;
font-size: 1.1rem;
}
/*底部样式*/
.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;
overflow: hidden;
}
.wrap {
width:inherit;
min-height: 800px;
/*background-color: #037b82;*/
}
.left{
width: 280px;
min-height: 800px;
}
.wrap ,.left {
float: left;
}
.left{
margin-left: -100%;
}
.main{
padding-left: 280px;
}
.main .con .con2 h4 {
margin: 0;
text-align: center;
}
.main .con h3 {
margin: 10px auto;
text-align: center;
border-bottom: 1px solid;
}
.main .con {
padding:0 25px;
}
.main .con .con2 {
margin-top: 20px;
/*padding: 0 25px;*/
/*height: 400px;*/
}
.main .con .con2 p {
font-size: 1.2rem;
color: black;
}
.main .con .con1 {
padding: 0 25px;
margin-top: 50px;
}
.main .con .con1 dt{
font-size:1.5rem;
float: left;
}
.main .con .con1 dd{
font-size:1.5rem;
}
.left h3 {
margin: 10px auto;
text-align: center;
border-bottom: 1px solid;
}
.left .category ul{
list-style: none;
margin: 0;
padding-left: 0;
}
.left li a {
display: inline-block;
width:100%;
height: 50px;
background-color: black;
color: white;
text-decoration: none;
line-height: 50px;
text-align: center;
}
.left li a:hover {
background-color: red;
font-size: 1.1em;
}
</style>
</head>
<body>
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="#链接">首页</a></li>
<li class="item"><a href="#链接">公司新闻</a></li>
<li class="item"><a href="#链接">最新产品</a></li>
<li class="item"><a href="#链接">关于我们</a></li>
<li class="item"><a href="#链接">联系我们</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="banner"><img src="static/images/banner.jpg" alt=""></div>
<div class="wrap">
<div class="main">
<div class="con">
<h3>关于我们</h3>
<div class="con2">
<h4>深圳市创阳电子***</h4>
<p>
专业智能配套,三千万库存现货,三星SAMSUNG,国巨YAGEO,禾伸堂HEC,厚声UNIOHM,华新科WALSIN,风华等国内外***一级代理商,产品有贴片电容,贴片电阻,钽电容,高压贴片电容,二极管,三极管,MOS管,整流桥堆等。无中间商赚差价，电子元器件认准创阳。
</p>
</div>
<div class="con1">
<dl>
<dt>
***：
</dt>
<dd>15626475734</dd>
<dt>QQ：</dt>
<dd>43528518</dd>
</dl>
</div>
</div>
</div>
</div>
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图：
JavaScript基本语法
单分支
实例
<script>
var age = 19;
var res = '';
if(age >7){
document.write("你可以搬桌子");
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
双分支
实例
<script>
var age = 19;
if(age >7){
document.write("你可以搬桌子");
}else{
documen.write("你还太小了");
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
三元运算简写双分支
实例
<script>
var age = 19;
res = (age >= 7)? document.write("搬桌子吧你") : document.write("你太小了，做一遍吧") ;
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
多分支
实例
<script>
var age = 29;
var garde = 61 ;
if(age >= 20 && garde >= 60){
document.write("成绩及格");
}else if (age >= 20 && garde< 60){
document.write("回去补考");
}else if(age <20 && garde >=60){
document.write("你是天才");
}else {
document.write("不要气馁");}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
SWITCH简写
实例
<script>
var age = 13;
var garde = 61 ;
switch(true){
case age >= 20 && garde >= 60 :
document.write("成绩及格");
break;
case age >= 20 && garde< 60:
document.write("回去补考");
break;
case age <20 && garde >=60:
document.write("你是天才");
break;
default:
document.write("不要气馁");
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
for循环
实例
<script>
var sum = 0 ;
for (var i = 0 ; i <10 ; i++){
document.write(sum + '+' + i + '=' + (sum+i));
sum = sum + i;
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
while循环
入口判断型
实例
<script>
var sum = 0 ;
var i = 0 ;
while(i < 10){
document.write(sum + '+' + i + '=' + (sum+i));
sum = sum + i;
i++;
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
出口判断型
实例
<script>
var sum = 0 ;
var i = 0 ;
do{
document.write(sum + '+' + i + '=' + (sum+i));
sum = sum + i;
i++;
}while(i < 15);
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例