Welcome 微信登录

首页 / 脚本样式 / CSS

HTML <！DOCTYPE> 标签

HTML &lt;！DOCTYPE&gt; 标签

2017年02月06日 58 阅读
在默认情况下，FF和IE的解释标准是不一样的，也就是说，如果一个网页没有声明DOCTYPE，它就会以默认的DOCTYPE解释下面的HTML。在同 一种标准下，不同浏览器的解释模型都有所差异，如果声明标准不同，不用我说，您自己想就可以了。学习网页标准，浏览器兼容，从哪里开始您自己决定，但是， 请认识DOCTYPE：一、什么是DOCTYPEDOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版...
CSS3+Js实现响应式导航条

CSS3+Js实现响应式导航条

2017年02月06日 72 阅读
今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是CSS3的Media Query。具体可以查看浅谈响应式布局这篇文章，这里就不花费大量的篇幅介绍了，主要看一下这个导航条该怎么做。另外需要提到的是，ie6-ie8是不支持CSS3的Media Query的，因此对于ie6-ie8我们需要特殊处理，就让他们保持默认样式，这对于布局及样式上都要考虑到这一点。首先看一下布局这一块，html代码如下：...
用css截取字符的几种方法详解（css排版隐藏溢出文本）

用css截取字符的几种方法详解（css排版隐藏溢出文本）

2017年02月06日 94 阅读
方法一：复制代码 代码如下:<div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div>说明：优点是内容可以为任何HTML元素，包括超链接和图片等，在IE6中还会在结尾自动显示省略号。缺点是必须指定宽度数值，并且宽度不能是百分数，否则在IE中会被认为是字符总长的百分比。方法二：复制代码 代...
页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理

页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理

2017年02月06日 88 阅读
实现思路：1、需要有一个层将body遮住，放在body上方。2、修改body的overflow属性值为：hidden废话不多说了，将关键代码贴出来了，兼容火狐，谷歌，ie遮罩层的样式代码，红色部分是关键的部分复制代码 代码如下:.cover {position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha（opacity=60）; background-color: #777;z-index: 1...
CSS可以做的几个令你叹为观止的实例分享

CSS可以做的几个令你叹为观止的实例分享

2017年02月06日 63 阅读
在我写“你未必知道的JavaScript和CSS交互的5种方法”一文时，人们对于JavaScript和CSS是如何重叠的感到惊讶。今天，我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图片。 CSS@supports 在使用一些浏览器可能没有的特性时，每一个优秀的前端开发者都需要进行特性测试。特性测试一直以来都是由JavaScript来做的，许多人使用Modernizr，一个由许多测试良好的案例构成的优秀实用工具，来做特性测试...
详细分析css float 属性以及position:absolute 的区别

详细分析css float 属性以及position:absolute 的区别

2017年02月06日 77 阅读
1.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。div一个典型的块级元素，会单独占据一行。先看看最基本的块级元素如何排列的。html代码，以下样式都是基于此。复制代码 代码如下:<div class="boxBg"> <div class="box1"> 框框1 </div> <di...
使用css实现全兼容浏览器的三角形

使用css实现全兼容浏览器的三角形

2017年02月06日 64 阅读
在当前流行的的网站上，我们经常会看到一些小三角形的下拉提示（微博顶部的下拉菜单），简单的方式可以使用一张图片代替，但是随着前端技术的发展，以及开发者对于前端性能的“吹毛求疵”，越来越多的前端开发者开始“返璞归真”，在能不使用图片的场景中减少图片使用，css图标相对于图片还有个优势是我们可以方便的定制图标的大小以及颜色。css实现三角形图标已不是什么新鲜技术，之前也有很多相关的技术文章，这篇文章主要是分析下在实际场景中使用时遇到的问题以及如何回避这些问题。基...
使用css实现全兼容tooltip提示框

使用css实现全兼容tooltip提示框

2017年02月06日 127 阅读
最终效果图：基本原理先设定一个背景色的普通div盒子，然后使用上篇post得到的三角型图标，把div盒子设置为相对定位模式，三角型图标设置为绝对定位，位置相对于div盒子，调整到合适的位置。这样就得到一个基本的tooltip，但是没有边框看起来总是不舒服，我们可以给div盒子设置一个边框，这没什么难度，但是三角形图标如何设置边框呢？这里我们通过一个取巧的方式，让两个不同颜色的三角形图标叠加，并且位置错开1px，这样底层三角形top border被遮盖，只露...
表单中Readonly和Disabled的区别详解

表单中Readonly和Disabled的区别详解

2017年02月06日 126 阅读
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：Readonly只针对input（text / password）和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，...
完美实现浮动元素横排居中显示

完美实现浮动元素横排居中显示

2017年02月06日 62 阅读
经常会遇到这样的页面布局：在一排显示几个不同的区域内容，但它们相对于页面是居中对齐的。注意这些区域内容不只是文字，也许还有图片或者其它元素混合而成。一般这样的布局我们很容易想到要用浮动float，但是怎么样居中对齐而又兼容低端浏览器哪？请接着往下看。首先看html代码：<div class="webFooter"><div class="wrap"><div class="tabs"><ul><li&g...
讨论CSS中的各类居中方式

讨论CSS中的各类居中方式

2017年02月06日 69 阅读
今天主要谈一谈CSS中的各种居中的办法。 首先是水平居中，最简单的办法当然就是复制代码 代码如下:margin:0 auto;也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。那么其他的办法呢？容我一一道来：line-height首先介绍文字的水平居中方法：复制代码 代码如下:<div class="wrap">刘放</div>利用line-height设为height的一样即可：复...
如何使用CSS3画出一个叮当猫

如何使用CSS3画出一个叮当猫

2017年02月06日 69 阅读
刚学习了这个案例，然后觉得比较好玩，就练习了一下。然后发现其实也不难，如果你经常使用PS或者Flash的话，应该就会知道画个叮当猫是很容易 的事，至少我是这么觉得。但是，用CSS3画出来确实是第一次接触，所以很乐意去尝试一下，对于我这种菜鸟，确实是帮助不少，至少懂得如何去画一个简单的 人物形象出来，再加上一些动画效果，就活了，那就更好玩了！OK，开始之前，先把效果图晒一下：PS:说实话，我觉得挺可爱的，小时候经常看多啦A梦，突然感觉很亲切，很童真，瞬间年轻...
手机屏幕尺寸测试——手机的实际显示页面的宽度

手机屏幕尺寸测试——手机的实际显示页面的宽度

2017年02月06日 102 阅读
手机站开发遇到一些问题，设计页面使用多大的尺寸？为此做了一些研究，除IPhone特殊一些外，目前市面上的安卓系统的实际显示页面的宽度，都是360px。手机型号竖屏宽度IPhone 5320pxIPhone 6375pxIPhone 6 Plus414pxNexus 4384pxAndroid（大多数）360px前两年，安卓的分辨率多数还是240px 或 320px，现在是360px，为了向下兼容，向上也兼容，最终将 360px 定为设计的尺寸，后期可以使用...
<< 41 42 43 44 45 46 47 48 49 50 >>
版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图