領先環境HTML

時間 2019-11-19

標籤領先環境 html 欄目 HTML 简体版

原文原文鏈接

作一次就會熟練一些，而後會對之前學習的內容有新的認識和理解好比，好比position中的absolute，relative；還有js的屬性操做（謝謝車老師的串講）……javascript

index.htmlphp

<!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.csscss

@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.htmlhtml

<!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.cssjava

@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.jsjquery

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。