自己写的静态网页

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=gbk"/>
<title>官网首页</title>
<style type="text/css">
 *
 {
   font-size:18px;
list-style:none;
text-decoration:none;
 }
 .maintop
 {
   height:100px;
   background:white;
 }
 .maintop img
 {
   position:absolute;
left:15%;
margin-top:0;
padding:0;
height:100px;
 }
 .maintop>.maintopright
 {
   position:absolute;
   width:600px;
height:40px;
left:55%;
overflow:hidden;
margin-top:30px;
 }
 .maintop>.maintopright ul
 {
   position:absolute;
left:-1;
width:700px;
 }
 .maintop>.maintopright ul li
 {
         float:left;
width:100px;
height:26px;
line-height:16px;
text-align:center;
padding:0 1px;
 }
 .main1 
 {
     height:500px;
 }
 .main1 img
 {
   position:absolute;
left:249px;
overflow:hidden;
height:500px;
width:1380px;
 }
 
 .main2
 {
   height:500px;
 }
 .main2>.main2video
 {
   float:left;
position:absolute;
left:18%;
 }
 .main2>.main2text
 {
   float:right;
   position:absolute;
left:53%;
width:884px;
height:338px;
margin-top:82px;
 }
 .main2>.main2text>.main2tit span
 {
   position:absolute;
        display:inline-block;
margin-left:30px;
   font-size:30px;
font-weight:bold;
 }
 .main2>.main2text>.main2tit>.more
 {float:right;
  position:absolute;
  right:46%;
 }
 a:link,a:visited
 {
   text-decoration:none;
color:green;
font-family:宋体;
font-size:20px;
 }
 .main2text>.main2main
 {
   position:absolute;
margin-top:62px;
margin-left:1px;
   width:880px;
height:88px;
 }
 .main2main img
 {
        float:left;
        left:10%;
 }
 .main2main>.main2maintext
 {
left:16%;
 }
 .main2text>.main2center
 {
   position:absolute;
margin-top:156px;
margin-left:1px;
   width:880px;
height:88px;
 }
 .main2center img
 {
        float:left;
        left:10%;
 }
 .main2main>.main2centertext
 {
left:16%;
 }
 .main2text>.main2bottom
 {
   position:absolute;
margin-top:247px;
margin-left:1px;
   width:880px;
height:88px;
 }
 .main2bottom img
 {
        float:left;
        left:10%;
 }
 .main2main>.main2bottomtext
 {
left:16%;
 }
 .main3
 {
   height:500px;
   background-color:#eee;
 }
 .main3>.main3left
 {
   position:absolute;
left:18%;
width:30px;
htight:120px;
font-size:28px;
margin-top:30px;
font-weight:bold;
 }
 .main3>#main3pic #img1
 {
   position:absolute;
left:21.5%;
margin-top:50px;
 }
 .main3>#main3pic #img2
 {
   position:absolute;
left:55.5%;
margin-top:39px;
 }
 .main4
 {
   height:500px;
 }
 .main4>.main4left
 {
   position:absolute;
left:18%;
width:30px;
htight:120px;
font-size:28px;
margin-top:30px;
font-weight:bold;
 }
 .main4>.main4left1
 {
   position:absolute;
left:20.8%;
width:22px;
height:120px;
font-size:20px;
margin-top:30px;
color:green;
 }
 .main4>.main4left2
 {
   position:absolute;
left:24.8%;
top:1650px;
width:110px;
height:350px;
font-size:18px;
font-family:楷体;
line-height:1.5em;
writing-mode:tb-rl;
 }
 .main4>.main4right
 {
   position:absolute;
margin-top:30px;
left:35%;
width:1000px;
height:450px;
 }
 .main4right>.dec1
 {
   position:absolute;
left:10%;
width:238px;
height:235px;
 }
 .main4right>.dec2
 {
   position:absolute;
left:40%;
width:238px;
height:235px;
 }
 .main4right>.dec3
 {
   position:absolute;
left:70%;
width:238px;
height:235px;
 }
 .main4right>.button1
 {
   position;absolute;
margin-top:320px;
margin-left:800px;
color:green;
   width:100px;
height:40px;
background-color:white;
 }
  .main5
 {
   height:500px;
background-color:#eee;
 }
 .main5>.main5text
 {
        position:absolute;
left:18%;
        width:1345px;
        height:490px;
 }
      .main5text>.main5left
 {
   position:absolute;
   width:300px;
height:490px;
background-color:#99cc99;
 }
 .main5text>.main5right
 {
   position:absolute;
left:23.5%;
width:1002px;
height:490px;
background-color:#99cc99;
 }
 .main5left>.main5lefttext1
 {
   position:absolute;
left:10%;
margin-top:30px;
   width:32px;
height:150px;
font-size:30px;
font-family:华文新魏;
color:white;
 }
 .main5right img
 {width:1002px;
 height:490px;}
 .main6
 {
   height:500px;
 }
 .main6>.main6top
 {
   position:absolute;
margin-left:656px;
margin-top:30px;
width:800px;
height:40px;
 }
 .main6top ul
 {
   position:absolute;
   width:800px;
height:38px;
 }
 .main6top ul li
 {
         float:left;
width:100px;
height:26px;
line-height:16px;
text-align:center;
 }
 .main6>.main6center
 {
   position:absolute;
margin-left:850px;;
margin-top:200px;
width:302px;
height:300px;
 }
 .main6center img
 {
   width:300px;
height:210px;
 }
 .main6center span
 {
   margin-left:50px;
   font-family:楷体;
font-size:18px;
 }
    </style>
  </head>
  <body>
    <div class="maintop">
 <div class="maintopleft">
   <img src="../images/1.png"/>
 </div>
 <div class="maintopright">
   <ul>
 <li>
   <a href="#">首页</a>
 </li>
 <li>
   <a href="#">健康产品</a>
 </li>
 <li>
   <a href="#">走进承天</a>
 </li>
 <li>
   <a href="#">承天互动</a>
 </li>
 <li>
   <a href="#">网上商城</a>
 </li>
