AYABALA博客

Category: HTML&CSS (page 1 of 2)

【css】opacity:0,visibility:hidden,display:none的区别

1 opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的
2 visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件
3 display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样

【css】line-height中百分比和倍数区别

line-height:300{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5} 先计算后继承
line-height:3 先继承后计算,行高随字体大小改变

【转载】IE下hack注释

<!–[if lte IE 6]>
<![endif]–>
IE6及其以下版本可见
<!–[if lte IE 7]>
<![endif]–>
IE7及其以下版本可见

继续阅读

【html】词汇断行word-break:break-all word-wrap:break-word 区别

它们的区别就在于:

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

继续阅读

【html】图片格式

JPG:不支持透明半透明,所有空白区域填充白色

GIF:支持透明,不支持半透明

png8:支持透明,不支持半透明

png24:支持透明,也支持半透明

 

JPG:网页中的大图,高清图(体积大);

GIF:网页中的小图标(动画图片);

PNG8:网页中的小图标;

PNG24:图像中存在半透明效果的图片;

【html】Input的size与maxlength属性的区别

maxlength=”5″,则input输入框中只能够输入5个字符

size=”5″,表示input输入框只显示5个字符,但是可以输入更多

CSS3实现一个旋转的正方体

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正方体</title>
	<style>
		*{margin: 0;padding: 0;}
		.per{width:400px;height:400px;position: absolute;top:50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};left:50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};margin:-200px;perspective:1000px;}
		.box{width:100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};height:100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};transform-style:preserve-3d;cursor:default;-webkit-animation:box 5s linear 14s infinite both;}
		.box>div{width: 100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};height: 100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};position: absolute;box-sizing:border-box;border:2px solid rgba(0,0,0,0.8);background:rgba(0,0,0,0);text-align:center;line-height:400px;font-size:50px;background-origin:border-box}
		.box .top{-webkit-animation:top 2s linear  2s  both;}
		.box .bottom{-webkit-animation:bottom 2s linear  4s  both;}
		.box .left{-webkit-animation:left 2s linear  6s  both;}
		.box .right{-webkit-animation:right 2s linear  8s  both;}
		.box .back{-webkit-animation:back 2s  linear 10s  both;}
		.box .front{-webkit-animation:front 2s  linear 12s  both;}
		.box:hover>div{background: rgba(0,0,0,0);border-color:rgba(0,0,0,0);}
		.box:hover .top{background: rgba(255,255,0,0.8);}
		.box:hover .bottom{background: rgba(0,255,0,0.8);}
		.box:hover .left{background: rgba(0,255,255,0.8);}
		.box:hover .right{background: rgba(0,0,255,0.8);}
		.box:hover .front{background: rgba(255,0,255,0.8);}
		.box:hover .back{background: rgba(255,0,0,0.8);}
		@-webkit-keyframes top{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateX(90deg) translateZ(200px);}
		}
		@-webkit-keyframes bottom{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateX(-90deg) translateZ(200px);}
		}
		@-webkit-keyframes left{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateY(-90deg) translateZ(200px);}
		}
		@-webkit-keyframes right{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateY(90deg) translateZ(200px);}
		}
		@-webkit-keyframes front{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:translateZ(200px);}
		}
		@-webkit-keyframes box{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotate3d(1,1,1,360deg);}
		}
		@-webkit-keyframes back{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateY(180deg) translateZ(200px);}
		}

	</style>
</head>
<body>
<div class="per">
	<div class="box">
		<div class="top">top</div>
		<div class="bottom">bottom</div>
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="back">back</div>
		<div class="front">front</div>
	</div>		
</div>
</body>
</html>

注意一点:perspective属性不能设置在.box里,必须设置在其父元素中,否则会导致正方体失真。
在线demo:正方体演示

实现一个弹窗

请按以下效果图和要求完成一个弹窗的HTML和CSS:

总体:弹窗相对于浏览器窗口固定(即滚动条拖动时不影响弹窗位置)且水平垂直居中,弹窗总宽度302px,高度未知(由内容区的内容决定),圆角半径为5px,边框为1px的实线,边框颜色为#cccccc。
标题栏:左右留白20px,高度为40px,文字为14px的微软雅黑且垂直居中,只显示单行文字且超出隐藏并显示“…”,背景色为#eeeeee。
内容区:由一个段落和一个按钮组成,四周留白20px,背景为白色,段落与按钮距离20px,字体均为12px的宋体。
段落:行高1.5倍。
按钮:水平居中、宽80px、高30px、蓝底、白字、文字居中、圆角半径为5px。
关闭:宽10px、高10px、距离上边框10px,距离右边框10px,鼠标为手型,假设关闭图标相对css的路径为“../x.png” 继续阅读

实现一个静态tab标签

请按以下效果图和图中标注完成HTML和CSS:
默认第一个Tab为选中状态。
补充说明:实现静态效果即可,不用实现点击切换。

继续阅读

实现一个右侧自适应两列布局

<div class=”parent”>

<div class=”side”>侧栏</div>

<div class=”main”>主栏</div>

</body>

要求如效果图中标注,两栏间距为10px,请写出这个两列布局的CSS。 继续阅读

Copyright © 2019 AYABALA博客

Theme by Anders NorenUp ↑