zoukankan html css js c++ java

领先环境HTML

做一次就会熟练一些，然后会对以前学习的内容有新的认识和理解比如，比如position中的absolute，relative；还有js的属性操作（谢谢车老师的串讲）……

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script src="index.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="纯JS图片左右无缝切换/css/lanrenzhijia.css" rel="stylesheet" type="text/css" />
<script src="纯JS图片左右无缝切换/js/jquery.cycle.all.min.js"></script>
</head>

<body>
<div id="zhti">
    <div id="head">
         <div id="logo"><img src="images/logo.png"/></div>
         <div id="wbyx"><a href="http://weibo.com/login.php" style="text-decoration:none; color:#9B9B9B;">微博&nbsp;&nbsp;</a>|<a>&nbsp;&nbsp;邮箱登录&nbsp;&nbsp;</a>|&nbsp;&nbsp;English</div>
         
         <div id="menu">
         <div class="bq">网站首页</div>        
         <div class="bq">新闻与媒体</div>
         <div class="bq">主营业务</div>
         <div class="bq">服务客户</div>
         <div class="bq">工程事例</div>
         <div class="bq">合作结构</div>
         <div class="bq">关于我们</div>
         <div id="sousuo">
         <form><input type="text" value="站内搜索" id="znss" onfocus="dofocus(this)" onblur="doblur(this)" />
         </form></div>
          <div class="tan">
          <div class="tannr">1234</div>
          <div class="tannr">1234</div>
          <div class="tannr">1234</div>
          <div class="tannr">1234</div>
          <div class="tannr">1234</div>
          </div>                  
           
    </div>
    
  
    <script type="text/javascript">
        $(document).ready(function(){
            
            $('.slideshow').cycle({
                fx: 'scrollLeft',
                speed: 2000,
                timeout: 5000
            });

        });
    </script>
<div id="beijingtu">  
    <div id="top-zone">
        <div id="billboard">        
            <ul class="slideshow">
                <li><img src="纯JS图片左右无缝切换/images/1.jpg"alt="懒人之家"/></li>
                <li><img src="纯JS图片左右无缝切换/images/2.jpg" alt="懒人之家"/></li>
            </ul>
        </div>
        <div class="edge-holders">
        </div>
    </div>
</div>  

<div class="txzt">
     <div class="wai">
        <div id="dzbt">关于我们</div><sapn id="more">/MORE</span>
        <div id="tu"><img src="images/首页最终稿_05.png" width="200px" /></div>
        <div id="nr"> &nbsp;&nbsp;海鲜列为"发物"，海产品中的蛋白质不同于我们经常吃的食物中的蛋白质，某些异种蛋白质易引起过敏，加重炎症反应，所以溃疡性结肠炎患者一定要慎重食用海鲜。疾病活动期也不建议喝牛奶及乳制品。</div>
    </div>
    
    <div class="wai">
        <div id="dzbt">服务客户</div><sapn id="more">/MORE</span>
        <div id="ditu"><img src="images/首页最终稿_08.png" width="200px" /></div>   
    </div>
  
     <div class="wai">
         <div id="dzbt">工程示例</div><sapn id="more">/MORE</span>
        <div id="tupian"><img src="images/首页最终稿_11.png" /></div>
     </div>
     
        
     <div class="wai">
         <div id="dzbt">最新动态</div><sapn id="more">/MORE</span>
          <div id="wenzi">
         <ur>
         <li id="wuxu">2016-6-2 症状好转后可逐过渡到</li>
         <li id="wuxu">2016-6-2 症状好转后可逐过渡到</li>
         <li id="wuxu">2016-6-2 症状好转后可逐过渡到</li>
         <li id="wuxu">2016-6-2 症状好转后可逐过渡到</li>
         <li id="wuxu">2016-6-2 症状好转后可逐步渡到</li>
         <li id="wuxu">2016-6-2 症状好转后可逐步过渡</li>
         <li id="wuxu">2016-6-2 症状好转后可逐步过渡</li>
        
         </ur>
          </div>
     </div>
     
    <div id="dbtb">
         <div id="tb1"><img src="images/首页最终稿_26.png" height="30" /></div>
         <div id="tb2"><img src="images/首页最终稿_17.png" height="40" /></div>
         <div id="tb3"><img src="images/首页最终稿_19.png" height="48" /></div>
         <div id="tb4"><img src="images/首页最终稿_21.png" height="44" /></div>
         <div id="tb5"><img src="images/首页最终稿_24.png" width="200"/></div>  
    </div>  
  
