前端网页设计技术（html5+css3+javascript）

2020-11-27 00:01:49 419 收藏 4
文章标签： html5 css3 javascript
最后发布:2020-11-27 00:01:49首次发布:2020-11-27 00:01:49
版权声明：本文为博主原创文章，遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener"> CC 4.0 BY-SA </a>版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43281481/article/details/110210908
版权 
如何写一个好的网页，首先得有一个好的例子

下面给大家分享一下书中一个比较好的例子：

<!DOCTYPE html>
<html>
	<head>
		<title>花花在线</title>
		<meta charset="utf-8"/> 		
		<link rel="stylesheet" type="text/css" href="css/style.css" />	
	</head>
	<body>
    <header>
    <nav id="top_links">
        <div class="nav_main">
            <div class="contact_info">
                <ul>
                    <li><a href="">联系我们</a></li> 
                    <li>|</li>                        
                    <li><a href="">站点帮助</a></li> 
                    <li>|</li>   
                    <li><a href="">问题反馈</a></li>                 
                </ul>
            </div>                
        </div>     
    </nav>  
        <!-- end top links -->
       <nav class="nav_main">		
           <div id="banner"></div>
           <div id="nav_menu">
      			<a href="index.html">首页</a>
     			<a href="pages/tsxl/tsxl.html">特色线路</a>
       			<a href="pages/news/news.html">旅游快讯</a>
    			<a href="">精品推荐</a>
      			<a href="">特色景点</a>
      			<a href="">特色美食</a>  	
           </div>		
       </nav>     
      </header>

<section id = "leftnav_focusimg">		
 <aside id="left_nav"> 
 <!-- 左侧菜单导航栏开始 --> 
<!-- 菜单导航栏 -->            
        <div id="sidebar">
            <h2>
                全部旅游产品分类
            </h2>
            <ul id="menu">
                <li>
                    <a href="">市内旅游</a>
                    <div class="cms_submenu">
                        <div class="cmsmenuleft">
                            <dl class="menu_recommend">
                                <dt>
                                    热门类目
                                </dt>
                                <dd>
                                    <i><a target="_blank" href="">广场游</a></i> 
                                    <i><a target="_blank" href="">滨海游</a></i> 
                                    <i><a target="_blank" href="">公园游</a></i> 
                                    <i><a target="_blank" href="">老建筑游</a></i> 
                                    <i><a target="_blank" href="">特色景点游</a></i>
                                </dd>
                                <dd>
                                    <div class="clear"></div>
                                </dd>
                            </dl>
                            <dl class="menu_new">
                                <dt>
                                    活动推荐
                                </dt>
                                <dd>
                                    <a href="">[精品路线] 旅顺、金石滩、环市、发现王国纯玩四日游</a><br>
                                    <a href="">[优惠活动] 老虎滩海洋公园一日游</a><br>
                                    <a href="">[特价活动] 发现王国荧光夜跑第二季(时间+费用+路线)</a>
                                </dd>
                            </dl>
                        </div>
                        <div class="clear"></div>
                    </div>
                </li><!-- End 4 columns Item -->
                <li>
                    <a href="">海岛度假</a>
                    <div class="cms_submenu">
                        <div class="cmsmenuleft">
                            <dl class="menu_recommend">
                                <dt>
                                    热门类目
                                </dt>
                                <dd>
                                    <i><a href="">海王九岛</a></i> 
                                    <i><a href="">旅顺蛇岛</a></i> 
                                    <i><a href="">棒槌岛</a></i> 
                                    <i><a href="">海猫岛</a></i> 
                                    <i><a href="">獐子岛</a></i>
                                </dd>
                                <dd>
                                    <div class="clear"></div>
                                </dd>
                            </dl>
                            <dl class="menu_new">
                                <dt>
                                    活动推荐
                                </dt>
                                <dd>
                                    <a href="">[精品路线] 海参采捕-深海野生海参</a><br>
                                    <a href="">[优惠活动] 客船--皮口港到各个海岛客</a><br>
                                    <a href="">[特价活动] 塞里岛--沙滩干净，海水干</a>
                                </dd>
                            </dl>
                        </div>
                        <div class="clear"></div>
                    </div>
                </li><!-- End 4 columns Item -->
                <li>
                    <a href="">近郊旅游</a>
                    <div class="cms_submenu">
                        <div class="cmsmenuleft">
                            <dl class="menu_recommend">
                                <dt>
                                    热门类目
                                </dt>
                                <dd>
                                    <i><a href="">旅顺</a></i> 
                                    <i><a href="">普兰店</a></i> 
                                    <i><a href="">庄河</a></i> 
                                    <i><a href="">金州</a></i> 
                                    <i><a href="">瓦房店</a></i>
                                </dd>
                                <dd>
                                    <div class="clear"></div>
                                </dd>
                            </dl>
                            <dl class="menu_new">
                                <dt>
                                    活动推荐
                                </dt>
                                <dd>
                                    <a href="">[精品路线] 旅顺</a><br>
                                    <a href="">[优惠活动] 老虎滩海洋公园一日游</a><br>
                                    <a href="">[特价活动] 发现王国荧光夜跑第二季(时间+费用+路线)</a>
                                </dd>
                            </dl>
                        </div>
                        <div class="clear"></div>
                    </div>
                </li><!-- End 4 columns Item -->
                <li>
                    <a href="">特价线路</a>
                    <div class="cms_submenu">
                        <div class="cmsmenuleft">
                            <dl class="menu_recommend">
                                <dt>
                                    热门类目
                                </dt>
                                <dd>
                                    <i><a href="">市内一日游</a></i> 
                                    <i><a href="">历史遗迹</a></i> 
                                    <i><a href="">红海滩风景</a></i> 
                                    <i><a href="">冰峪沟</a></i> 
                                    <i><a href="">金石滩</a></i> 
                                    <i><a href="">深海露营</a></i>
                                </dd>
                                <dd>
                                    <div class="clear"></div>
                                </dd>
                            </dl>
                            <div class="clear"></div>
                            <dl class="menu_new">
                                <dt>
                                    活动推荐
                                </dt>
                                <dd>
                                    <a href="">[精品路线] 历史遗迹旅顺品质一日游</a><br>
                                    <a href="">[优惠活动] 老虎滩海洋公园一日游</a><br>
                                    <a href="">[特价活动] 金石滩5A级休闲纯玩一日游</a>
                                </dd>
                            </dl>
                        </div>
                        <div class="clear"></div>
                    </div>
                </li><!-- End 4 columns Item -->
                <li>
                    <a href="">主题旅游</a>
                    <div class="cms_submenu">
                        <div class="cmsmenuleft">
                            <dl class="menu_recommend">
                                <dt>
                                    热门类目
                                </dt>
                                <dd>
                                    <i><a href="">历史遗迹</a></i> 
                                    <i><a href="">红色旅游</a></i> 
                                    <i><a href="">清凉大海</a></i> 
                                    <i><a href="">亲亲宝贝</a></i> 
                                    <i><a href="">温泉之旅</a></i> 
                                    <i><a href="">滑雪天堂</a></i>
                                </dd>
                                <dd>
                                    <div class="clear"></div>
                                </dd>
                            </dl>
                            <dl class="menu_new">
                                <dt>
                                    活动推荐
                                </dt>
                                <dd>
                                    <a href="">[精品路线] 红色之旅旅顺、金石滩纯玩二日游</a><br>
                                    <a href="">[优惠活动] 大连金石滩2015暑假特别优惠活动</a><br>
                                    <a href="">[特价活动] 大连清明亲子春游好去处</a>
                                </dd>
                            </dl>
                        </div>
                        <div class="clear"></div>
                    </div>
                </li><!-- End 4 columns Item -->
                <li>
                    <a href="">特色旅游</a>
                    <div class="cms_submenu">
                        <div class="cmsmenuleft">
                            <dl class="menu_recommend">
                                <dt>
                                    热门类目
                                </dt>
                                <dd>
                                    <i><a href="">星海广场</a></i> 
                                    <i><a href="">金石滩</a></i> 
                                    <i><a href="">圣亚海洋世界</a></i> 
                                    <i><a href="">滨海路</a></i> 
                                    <i><a href="">植物园</a></i> 
                                    <i><a href="">动物园</a></i>
                                </dd>
                                <dd>
                                    <div class="clear"></div>
                                </dd>
                            </dl>
                            <dl class="menu_new">
                                <dt>
                                    活动推荐
                                </dt>
                                <dd>
                                    <a href="">[精品路线]大连2015黄金海岸露营美食节</a><br>
                                    <a href="">[优惠活动]冰峪沟特色活动之冰峪沟赏灯会</a><br>
                                    <a href="">[特价活动]大连金石滩国际沙滩文化节</a>
                                </dd>
                            </dl>
                        </div>
                        <div class="clear"></div>
                    </div>
                </li><!-- End 4 columns Item -->               
            </ul>
        </div>            