</ul>
      </div>
</div>
<div class="main1" id="main1">
  <img id="imgs" src="../images/2.png">
    </div>
    <div class="main2">
 <div class="main2video">
   <video width="600px" height="500px" controls="controls">
 <source src="../images/1.mp4" type="video/mp4">
</video>
 </div>
 <div class="main2text">
   <div class="main2tit">
  <span>承天动态</span>
  <div class="more">
    <a href="#" target="_blank">+更多</a>
  </div>
</div>
<div class="main2main">
  <img src="../images/3.png" style="height:88px;">
   <div class="main2maintext"><a href="#" target="_blank">鲜卤家以酱肘蹄切入3000亿卤制品产业,<br/>主打······</a><br/><br/>2017-03-06
   </div>
</div>
<div class="main2center">
   <img src="../images/4.png" style="height:88px;">
   <div class="main2centertext"><a href="#" target="_blank">探索只能家具新机会?fotric热像科技利用<br/>热······</a><br/><br/>2017-02-17
   </div>
</div>
<div class="main2bottom">
   <img src="../images/5.png" style="height:88px;">
   <div class="main2bottomtext"><a href="#" target="_blank">粉丝网CEO刘超:以“简单,可视化”的数据<br/>单,可视化的数据导向······</a><br/><br/>2017-02-17
   </div>
</div>
       </div>
</div>
<div class="main3">
 <div class="main3left">传承炮制
 </div>
 <div id="main3pic">
   <img id="img1" src="../images/6.png">
   <img id="img2" src="../images/7.png">
 </div>
    </div>
<div class="main4">
 <div class="main4left">闽产道地
 </div>
 <div class="main4left1">国家级中药材示范基地
 </div>
 <div class="main4left2">地处闽江最源头,坐享武夷山脉优越的自然生态,和丰富的中药材资源。建立七叶一枝花、黄精、建泽泻、洪雅江、元胡、瓜萎、三叶青等闽产道地药材示范基地
 </div>
 <div class="main4right">
   <div class="dec1">
   <img src="../images/dec1.png">
<span style="position:absolute;left:28%;"><a href="#">七叶一枝花</a></span>
</div>
<div class="dec2">
   <img src="../images/dec1.png">
<span style="position:absolute;left:28%;"><a href="#">七叶一枝花</a></span>
</div>
<div class="dec3">
   <img src="../images/dec1.png">
<span style="position:absolute;left:28%;"><a href="#">七叶一枝花</a></span>
</div>
  <input type="button" value="更多" οnclick="click1()" class="button1"/>
 </div>
</div>
<div class="main5">
 <div class="main5text">
   <div class="main5left">
 <div class="main5lefttext1">承天健康
 </div>
 <div class="main5lefttext2">
 </div>
</div>
<div class="main5right">
 <img src="../images/8.png"/>
</div>
 </div>
</div>
<div class="main6">
  <div class="main6top">
    <ul>
   <li><a href="#">健康产品</a></li>
<li><a href="#">走进承天</a></li>
<li><a href="#">承天互动</a></li>
<li><a href="#">网上商城</a></li>
</ul>
  </div>
  <div class="main6center">
   <img src="../images/9.png"/>
<span>联系电话:0591-38112298</span>
<br/>
<br/>
<p style="margin-left:10px">版权所有 福州承天药业有限公司</p>
  </div>
</div>
<script type="text/javascript">
       function click1()
 {
   window.open("http://www.imooc.com","_blank","height=600,width=400,top=100");
 }
 var int=setInterval(test, 1000);
      var array = new Array("../images/2.png","../images/1.png","../images/3.png");
      var index = 0;
    
      function test() 
{
                    var myimg = document.getElementById("imgs");
                    if (index == array.length - 1)
                    { index = 0; } 
else { index++; }
                    myimg.src = array[index];
        }  
</script>
  </body>
</html>

  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值