</div> 
  
    <div id="footer">
        <div id="dbwenzi">设为首页&nbsp;&nbsp;|&nbsp;&nbsp;加入收藏&nbsp;&nbsp;|&nbsp;&nbsp;网络地图&nbsp;&nbsp;|&nbsp;&nbsp;联系我们&nbsp;&nbsp;|&nbsp;&nbsp;在线留言&nbsp;&nbsp;|&nbsp;&nbsp;法律声明&nbsp;&nbsp;|&nbsp;&nbsp;企业邮箱</div>
        <div id="dizhi">北京领先环境有限公司 &nbsp;&nbsp;电话：010-88888888&nbsp;&nbsp; 邮箱：你们送那个500M邮箱&nbsp;&nbsp; 地址：北京市丰台区右安门外大街99号</div>
        <div id="erwz">家用产品微信关注</div>
        <div id="erwm"><img src="images/首页最终稿_34.png" /></div>
        
    </div> 
  
  
 
</div>
</body>
<script language="javascript">

var bt=document.getElementsByClassName("bq")
for(var i=0;i<bt.length;i++)
{
    bt[i].setAttribute("onclick","show(this)");
    
    function show(tc)
    {
        //alert(tc.innerHTML);
        var tt=document.getElementsByClassName("tan");
        tt.style.display="block";
        var dd=document.getElementsByClassName("tannr");
        dd.style.display="block";
    }
    
}


</script>
</html>

index.css

@charset "utf-8";
/* CSS Document */

*{
    margin:0px;
    padding:0px;
 }
 #zhti{
     width:100%;
     height:100%; 
     }
 #head{
     width:100%;
     height:135px;
     border:1px solid #CCC;
     background-color:#FFF; 
     }
 #logo{
     width:281px;
     height:62px;
     position:relative;
     left:224px;
     top:20px;     
     }
 #wbyx{
     width:900px;
     height:20px;
     border:0px solid #CCC;
     position:relative;
     left:200px; 
     top:10px;
     text-align:right;
     font-family:Arial, Helvetica, sans-serif;
     font-size:15px;
     color:#9B9B9B;
     
     }
     
  #menu{
      width:900px;
      height:35px;
      background-color:#E4E4E4;
      position:relative;
      top:15px;
      left:200px;
      opacity:0.6;       
      }
  .bq{
      position:relative;
      top:0px;
      left:20px;
      width:90px;
      height:35px;
      line-height:35px;
      font-size:13px;
      color:#005FBD;
      text-align:center;
      vertical-align:middle;
      float:left;           
      }
   .bq:hover{
       
       background-color:#0053A6;
       color:#FFF;
       }
    .tan{
      position:relative;
      top:16px;      
      width:500px;
      height:45px;
      background-color:#1989B8;
      display:none;
      
        }
    .tannr{
        position:relative;
        top:-8px;
        left:10px;
        width:96px;
        height:25px;
        background-color:#F2F2F2;
        text-align:center;
        line-height:25px;
        vertical-align:middle;
        float:left;
        display:none;
        
        
        }
    
    #sousuo{
        position:relative;
        top:10px;
        right:-50px;        
        }
        
    #znss{
        color:#DDDCDC;
        font-size:13px;        
        }    
        
    #beijingtu{
        position:relative;
        top:15px;
        width:1366px;
        height:450px;
        border:1px solid #333;        
        
        }    
    .txzt{
        width:860px;
        height:300px;
        background:#FFF;
        position:relative;
        top:-5px;
        left:250px;
        z-index:3;    
        }
    #dzbt{
        width:200px;
        height:25px;
        position:relative;
        top:10px;
        left:20px;
        margin:10px;
        float:left;
        color:#50A1C9;
        font-size:19px;
        font-weight:bold;
                
        }
    #more{
        position:relative;
        top:-20px;
        left:120px;
        width:30px;
        height:15px;
        font-size:10.85px;
        font-family:Arial, Helvetica, sans-serif;
        color:#707070;            
        }
        
    .wai{
        
        width:200px;
        height:260px;        
        float:left;
        margin-left:10px;                                
        }
        
    #tu{
        position:relative;
        top:10px;
        left:-120px;
        width:200px;        
        }
    #nr{position:relative;
        top:10px;
        left:-120px;
        width:200px;
        height:150px;
        color:#707070;
        font-size:14px;        
        
        }
    #ditu{
        position:relative;
        top:30px;
        left:-120px;        
        }
        
    #tupian{
        position:relative;
        top:10px;
        left:-120px;            
        }
    #wenzi{
        position:relative;
        top:10px;
        left:-120px;
        padding:2px;
        margin:5px;    
                
        }
    #wuxu{
        list-style:none;}
    #dbtb{
        position:relative;
        top:240px;
        left:0px;
        
        height:50px;
        width:860px;                        
        }
    #tb1{position:relative;
        top:-250px;
        left:0px;
        width:200px;
        height:50px;
        }
    #tb2{
        position:absolute;
         top:0px;
         left:210px;
         width:150px;
         height:40px;        
        }
    #tb3{
        position:absolute;
         top:0px;
         left:350px;
         width:135px;
         height:48px;
         }
    #tb4{
        position:absolute;
         top:0px;
         left:500px;
         width:150px;
         height:44px;
         }
    #tb5{
        position:absolute;
         top:10px;
         left:650px;
         width:160px;
         height:40px;
         }
    #footer{
        width:100%;
        height:100px;
        background-color:#1076A4;
        }
    #dbwenzi{
        position:relative;
        top:10px;
        left:275px;
        width:800px;
        height:25px;
        z-index:4;
        color:#FFF;
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;                        
        }
    #dizhi{
        position:relative;
        top:10px;
        left:275px;
        width:800px;
        height:25px;
        z-index:4;
        color:#FFF;
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;        
        }
    #erwz{
        position:relative;
        top:-50px;
        left:1025px;
        width:15px;
        height:100px;
        background-color:#1076A4;
        z-index:4;
        text-align:center;
        vertical-align:middle;
        font-size:6px;
        color:#FFF;
        font-family:Arial, Helvetica, sans-serif;
        line-height:11.5px;        
        }
    #erwm{
        position:relative;
        top:-140px;
        left:1040px;
        width:80px;
        height:80px;
        z-index:4;        
        }

