css样式

谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

主宰稳场 提交于 2020-02-29 22:11:34
原文: 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案 开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍。 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略 谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题 谈谈一些有趣的CSS题目(七)-- 消失的边界线问题 所有题目汇总在我的 Github 。 8、纯CSS的导航栏Tab切换方案 不用 Javascript ,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现。下面看看如何使用 CSS 完成同样的事情。 实现 Tab 切换的难点在于如何使用 CSS

CSS 锦囊

你离开我真会死。 提交于 2020-02-29 22:10:43
翻译: onestab [2004.03.09] 原文:mezzoblue CSS Crib Sheet 在使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考。 有疑问,先验证 在调试时,先对您的代码进行验证往往能省去不少麻烦事。格式不正确的 XHTML /CSS 会导致许多布局上的错误。 在其他浏览器中进行测试 之前 ,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反。 如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览器的糟糕的显示,然后在符合标准的浏览器中进行测试,看到显示结果“不正常”时,你会很沮丧的。相反,您应该先将您的代码完善,然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的,你不必再为支持其他浏览器而劳心费神。当然了,目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。 确保您想要的效果真的存在 许多特定的浏览器专有的CSS扩展在 正式标准 中并不存在。 如果您对 filter(滤镜) 或滚动条指定样式,您用的就是私有代码,除了 IE 之外,在别的浏览器中毫无作用。如果验证器告诉您代码没有定义,极有可能您用了私有样式,别指望在不同的浏览器中得到一致的效果。 如果布局中一定要用浮动对象,别忘了适时使用清除(clear

网页开发里如何快速仿站

≡放荡痞女 提交于 2020-02-29 20:35:13
1. 用谷歌浏览器打开网站, 查看网页源码. 2. 查看<head>里的css文件, 谷歌浏览器里显示为链接, 直接点击打开. 3. 打开CSS链接, 另存为本地同名CSS. 4. 复制网页源码为test.html, 修改css为本地CSS文件. 5. 查看网页样式, 应该OK 来源: CSDN 作者: aeaxea43 链接: https://blog.csdn.net/aeaxea43/article/details/104575260

amaze UI 笔记 - CSS

倖福魔咒の 提交于 2020-02-29 18:29:34
导航添加依据 http://amazeui.org/css/ 下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢! * =(官网这块写的很详细) 一、基本样式 1.统一样式 说明了为什么使用Normalize,而不是Rest。 2.基础设置 a.css和模型 讲了一个CSS3的新属性:box-sizing。作为一个技术不到位的人,真没看懂。自己查了下如下: box-sizing的3种属性取一即可 box-sizing:content-box | padding-box | border-box box-sizing:content-box; /*宽度里面只包含内容*/ box-sizing:padding-box; /*宽度里面不包含padding*/ box-sizing:border-box; /*宽度里面不包含padding和border*/ b.字号及单位 讲的em和rem和用法及注意事项。 rem 永远基于根 em 继承 比如 html{font-size:75%; /* 12÷16=75% */} /*这里定义了字体为12px*/ body{font-size:12px;font-size:1rem ; /* 12÷12=1 */} /*基于跟也就是html 只需要写1rem即可,作用同12px。这里加上12px是为了兼容IE系列浏览器*/ 3.文字排版 * a

15 .css-浮动

梦想的初衷 提交于 2020-02-29 13:47:11
浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性。 float:表示浮动的意思。它有四个值。 none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 看一个例子 html结构: <div class="box1"></div> <div class="box2"></div> <span>路飞学城</span> css样式: .box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; } 我们会发现,三个元素并排显示,.box1和span因为是左浮动,紧挨在一起,这种现象贴边。.box2盒子因为右浮动,所以紧靠着右边。 那么浮动如果大家想学好,一定要知道它的四大特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"子围"效果 4.收缩的效果 浮动元素脱标 脱标:就是脱离了标准文档流 看例子 <div class="box1">小红</div> <div

CSS3 border-image详解、应用及jQuery插件

♀尐吖头ヾ 提交于 2020-02-29 06:16:45
一、border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限,仅 Firefox3.5,chrome浏览器,Safari3+支持border-image。所以,就本文而言,IE浏览器可以回家休息 了,Firefox3及其以下以及Opera浏览器也可以休息去看《阿凡达》了。所以,本文提供的一些demo页面,要在 Firefox3.5+,chrome或Safari3+浏览器下才可以看到效果。 二、熟悉border-image的一些特性 我们可能对于CSS2中的background属性比较熟悉,例如: background:url(xx.jpg) 27px no-repeat; 指代的是图片(url(xx.jpg)),位置(27px),重复性(no-repeat)。 border-image于此类似,border-image包括图片,剪裁位置(与background位置一样,也是数值,也支持百分值),重复性。例如: border-image:url(border.png) 27 repeat; ,指的就是图片(url(border.png)),剪裁位置(27),重复方式(repeat)。试着对比background,这有助于border-image属性的记忆。 具体描述border

