前端学习

最新推荐文章于 2024-09-06 17:35:33 发布

dydm_13128

最新推荐文章于 2024-09-06 17:35:33 发布

阅读量427

点赞数

分类专栏： js css

本文链接：https://blog.youkuaiyun.com/dydm_13128/article/details/48300503

版权

js 同时被 2 个专栏收录

1 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文分享了作者在前端项目开发过程中的实践经验，包括盒模型的理解、CSS样式应用技巧、使用jQuery进行DOM操作及轮播图的实现方法等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目的新首页已经快半个月了，将自己其中碰到的问题，或者觉得有用的东西写下吧。由于是通过自己回忆来写，可能思路有点乱，有时间再整理吧。PS：只用过html还是N年前的事了，敬请不BS，，哈哈。。。

首先，是盒模型，这个确实重要，如果不理解清楚它肯定会导致元素位置或者由于浏览器的放大缩小而出现问题，其中从外到里有三层，即margin、border、padding，最里面是content，也就是内容。元素中具体的内容放在content中，而三层则可以通过css的设置来实现各种样式。

其次，对自己用到的css样式进行回忆归纳下。有 -webkit-filter用于设置灰度的， -webkit-filter: grayscale(100%)!可以实现图片的灰度化。而通过如下设置-webkit-filter: grayscale(0%)!important;则可以将元素内的图片恢复彩色； hover可以是对当前元素上的样式改变，也可以仅对其子元素进行样式改变(在hover 后面接子元素名再写函数体)；margin: 0 auto，能够达到居中的目的，而设置margin-left:auto，margin-right:auto;也可以居中；这里有一个<div style="clear:both"></div>不知道是什么但是可以使原来在浮动的元素能够成功居中，希望有懂的朋友看到的话，回复下，在此多谢；

再者，js代码吧。jQuery('#idname).hide();/.show()；可以设置元素的显示与否。

var picArr = new Array();
picArr[0] = ".images/img/main/roll1.png";
picArr[1] = ".images/img/main/roll2.png";
var btnArr = new Array();
btnArr[0] = $(btn1);
btnArr[1] = $(btn2);

$(rollleft).hover(function(){}) .click() .mouseleave() ......jquery定义鼠标函数

$(btn).click(function(){
index = 0; //修改上面的变量index要放在样式更改之前
$(rollbtn1).css("background-position","0 0");
$(rollbtn2).css("background-position","30px 0");
$(rollbtn3).css("background-position","30px 0");
$(rollbtn4).css("background-position","30px 0");
document.getElementById("rollimg").src=picArr[0];
clearInterval(_interval); //点击事件发生，则停止定时任务
});

function get(){ //通过ajax去后台拿数据，并通过showNum函数显示数据
jQuery.ajax({
url : '$ctx/get',
type : 'get',
dataType : 'json',
success : function(data){
if(data.success){
showNum(data.num);
}
}
});

_internal = window.setInterval("getCmtNum()",500); //设置定时执行
window.onload = function(){ //在页面渲染的时候执行
get();
}

挺晚了，想起来的就这么多，项目还木有上线，后续有内容再加上。