收藏
批改狀態(tài)：合格
老師批語：
主要內(nèi)容：
1、自定義屬性操作【attr()；removeAttr()】
2、原生固有屬性操作【prop();removeProp()】
3、自定義數(shù)據(jù)屬性操作【data()】
4、樣式操作【css()】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
width: 1000px;
margin: auto;
}
.container .main{
height: 600px;
overflow: hidden;
}
.main .left{
width: 33%;
height: 600px;
background-color: #FF8C00;
float: left;
}
.main .right{
width: 33%;
height: 600px;
background-color: dodgerblue;
float: right;
}
.main .center{
height: 600px;
margin-left: 33.1%;
margin-right: 33.1%;
background-color: #8A2BE2;
}
.phtitle{
text-align: center;
font-size: 1.5em;
font-weight: bold;
padding: 10px;
}
.ph ul{
margin: 0;
padding: 0;
width: 100%;
}
.ph ul li{
height: 40px;
line-height: 40px;
text-align: left;
list-style-type: none;
margin: 10px;
border-bottom: 1px dotted #DCDCDC;
}
.ph ul li:hover{
height: 60px;
line-height: 60px;
background-color: #FF7F50;
}
.ph ul li span{
display: inline-block;
width: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<img src="../../img/logo.png" alt="" />
</div>
<div class="main">
<div class="left">
<div class="phtitle">今日排行</div>
<div class="ph">
<ul>
<li>2</li>
<li>a</li>
<li>sdf</li>
<li>sdg</li>
<li>sdf</li>
<li>sgdf</li>
<li>sdf</li>
<li>sdf</li>
<li>sdf</li>
<li>gfd</li>
</ul>
</div>
</div>
<div class="right">
<div class="phtitle">七日排行</div>
<div class="ph">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="center">
<div class="phtitle">昨日排行</div>
<div class="ph">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$('body').attr('style','background-color: #E4EBEC;')
$('body').css('color','#fff')
$('.top').css({
'width':'100%',
'text-align':'center',
})
$('.top').children('img').width(280)
$('.top').children('img').height(180)
var ul = $('.ph').children('ul')
var li1=$(ul[0]).children('li')
var li2=$(ul[1]).children('li')
var li3=$(ul[2]).children('li')
for (var i=0;i<10;i++) {
var html1nr=''
var html2nr=''
var html3nr=''
var phnum=''
var sjnum1=Math.floor(Math.random()*10)
var sjnum2=Math.floor(Math.random()*10)
var sjnum3=Math.floor(Math.random()*10)
var pic = Array('../../img/up1.jpg','../../img/up2.jpg','../../img/up3.jpg','../../img/up4.jpg','../../img/up5.jpg','../../img/up6.jpg','../../img/up7.jpg','../../img/up8.jpg','../../img/up9.jpg','../../img/up10.jpg')
var picurl1 = '<img src="'+pic[sjnum1]+'">'
var picurl2 = '<img src="'+pic[sjnum2]+'">'
var picurl3 = '<img src="'+pic[sjnum3]+'">'
phnum = parseInt(i+1)
if(i==0){
html1nr = picurl1
html2nr = picurl2
html3nr = picurl3
$(li1[i]).html(html1nr+'用戶昵稱'+phnum)
$(li2[i]).html(html2nr+'用戶昵稱'+phnum)
$(li3[i]).html(html3nr+'用戶昵稱'+phnum)
}else{
html1nr = '<span>'+phnum+'</span>'
html1nr += picurl1
html2nr = '<span>'+phnum+'</span>'
html2nr += picurl2
html3nr = '<span>'+phnum+'</span>'
html3nr += picurl3
$(li1[i]).html(html1nr+'用戶昵稱'+phnum)
$(li2[i]).html(html2nr+'用戶昵稱'+phnum)
$(li3[i]).html(html3nr+'用戶昵稱'+phnum)
}
}
$('li img').css({'width':'30px','border-radius':'50%','margin':'0 10px'})
$('ul').children('li:first-child').css({'color':'red','font-size':'1.5em','text-align':'center'})
li22 = $('ul').children('li:nth-child(1)').position()
var theli1 = $(li1[0]).offset()
console.log('左邊'+theli1.left+' 頂邊'+theli1.top)
console.log('左邊'+li22.left+' 頂邊'+li22.top)
</script>點擊 "運(yùn)行實例" 按鈕查看在線實例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號