</aside>        
<nav>         
<!-- 焦点图开始 -->
<script language="javascript" type="text/javascript">
	var _t1 = 0; //打开页面时等待图片载入的时间，单位为秒，可以设置为0
	var _t2 = 5; //图片轮转的间隔时间
	var _tnum = 3; //焦点图个数
	var _tn = 1;//当前焦点
	var _tl =null;
	_tt1 = setTimeout('change_img()',_t1*1000);
	function change_img(){
		setFocus(_tn);
		_tt1 = setTimeout('change_img()',_t2*1000);
		}
	function setFocus(i){
		if(i>_tnum){_tn=1;i=1;
		}
	_tl?document.getElementById('focusPic'+_tl).style.display='none':'';
	document.getElementById('focusPic'+i).style.display='block';
	_tl=i;
	_tn++;
	}
</script>			
		<!--焦点图1开始-->
        <div id="focusPic1">
            <a href="http://" target="_blank"><img src="images/01.jpg" width="770px" alt="老虎滩海洋公园"></a>
            <h2>
                <a href="http://" target="_blank">老虎滩海洋公园</a>
            </h2>
            <div id="index_page">
                <span onclick="javascript:setFocus(2);">点击切换焦点图→</span> <strong>1</strong> <a href="javascript:setFocus(2);">2</a> <a href="javascript:setFocus(3);">3</a>
            </div>
        </div><!--焦点图1结束-->
        <!--焦点图2开始-->
        <div id="focusPic2" style="display:none;">
            <a href="http://" target="_blank"><img src="images/02.jpg" width="770px" alt="大连星海公园"></a>
            <h2>
                <a href="http://" target="_blank">大连星海公园</a>
            </h2>
            <div id="index_page">
                <span onclick="javascript:setFocus(3);">点击切换焦点图→</span> <a href="javascript:setFocus(1);">1</a> <strong>2</strong> <a href="javascript:setFocus(3);">3</a>
            </div>
        </div><!--焦点图2结束-->
        <!--焦点图3开始 -->
        <div id="focusPic3" style="display:none;">
            <a href="http://" target="_blank"><img src="images/03.jpg" width="770px" alt="大连金石滩度假区"></a>
            <h2>
                <a href="http://" target="_blank">大连金石滩度假区</a>
            </h2>
            <div id="index_page">
                <span onclick="javascript:setFocus(4);">点击切换焦点图→</span> <a href="javascript:setFocus(1);">1</a> <a href="javascript:setFocus(2);">2</a> <strong>3</strong>
            </div>
        </div><!--焦点图3结束--><!-- 焦点图结束 -->
        <div class="clear"></div>				