neirong.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="nr.css" rel="stylesheet" type="text/css" />
<title>无标题文档</title>

</head>

<body>
<div id="zhti">
    <div id="head">
         <div id="logo"><img src="images/logo.png"/></div>
         <div id="wbyx"><a href="http://weibo.com/login.php" style="text-decoration:none; color:#9B9B9B;">微博&nbsp;&nbsp;</a>|<a>&nbsp;&nbsp;邮箱登录&nbsp;&nbsp;</a>|&nbsp;&nbsp;English</div>
         
         <div id="menu">
         <div class="bq">网站首页</div>        
         <div class="bq">新闻与媒体</div>
         <div class="bq">主营业务</div>
         <div class="bq">服务客户</div>
         <div class="bq">工程事例</div>
         <div class="bq">合作结构</div>
         <div class="bq">关于我们</div>
         </div>
     </div>
     <div id="tupian"><img src="images/内页最终稿_02.png" width="1366px" height="261px"/></div>
     
     <div id="txzt">
         <div id="zuo">
            <div id="bq1" onclick="show(this)">关于我们</div>
            <div id="bq2">公司简介<hr style="color:#DBDBDB"/></div>
            <div id="bq3">企业文化<hr style="color:#DBDBDB"/></div>
            <div id="bq4">愿景使命<hr style="color:#DBDBDB"/></div>
            <div id="bq5">人才理念<hr style="color:#DBDBDB"/></div>
            <div id="bq6">联系我们<hr style="color:#DBDBDB"/></div>
        </div>
        <div id="you">            
            <div id="ybt">首页<<span>关于我们</span><<span style="color:#3198FF">公司简介</span><hr style="color:#DBDBDB" /></div>
            <div id="ywenzi">
 1.少吃粗纤维食物<br />

&nbsp;&nbsp;忌选粗纤维的食物和加工粗糙的食品。因为大量的粗纤维食物会刺激肠道，并影响营养物质的吸收，对原本就营养不良的患者而言更会加重病情。所以，应尽量限制食物纤维，如韭菜、芹菜、白薯、萝卜、粗杂粮、干豆类等。疾病活动期应忌食生蔬菜、水果，可制成菜水、菜泥、果汁、果泥等食用。不要用大块肉烹调，要经常用碎肉、肉丁、肉丝、肉末和蒸蛋羹、煮鸡蛋等形式。
 <br />
2.慎吃海鲜<br />

 &nbsp;&nbsp;海鲜列为"发物"，海产品中的蛋白质不同于我们经常吃的食物中的蛋白质，某些异种蛋白质易引起过敏，加重炎症反应，所以结肠炎患者一定要慎重食用海鲜。疾病活动期也不建议喝牛奶及乳制品。
 <br />
3.忌刺激性食物<br />

 &nbsp;&nbsp;辛辣刺激性食物会对胃肠道造成不良刺激，肠炎患者应禁忌辣椒、芥末、酒等辛辣刺激食物，少吃大蒜、生姜、生葱。也不要食用过冷、过热的食物。夏天尤其要避免食用冷饮和刚从冰箱里拿出来的食物。
 <br />
