day8910-html

最新推荐文章于 2022-03-29 23:06:00 发布

Antja_fung

最新推荐文章于 2022-03-29 23:06:00 发布

阅读量273

点赞数

分类专栏：前端-html

本文链接：https://blog.csdn.net/zqzb1111/article/details/70658593

版权

前端-html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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"/ οnclick="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="点击换图" οnclick="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="放大缩小" οnclick="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;
	 }

效果图：