</nav>
</section>

<!-- 快捷搜索、快迅，咨询 -->
<section id = "search_tab_qq">
<div id="search">
    <div id="search_1">
    <h1>快捷搜索</h1>
    </div>
    <form id="form1" method="get" action="">
        <div id="search_2">
        <ul>
            <li><span>线路名称：</span>
           <input id="ProductPlanName" name="ProductPlanName" style="width:130px;" type="text" value="" autofocus>
            </li>
            <li><span>行程目的地：</span>
            <input id="EndCity" name="EndCity" style="width:118px;" type="text" value="" list="address1">
            	<datalist id="address1" style="display:none">
                    <option vlue="张家界">张家界</option>
                    <option value="九寨沟">九寨沟</option>
                    <option value="黄果树">黄果树</option>
                    <option value="神农架">神农架</option>
                    <option value="敦煌">敦煌</option>
                </datalist>
            </li>
            <li><span>行程天数：</span>
                <select name="PlanDays" id="PlanDays" class="select" style="width:133px;">
                    <option value="0,999">不限</option>
                    <option value="1,1">一日游</option>
                    <option value="3,3">三日游</option>
                    <option value="7,7">七日游</option>
                    <option value="0,3">3天内行程</option>
                    <option value="0,7">7天内行程</option>
                    <option value="0,10">10天内行程</option>
                    <option value="11,999">11天以上行程</option>
                </select>  
            </li>
            <li><span>起始日期：</span>
            <input id="StartDate" name="StartDate" style="width:130px;" type="date" value="2015-10-20">
            </li>
            <li><span>终止日期：</span>
            <input id="EndDate" name="EndDate" style="width:130px;" type="date" value="2015-11-20">
            </li>
        </ul>
        <a href="#"><img src="./images/searchbutton.gif" width="96" height="28" class="searchbutton" onClick="form1.submit();"></a>      
        </div>
    </form>
</div>

<script>
	<!--
	function setTab(name,cursel,n){
	for(i=1;i<=n;i++){
	var menu=document.getElementById(name+i);
	var con=document.getElementById("con_"+name+"_"+i);
	menu.className=i==cursel?"hover":"";
	con.style.display=i==cursel?"block":"none";
	}
	}
	//-->
 </script>  

<div id="Tab">
  <div id="Menubox">
    <ul>
      <li id="menu1" onMouseOver="setTab('menu',1,2)" class="hover">旅游快讯</li>
      <li id="menu2" onMouseOver="setTab('menu',2,2)" >优惠活动</li>
    </ul>
  </div>
  <div id="Contentbox"> 
    <div id="con_menu_1" class="hover">
      <ul>
        <li><a href="pages/news/news_01.html">2015大连发现王国成人年卡团购只需226元</a></li>
        <li><a href="">2015星海广场大连啤酒节 等你来狂欢</a></li>
        <li><a href="">7月27日-8月16日老虎滩表演活动时间安排</a></li>
        <li><a href="">2015大连金石滩活动 蓝莓谷油画展和动漫水世界</a></li>
        <li><a href="">2015大连8月1日金石滩狩猎场露营活动报名</a></li>
        <li><a href="">大连金石滩2015暑假特别优惠活动</a></li>
        <li><a href="">2015大连国际沙滩文化节游戏有奖活动</a></li>
        <li><a href="">发现王国2013精彩活动2014全新绽放</a></li>
      </ul>
    </div>
    <div id="con_menu_2" style="display:none">
      <ul>
        <li><a href="pages/yh/youhui_01.html">2015大连发现王国开启万圣节主题活动</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="">2015大连发现王国9月门票优惠活动(9.1-9.6)</a></li>
        <li><a href="">大连歇马山庄森林浴、温泉一日游</a></li>
        <li><a href="">大连旅顺纯玩一日游</a></li> 
      </ul>
    </div>
  </div>
</div>

 <!--在线咨询开始-->
 <div id="qq_main">
  <div class="r-box fleft">   
    <div class="alink">
      <a class="qq" href="" target="_blank">QQ咨询</a>
      <a class="tel" href="" target="_blank">在线咨询</a>
    </div>
    <ul>
      <li>
        <p>电话咨询（请加0411）</p>
        <i>办公室：</i><span>39588188</span>
      </li>
       <li>
        <p>电话咨询</p>
        <i>手机：</i><span>13868885888</span>
      </li>
      <li>
        <p>QQ咨询</p>
        <i>QQ：</i><span>89546666</span>
      </li>
    </ul>   
  </div>
</div>
<div class="clear"></div>	
</section>
 <!--在线咨询结束-->