关于CSS清除浮动的几种方法

本小妞迷上赌 提交于 2020-02-29 06:09:32
如果一个父元素的所有子元素都设置了float效果,则该父元素的高度不会被撑开且颜色也不会显示。这是因为子元素设置float效果后脱离了标准的文档流, 不占据文档空间所以不能把父元素撑开。有时为了解决这个问题可以使用下面几种方法来清除浮动效果。 方法一:使用空标签 该方法就是在子元素后再添加一个空标签,空标签可以是<div>也可以是<p>等,但是要设置样式clear : both ;这样就可以达到清除浮动的效果。 方法二:给父元素设置overflow: auto; 该方法是给父元素设置样式 overflow: auto; 也可以设置为 overflow: hidden,但 overflow: visible不可以。 方法三:使用:after伪元素 该方法是利用:after和:before来在元素内部插入两个元素块,从而达到清除浮动的效果。其实现原理类似于第一种方法,区别在于前者是在html插入了一 个空的div.clear标签,而该方法是利用其伪元素:after在元素内部增加一个类似于空div的效果。下面来看看其具体的使用方法: .outer :after { clear: both; content: '.'; display: block; width: 0; height: 0; visibility: hidden; } 来源: https://www.cnblogs.com

用SquishIt最小化Css与Javascript文件

让人想犯罪 __ 提交于 2020-02-29 04:57:23
SquishIt 是一个轻易压缩与合并CSS与JavaScript文件的组件。同时它还使用 dotless 处理css. 它依赖组件是: Dependencies Id Version Range YUICompressor.NET (≥ 1.7.0.0) dotless (≥ 1.2.2.0) AjaxMin (≥ 4.46.4422.26284) Jurassic (≥ 2.1.1) 不过不用担心,依赖会自动安装的,你可以使用Command-Line安装它。 PM> Install-Package SquishIt -Version 0.8.6 使用起来也很方便。修改web.config其中 debug 为 false <compilation debug="false" targetFramework="4.0"> 在Asp.net MVC 3 中的View 可以这么用,最后将生成一个合并前所以有JS的名为combine开头的文件。 @Html.Raw(Bundle.JavaScript() .Add("~/Scripts/jquery-1.5.1.js") .Add("~/Scripts/jquery.validate.js") .Add("~/Scripts/jquery.validate.unobtrusive.js") .Render("~/Scripts

css盒子模型

試著忘記壹切 提交于 2020-02-29 01:49:18
盒子模型概述 盒子模型是CSS的基石之一,他指定元素如何显示以及(在某种程度上)如何交互。页面上的每个元素都被看做一个矩形框,这个框由元素的内容、内边距、边框和外边距组成,如图所示:   内边距,边框和外边距都是可选的,默认值为0,但是很多元素会由用户代理样式表(浏览器样式)设置内边距和外边距,可以通过通用选择器显式地将内边距和外边距设置为0来覆盖浏览器样式: * { margin: 0; padding: 0; }   内边距出现在内容区域周围,如果给元素添加背景,北京会应用于内容和内边距组成的区域,内边距通常用于创建一个隔离带,使内容不会与背景混在一起;边框会在内边距的外边添加一条线,这些线可以是多种样式的,如实线,虚线活点线等;在边框外部的是外边距,外边距是透明的,通常使用它控制元素之间的间隔。Width和Height是指内容区域的宽度和高度,当设置margin或padding时,会改变整个元素框的尺寸。 外边距的叠加 以下情况仅限于普通元素,非浮动元素。 1. 当两个或更多垂直外边距相遇时,他们形成的外边距并不是上面元素的下外边距和下面元素的上外边距之和,而是这两个外边距中值较大的一个,如图所示: 2. 当子元素的上外边距与父元素的上外边距相遇时,同样会形成一个值为较大外边距值的外边距,如图所示: 3. 如果一个元素的内容为空,则上外边距和下外边距也会发生叠加,如图所示:

CSS兼容IE/Firefox要点

主宰稳场 提交于 2020-02-29 01:28:36
首先我们说说firefox和IE对CSS的宽度显示有什么不同: 其实CSS ’width’ 指的是标准CSS中所指的width的宽度,在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explorer ’width’则是指整个容器的宽度,包括内容,padding ,border。 Firefox中:容器占的宽度=内容宽度+padding宽度+border宽度 IE中:内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度 所以,如果IE中定义 width:120px;padding:5px 的话,所显示的宽度就是120px. 即padding:5px是在width里面。 而Firefox中,上面这个定义,显示宽度就是 125 px; 所以,我们就必须这样定义 width:115px !important;width:120px;padding:5px; 必须注意的是, !important; 一定要在前面。 CSS 兼容要点: DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是