您的位置：首页 > 其它

南大软院大神养成计划第二十天

2015-12-05 17:46 316 查看


练习的代码，贴上来，乱乱的

<!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=gb2312"

/>

<title>网页</title>

</head>

<style type="text/css">

<!--

*{

margin:0;

padding:0;

}

body{

font-family:"楷体";

font-size:37px;

background:#FFCCFF;

text-align:center;

}/*设置页面所有参数*/

.bigbox{

margin:0 auto;

}/*设置最大盒子的参数，居中*/

.top{

background-color:#6633FF;

font-size:20px;

margin-bottom:10px;

text-align:center;

}/*设置头部信息*/

.center{

margin-bottom:10px;

}

.box1{

width:200px;

background-color:#009900;

font-size:20px;

float:left;

}

.box2{

background-position:center;

background-repeat:no-repeat;

float:left;

margin:0 5px;

}

.footer{

background-color:#0000FF;

clear:both;

text-align:center;

color:#CCCCCC;

}

a{font-family:"楷体";}

.box1 a:hover{color:#00FF00;font-size:14px;}

.box1 a:hover img{width:200px;height:200px}

ul{list-style:none;height:70px;border-bottom:5px solid

purple;padding-left:30px;}

ul li{float:left;margin-top:20px;}

ul li a{display:block;background-color:#999;text-indent:20px;line-

height:50px;height:50px;margin-bottom:1px; text-decoration:none;}

ul li a:hover{background-color:purple;color:#fff;padding:10px

45px;margin-top:-20px;}

ol li{ list-style-type:none;padding:50px;}

-->

</style>

<body>

<div class="bigbox">

<div class="top">

<ul>

<li><a href="#">首 页</a></li>

<li><a href="Untitled-3.html">商品信息</a></li>

<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>

<li><a href="#">呵呵呵呵</a></li>

<li><form method="get" >

<input

class="search-input" type="text" name="q">

搜索框

<input class="search-submit" type="submit" value=""/>

</form>

</li>

</ul>

</div>

<div class="center">

<div class="box1">

<form name="forml" method="post" action="注册页

面.html">

<h3>登录页面</h3>

账户:<input name="username" type="text" size="15" placeholder="您的

账户">

<br><br>

密码:<input name="password" type="password" size="15" placeholder="

您的密码">

<br><br>

<input type="submit" name="submit" value="提交">

<input type="reset" name="submit2" value="重置">

<ol>

<li><a href="Untitled-3.html"><img src="370.jpg"

width="100px" height="100px">商品简介</a></li>

<li><a href="Untitled-3.html"><img src="370.jpg"

width="100px" height="100px">商品简介</a></li>

<li><a href="Untitled-3.html"><img src="370.jpg"

width="100px" height="100px">商品简介</a></li>

<li><a href="Untitled-3.html"><img src="370.jpg"

width="100px" height="100px">商品简介</a></li>

<li><a href="Untitled-3.html"><img src="370.jpg"

width="100px" height="100px">商品简介</a></li>

</ol>

</form>

</div>

<div class="box2">

<script type="text/javascript"

src="http://libs.baidu.com/jquery/1.9.0/jquery.js"/>

</script>

<style type="text/css">

#main{

position: relative;

height: 100%;

}

.pin{

padding: 15px 0 0 15px;

float:left;

position: absolute;

}

.box{

padding: 10px;

border:1px solid #ccc;

box-shadow: 0 0 6px #ccc;

border-radius: 5px;

}

.box img{

width:162px;

height:auto;

}

</style>

<script>

$( window ).on( "load", function(){

waterfall();

// 调用waterfall函数

var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},

{'src':'3.jpg'},{'src':'4.jpg'}]};

window.onscroll=function(){

// 拖动滚动条时

}

});

var _al = [];

function waterfall(){

// 计算及定位数据块显示分散效果

var _pin = $("#main").find(".pin");

var _pw = _pin.eq(0).outerWidth();

var _wh = $(window).height()/2;

var _ww = $(window).width();

var _co = Math.floor(_ww/_pw);

var _pi = _pin.length;

// 初始化数组

for(var i in _pin){

if(i<_co){

_al.push(0);

}

_pin.eq(i).css({

top:_wh,

left:'50%',

'margin-top':-(_pin.height()/2)+((Math.floor

(Math.random()*10)<5?-1:1)*Math.floor(Math.random()*200)),

'margin-left':-(_pin.width()/2)+((Math.floor

(Math.random()*10)<5?-1:1)*Math.floor(Math.random()*200))

});

}

animateWater(_pin,0,_pw);

}

function checkscrollside(){

// 检测是否具备了加载数据块的条件

}

function animateWater(_pin,_i,_pw){

var _t = getMin(_al);

_pin.eq(_i).animate({

left:_t*_pw,

'margin':0,

top:_al

[_t]

},300,

function(){

_al[_t]+=_pin.eq(_i).outerHeight();

_i++;

animateWater(_pin,_i,_pw);

})

}

function getMin(_al){

var _minT = Math.min.apply(null,_al);

for(var i in _al){

if(_al[i]==_minT){

return i;

}

}

}

</script>

</head>

<body>

<div id="main">

<div class="pin">

<div class="box">

<img src="http://pica.nipic.com/2007-11-

09/2007119124513598_2.jpg"/>

</div>

</div>

<div

class="pin">

<div class="box">

<img

src="http://pic.nipic.com/2007-11-09/200711912453162_2.jpg"/>

</div>

</div>

<div class="pin">

<div class="box">

<img

src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.

jpg"/>

</div>

</div>

<div class="pin">

<div

class="box">

<img

src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-

05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>

</div>

</div>

<div class="pin">

<div class="box">

<img

src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>

</div>

</div>

<div class="pin">

<div class="box">

<img src="http://pic.nipic.com/2007-11-

09/200711912453162_2.jpg"/>

</div>

</div>

<div

class="pin">

<div class="box">

<img

src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.

jpg"/>

</div>

</div>

<div class="pin">

<div

class="box">

<img

src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-

05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>

</div>

</div>

<div class="pin">

<div class="box">

<img

src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>

</div>

</div>

<div class="pin">

<div class="box">

<img src="http://pic.nipic.com/2007-11-

09/200711912453162_2.jpg"/>

</div>

</div>

<div

class="pin">

<div class="box">

<img

src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.

jpg"/>

</div>

</div>

<div class="pin">

<div

class="box">

<img

src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-

05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>

</div>

</div>

<div class="pin">

<div class="box">

<img

src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>

</div>

</div>

<div class="pin">

<div class="box">

<img src="http://pic.nipic.com/2007-11-

09/200711912453162_2.jpg"/>

</div>

</div>

<div

class="pin">

<div class="box">

<img

src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.

jpg"/>

</div>

</div>

<div class="pin">

<div

class="box">

<img

src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-

05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>

</div>

</div>

<div class="pin">

<div class="box">

<img

src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>

</div>

</div>

<div class="pin">

<div class="box">

<img src="http://pic.nipic.com/2007-11-

09/200711912453162_2.jpg"/>

</div>

</div>

<div

class="pin">

<div class="box">

<img

src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.

jpg"/>

</div>

</div>

<div class="pin">

<div

class="box">

<img

src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-

05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>

</div>

</div>

</div>

</div>

</div>

<div class="footer">jx370出版，不可能有雷同</div>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航