<!-- 特色线路开始 -->
<section id="main-ts">
    <div class="content fleft">
      <h1>
        <span class="title fleft"> 特色线路 </span>
        <div class="clear"></div>
      </h1>
      <div class="c-box">
        <div class="left fleft">        
          <img alt="大连旅游" src="./images/dllv.jpg">          
        </div>
        <ul class="right fright" style="display:block;">
        <li>
          <a href="pages/tsxl/tsxl_wq.html" target="_blank">
          <img class="fleft" src="./images/te1.jpg">
          <div class="txt fleft">
            <h3> 大连唐风温泉门票 </h3>
            <h4>  </h4>
            <h5> 团期：<em>10/20 , 10/21 , 10/22 , 10/23 , 10/24</em></h5>
          </div>
          <div class="tn fleft">
            <p>
              <span>大连起止</span>
              <span>1日游</span>
            </p>
            <b>￥<strong>118</strong>起</b>
          </div>
          <div class="clear"></div>
          </a>
        </li>
		<li>
          <a href="" target="_blank">
          <img class="fleft" src="./images/te2.jpg">
          <div class="txt fleft">
            <h3> 大连市内纯玩一日游 </h3>
            <h4> 专车、专导，精品服务 </h4>
            <h5> 团期：<em>10/21 , 10/22 , 10/23 , 10/24 , 10/25</em></h5>
          </div>
          <div class="tn fleft">
            <p>
              <span>大连起止</span>
              <span>1日游</span>
            </p>
            <b>￥<strong>340</strong>起</b>
          </div>
          <div class="clear"></div>
          </a>
        </li>
		<li>
          <a href="" target="_blank">
          <img class="fleft" src="./images/te3.jpg">
          <div class="txt fleft">
            <h3> 大连金石滩纯玩一日游 </h3>
            <h4> 金石滩大套票、蜡像馆、生命奥秘馆、快艇登滨海国家地质公园 </h4>
            <h5> 团期：<em>10/20 , 10/21 , 10/22 , 10/23 , 10/24</em></h5>
          </div>
          <div class="tn fleft">
            <p>
              <span>大连起止</span>
              <span>1日游</span>
            </p>
            <b>￥<strong>345</strong>起</b>
          </div>
          <div class="clear"></div>
          </a>
        </li>
		<li>
          <a href="" target="_blank">
          <img class="fleft" src="./images/te4.jpg">
          <div class="txt fleft">
            <h3> 大连旅顺一日游 </h3>
            <h4> 随车配讲解员，全天无购物店，一次消费绝无二次消费 </h4>
            <h5> 团期：<em>10/20 , 10/21 , 10/22 , 10/23 , 10/24</em></h5>
          </div>
          <div class="tn fleft">
            <p>
              <span>大连起止</span>
              <span>1日游</span>
            </p>
            <b>￥<strong>300</strong>起</b>
          </div>
          <div class="clear"></div>
          </a>
        </li>
        </ul>
        <div class="clear"></div>
      </div>
    </div>
 </section>	
<!--特色线路结束-->

<!--底部footer开始-->
<footer>
<div class="footer">
<div class="footer_center">	
    <div class="container">    	
        <section class="one_fourth">        
        	<h3>关于我们</h3>            
            <ul class="list">
            <li><a href="#">花花介绍</a></li>
            <li><a href="#">招贤纳士</a></li>
            <li><a href="#">联系我们</a></li>           
			</ul>            
        </section><!-- end section -->
        
        <section class="one_fourth">        
        	<h3>合作伙伴</h3>            
              <ul class="list">
                  <li><a href="http://www.cnta.com/" target="_blank">国家旅游局</a></li>
                  <li><a href="http://travel.people.com.cn/" target="_blank">人民网旅游</a></li>
                  <li><a href="http://travel.gmw.cn/index.htm" target="_blank">光明网旅游</a></li>
                  <li><a href="http://travel.chinadaily.com.cn/" target="_blank">央视网旅游</a></li>
              </ul>            
        </section><!-- end section -->        
        <section class="one_fourth">        
        	<h3>出境游和港澳游常识</h3>            
            <ul class="list">
                  <li><a href="" title="如何办理护照" target="_blank">如何办理护照</a></li>
                  <li><a href="" title="如何办理旅游签证" target="_blank">如何办理旅游签证</a></li>
                  <li><a href="" title="如何办理港澳通行证" target="_blank">如何办理港澳通行证</a></li>
                  <li><a href="" title="如何办理台湾旅游签证" target="_blank">如何办理台湾旅游签证</a></li>
            </ul>           	  
        </section><!-- end section -->
        <section class="one_fourth last">
        	<h3>关注我们</h3>
            <div>
            <a href="#"><img src="images/liantu.png"></a>          
            </div>           	  
        </section><!-- end section -->
    </div> 
</div>
</div>
<div id="copyright_info">    
    <div class="container">    
        <div>Copyright © 2015 <a href="#" target="_blank" >计算机与信息技术学院</a></div>         
	</div>
</div>
</footer>
	</body>
</html>

css:

/* 为了让ie浏览器居中显示内容 */
@charset "utf-8";
* { 
	margin: 0; padding: 0;
	}
html {
	overflow-y: scroll;
	} 
