day8910-html

来源：互联网发布：mac专用dj软件编辑：程序博客网时间：2024/06/11 04:02

<!DOCTYPE html><html><head><meta charset="UTF-8"><!--此条必加--><title>my blog</title><link href="blogh.css" type="text/css" rel="stylesheet" /><script src="blog.js" type="text/javascript" ></script></head><body background="bg.jpg"><div class="bigbox"> <div class="headbox"><p style="color:burlywood"; class="blogname">leticia博客天地</p><form><input type="text" value="更改头像" name="changebutton" class="changetou" style="color:burlywood"/ onclick="change()"></form>  <img src="tu.jpg" alt="头像" class="tou"/><!--<p class="blogname">我的博客</p>-->  </div><!--   <div class="namebox">  </div> --> <div class="buttonbox"> <input type="text" name="button1" style="color:burlywood" class="buttonsmall" value="文章" /> <input type="text" name="button2" style="color:burlywood" class="buttonsmall" value="私信" /> <input type="text" name="button3" style="color:burlywood" class="buttonsmall" value="搜索" /> </div> <div class="textbox"> <ul class="rollbox">  <img id="picture" src="r1.jpg" alt="点击换图" onclick="changeImages()">  </ul><!--   <li>  <a href="javascript:void(0)" target="_blank">  <img src="r1.jpeg">  </a>  </li>  <li>  <a href="javascript:void(0)" target="_blank">  <img src="r2.jpg">  </a>  </li>  <li>  <a href="javascript:void(0)" target="_blank">  <img src="r3.jpg">  </a>  </li>  </ul>  <a class="aleft" title="上一张"></a>  <a class="aright" title="下一张"></a> -->  <!-- <div class="scroll">  <span class="now"></span>  <span class=""></span>  <span class=""></span>  </div> -->  <div class="stext">  <p style="color: burlywood">秋起，有微风滑过的清香，有阳光照射的明媚，有树叶儿滑落的声响，还有，一抹抹微凉拂过心头的舒畅。微风，轻掀起衣角，轻吻着发丝，不经意间，那些春花夏梦的记忆，就感染这个多情的秋季。于是，心，慢慢的沉浸，轻轻的驻足，让心停歇，聆听风，倾听雨，原来，岁月处处都充满着暖意……</p>  </div> </div> <div class="menubox"> <ul class="zoombox">  <img id="zoom" src="r5.jpg" alt="放大缩小" onclick="changesize()"> </ul> </div></div></body><!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> --><!-- <script src="blog.js" type="text/javascript" ></script> --><!--<script src="jquary-1.11.0.js" type="text/javascript" ></script>--></html>

/*class*/.bigbox{width: 900px;height: 1000px;color: lightyellow;border: solid;float:left;margin: 0px auto;position: absolute;left: 10%;top:20%;/*padding-left: 150px;*/padding: 30px 50px ;    /*padding-right: 10px;*/}.headbox{width: 800px;height: 150px;background-color: lightyellow;/*border: none;*//* border-radius: 50%;*/  /*  -moz-border-radius: 50%;    -webkit-border-radius: 50%;border-radius: 50%;*/float:left;margin-top: 20px;margin-right: 20px;box-shadow: 0px 0px 5px ;    overflow:hidden;/*z-index: -1;*//*padding: 0px;*//*position: absolute;left: 100px;top:30px;*/}.namebox{width: 380px;height: 100px;color: rgb(0,0,1);border: solid;float:left;margin-top: 20px;/*z-index: -1;*//*padding: 0px;*/}.buttonbox{width:800px;    height: 50px;    background-color: transparent;    float: left;    margin-top: 20px;   /* position: absolute;left: 100px;top:30px;*/}.textbox{width:480px;    height: 700px;    background-color: lightyellow;    float: left;    clear:left;    margin-top: 20px;    margin-right: 20px;}.stext{width:400px;    height: 300px;    background-color: lightyellow;    position:absolute;    top:700px;    left:100px;/*font-color:burlywood;*/}.menubox{width:300px;    height: 500px;    background-color: lightyellow;    float: left;    margin-top: 20px;    }.tou{   /* width:10px;    height:10px;    border-radius: 50%;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    box-shadow:0 0 0 3px rgb(169,237,230),0 0 0 4px rgb(129,190,183);    margin: 5px auto;*/        /*margin-top: 100px; */        width:150px;         height:150px;         border-radius:100px;        background-color: white;         overflow: hidden;        position: absolute;        left: 380px;}.blogname{font-family: 幼圆;font-size: large;text-align: center;width:150px;height:30px;position:absolute;left:600px;top:150px;background-color:beige;}.changetou{font-size: small;text-align: center;width:150px;height:30px;position:absolute;left:250px;top:150px;background-color:transparent;border:none;}.buttonsmall{font-size: small;text-align: center;width:80px;height:30px;/*position:absolute;left:250px;top:150px;*/background-color:transparent;border:none;/*-color:burlywood;*/}.rollbox{width: 400px;height: 400px;overflow: hidden;margin: 0 auto;}#picture{width: 400px;height: 400px;overflow: hidden;margin: 0 auto;}/*.aleft{display: inline-block;position:absolute;top:510px;left: 100px;width: 30px;height: 50px;background: url(jian.png) no-repeat 0 0;cursor: pointer;z-index: 8;}.aright{display: inline-block;position:absolute;top:510px;left: 500px;width: 30px;height: 50px;background: url(jian.png) no-repeat -170px 0;cursor: pointer;z-index: 8;}*/.zoombox{width:250px;    height: 300px;    background-color: lightblue;    margin:0 auto;    /*overflow: hidden;*/}#zoom{width:100px;    height: 200px;    background-color: lightblue;}

 var b=1;// function changeImages(){     a = document.getElementById('picture');                 if(b<=3){                    a.src="r"+b+".jpg";                     b++;                      }else{                         b=1;                      }                  } var flag=1;function changesize(){   var c = document.getElementById('zoom');if(flag==1)      {      // c.width = c.width*1.1;      // c.height = c.height*2;      c.src = "r"+ 5+".jpg";      }    else     {     // c.width = c.width/2;      // c.height = c.height/2;      c.src ="r"+6+".jpg";    }    flag = !flag; }

效果图：

结课作业：完成个人博客，实现轮播和放大镜功能。

拖延症晚期的人，今天才开始写博客作业，Js完全跳过难点勉强实现了功能，学习js, a long way to go.

0 0