当前位置:首页 > 站长笔记 > css笔记 > 文章
运行天数:2994 天 最后更新:2020-7-1

CSS重置样式Normalize.css

2020年03月31日 | 点击量: 97

Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。   normalize.css的目标如下: 保留有用的浏览器默认值,而不是删除它们。 规范化各种HTML元素的样式。 纠正错误和常见的浏览器不一致。 通过微妙的改进提高可用性。 使用注释和详细文档解释代码。 它支持多种浏览器(包括移动浏览器),并且包括对HTML5元素,排版,列表,嵌入式内容,表单和表格进行规范化的CSS。   Github地址 https://github.com/necolas/normalize.css    
关键词:
详细阅读

CSS3 @media查询的应用

2020年03月31日 | 点击量: 73

网页制作过程中经常会遇到自适应的情况,不同设备分辨率不一样,如何能使用网页适应设备呢? 在css3中有个技术@media 查询,可以帮到我们解决这个问题.   使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 CSS 语法 @media mediatype and|not|only (media feature) { CSS-Code; } 注意:建议在书写css的过程中,@media查询带的css写在后面,以避免被前面的css覆盖 知识扩展 @media......
关键词:
详细阅读

超宽图片全屏居中显示的方法

2020年02月15日 | 点击量: 221

现在很多网站的图片都设计成超宽图片,在小屏显示器上显示,会遇到显示不全,不居中显示的问题。 为了网站的美观和图片达到好的效果,我们要实现在超宽图片全屏居中显示,实现方法如下: <html> <head> <title>超宽图片全屏居中,超出部分自动隐藏</title> <style> .content { width:100%; position:relative; overflow:hidden; /*height:1000px;高度可以不设置*/ } .info { width:1600px; /*position:absolute;设置高度时使用*/ position:relative; /*页面底部有内容时使用*/ left:50%; margin-left:-800px; } </style> </head> <body&g......
关键词:
详细阅读

CSS3使用animation 属性设置特效例子

2019年12月27日 | 点击量: 310

  Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。 Safari 和 Chrome 支持替代的 -webkit-animation 属性。 注释:Internet Explorer 9 以及更早的版本不支持 animation 属性。   div{ animation:xz 1s linear infinite ;//infinite为无限循环,可修改为数字次数 } @keyframes xz{ from {transform:rotate(0deg);} to{transform:rotate(360deg);} }   div{ animation: load 0.5s infinite alternate; } @keyframes load { 0% { box-shadow: inset 0px 0px 10px 5px rgba(255, 255, 255, 1), 0px 0px 10px 3px rgba(251, 207, 14, 0.5); } 100% { box-sh......
关键词:
详细阅读

input点击边框去除

2019年12月20日 | 点击量: 363

  css中添加 outline:none;  
关键词:
详细阅读

Web安全颜色

2019年10月18日 | 点击量: 366

不同的平台(Mac、PC等)有不同的调色板,不同的浏览器也有自己的调色板。这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别很大。 选择特定的颜色时,浏览器会尽量使用本身所用的调色板中最接近的颜色。如果浏览器中没有所选的颜色,就会通过抖动或者混合自身的颜色来尝试重新产生该颜色。   为了解决Web调色板的问题,人们一致通过了一组在所有浏览器中都类似的Web安全颜色。 这些颜色使用了一种颜色模型,在该模型中,可以用相应的16制进制值00、33、66、99、CC和FF来表达三原色(RGB)中的每一种。这种基本的Web调色板将作为......
关键词:, ,
详细阅读

Data URI scheme支持的类型

2019年08月30日 | 点击量: 443

      data:, 文本数据 data:text/plain, 文本数据 data:text/html, HTML代码 data:text/html;base64, base64编码的HTML代码 data:text/css, CSS代码 data:text/css;base64, base64编码的CSS代码 data:text/javascript, Javascript代码 data:text/javascript;base64, base64编码的Javascript代码 data:image/gif;base64, base64编码的gif图片数据 data:image/png;base64, base64编码的png图片数据 data:image/jpeg;base64, base64编码的jpeg图片数据 data:image/x-icon;base64, base64编码的icon图片数据
关键词:
详细阅读

css进度条简易实现方法

2019年07月22日 | 点击量: 489

    css进度条 <style> progress{ -webkit-appearance: none; height:2px; width:30px; } ::-webkit-progress-bar{ /* 获取progress */ background-color: orange; /* 进度条未被填充的背景颜色 */ } ::-webkit-progress-value { background-color: rgb(43, 255, 0); /* 进度条被填充部分的背景颜色 */ } ::-webkit-progress-inner-element { border: 0px solid black; /* 进度条的内边框,注意跟outline区分 */ } </style> <script> window.onload=function staticProgress () { var ......
关键词:
详细阅读

css中设置display:inline-block造成换行间距的解决方法

2019年07月12日 | 点击量: 996

原因   因要做导航菜单,logo也同在一行,使用display:inline-block进行操作.出现间距,常用方法无法清除. 经过网上查询,使用了一个最简单的方法. 在上级元素中设置 font-size:0;/*清除使用inline-block造成换行符间隙*/ -webkit-text-size-adjust:none;/*清除换行间隔*/   然后子级元素记得设置文字大小. 成功解决 作一下记录.  
关键词:
详细阅读

CSS3 box-sizing 属性

2019年07月06日 | 点击量: 421

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。 Firefox 支持替代的 -moz-box-sizing 属性。   兼容性写法   box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */
关键词:
详细阅读