body {
	text-align: center;
	background:url(../images/body_bg.png) repeat-y center 0px; min-width:970px;
}
header article section footer nav aside{
	display:block;
}
button, input, select, textarea { 
	font-family: "微软雅黑", Arial; line-height: 24px; color: #666; font-size: 13px;
}
img { 
	border: 0; line-height: 0; 
}
em, b, i { font-style: normal; font-weight: 400; }
dl, ul ,li{ list-style: none }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500 }
a, a:visited { color: #666; text-decoration: none; }
a:hover {
	color:#2fa1e7;
	text-decoration: none;
}
.fleft { float: left; }
.fright { float: right; }
.clear { 
	clear: both; 
	visibility: hidden; 
	width: 0; height: 0; 
	font-size: 0; 
	line-height: 0; 
}
.overflow { overflow: hidden; }
/* 头部样式开始 */
div#banner {
	height: 237px;
	background: url(../images/header.jpg) no-repeat;
	position: relative;
	margin-top:-40px;
	z-index:-1;
}
/* top section样式 */
nav#top_links {
	width: 100%;
	min-height: 40px;
	font-size: 14px;
	color: #fff;
	z-index:100;	
	
}

nav#top_links .contact_info {
	padding: 0px;
	margin: 7px 10px 0px 0px;
	float: right;
}
nav#top_links .contact_info ul {
	padding: 0px;
	margin: 0px;
	float: left;
}
nav#top_links .contact_info li {
	padding: 0px;
	margin: 0px 5px 0px 5px;
	float: left;
	
}
nav#top_links .contact_info li a {
	padding: 0px;
	margin: 0px;
	float: left;	
	font-family: "微软雅黑";
	line-height: 20px; 
	color: #ffffff; 
	font-size: 13px; 
	background-color:#7EABE7;
	letter-spacing:2px;
	
}
nav#top_links .contact_info li a:hover {
	color: #ff0000;
}
/* 导航条样式 */
.nav_main {
	text-align: left;
	width: 980px;
	margin: 0 auto;
}
#nav_menu{
    width: 980px;
    margin: 0px auto;
    height: 46px;
    border-radius: 8px;
    border: 1px solid #cbcbcb;
    border-bottom: 4px solid #adadad;
    font:bold 16px/36px Microsoft Yahei;
}
#nav_menu a{
    display: block;
    width: 14.28%;
    height: 46px;
    line-height: 46px;
    float: left;
    border-bottom: 4px solid #adadad;
    text-align: center;
    text-decoration: none;
    color: #3B4053;
}
#nav_menu a:first-child{
    border-radius: 0 0 0 2px;
}
#nav_menu a:last-child{
    border-radius: 0 0 2px 0;
}
#nav_menu a:hover{
    border-bottom: 4px solid #1a54a4;
    color: #15a8eb;
}
/* 头部样式结束 */


/* 左侧导航样式开始 */
#leftnav_focusimg{	
	width:980px;
	padding:0px;
	margin:0px auto;
}

#left_nav {
	background:#0099FF;
	width:190px;
	padding:1px;	
	z-index:190;
	float:left;
}

#sidebar {
	background:#0099FF;
	width:190px;
	padding:1px;
	margin:0px 10px 0px 1px;
	z-index:190;
	float:left;
}
#sidebar h2{
	color:#fff;font-size:14px;
	line-height:30px;
	text-align:center
	;background:url(title.jpg) no-repeat;
}
#menu {
	width:190px;background: #fff;
	padding:8px 0;
}
#menu li{
	float:left;width:146px;
	display:block;text-align:left;
	padding-left:40px;
	background: #fff;
	position:relative;
	border-bottom:#ffeef4 1px solid; 
	height:42px;vertical-align:middle;
}
#menu li:hover {
	background:#0099FF;
}
#menu li a {
	font-size:14px;color:#3B4053;
	display:block;outline:0;
	text-decoration:none;
	line-height:28px;
}
#menu li:hover a {
	color:#fff;
}
#menu li:hover div a {
	font-size:12px;color:#3B4053;
	line-height:16px;
}
#menu li:hover div a:hover {
	color:#CC0000;
}
#menu li:hover .cms_submenu{
	left:186px;top:0;
}
.cms_submenu{
	float:left;position:absolute;
	left:-999em;text-align:left;
	border-left:6px solid #0099FF; 
	border-top:2px solid #0099FF;
	border-bottom:2px solid #0099FF;
	border-right:2px solid #0099FF;
	width:500px;
	background: #fff;
	padding:5px 0 5px;
	z-index:190;
}
.cmsmenuleft{
	float:left;width:500px;
	color:#ccc;padding:5px; 
	z-index:190;
}
.cmsmenuleft dt,.cmsmenuright dt{
	font-weight:bold;
	color:#0099FF;  margin:5px 0;
	padding:3px 0 3px 10px;
	text-align:left;
}
.menu_recommend dd,.menu_price dd{}
.menu_new dd{
	padding-left:8px;
}
.cmsmenuleft dd i{
	float:left;padding:0 8px;
	margin:3px 0;
	white-space: nowrap;
	border-right:1px solid #ccc;
}

/* 左侧导航样式结束 */

/* 焦点图开始 */
#index_page{float:right;display:block;height:16px;padding:1px 0;margin-right:4px;}
#index_page *{float:left;display:inline;line-height:16px;border:1px solid #B6CFCD;text-align:center;padding:0;margin:0 2px;}
#index_page strong{background:#009A91;color:#fff;width:16px;}
#index_page span{color:#64B8Ef;padding:3px 0 0 0;border:0;cursor:pointer;}
#index_page a{width:16px;color:#64B8Ef;text-decoration:none;}
H2 {text-align:center;}
#focusPic1{ margin-top:10px;}
#focusPic2{ margin-top:10px;}
#focusPic3{ margin-top:10px;}
/* 焦点图结束 */

