一、学习心得
1,学习了比较基础重要的两个方法,css方法attr方法。
2,css方法可以使用快捷设置方式添加对象属性的各式样式。
3,attr可以添加对象内部属性,也能添加用户自定义属于。
二、代码-带详细说明
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css用法</title> <style type="text/css"> .box1{ height: 400px; width: 400px; background-color: blue; position: relative; } .box2{ width: 200px; height: 200px; background-color: red; position:absolute; top: 50px; left: 100px; } </style> </head> <body><div class="box1"> <div class="box2"> </div> </div> <img src="lyf.jpeg" width="150" alt="女神刘亦菲" title="国民大家的" id="pic" data-text="小龙女"> </body> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //css方法的使用 //1,使用css方法设置属性-设置宽度 var res = $('#pic').css('width',300) // 2,直接使用width快捷方式设置宽度 var res = $('#pic').width(400) // 3,直接使用height快捷方式设置高度 var res = $('#pic').height(400) // 4,固定定位偏移量offset var res = $('#pic').offset().top+'px' // 5,绝对定位偏移量positon var res = $('#pic').position(); console.log(res) </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、手抄css方法