10个非常有用的CSS技巧

2024-06-20 00:38
文章标签 技巧 css frontend 非常 有用

本文主要是介绍10个非常有用的CSS技巧，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 将网页或元素居中       

center     

    
HTML：

  1. <div class="wrap">  
  2. </div><!-- end wrap -->  
CSS：
  1. .wrap { width:960px; margin:0 auto;}  

 

 

2.Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)
   
stickyfooter

   

 
HTML：

  1. <div id="wrap">  
  2.   
  3. <div id="main" class="clearfix">  
  4.   
  5. </div>  
  6.   
  7. </div>  
  8.   
  9. <div id="footer">  
  10.   
  11. </div>  

CSS：

  1. * { margin:0; padding:0; }   
  2.   
  3. html, body, #wrap { height: 100%; }  
  4.   
  5. body > #wrap {height: auto; min-height: 100%;}  
  6.   
  7. #main { padding-bottom: 150px; }  /* must be same height as the footer */  
  8.   
  9. #footer {  
  10.         position: relative;  
  11.  margin-top: -150px; /* negative value of footer height */  
  12.  height: 150px;  
  13.  clear:both;}   
  14.   
  15. /* CLEAR FIX*/  
  16. .clearfix:after {content: ".";  
  17.  display: block;  
  18.  height: 0;  
  19.  clear: both;  
  20.  visibility: hidden;}  
  21. .clearfix {display: inline-block;}  
  22. /* Hides from IE-mac */  
  23. * html .clearfix { height: 1%;}  
  24. .clearfix {display: block;}  
  25. /* End hide from IE-mac */  

 

3.跨浏览器最小高度设置      
min-height

       

 CSS：

  1. .element { min-height:600px; height:auto !important; height:600px; }  

 

 

4.Box阴影(CSS3)
   
box-shadow

   

    
CSS：

  1. .box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }  

 

5.文字阴影（CSS3）

   
text-shadow

        

CSS：

  1. .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }  

 

6.跨浏览器的CSS透明度
   
opac

 

CSS：

  1. .transparent {  
  2.     
  3.   /* Modern Browsers */ opacity: 0.7;  
  4.   
  5.   /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  
  6.   
  7.   /* IE 5-7 */ filter: alpha(opacity=70);  
  8.   
  9.   /* Netscape */ -moz-opacity: 0.7;  
  10.   
  11.   /* Safari 1 */ -khtml-opacity: 0.7;  
  12.     
  13. }  

 

 

7.著名的 Meyer Reset（重置）
   
reset

 

CSS：

  1.   html, body, div, span, applet, object, iframe,  
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
  3. a, abbr, acronym, address, big, cite, code,  
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,  
  5. small, strike, strong, sub, sup, tt, var,  
  6. dl, dt, dd, ol, ul, li,  
  7. fieldset, form, label, legend,  
  8. table, caption, tbody, tfoot, thead, tr, th, td {  
  9.  margin: 0;  
  10.  padding: 0;  
  11.  border: 0;  
  12.  outline: 0;  
  13.  font-weight: inherit;  
  14.  font-style: inherit;  
  15.  font-size: 100%;  
  16.  font-family: inherit;  
  17.  vertical-align: baseline;  
  18. }  
  19. /* remember to define focus styles! */  
  20. :focus {  
  21.  outline: 0;  
  22. }  
  23. body {  
  24.  line-height: 1;  
  25.  color: black;  
  26.  background: white;  
  27. }  
  28. ol, ul {  
  29.  list-style: none;  
  30. }  
  31. /* tables still need 'cellspacing="0"' in the markup */  
  32. table {  
  33.  border-collapse: separate;  
  34.  border-spacing: 0;  
  35. }  
  36. caption, th, td {  
  37.  text-align: left;  
  38.  font-weight: normal;  
  39. }  
  40. blockquote:before, blockquote:after,  
  41. q:before, q:after {  
  42.  content: "";  
  43. }  
  44. blockquote, q {  
  45.  quotes: "" "";  
  46. }  
  47.    

 

8.删除虚线轮廓      
dotted

   

CSS：

  1. a, a:active { outline: none; }  

 

9.圆角
   
rounded

         

CSS：

  1. .element {  
  2.  -moz-border-radius: 5px;  
  3.  -webkit-border-radius: 5px;  
  4.  border-radius: 5px; /* future proofing */  
  5. }  
  6. .element-top-left-corner {  
  7.  -moz-border-radius-topleft: 5px;  
  8.  -webkit-border-top-left-radius: 5px;  
  9. }  

 