/* search样式开始 */
#search_tab_qq{	
	width:980px;
	padding:0px;
	margin:0px auto;
}
#search{width:233px; float:left; margin-top:10px;}
#search_1{width:233px; height:30px; background:url(../images/sidebar_1.gif) no-repeat;}
#search_1 h1{font-size:15px; color:#026CC4; text-align:left; line-height:30px; text-indent:20px;}
#search_2{
	width:229px;
	height:250px;
	border:1px solid;
	border-color:#aaa;
	border-top:none;
	background:#fff;
	background-color: #0099FF;
}
#search_2 ul{width:210px; padding-left:10px; padding-top:15px;}
#search_2 ul li{width:220px; height:39px; font-size:14px;}
#search_2 ul li span{display:block; float:left; margin-top:5px;}
#search_2 ul li .text{width:130px; height:20px; line-height:20px; float:left;}
#searchbutton{display:block; margin-left:60px;}

/* search样式结束 */

/* 滑动tab样式开始 */
	#Tab{
	margin:10px 0px 0px 10px;
	width:423px;
	height:280px;
	border:1px solid #aaa;
	float:left;
}
	#Menubox{
		height:42px;border-bottom:1px solid #15a8eb;;background:#15a8eb;
	}
	#Menubox ul{
		list-style:none;margin:7px 10px;
		padding:0;position:absolute;
	}
	#Menubox ul li{
		float:left;
		background:#64B8E4;line-height:34px;
		display:block;cursor:pointer;width:100px;
		text-align:center;color:#fff;f
		ont-weight:bold;border-top:1px solid #64B8E4;border-left:1px solid #64B8E4;
		border-right:1px solid #64B8E4;		
		}
	#Menubox ul li.hover{background:#fff;border-bottom:1px solid #fff;color:#147AB8;}
	#Contentbox{
		clear:both;margin-top:0px;border-top:none;height:181px;
		padding-top:8px;height:100%;
		font-size:14px;
		}
	#Contentbox ul{list-style:none;margin:7px;padding:0;}
	#Contentbox ul li{
		line-height:24px;border-bottom:1px dotted #ccc; 
		text-align:left; list-style-type: circle; 
		margin-left:15px;
		}

/* news分页样式 */
#news_art{
	width:980px;
	padding:0px;
	margin:0px auto;
}
.details {
	margin-bottom: 10px;
	margin-top: 10px;
}
.d_left {
	float: left;
	width: 313px;	
}
.d_left_top {
	width: 313px;

}
.d_right {
	float: right; 
	width: 667px;
}
.d_right_top {
	width: 667px;
}
.one_left {
	margin: 5px;
}
.float_right {
	float: right;
	margin-top: 15px;
	margin-right: 10px;
}
.left_ul {
	margin: 10px;
	margin-top: 0px;
}
.left_ul li {
	padding-left: 10px;
	margin-left: 10px;
	background: url(../images/left_logo.jpg) no-repeat 0px 10px;
	text-align:left;
	height: 30px;
	line-height: 30px;
}
.left_ul li a {
	*float: left;
	
}

.left_ul1 {
	margin: 20px;
	margin-top: 0px;
}
.left_ul1 li {
	padding-left: 30px;
	margin-top:20px;
	margin-left: 10px;	
	 font-family: "微软雅黑", Arial; line-height: 24px; color: #666; font-size: 18px;
	height: 30px;
	text-align:left;
	line-height: 30px;
}
.left_ul1 li a {
	float: left;
}

.right_time {
	float: right;
	margin-right: 10px;
}

.news-t{
	font-size:16px;
	width:980px;
	margin:0 auto;
	text-align:left;
	height:57px;
	line-height:57px;
}
.news-jj{
	width:980px;
	margin:0 auto;
	background:#fff;
}
.news-jj-t{
	font-size:20px;
	width:980px;
	height:58px;
	line-height:58px;
	border-bottom:1px solid #eeeeee;
}
.news-jj-t h2{ font-size:20px; text-align:center}
.news_img{
	text-align:center;
	}
/*滑动tab样式开始*/

/* 在线咨询样式开始 */
#qq_main {
	width: 300px;
	height: 280px;
	margin-left:10px;
	border:1px solid #aaa;
	margin: 10px 0px 0px 10px;
	float:left;
}
#qq_main .r-box {
	width: 300px;
	height: 280px;
	border: 1px solid #e6e6e6;
	border-left: none;
	border-top: none;
	float:left;
}
.r-box .alink {
	height: 43px;
}
.r-box .alink a {
	display: inline-block;
	float: left;
	width: 150px;
	height: 43px;
	line-height: 43px;
	color: #fff;
	font-size: 16px;
}
.r-box .alink a.qq {
	background: #0097e0;
}
.r-box .alink a.tel {
	background: #f90;
}
.r-box .alink a:hover {
	opacity: 0.9;
}
.r-box ul li {
	width: 195px;
	float: left;
	padding: 10px 20px;
	border-bottom: 1px solid #eee;
	font-size: 14px;
	line-height: 23px;
}
.r-box ul li i {
	width: 56px;
	display: block;
	font-size: 14px;
	line-height: 23px;
	float: left;
}
.r-box ul li span {
	width: 138px;
	float: left;
	word-break: normal;
}
.r-box ul li p {
	color: #0097E0;
}

/* 在线咨询样式结束 */

/* 特色线路样式开始 */
#main-ts {
	height: 590px;
	overflow: hidden;
    width: 980px;
	overflow: hidden;	
	border:solid #aaa 1px;
	margin:10px auto;	
}

