前端开发学习--1

来源：互联网发布：windows 定时任务工具编辑：程序博客网时间：2024/05/29 07:38

找实习的这段时间对未来很迷茫，一直不能确定自己的发展方向，前几天终于决定要往前端发展开发发展。html、css、javascript、js、html5、css3.......这么多需要学习的东西只有html还算可以其他的都没怎么接触过，纯粹的菜鸟。确定要前端的第一天上网搜了菜鸟如何学前端，根据网友的引导打算现在W3C上跟着学基础同时加了两个前端学习的群，就这样开始了我的菜鸟前端学习过程。

我加的第二个群给我一个惊喜，它里面有推荐公开课带着试一试的想法就报了名，真的是稀里糊涂就报了。在这之前一直就只在看W3C里的html基础，第一课老师带着做了QQ空间换肤系统，感觉很棒！使用的开发软件是EditPlus，之所以没用DW这种更方便的工具是觉得初学者还是纯手写能让自己了解的更多更容易理解很多东西。听老师讲课还是很有用的。既复习了我的html又把css入门了，一节课下来收获挺多。

第一天就在html基础学习和html+css实战练习中度过。加油！

下面贴一下代码吧：QQ空间换肤系统。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>腾讯内部技术——qq空间换肤系统</title>
<style type="text/css">
*{margin:0px;}
body{background:#000 url("images/b1.png") no-repeat top center;}
#Con{width:900px;height:137px;background:rgba(255,255,255,0.5);
margin:150px auto 0px; position:relative;}
#Con img.prev{position:absolute;top:60px;left:10px;}/*左按钮*/
#Con img.next{position:absolute;top:60px;right:10px;}/*右按钮*/
#Con .scroll{width:844px;height:137px;margin:0px auto;position:relative;overflow:hidden;/*超出部分隐藏*/border:3px;}
#Con .scroll .imgList{width:99999px;height:137px;position:absolute;left:0px;border:3px;padding:0px;}
#Con .scroll .imgList ul{padding:0px;}
#Con .scroll .imgList ul li{width:175px;height:110px;border:2px solid white;list-style-type:none;float:left;
margin:10px 15px 0px;}

</style>
</head>
<body>
<div id="Con">

<img src="images/dirl.png" class="prev"/>
<img src="images/dirr.png" class="next"/>

<div class="scroll">
<div class="imgList">
<ul>
<li><img src="images/s1.png" dataSrc="images/b1.png"/></li>
<li><img src="images/s2.png" dataSrc="images/b2.png"/></li>
<li><img src="images/s3.png" dataSrc="images/b3.png"/></li>
<li><img src="images/s4.png" dataSrc="images/b4.png"/></li>
<li><img src="images/s5.png" dataSrc="images/b5.png"/></li>
<li><img src="images/s6.png" dataSrc="images/b6.png"/></li>
<li><img src="images/s7.png" dataSrc="images/b7.png"/></li>
<li><img src="images/s8.png" dataSrc="images/b8.png"/></li>
<li><img src="images/s9.png" dataSrc="images/b9.png"/></li>
<li><img src="images/s10.png" dataSrc="images/b10.png"/></li>
</ul>
</div>
</div>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".scroll .imgList ul li").click(function(){
var bimg=$(this).find("img").attr("dataSrc");
//alert(bimg);
$("body").css("background-image","url("+bimg+")");
});
</script>
<script type="text/javascript">
//点击左按钮
var numClick=0;
$("#Con img.prev").click(function(){
numClick++;
//alert(numClick);
if(numClick==3){
alert("左边已经到头了");
numClick=2;
}
//alert("dadadfafadfaf");
$(".imgList").animate({left:-844*numClick},1000);
});
//点击右按钮
$("#Con img.next").click(function(){

numClick--;
//alert(numClick);
if(numClick==-1){
alert("右边已经到头了");
numClick=0;
}
//alert("dadadfafadfaf");
$(".imgList").animate({left:-844*numClick},1000);
});
</script>
</body>
</html>

0 0