2024年11月05日
对于web前端开发人员来说CSS是相当重要的知识点，特别是一些刚刚进入web前端行业的新手，更应该学好CSS。CSS在使用中也有一些小技巧，掌握了这些专业小技巧对于新手很有帮助，下面就给大家分享几个关于CSS的专业技巧。
1、使用 :not() 为导航添加/取消边框
很多人会这样给导航添加边框，然后给最后一个取消掉：
/* add border */
.nav li {
border-right: 1px solid #666;
}
/* remove border */
.nav li:last-child {
border-right: none;
}
2024年11月05日
标签按照规定好的默认方式排序
块级元素独占一行 从上向下顺序排列
div hr p h1-h6 ul ol form table
2024年11月05日
CSS3为web设计增添了许多令人惊叹的特性，这其中你经常会用到box-shadow（图层阴影），border-radius（边框圆角），transform（变形）这一类受欢迎的常用特性。但是还有一些强大的功能，你可能没有接触到，它们就象是埋藏在地下的宝藏，静静等待着你的发掘。
W3C正不断致力于为设计师、开发人员和用户开发新的CSS特性，下面我们就来看看你可能不知道的CSS3中的10个隐藏特性：
2024年11月05日
在网页制作中，元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路
对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等
注意：如果要适用于任何元素需要提前储存元素的display值
2024年11月05日
2024年11月05日
喜欢的可以收藏转发加关注
下面这些CSS高级技巧，一般人我可不告诉他哦。
使用 :not() 在菜单上应用/取消应用边框
2024年11月05日
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时函数</title>
<script>
var timer=(function{
return function (json){
if(json.currentTime){
var now=new Date;
var year=now.getFullYear;//返回年份（4位数字）
var month=now.getMonth+1;//返回月份（0-11，所以+1）
var day=now.getDate;//返回某天（1-31）
var h=now.getHours;//返回小时（0-23）
var m=now.getMinutes;//返回分钟（0-59）
var s=now.getSeconds;//返回秒数（0-59）
//补O
m=m<10?'0'+m:m;
s=s<10?'0'+s:s;
var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
document.getElementById(json.objId).innerHTML=year+'年'+month+'月'+day+'日'+weekday[now.getDay()]+' '+h+':'+m+':'+s;
setTimeout(function{timer(json)},1000);
}else{
var endtime=new Date(json.endtime);//结束时间
var nowtime = new Date;//当前时间
var lefttime=parseInt((endtime.getTime-nowtime.getTime)/1000); //计算差的秒数
//一天24小时 一小时60分钟 一分钟60秒
d=parseInt(lefttime/3600/24);
h=parseInt((lefttime/3600)%24);
m=parseInt((lefttime/60)%60);
s=parseInt(lefttime%60);
document.getElementById(json.objId).innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
if(lefttime>0){setTimeout(function{timer(json)},1000);}
}
}
})
window.onload=function{
timer({
currentTime:true,
objId:'thisTime'
})
timer({
objId:'countDown',
endtime:"2016/9/1,18:00"
})
}
</script>
</head>
<body>
<b>当前时间:</b> <span id="thisTime"></span><br/><br/>
<b>距离2016/9/1 18:00还有:</b> <span id="countDown"></span>
</body>
</html>2024年11月05日
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
2024年11月05日
Html教程：https://www.runoob.com/html/html-tutorial.html
Css教程：https://www.runoob.com/css/css-tutorial.html
Vue教程：https://www.runoob.com/vue2/vue-tutorial.html