#main-ts .content {
	width: 980px;
}
#main-ts .content h1 {
	height: 45px;
}
#main-ts .content h1 span.title {
		font: normal 24px "微软雅黑";
	height: 45px;
	margin-left:10px;
}

#main-ts .content .c-box {
	
	width: 980px;
	height: auto;
}
#main-ts .content .c-box .left {
	width: 193px;
	height: 506px;

}
#main-ts .content .c-box .right {
	width: 720px;
	height: 506px;
	padding-right: 20px;
}
#main-ts .content .c-box .right li {
	padding: 18px 0;
	height: 90px;
	border-bottom: 1px dashed #ccc;
}
#main-ts .content .c-box .right li:last-child {
	border: none;
}
#main-ts .content .c-box .right li a {
	display: block;
	height: 90px;
	width: 700px;
	color: #999;
}
#main-ts .content .c-box .right li a img {
	width: 130px;
	height: 86px;
}
#main-ts .content .c-box .right li a div.txt {
	height: 90px;
	width: 380px;
	padding: 0 20px;
}
#main-ts .content .c-box .right li a div.txt h3 {
	font-size: 18px;
	height: 27px;
	line-height: 27px;
	overflow: hidden;
	color: #4f4f4f;
	font-weight:600px;
}
#main-ts .content .c-box .right li a div.txt h4 {
	line-height: 40px;
	height:40px;
	overflow:hidden;
}
#main-ts .content .c-box .right li a div.txt h5 {
	font-size: 14px;
	color:#0097e0;
}
#main-ts .content .c-box .right li a div.txt h5 em {
	padding-right: 10px;
}
#main-ts .content .c-box .right li a div.txt h5 span {
	padding-left: 15px;
}
#main-ts .content .c-box .right li a div.tn {
	width: 150px;
	height: 70px;
	padding-top: 25px;
}
#main-ts .content .c-box .right li a div.tn p {
	float: right;
}
#main-ts .content .c-box .right li a div.tn p span {
	padding: 2px 6px;
	border-radius: 15px;
}
#main-ts .content .c-box .right li a div.tn p span {
	color: #09a6f2;
	border: 1px solid #09a6f2;
}
#main-ts .content .c-box .right li a div.tn b {
	float: right;
	padding-top: 10px;
}
#main-ts .content .c-box .right li a div.tn b {
	color: #09a6f2;
}
#main-ts .content .c-box .right li a div.tn b strong {
	font: normal 26px "微软雅黑";
}
#ts_art{
	width:980px;
	padding:0px;
	margin:0px auto;
}

#ts-t{
	font-size:16px;
	width:980px;
	margin:0 auto;
	text-align:left;
	height:57px;
	line-height:57px;
}
#ts-jj{
	width:980px;
	margin:0 auto;
	background:#fff;
}
#ts-jj-t{
	font-size:20px;
	width:980px;
	height:58px;
	line-height:58px;
	border-bottom:1px solid #eeeeee;
}
#ts-jj-t h2{ font-size:20px; text-align:center}
/* 特色线路样式结束 */
/* footer样式开始 */
.footer {	
	width: 980px;
	background: url(../images/footer-bg.jpg) repeat left top;
	height:240px;
	margin:0px auto;
}
.one_fourth {
	width: 22.75%;
	margin-top:20px;	
}
.container_full {
	width: 100%;
	margin: auto auto auto auto;
}
.footer .footer_center {
	float: left;
	width: 100%;
	color: #999;
	background: url(../images/shadow-03.png) repeat-x left top;
}
.footer .footer_center .one_fourth {
	float:left;
	padding: 5px 0px 32px 0px;
	background: url(../images/v-shadow.png) repeat-y right top;
}
.footer .footer_center .one_fourth.last {
	background: none;
}
.footer .footer_center h3 {
	color: #f0f0f0;
	margin-bottom:30px;
}
.footer_center ul.list {
	padding: 0px;
	margin: 0 auto;	
}
.footer_center .list li {
	padding: 5px 0 0 5px;
	margin: 0;
	text-align:center;
	line-height:30px;
	font-size:14px;
}
.footer_center .list li a {
	color: #999999;
}
.footer_center .list li a:hover {
	color: #eee;
}

/* copyrights */
#copyright_info {	
	width: 980px;
	padding: 30px 0px 25px 0px;
	margin: 0px auto;	
	color: #666;
	background: #303030 url(../images/h-dotted-lines.png) repeat-x left top;
	font-size: 12px;
}
#copyright_info a {
	margin-top: 10px;
	font-size: 12px;
	color: #666;
	text-align: right;
}
#copyright_info a:hover {
	color: #999;
}
/* footer样式结束 */

由于代码太多了就不粘贴了，下面的百度网盘里都有：
在这里插入图片描述
最后再默默的说一句，网盘里还有ps、webstorm与dreamweaver软件，有需要的快点下载起来吧。

