将所学jQuery的知识运用起来。这里我用到了width(),height(),position()
一个我最喜欢的美女页面预览图
代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的使用</title>
<style type="text/css">
h1{
margin-left: 400px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<h1>我最喜爱的美女排行榜 </h1>
<div class="box1">
<ul>
<li><img src="../js/images/cy.png" alt="nihao "></li>
<li><img src="../js/images/ym.png" ></li>
<li><img src="../js/images/lss.png"></li>
<li><img src="../js/images/lye.png"></li>
</ul>
</div>
<div class="box2">
<ul id='info'>
<button style="width: 60px;height: 30px;border-radius:20%;background-color: red;color: white">陈瑶</button><h3 id="chenyao" >1994年10月31日出生于四川，中国内地女演员，毕业于北京电影学院。</h3>
<button style="width: 60px;height: 30px;border-radius:20%;background-color: red;color: white">杨幂</button><h3 id="yangmi" >
1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。</h3>
<button style="width: 60px;height: 30px;border-radius:20%;background-color: red;color: white">刘诗诗</button>
<h3 id="liushishi" >
刘诗诗，原名刘诗施，1987年3月10日出生于北京市，中国内地影视女演员。</h3>
<button style="width: 60px;height: 30px;border-radius:20%;background-color: red;color: white">林允儿</button><h3 id="yuner" >
（Yoona）1990年5月30日出生于首尔，韩国女歌手、演员，女子演唱团体少女时代成员。</h3>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="../js/s/jquery-3.3.1.js"></script>
<script type="text/javascript">
var res =$('img').css({
'width':'200',
'height':'200',
'border-radius':'50%',
'box-shadow':'3px 3px 5px pink',
})
var res=$('ul').css({
'list-style-type':'none',
})
var res=$('li').css({
'float':'left',
'margin-left':'50px',
})
var res=$('.box2').css({
'clear':'both',
'margin-top':'300px',
'margin-bottom':'100px',
})
// 查看绝对定位元素的偏移量: position()
var res = $('.box1').position().left
var res = $('.box1').position().top
// 设置第二个跟最后一个背景变色
// $('button:eq(1)').click(function(){
$('button:first').click(function(){
$('#info').attr('style','color:red;background-color:pink')
})
$('button:eq(1)').click(function(){
$('#info').attr('style', 'box-shadow:2px 2px 2px #888')
})
$('button:eq(2)').click(function(){
$('#info').attr('style','background-color:lightgreen')
})
$('button:last').click(function(){
$('#info').attr('style','color:red')
bbb()
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码如下：
总结：迷迷糊糊的。还是多看几遍视频吧。写成这样我尽力了。
