學習基本的HTML、CSS、JS語法，可用于建設簡易的本地網頁。

知識點：（結合課本）

開發工具：谷歌瀏覽器、DWCS6 （第一章）

Html基礎編寫 （第二、三、四章）

超鏈接：站內、站外 （第五章）

多媒體：全部視頻為MP4格式 （第六章）

CSS基礎：Div與Span、基本樣式 （第七、八、九、十章）

表格、表單的使用 （第11/13章）

JS基礎 （第14章）

實現特色：（效果依次如圖所示）

1.輪播圖?

#banner {position:relative; width:990px; height:302px; border:1px solid #666; overflow:hidden;} #banner_list img {border:0px;} #banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;} #banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;margin:0; padding:0; bottom:3px; right:5px;} #banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer} #banner ul li.on { background:#900} #banner_list a{position:absolute;} <div id="banner"> <ul><li class="on">1</li><li>2</li><li>3</li><li>4</li></ul><div id="banner_list"><a href="#" target="_blank"><img src="images/big17.jpg" title="01" alt="big17" /></a><a href="#" target="_blank"><img src="images/big18.jpg" title="02" alt="big18" /></a><a href="#" target="_blank"><img src="images/big19.jpg" title="03" alt="big19" /></a><a href="#" target="_blank"><img src="images/big21.jpg" title="04" alt="big21" /></a></div> </div>

?

2.多媒體

<dd class="video-sp"><embed src="playoffs.mp4" width="419" height="231" autostart="true" ></embed></dd>

此處可添加多媒體有視頻、音頻等

3.表單

?

<div class="clearfix free-content"><dl><dd><strong>您最欣賞的球員</strong></dd><dd><form action="program-class.php" method="get"><select name="pid" class="select-box"><option value="33">勒布朗 詹姆斯</option><option value="34">科比 布萊恩特</option><option value="54">凱文 杜蘭特</option><option value="47">史蒂芬 庫里</option></select><input type="submit" class="search-button" value=""></form></dd><dd><strong>您最喜歡的球隊</strong></dd><dd><form action="industry.php" method="get"><select name="cid" class="select-box"><option value="38">火箭</option><option value="39">勇士</option><option value="41">騎士</option><option value="42">湖人</option><option value="43">凱爾特人</option><option value="44">雷霆</option><option value="45">馬刺</option></select><input type="submit" class="search-button" value=""></form></dd></dl></div>

4.搜索框

<div class="clearfix search"><form action="news.php" method="post" onsubmit="return checkform(this);"><input type="submit" value="" class="submit-button"><input name="keywords" type="text" class="search-box" value="Search..." onfocus="if (this.value ==&#39;Search...&#39;){this.value =&#39;&#39;}" onblur="if (this.value ==&#39;&#39;){this.value=&#39;Search...&#39;}"></form></div>

?

總結

以上是生活随笔為你收集整理的离线网页 HTML+CSS+DIV的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。