我是标题,这一篇主要是部分CSS样式小问题:
1、float浮动:
给所有子元素加上float,可以使子元素横向并排左右布局,在父元素加上clearfix清除bug:
clearfix::after{
content:'';
display:block;
clear:both;
}
2、hover悬浮:
当鼠标选悬停时,在命令行里用hover表示,例如:
.topNavbar nav ul>li>a:hover{
border-bottom:1px solid red;
}
3、脱离文档流,一般用于背景图与导航栏重合或其他情况,令导航栏相对于视口或浏览器固定:
topNavbar{
position:fixed;
top:0;
left:0;
}
但这有时候会有一个bug,导航栏的margin边框可能会超出body上部,这是因为body本身有一个margin,所以一般情况下写css时可以先设置一个全局样式:
*{
margin:0;
padding:0;
}
4、一般情况下,想设置div块内所有元素宽高一样,只需要在大框架宽高确定后,在其他元素内设置高度height就行,宽度width会自适应。
5、背景图太大,想要居中:
{background-position:center center;水平居中 垂直居中;
background-size:cover;自适应覆盖所有面积按比例缩放;
}
有一个属性,表示最大宽度980像素,左右自适应居中:
{max-width:980px;
margin-left:auto;
margin-right:auto;
}
6、line-height表示行高,可以再加上top或bottom。
7、span里不要放div,会有bug,可以放span,span加display:block就等于div。
8、类似个人介绍内容想要内缩,与框架边框有间距并覆盖一部分到导航背景图,就找到包含整个个人介绍文字与图片的上一级框架元素,添加样式:
.textandpicture{
padding:50px;
}
9、用JS生成标签,在需要创建的标签例如为div的上一级父标签内声明id例如为baba,然后输入命令
div1 = document.createElement("div")
baba.appendChild(div1)
10、改变原网址输入新的需求网址,重新触发键盘事件或鼠标事件想要打开网页的命令:
location.href = 'http://'+website;
等同于window.open('http://'+website,'_blank')
11、while循环:只要语句为真true,就不断循环代码块:
while(条件){
语句;
}
12、for循环:就是把while循环的三要素放在一起,用分号隔开;
例如:for (var a = 1; a <10; a = a +1){
}
13、switch结构:
var a = 1
switch( a ){
case 1:console.log(a等于1);
break;
case 2:console.log(a等于2);
break;
default:console.log(a等于其他值);
}
default不需要break,break的作用是让代码不再按既有的顺序执行,而是跳出本轮内层循环,进入下一轮外层循环。
14、continue:用于立即终止本轮内循环,进入下一次内循环。
例如:
var a = 1
while(a < 10){
a++;
if(a%2 === 0 )continue;
console.log(a);
}
上面代码只有a为奇数时才会被打印出来,为偶数时直接跳过打印步骤返回循环顶部。
15、typeof运算符:
typeof 123;返回'number'
typeof '123':返回'string'
typeof false;返回'boolen'
typeof null;返回'object'
typeof NaN;返回'number'' NaN是数值,但不等于任何数,包括本身。
网友评论