10.覆盖内联的样式
import

     

 CSS:

  1. .override {  
  2.  font-size: 14px !important;  
  3. }  

这篇关于10个非常有用的CSS技巧的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1076610。

相关文章

Java实现复杂查询优化的7个技巧小结

Java实现复杂查询优化的7个技巧小结

《Java实现复杂查询优化的7个技巧小结》在Java项目中,复杂查询是开发者面临的“硬骨头”,本文将通过7个实战技巧,结合代码示例和性能对比,手把手教你如何让复杂查询变得优雅,大家可以根据需求进行选择... 目录一、复杂查询的痛点：为何你的代码“又臭又长”1.1冗余变量与中间状态1.2重复查询与性能陷阱1.
阅读更多...
Python内存优化的实战技巧分享

Python内存优化的实战技巧分享

《Python内存优化的实战技巧分享》Python作为一门解释型语言,虽然在开发效率上有着显著优势,但在执行效率方面往往被诟病,然而,通过合理的内存优化策略,我们可以让Python程序的运行速度提升3... 目录前言python内存管理机制引用计数机制垃圾回收机制内存泄漏的常见原因1. 循环引用2. 全局变
阅读更多...
MySQL中查询和展示LONGBLOB类型数据的技巧总结

MySQL中查询和展示LONGBLOB类型数据的技巧总结

《MySQL中查询和展示LONGBLOB类型数据的技巧总结》在MySQL中LONGBLOB是一种二进制大对象（BLOB）数据类型,用于存储大量的二进制数据,：本文主要介绍MySQL中查询和展示LO... 目录前言1. 查询 LONGBLOB 数据的大小2. 查询并展示 LONGBLOB 数据2.1 转换为十
阅读更多...
Python进阶之列表推导式的10个核心技巧

Python进阶之列表推导式的10个核心技巧

《Python进阶之列表推导式的10个核心技巧》在Python编程中,列表推导式（ListComprehension）是提升代码效率的瑞士军刀,本文将通过真实场景案例,揭示列表推导式的进阶用法,希望对... 目录一、基础语法重构：理解推导式的底层逻辑二、嵌套循环：破解多维数据处理难题三、条件表达式：实现分支
阅读更多...
Python中的filter() 函数的工作原理及应用技巧

Python中的filter() 函数的工作原理及应用技巧

《Python中的filter()函数的工作原理及应用技巧》Python的filter()函数用于筛选序列元素,返回迭代器,适合函数式编程,相比列表推导式,内存更优,尤其适用于大数据集,结合lamb... 目录前言一、基本概念基本语法二、使用方式1. 使用 lambda 函数2. 使用普通函数3. 使用 N
阅读更多...
Go语言网络故障诊断与调试技巧

Go语言网络故障诊断与调试技巧

《Go语言网络故障诊断与调试技巧》在分布式系统和微服务架构的浪潮中,网络编程成为系统性能和可靠性的核心支柱,从高并发的API服务到实时通信应用,网络的稳定性直接影响用户体验,本文面向熟悉Go基本语法和... 目录1. 引言2. Go 语言网络编程的优势与特色2.1 简洁高效的标准库2.2 强大的并发模型2.
阅读更多...
Python 函数详解:从基础语法到高级使用技巧

Python 函数详解:从基础语法到高级使用技巧

《Python函数详解:从基础语法到高级使用技巧》本文基于实例代码,全面讲解Python函数的定义、参数传递、变量作用域及类型标注等知识点,帮助初学者快速掌握函数的使用技巧,感兴趣的朋友跟随小编一起... 目录一、函数的基本概念与作用二、函数的定义与调用1. 无参函数2. 带参函数3. 带返回值的函数4.
阅读更多...
基于Python Playwright进行前端性能测试的脚本实现

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指
阅读更多...
游戏闪退弹窗提示找不到storm.dll文件怎么办? Stormdll文件损坏修复技巧

游戏闪退弹窗提示找不到storm.dll文件怎么办? Stormdll文件损坏修复技巧

《游戏闪退弹窗提示找不到storm.dll文件怎么办?Stormdll文件损坏修复技巧》DLL文件丢失或损坏会导致软件无法正常运行，例如我们在电脑上运行软件或游戏时会得到以下提示：storm.dll... 很多玩家在打开游戏时，突然弹出“找不到storm.dll文件”的提示框，随后游戏直接闪退，这通常是由于
阅读更多...
从入门到精通详解LangChain加载HTML内容的全攻略

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言：当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2