为您找到搜索结果：1786个
CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8
CSS判断不同分辨率浏览器（显示屏幕）显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3@media样式进行判断，但IE9以下版本不支持CSS3技术，这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也支持CSS3实现实用布局。一、实用范围描述 - TOPCSSDIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动随浏览器显示宽度而变宽变窄）。随着发展，越来越多的电脑用户显示屏分辨率越来越高，但有的用户还是使用1024px的分辨率的显示屏（根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少，但我们CSS布局时仍然需要至少考虑1024px分辨率用户），如果网页布局宽度固定到1200px，1024分辨率用户浏览网页时浏览器下方会出现滚动条，为了解决这个问题，大家可以通过使用CSS3样式判断用户浏览器宽度从而调用不同布局宽度。二、使用CSS单词与语法&n...
[转]CSS3 使用 calc() 计算高度 vh px
1、px 像素，我们在网页布局中一般都是用px。2、百分比 百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。3、Viewport viewport：可视窗口，也就是浏览器。 vwViewport宽度，1vw等于viewport宽度的1% vhViewport高度，1vh等于viewport高的的1% CSS3使用Calccalc()使用通用的数学运算规则，但是也提供更智能的功能： >使用“+”、“-”、“*”和“/”四则运算； >可以使用百分比、px、em、rem等单位； >可以混合使用各种单位进行计算； >表达式中有“+”和“-”时，其前后必须要有空格，如"widht:calc(12%+5em)"这种没有空格...
[转]css3自适应布局单位vw,vh你知道多少？
原文地址:https://www.cnblogs.com/luxiaoxing/p/7544375.html视口单位(Viewportunits)什么是视口？ 在PC端，视口指的是在PC端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：LayoutViewport（布局视口），VisualViewport（视觉视口），IdealViewport（理想视口）。视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的LayoutViewport。 根据CSS3规范，视口单位主要包括以下4个： 1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 3.vmin：选取vw和vh中最小的那个。 4.vmax：选取vw和vh中最大的那个。 vhandvw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh等于1/100的视口高...
[转]浅谈Normalize.css
原文地址:https://www.jianshu.com/p/3d21d1932aa0Normalize.css只是一个很小的css文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的cssreset，Normalize.css是一种现代的，为HTML5准备的优质替代方案。Normalize.css现在已经被用于TwitterBootstrap，HTML5Boilerplate，GOV.UK，Rdio，CSSTricks以及许许多多其他的框架，工具和网站上。Normalize.css是一种CSSreset的替代方案。经过@necolas和@jonneal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。我们创造normalize.css有下几个目的：保护有用的浏览器默认样式而不是完全去掉它们一般化的样式：为大部分HTML元素提供修复浏览器自身的bug并保证各浏览器的一致性优化CSS可用性：用一些小技巧解释代码：用注释和详细的文档来Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML元素，排版，列表，嵌入的内容...
[转]css实现左侧宽度自适应，右侧固定宽度
原文地址:https://segmentfault.com/a/1190000008411418页面布局中经常用会遇到左侧宽度自适应，右侧固定宽度，或者左侧宽度固定，右侧自适应。总之就是一边固定宽度，一边自适应宽度。一般固定宽度是导航栏，自适应宽度的是主体内容显示区。所以要实现这种布局，就先给出如下html结构：<divclass="container"><divclass="sidebar">导航区域</div><divclass="main">主体内容显示区域</div></div><divclass="footer">footer保证前面的不会影响此元素的显示</div>container用于包裹sidebar与main，footer用来测试前面的布局不会影响footer的正常显示，如果footer样式不对，说明我们的布局是有问题的。接下来看常见的几种布局方法：固定区域浮动，自适应区域不设置宽度但设置margin.container{overflow:hidden;*zoom:1;}....
[转]你所不知的 CSS ::before 和 ::after 伪元素用法
SS有两个说不上常用的伪类:before和:after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 CreativeLinkEffects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform属性进行变形之外，就是接下来要介绍的这两个伪元素了。CreativeButtonStyles 一基本语法在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：Html代码 p:before {} 不过，在CSS3中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了display或者width等属性时使得显示脱离了原本元素后，建议按照标准双写。过于老的浏览器可能会存在支持问题，不过伪元素大多是配合CSS3使用，就无所谓向下兼容了：Html代码 img::after {} ...
【转】HTML <!--...--> 注释 、CSS/JS //注释 和 /*.....*/ 注释
原文地址：http://www.cnblogs.com/iceflorence/p/5815409.html<!---->是HTML的注释标签,使用<和>是符合HTML标签语法规则的。/**/是CSS的注释标签/**/（注释代码块）、//（注释单行）是JS的注释标签。两种注释有各自的使用环境,并且不能相互替代。举例如下：1、<!--注释内容-->2、//注释内容(在css或javascript中插入单行注释)3、/*注释内容*/(在css或javascript中插入多行注释) 所有浏览器都支持注释标签。注释标签用于在源代码中插入注释。注释不会显示在浏览器中。您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）：<scripttype="text/javascript"><!--functiondisplayMsg(){alert("HelloWorld!")}//--></scri...
[转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml对table设置css样式边框，分为几种情况：1、只对table设置边框2、对td设置边框3、对table和td技巧性设置表格边框4、对table和td设置背景，实现完美表格边框以下DIVCSS5对以上几种实现html表格边框样式进行讲解与案例演示。为了便于观察，divcss5均设置所有案例表格为1px实线红色边框为例；table宽度为400px;表格为三列三行，对以上四种情况表格外层加个div盒子，分别CSS命名为“.table-a”、“.table-b”、“.table-c”、“.table-d”。一、只对表格table标签设置边框 - TOP只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。案例详细如下：1、对应css代码<style> .table-a table{border:1px solid #F00} /* css注释：只对table...
[转]CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。 隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。h1.hidden{visibility:hidden;}尝试一下»display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。h1.hidden{display:none;}尝试一下» 块元素是一个元素，占用了全部宽度，在前后都是换行符。块元素的例子：<h1><p><div>内联元素只需要必要的宽度，不强制换行。内联元素的例子：<span><a>可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循we...
【转】如何建立一个样式新颖的CSS3搜索框
在线演示搜索框大概是web开发中最常用的UI元素之一，我想基本没有必要去介绍如何使用它。无论是网站还是web应用，都会为了增强用户体验而添加它，那么你是不是也想过设计一个别致的搜索框？在今天的文章中，大家将会学到如何使用伪元素来创建一个超酷的CSS3搜索框。当然在开始介绍前你也可以下载源代码或者查看在线演示。HTML举例：正如接下来你所看到的，标记很少，并且很容易理解：/<form class=“cf form-wrapper”><input type=“text” placeholder=“Search here.。.” required><button type=“submit”>Search</button></form>你可能注意到了HTML5的特殊属性，像placeholder和required，简介如下：.placeholder－基本上，这个属性的作用在于当文本框获得焦点之前，先在文本框里显示一个域的信息，直到获得焦点后，域的信息被隐藏。.req...
【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址：http://www.divcss5.com/jiqiao/j771.shtmlcss布局居中和CSS内容居中区别和对应DIVCSS代码教程与图文代码案例篇对于新手来说DIVCSS布局居中与DIVCSS内容居中常常搞混，摸不着头脑。这里DIVCSS5重点为介绍关于布局居中与内容居中区别、CSS代码、作用、用法，通过基础知识介绍到DIVCSS图文代码案例让大家通俗易懂掌握这两个概念知识点。对于DIVCSS开发来说CSS布局居中与CSS内容居中是入门碰到最重要需要必须掌握知识点。一、认识布局居中与内容居中 - TOP1、CSSDIV布局居中布局居中是对框架盒子本身设置。让网页主体水平居中于浏览器中，就需设置margin:0auto实现布局居中。布局居中针对框架盒子本身居中。布局居中主要是对布局框架设置比如（DIV盒子）设置。一般网页布局中最外层主体框架设置布局居中样式（margin:0auto）实现。如果不设置布局居中代码，其有的浏览器中主体是居中的，但有的浏览器中靠左显示，引起兼容性问题，所以要让一个盒子水平居中于浏览器中就必须设置一个margin:0aut...
【转】一个DIV+CSS代码布局的简单导航条
原文地址：http://www.divcss5.com/shili/s731.shtml简单的DIVCSS代码布局实现导航条一个蓝色主题的导航条布局案例，本CSS小实例，采用DIVCSS实现。同时不用图片做背景，直接使用背景色实现，鼠标经过悬停对应栏目名称是对应背景蓝色变深。导航条部分效果截图一般导航条采用ulli列表布局，这里也不例外DIVCSS5实例也采用列表标签ulli+CSS布局。一、布局思维思考 - TOP在实际DIV+CSS布局项目中，一般不会只使用一次ulli列表，避免干扰其他地方使用ulli布局，避免对ulli设置样式影响其他地方，所以特地这里对ul设置一个#nav命名（一般导航条以nav或menu为CSS命名，这里选择nav），假如导航条背景宽度100%全屏或固定宽度均可，这里就由ul#nav控制，这里就设置100%全屏宽度蓝色背景。这里一个技术点，对ul里的li设置排成一排所以需要设置一个CSSdisplay:inline让li排成一排，从而让li并排布局。然后需要对ulli里的a标签设置display:block的，但a父级li不设置具体宽度，...
【转】div居中代码 DIV水平居中显示CSS代码
原文地址：http://www.divcss5.com/rumen/r622.shtml如何使用CSS让DIV居中显示，让div水平居中有哪些CSS样式呢？需要的主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。首先我们对body设置text-align:center，再对需要居中的div盒子设置css样式margin:0auto，这样即可让对应div水平居中。实例讲解div居中代码应用，为了观察div居中效果，我们对div设置一个div命名为“.div”在html中div标签内使用class=“div”,设置其宽度为400px;高度为100px，边框为红色。以便我们观察效果。1、完整html+css代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div居中&nb...
[转]DIV+CSS和TABLE的区别
现在全国大大小小的网站都在搞一场技术“革命”，就是所谓“网站重构”说简单点就是DIV+CSS进行网站制作。用DIV+CSS代替传统的Table制作框架和美化页面。百度搜索优化 在重构之前，肯定要了解为什么重构，为什么要用DIV+CSS技术?了解了这个问题，那么大家才有使用此技术重构网站的动力。各大CSS学习网站和教程无一例外都会列举出以下使用DIV+CSS的好处： 1、内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。 2、改版网站更简单容易了，不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。 3、搜索引擎更友好，排名更容易靠前。 以上三点是N多好处最吸引人，最突出的三点。我就这三点进行一一介绍： 第一点、内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。 这...