首页 web前端 html教程 css常用技巧【持续更新】_html/css_WEB-ITnose

css常用技巧【持续更新】_html/css_WEB-ITnose

Jun 24, 2016 am 11:56 AM
css 常用 技巧 更新

         1、横向滚动条去除
    demo:
   


代码解析:    
   竖向正常显示,横向溢出隐藏。

        2、关于背景平铺(百分百显示)
    demo:
    .outer {width:100%;background:url() no-repeat center top;}
    .core {width:1000px; margin:auto;}
代码解析:
    双层div嵌套,外层div设置宽度百分百,no-repeat背景不重复,center背景图片的缩放基点在中间,top自上边往下显示;内层div设置固定宽度,margin自动【居中显示】。

        3、position与z-index
    demo:
    层被遮盖,不能正常显示。
问题解析:
    设置div的position和z-index。 详情:POSITION和Z-INDEX

        4、去除超链接虚线边框
    deme:
    点击超链接后,出现虚线边框
代码解析:
    IE浏览器:a {blr:expression(this.onFocus=this.blur());}
    FF浏览器:a {outline: none;} 或者缩小范围: a:focus { outline: none; } 注:后者使得鼠标左键在链接上按下,松开之前的这段时间里,仍会显示虚线的outline. 
    
        5、加入收藏(简洁代码)
    demo:
    右上角:加入收藏
代码解析:
加入收藏

        6、div应用float溢出fatherdiv
    demo:
    Fdiv不设置高度,div应用float,内容溢出
    解决方法:
    增加Bdiv并应用clear:both清浮动或者给Fdiv设置高度。

        7、CSS的缩写规则
    ①、color的缩写
    demo:
#ff00ee->#f0e  简单缩写  注:#f0f0fe->#f0f0fe 不可以缩写
    ②、单位的缩写
    数值为0,可以不写单位
    demo:
margin:0px->margin:0
    ③、margin和padding的缩写
    描述规则,顺时针上右下左
    demo:
margin-left:15px;margin-right:20px;margin-top:30px;margin-buttom:10px;--> 
margin:30px 20px 10px 15px; 上=30px、右=20px、下=10px、左=15px;
margin:30px;上=右=下=左=30px;
margin:30px 20px; 上=下=30px;左=右=20px;
margin:30px 10px 15px; 上=30px; 下=10px;左=右=15px;
注:上右下左顺时针不止适用于这里哦
    ④、border的缩写
    规则:border:border-width border-style border-color
    demo:
div {border-width:1px;border-style:solid;border-color:#f00;}/*边框宽度 边框样式 边框颜色*/
->div {border:1px solid #f00;}
    border-top、border-right、border-buttom、border-left不可以缩写,但是可以:
div{    border-width:1px;/*边框四个方向的border宽度都为1px*/
          border-style:solid dashed double;/*上方向边框:solid;下方向边框:dashed;左右方向边框:double;*/
          border-color:#f00 #000; /*上下边框颜色为:#f00; 左右边框颜色:#00*/
}

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue中placeholder是什么意思 vue中placeholder是什么意思 May 07, 2024 am 09:57 AM

在 Vue.js 中,placeholder 属性指定输入元素的占位符文本,当用户未输入内容时显示,提供输入提示或示例,提高表单可访问性。其用法为在输入元素中设置 placeholder 属性,并可使用 CSS 自定义外观。最佳实践包括与输入相关、简短清晰、避免默认文本,并考虑可访问性。

Windows无法访问指定设备、路径或文件 Windows无法访问指定设备、路径或文件 Jun 18, 2024 pm 04:49 PM

小伙伴电脑出现这样的故障,打开“此电脑”和C盘文件会提示“Explorer.EXEWindows无法访问指定设备、路径或文件。你可能没有适当的权限访问访问该项目。”包括文件夹、文件、此电脑、回收站等,双击都会弹出这样的窗口,右键打开又是正常的。这是系统更新导致,如果你也遇到这样的情况,下面小编教大家如何解决。一,打开注册表编辑器Win+R,输入regedit,或右键开始菜单运行输入regedit;二,定位注册表“计算机\HKEY_CLASSES_ROOT\PackagedCom\ClassInd

js中span是什么意思 js中span是什么意思 May 06, 2024 am 11:42 AM

span 标签可为文本添加样式、属性或行为,用于:添加样式,如颜色、字体大小。设置属性,如 id、class 等。关联行为,如点击、悬停等。标记文本,以便进一步处理或引用。

Windows永久暂停更新,Windows关闭自动更新 Windows永久暂停更新,Windows关闭自动更新 Jun 18, 2024 pm 07:04 PM

Windows更新可能导致以下一些问题:1.兼容性问题:某些应用程序、驱动程序或硬件设备可能与新的Windows更新不兼容,导致它们无法正常工作或崩溃。2.性能问题:有时,Windows更新可能会导致系统变得更慢或出现性能下降的情况。这可能是由于新的功能或改进需要更多资源来运行。3.系统稳定性问题:某些用户报告称,在安装Windows更新后,系统可能会出现意外的崩溃或蓝屏错误。4.数据丢失:在罕见的情况下,Windows更新可能会导致数据丢失或文件损坏。这是为什么在进行任何重要的更新之前,备份您

js中rem是什么意思 js中rem是什么意思 May 06, 2024 am 11:30 AM

CSS 中的 REM 是一种相对于根元素(html)字体大小的相对单位。它具有以下特点:相对根元素字体大小,不受父元素影响。当根元素字体大小改变时,使用 REM 的元素也会相应调整。可用于任何 CSS 属性。使用 REM 的优点包括:响应性:保持不同设备和屏幕大小上的文本可读性。一致性:确保整个网站字体大小一致。可扩展性:通过调整根元素字体大小轻松更改全局字体大小。

vue中引入图片的方法 vue中引入图片的方法 May 02, 2024 pm 10:48 PM

Vue 中引入图片有五种方法:通过 URL、require 函数、静态文件、v-bind 指令和 CSS 背景图片。可以在 Vue 的计算属性或侦听器中处理动态图片,并使用打包工具优化图片加载。确保路径正确,否则会显示加载错误。

AMD 发布新 AGESA 固件更新,修复影响 Zen 2 处理器的 Zenbleed 漏洞 AMD 发布新 AGESA 固件更新,修复影响 Zen 2 处理器的 Zenbleed 漏洞 May 03, 2024 pm 04:31 PM

本站5月3日消息,微星公司今天发布了AMDAM4AGESA1.2.0.Ca固件更新,修复了针对AMDRyzen4000系列Zen2APU中的Zenbleed安全漏洞。微星本次发布的固件更新适用于几乎所有X570主板,主要修复了适用于Zen2处理器中CVE-2023-20593,AMD将其归类为中级威胁。本站注:该漏洞追踪编号为CVE-2023-20593,能以每核心每秒30KB的速度窃取机密数据。此攻击会影响CPU上运行的所有软件,包括虚拟机、沙箱、容器和进程。尽管AGESA1.2.0.Ca的目

浏览器插件是什么语言写的 浏览器插件是什么语言写的 May 08, 2024 pm 09:36 PM

浏览器插件通常使用以下语言编写:前端语言:JavaScript、HTML、CSS后端语言:C++、Rust、WebAssembly其他语言:Python、Java

See all articles