已标记关键词 清除标记
网页设计与制作(HTML+CSS+JavaScript)
01-30
网页设计与制作(HTML+CSS+JavaScript)，资源总大小：786.6MB，欢迎下载
表情包
插入表情
还能输入1000个字符 “速评一下”
基于HTML5、JavaScript和CSS3的网页开发应用技术的网页
zcl050505的博客
11-27 3638
** 1.作品整体构思及网站(网页)的主体构想 ** 我的网站的构思是建一个基于HTML5、JavaScript和CSS3的网页开发应用技术的网页，网站的主题思想是同舟共济六十载、民族团结一家亲。网站包括主页、成就、广西福利、民族活动、展望未来以及关于。网站最大的特点是借助了CSS3的网页页面布局的应用技术是的网页的界面更具有可读性，从而使得网页具有亲和力。 2.作品总体设计方案及制作思路 在做网...
项目实战（一）HTML5+CSS3+JS完成前端网站的制作
weixin_46244909的博客
10-13 1223
制作首页HTML框架： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="X-UA-Compatible" content="ie=edg"> <meta name ="description" conte
一个简单的网页系统(-) 首页
lccla120712的博客
04-26 1502
一个简单的网页系统（一）           最近心血来潮写了一个网页系统，用来分享自己游玩的地方。主要使用到了leaflet.js d3.js myfoucus.js jquery等JS 库。    二. 结构分析   （1）导航栏 ： logo可以在线免费自定义制作。导航栏无非是 里面包含几个标签，标签里面套一个超链接。        并设置ul  list
国民度No.1，Python到底做了什么？
CSDN学院
01-20 2万+
毫无疑问，Python 是当下最火的编程语言之一。可以说 Python 的崛起，将编程提高了一个层次，它不再只是程序员专用，各个岗位都在学习 Python，导致普及度和国民度瞬间上升，Python 对整个行业来说都是极其有利的。 正如 TIOBE 官方评价：Python 无处不在，其实自 2018 年开始，各行各业便开始布局 Python。 在教育界， 1、自 2018 年 3 月起，在计算机二级考试加入了“Python 语言程序设计”科目； 2、2018 年，浙江省信息技术教材宣布弃用 VB 语言
html美食网站网页设计源码.zip
07-09
美食网站设计源码，页面美观，简单实用，直接用浏览器打开即可，直接用HTML写的，使用了js和css技术，希望能有帮助。
疯狂html5+css3+javascript完整版
12-10
本书中的程序在以下环境中调试通过： (1) 本书很多HTML 5、CSS 3代码必须在高版本的浏览器中才能看到效果。建议读者安装Opera 11.60、Firefox 10.0、Chrome 17.0
html5+css3+JS代码
05-22
《精通html5+css3+JavaScript页面设计》代码
html5+css实现旅行网站
12-06
html5+css实现的静态网站，旅游景点介绍，旅行网站模板
旅游景区介绍html5模板
11-23
旅游景区介绍html5模板是一款旅行社旅游景点介绍旅游线路规划网站模板下载。
美食网站js+html+css
01-03
利用js+html，简单的美食网站设计，完整源代码+网站图片
js+css+html网页设计
12-21
此网页设计是老师期末时布置的作业，设计用到了JS特效，CSS和HTMl混合使用，里面做的是一个网上买花的小型的购物网站，页面各功能齐全。
网页设计——美食
09-04
美食相关网页，能够实现注册、登录、上传、查阅详情、搜索食谱等功能。需要有Tomcat、MySQL等工具，利用J2EE。
【必看】2020年新型前端HTML5+CSS3+JS+Canvas+AJAX+Http前后端交互
01-07
课程为零基础学习开发的学员而准备，无需任何基础，无任何专业限制，通通从零开始，由浅入深学习开发，每个知识点均有对应案例作为指导，通俗易懂，简单易学，易上手。课程经过长时间的经验总结，采取合理又容易和轻松上手的方式开展教学，再配合企业开发中实际遇到的案例作为练习，相当于直接参与企业开发，技能和经验同步获取。希望学习本课程的学员认真学习每一个课时的视频，跟着视频练习和做作业，只有多写多练才能灵活变通，掌握真正的核心技术。 课程包含HTML5新标签新规范，DIV+CSS设计、Canvas绘画；CSS样式设计，其中有动画特效、渐变、图形图像、2D/3D转换特效、自适应网页设计等；JS包含核心语法、面向对象编程、复杂的项目案例、HTTP网络协议、AJAX前后端异步交互等；新型前端开发大部分回归原始开发，核心编程能力非常重要，本课程教会你如何玩转前端。
HTML5+CSS3+JavaScript网页设计案例课堂
11-14
HTML5+CSS3+JavaScript网页设计案例课堂(刘玉红编著)。该资源中包含该书籍的电子书，课程源代码，以及课堂视频。由于资源过大，请下载txt文档，文档中有百度网盘的下载地址。
简单的js旅游网站.rar
07-15
学校期末课程设计，当时是一个学长发给我的，他说自己用不到了，就分享给我了，DW做的，效果蛮好，因该是专业人写的，里面有jquery、ajax 、轮播等特效，总的还不错
HTML5+CSS3旅游资源网源代码
06-12
可运行的HTML5+CSS3源代码，用的都是最新的技术，适合新手学习，大牛勿喷。
html旅游网页设计模板下载
07-21
html旅游网页设计模板下载基于html+css设计，大气美观
一个漫威主题的静态页面网站源程序（html+css+js+jq+bootstrap）
12-08
漫威主题的静态网页。静态网页还没完善且很多不足之处，页面简陋，非初学者可不参考谢谢谢谢下。谢谢洒洒水大所大
DW网页成品下载 历史文化遗产30页静态HTML网站模板 历史文化网页设计带滚动鼠标经过效果
12-07
大学生静态HTML网页作业成品共30页，三层结构，带三级页面。首页有鼠标经过切换图片效果，图片滚动效果。子页面制作了留言表单及JavaScript提交弹窗反馈。
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页