• 领先环境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>
  • 相关阅读:
    Angular指令2
    MD测试
    LeeCX
    Java公众号推荐
    基于云落地SLB+Tengine实现高可用集群负载均衡
    非HTTP状态下开启web视频的临时方案
    慕课网 20200330 es+geo+baidu-map 直播视频与文字版笔记
    [涨姿势]Chrome 谷歌浏览器原生截长图命令
    人人都要关注的分布式系统中的CAP理论
    疫情风险下的项目管理与紧急预案策略
  • 原文地址：https://www.cnblogs.com/nannan-0305/p/5559623.html
Copyright © 2020-2023  润新知