码迷，mamicode.com
首页 > Web开发 > 详细

领先环境HTML

时间：2016-06-04 23:35:00      阅读：228      评论：0      收藏：0      [点我收藏+]

标签：

做一次就会熟练一些，然后会对以前学习的内容有新的认识和理解比如，比如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>

 

领先环境HTML

标签：

原文地址：http://www.cnblogs.com/nannan-0305/p/5559623.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！