4.不宜吃油腻食物<br />

 &nbsp;&nbsp;
 肠炎患者应选择柔软、清淡、少渣、易消化、富于营养、有足够热量的食物，少量多餐，在急性发作期与爆发型病例，严重者最初几天宜禁食，可用静脉高营养治疗，使肠道得到休息，症状好转后可逐步过渡到流质、无渣或少渣半流质等。
 保持心情舒畅，注意饮食有节，起居有常、避免劳累。戒除烟酒，忌食辣椒、冷冻、生冷食品，预防肠道感染。

            </div>
        </div>
       
     </div>
     
    <div id="footer">
        <div id="dbwenzi">设为首页&nbsp;&nbsp;|&nbsp;&nbsp;加入收藏&nbsp;&nbsp;|&nbsp;&nbsp;网络地图&nbsp;&nbsp;|&nbsp;&nbsp;联系我们&nbsp;&nbsp;|&nbsp;&nbsp;在线留言&nbsp;&nbsp;|&nbsp;&nbsp;法律声明&nbsp;&nbsp;|&nbsp;&nbsp;企业邮箱</div>
        <div id="dizhi">北京领先环境有限公司 &nbsp;&nbsp;电话：010-88888888&nbsp;&nbsp; 邮箱：你们送那个500M邮箱&nbsp;&nbsp; 地址：北京市丰台区右安门外大街99号</div>
        <div id="erwz">家用产品微信关注</div>
        <div id="erwm"><img src="images/首页最终稿_34.png" /></div>
        
    </div>      
     
     
     
</div>


</body>
<script language="javascript">
function show(b1)
{   alert(b1.innerHTML);
    var wz1=document.getElementById("ywenzi");
    
    b1.setAttribute("onclick",wz1);
}

</script>
</html>

nr.css

@charset "utf-8";
/* CSS Document */
*{
    margin:0px;
    padding:0px;
 }
 #zhti{
     width:100%;
     height:100%; 
     }
 #head{
     width:100%;
     height:105px;
     background-color:#FFF; 
     }
 #logo{
     width:281px;
     height:62px;
     position:relative;
     left:130px;
     top:10px;     
     }
 #wbyx{
     width:900px;
     height:20px;
     position:relative;
     left:290px; 
     top:-15px;
     text-align:right;
     font-family:Arial, Helvetica, sans-serif;
     font-size:15px;
     color:#9B9B9B;     
     }
 #menu{
     position:relative;
     top:-10px;
     left:500px;
     width:700px;
     height:30px;
     }
 .bq{
     position:relative;
     top:0px;
     left:0px;
     width:100px;
     height:30px;
     line-height:30px;
     text-align:center;
     vertical-align:middle;
     font-family:"Arial Black", Gadget, sans-serif;
     font-size:15px;
     float:left;     
     }
 #tupian{
     position:absolute;
     top:105px;
     height:261px;
     width:100%;     
     }
 #txzt{
     position:absolute;
     top:366px;
     left:150px;
     width:1066px;
     height:435px;
     }
 #zuo{
     position:relative;
     top:0px;
     left:0px;
     width:225px;
     height:340px;
     z-index:3;     
     }
 #bq1{
     position:relative;
     top:0px;
     left:0px;
     width:225px;
     height:48px;
     line-height:48px;
     font-size:20px;
     color:#FFF;
     text-align:center;
     vertical-align:middle;
     background-color:#058BC7;                     
     }
 #bq2{
     position:relative;
     top:0px;
     left:0px;
     width:225px;
     height:48px;
     line-height:48px;
     font-size:16px;
     font-weight:bold;    
      text-align:center;
     vertical-align:middle;      
     }
 #bq2:hover{
     color:#058BC7;
     }
 #bq3{
      position:relative;
     top:0px;
     left:0px;
     width:225px;
     height:48px;
     line-height:48px;
     font-size:16px;
     font-weight:bold;    
      text-align:center;
     vertical-align:middle;      
     }
 #bq3:hover{
     color:#058BC7;
     }
 #bq4{
      position:relative;
     top:0px;
     left:0px;
     width:225px;
     height:48px;
     line-height:48px;
     font-size:16px;
     font-weight:bold;    
      text-align:center;
     vertical-align:middle;      
     }
 #bq4:hover{
     color:#058BC7;
     }
 #bq5{
      position:relative;
     top:0px;
     left:0px;
     width:225px;
     height:48px;
     line-height:48px;
     font-size:16px;
     font-weight:bold;    
      text-align:center;
     vertical-align:middle;      
     }
 #bq5:hover{
     color:#058BC7;
     }
 #bq6{
      position:relative;
     top:0px;
     left:0px;
     width:225px;
     height:48px;
     line-height:48px;
     font-size:16px;
     font-weight:bold;    
      text-align:center;
     vertical-align:middle;      
     }
 #bq6:hover{
     color:#058BC7;
     }
 #you{
     position:relative;
     top:-340px;
     left:225px;
     width:841px;
     height:435px;
     margin-left:10px; 
     }
 #ybt{
     position:relative;
     top:0px;
     left:0px;
     width:841px;
     height:48px;
     line-height:48px;
     text-align:left;
     }
 #ywenzi{
     position:absolute
     top:10px;
     left:200px;
     width:841px;
     height:387px;     
     }
