收藏
批改狀態(tài)：合格
老師批語(yǔ)：js的作業(yè)完成的不錯(cuò), 看來(lái)你是有一點(diǎn)基礎(chǔ)的, 要不就是事先預(yù)習(xí)了
CSS布局小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>關(guān)于我們</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="#鏈接">首頁(yè)</a></li>
<li class="item"><a href="#鏈接">公司新聞</a></li>
<li class="item"><a href="#鏈接">最新產(chǎn)品</a></li>
<li class="item"><a href="#鏈接">關(guān)于我們</a></li>
<li class="item"><a href="#鏈接">聯(lián)系我們</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>關(guān)于我們</h3>
<div class="con2">
<h4>深圳市創(chuàng)陽(yáng)電子***</h4>
<p>
專業(yè)智能配套,三千萬(wàn)庫(kù)存現(xiàn)貨,三星SAMSUNG,國(guó)巨YAGEO,禾伸堂HEC,厚聲UNIOHM,華新科WALSIN,風(fēng)華等國(guó)內(nèi)外***一級(jí)代理商,產(chǎn)品有貼片電容,貼片電阻,鉭電容,高壓貼片電容,二極管,三極管,MOS管,整流橋堆等。無(wú)中間商賺差價(jià)，電子元器件認(rèn)準(zhǔn)創(chuàng)陽(yáng)。
</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="#鏈接">最新產(chǎn)品</a></li>
<li><a href="#鏈接">關(guān)于我們</a></li>
<li><a href="#鏈接">聯(lián)系我們</a></li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="content">
<p>
<a href="">? PHP中文網(wǎng)版權(quán)所有</a> |
<a href="">0551-88889999</a> |
<a href="">皖I(lǐng)CP2016098801-1</a>
</p>
</div>
</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
效果圖：
JavaScript基本語(yǔ)法
單分支
<script>
var age = 19;
var res = '';
if(age >7){
document.write("你可以搬桌子");
}
</script>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
雙分支
<script>
var age = 19;
if(age >7){
document.write("你可以搬桌子");
}else{
documen.write("你還太小了");
}
</script>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
三元運(yùn)算簡(jiǎn)寫雙分支
<script>
var age = 19;
res = (age >= 7)? document.write("搬桌子吧你") : document.write("你太小了，做一遍吧") ;
</script>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
多分支
<script>
var age = 29;
var garde = 61 ;
if(age >= 20 && garde >= 60){
document.write("成績(jī)及格");
}else if (age >= 20 && garde< 60){
document.write("回去補(bǔ)考");
}else if(age <20 && garde >=60){
document.write("你是天才");
}else {
document.write("不要?dú)怵H");}
</script>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
SWITCH簡(jiǎn)寫
<script>
var age = 13;
var garde = 61 ;
switch(true){
case age >= 20 && garde >= 60 :
document.write("成績(jī)及格");
break;
case age >= 20 && garde< 60:
document.write("回去補(bǔ)考");
break;
case age <20 && garde >=60:
document.write("你是天才");
break;
default:
document.write("不要?dú)怵H");
}
</script>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
for循環(huán)
<script>
var sum = 0 ;
for (var i = 0 ; i <10 ; i++){
document.write(sum + '+' + i + '=' + (sum+i));
sum = sum + i;
}
</script>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
入口判斷型
<script>
var sum = 0 ;
var i = 0 ;
while(i < 10){
document.write(sum + '+' + i + '=' + (sum+i));
sum = sum + i;
i++;
}
</script>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
出口判斷型
<script>
var sum = 0 ;
var i = 0 ;
do{
document.write(sum + '+' + i + '=' + (sum+i));
sum = sum + i;
i++;
}while(i < 15);
</script>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)