![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
一、学习心得
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方法
