CSS
作者QQ:67065435 QQ群:821635552
本站内容全部为作者原创,转载请注明出处!
常用技巧
使用input text代替input file
<form method="post" enctype="multipart/form-data"> <input id="input_file" type="file" name="file" style="display:none;" onchange="document.getElementById('input_text').value = document.getElementById('input_file').value;"> <input id="input_text" type="text" placeholder="Select file" onclick ="document.getElementById('input_file').click();"><br> <input type="submit" value="提交"> </form>
规划界面结构时,所有元素都在块级元素内排版
<!--正确示范--> <div> <img src="xxx"> </div> <div> <p>11111111111111111111</p> <p>11111111111111111111</p> <p>11111111111111111111</p> <p>11111111111111111111</p> <p>11111111111111111111</p> <p>11111111111111111111</p> </div> <!--错误示范--> <img src="xxx"> <div> <p>11111111111111111111</p> <p>11111111111111111111</p> <p>11111111111111111111</p> <p>11111111111111111111</p> <p>11111111111111111111</p> <p>11111111111111111111</p> </div>
设置元素的不透明度
<style> image { opacity:0.5; } </style> <img src="xxx">
隐藏滚动条(滚动功能正常)
<style> #box { overflow:scroll; /*overflow-x:scroll;*/ /*overflow-y:scroll;*/ } </style> <div id="box" style="width:100%;height:100%;"> <div style="width:100%;height:150%;"> </div> </div>
DIV自动撑开
<!--通过在底部加一个元素清除浮动--> <div style="width:100%;min-height:800px;"> <div>11111111111111111111</div> <div>11111111111111111111</div> <div>11111111111111111111</div> <div>11111111111111111111</div> <div>11111111111111111111</div> <div>11111111111111111111</div> <div style="clear:both;"></div> </div>
样式发生改变时用0.5s来逐渐完成这个变化
<style> #test { background-color: #fff; transition: background-color 0.5s; } #test:hover { background-color: #000; transition: background-color 0.5s; } </style> <div id="test"></div>
实现3D效果
<style> * { margin: 0; padding: 0; } body { background-color: rgba(0, 0, 0, 1); } #test { width: 200px; height: 200px; margin: 150px auto; background-color: rgba(255, 255, 255, 1); transform-style: preserve-3d; transform: perspective(800px) rotateX(45deg) rotateY(45deg); } #test div { top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; position: absolute; background-color: rgba(0, 255, 255, 0.5); background-size: contain; box-shadow: 0 0 10px #5fbcff; } #test > div:nth-child(1) { transform: translateX(100px) rotateY(90deg); } #test > div:nth-child(2) { transform: translateX(-100px) rotateY(90deg); } #test > div:nth-child(3) { transform: translateY(100px) rotateX(90deg); } #test > div:nth-child(4) { transform: translateY(-100px) rotateX(90deg); } #test > div:nth-child(5) { transform: translateZ(100px); } #test > div:nth-child(6) { transform: translateZ(-100px); } </style> <body> <div id="test"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body>