#footer{
    position:absolute;
    top:800px;
    left:0px;
        width:100%;
        height:100px;
        background-color:#1076A4;
        }
    #dbwenzi{
        position:relative;
        top:10px;
        left:275px;
        width:800px;
        height:25px;
        z-index:4;
        color:#FFF;
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;                        
        }
    #dizhi{
        position:relative;
        top:10px;
        left:275px;
        width:800px;
        height:25px;
        z-index:4;
        color:#FFF;
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;        
        }
    #erwz{
        position:relative;
        top:-50px;
        left:1025px;
        width:15px;
        height:100px;
        background-color:#1076A4;
        z-index:4;
        text-align:center;
        vertical-align:middle;
        font-size:6px;
        color:#FFF;
        font-family:Arial, Helvetica, sans-serif;
        line-height:11.5px;        
        }
    #erwm{
        position:relative;
        top:-140px;
        left:1040px;
        width:80px;
        height:80px;
        z-index:4;        
        }

index.js

function dofocus(txt)
{
    txt.value="";    
}
function doblur(txt)
{
    if(txt.value.length==0)
    {
        txt.value="站内搜索";
    }
}

后面这个是内容页需要实现的效果，可是那个是用id写的，js写起来很费劲，换了class会比较容易操作，还有点小问题，但基本效果实现了，谢谢肖先生的提示和帮助……

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#you{ width:841px; 
      height:435px;
      }
.bt{width:225px;
    height:48px;
    line-height:48px; 
    background-color:#C8F376; 
    color:#666;
    text-align:center;
    margin-top:1PX;}
.nr{ position:relative;
     top:-48px; 
     left:235px;
     width:606px;
     height:387px; 
     background-color:#CCC;
     display:none; 
     }
#w1{ width:606px;
     height:387px;
     }



</style>
</head>

<body>
<div id="you">
<div class="bt" onclick="show(this)">公司简介<div class="nr" id="w1">1</div></div>
<div class="bt" onclick="show(this)">企业文化<div class="nr" id="w2">2</div></div>
<div class="bt" onclick="show(this)">愿景使命<div class="nr" id="w3">3</div></div>
<div class="bt" onclick="show(this)">人才理念<div class="nr" id="w4">4</div></div>
<div class="bt" onclick="show(this)">联系我们<div class="nr" id="w5">5</div></div>



</div>
</body>
<script language="javascript">
/*var b=document.getElementsByClassName("bt");
for(var i=0;i<b.length;i++)
{
    b[i].setAttribute("onclick","show(this)");
    
}
function show(bb)
{
    //alert(bb.innerHTML);
    var bts=document.getElementsByClassName("nr");
    for(var i=0;i<bts.length;i++)
    {
        bts[i].style.display="none";
    }
    bb.nextSibling.style.display="block";
}
*/
function show(bb)
{   //alert(bb.innerHTML);
    var nrs=document.getElementsByClassName("nr");
    for( var i=0;i<nrs.length;i++)
    { 
    nrs[i].style.display="block";
    }
    
    
}


</script>
</html>

查看全文

相关阅读:
Windows Azure Cloud Service (14) 使用Windows Azure诊断收集日志记录数据
 Windows Azure Cloud Service (13) 用Visual Studio 2010 将应用程序部署到Windows Azure平台
 Windows Azure Cloud Service (15) 多个VM Instance场景下如何处理ASP.NET Session
Windows Azure Storage (5) Windows Azure Drive
Windows Azure Storage (7) 使用工具管理Windows Azure Storage
SQL Azure(二) SQL Azure vs SQL Server
webbrowser的自动提交
 提取视频的背景声音的软件
 Listview列排序的bug原因
 两个奇怪的问题

原文地址：https://www.cnblogs.com/nannan-0305/p/5559623.html