离线网页 HTML+CSS+DIV

学习基本的HTML、CSS、JS语法，可用于建设简易的本地网页。

知识点：（结合课本）

1. 开发工具：谷歌浏览器、DWCS6 （第一章）
2. Html基础编写 （第二、三、四章）
3. 超链接：站内、站外 （第五章）
4. 多媒体：全部视频为MP4格式 （第六章）
5. CSS基础：Div与Span、基本样式 （第七、八、九、十章）
6. 表格、表单的使用 （第11/13章）
7. 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>