为您找到搜索结果：1786个
初探css -11 Table表格
使用CSS可以使HTML表格更美观。CompanyContactCountryAlfredsFutterkisteMariaAndersGermanyBerglundssnabbköpChristinaBerglundSwedenCentrocomercialMoctezumaFranciscoChangMexicoErnstHandelRolandMendelAustriaIslandTradingHelenBennettUKKöniglichEssenPhilipCramerGermanyLaughingBacchusWinecellarsYoshiTannamuriCanadaMagazziniAlimentariRiunitiGiovanniRovelliItalyNorth/SouthSimonCrowtherUKParisspécialitésMarieBertrandFranceTheBigCheeseLizNixonUSAVaffeljernetPalleIbsenDenmark指定CSS表格边框，使用border属性。下...
初探CSS
当读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有三种:外部样式表(Externalstylesheet)内部样式表(Internalstylesheet)内联样式(Inlinestyle)当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：<head><linkrel="stylesheet"type="text/css"href="mystyle.css"></head>浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。下面是一个样式表文件的例子： 不要在属性值与单位之间留有空格（如："margin-left:20px"），正确的写法是"margin-left:20px"。当单个文档需要特殊的样式时，就...
初探CSS -3 语法
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>https://www.cnblogs.com/wutaotaosin/tag/%E5%AD%A6%E4%B9%A0%20CSS%20%E8%AE%B0%E5%BD%95/</title><style>body{background-color:yellow;}h1{font-size:36pt;}h2{color:blue;}p{margin-left:50px;}</style></head><body><h1>这个标题设置的大小为36pt</h1><h2>这个标题设置的颜色为蓝色：blue</h2><p>这个段落的左外边距为50像素：50px</p></body></html>查看<!DOCTYPEhtml><html><head&...
前端之CSS
CSS（CascadingStyleSheet，层叠样式表)定义如何显示HTML元素。简单的说，css用来给HTML标签添加样式的。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。在css中，注释的表示方式为：/*注释内容*/3.1行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。<pstyle="color:red">Helloworld</p>3.2内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：<head><metacharset="UTF-8"><title>Title</title><style>p{background-color:#2b99ff;}</style></head>3.3外部样式外部样式就...
前端开发必备 40款优秀CSS代码编写工具推荐
摘要：CSS工具可以简化工作流，可以提高CSS编写速度，是开发者和设计者所不可缺少的。本文列举了40种CSS工具，功能涉及CSS菜单、动画、3D图形、响应式页面、图层、按钮等界面元素的设计与制作，你定可从中找到适合的工具。本文是对外文《40CSSToolstoImproveYourProductivity》的编译内容。CSS工具是开发者和设计者所不可缺少的，它们不仅简化了工作流，还可提高CSS编写速度。本文将列举40种CSS工具，功能涉及CSS菜单、动画、3D图形、响应式页面、图层、按钮等界面元素的设计与制作。1.LayerStyles这是一个HTML5应用。利用它，开发者可以更直观地编写CSS3代码。2.CSS3PiePie可使IE6~IE9渲染出圆角、渐变、文字阴影等多种最有用处的CSS3效果。3.PatternifyPatternify可帮你设计出漂亮的CSS模板。4.CSSCompressorCSSCompressor是一个采用Java开发的CSS压缩优化工具，可帮助开发者压缩CSS代码(如去掉空格、注释；合并相同规则的选择器；简短的颜色表示法等)，从而提高加载速度，节约网络流...
CSS3的REM设置字体大小
在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSSFont-Size:emvs.pxvs.ptvs.percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，但又无法不去用。真是进也难，退也难呀。最近在学习em的相关知识的时候，无意之间让我拾得一宝，就是使用rem来设置Web页面的字体大小。让我一下子就来劲了，一口气看完并测试了一回，还真是爽歪歪的呀。师傅说好东西不能吃独食，于我就在这里给大家吹吹这个从没见过的REM。在详细介绍rem之前，我们先一起来回顾一下我们常用的两种记量单位，也是备受争论的两个： PX为单位 EM为单位PX为单位在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时...
纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！
FineUI控件库发展至今已经有5个年头，目前论坛注册的QQ会员5000多人，捐赠用户500多人（捐赠用户转化率达到10%以上，在国内开源领域相信这是一个梦幻数字！也足以证明FineUI旺盛的生命力！）。这一切的得来不是无缘无故的，而是来自于FineUI的发布理念–ReleaseEarly!ReleaseOften!时至今天，FineUI总共发布了100多个版本！这100多个版本更新列表只是文本文件就有120K大小，放在页面上更是长的要命，如何恰当的向用户展示FineUI勤劳的身影就成了一个问题。之前的展示页面只是简单的将所有的更新记录放在一个PRE标签中，显得有点死气沉沉，如下图所示。 由于前段时间时间轴形式的展示方式比较火，就考虑采用这种方式。但是查阅了网上的jQuerytimelineplugin，大部分都比较臃肿，还需要创建GoogleSpreadsheetTemplate，并且通过JavaScript调整时间轴中每个记录的位置，也不适合软件更新记录这样大数据集的展现。其实我需要的只是一个简单、漂亮的数据展示方式，很快我找到了这个例子：http...
CSS圆角实现
1.方法一：上下两张带圆角的图片。宽度固定，允许高度变动.<divclass="box"><h2>Headline</h2><p>Content</p></div>.box{width:418px;background:#effce7url(images/bottom.gif)no-repeatleftbottom;}.boxh2{background:url(images/top.gif)no-repeatlefttop;}图片：2.方法二：三张图片，上下两张图片再加中间的填充图片.宽度固定，允许高度变动.<divclass="box"><h2>Headline</h2><pclass="last">Content</p></div>.box{width:424px;background:url(images/bg-tile.gif)repeat-y;}.boxh2{background:url(images/bg-top.gif)no-re...
纯CSS3的loading图案
转自：http://www.cssplay.co.uk/menu/cssplay-loading-animation.html<divclass="loadingone"></div><divclass="loading2three"></div><style>div.loading{width:200px;height:200px;position:relative;float:left;margin:010px;}div.one{background:#09c;}div.loading:after{display:block;content:"";border-radius:2px;height:2px;width:2px;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;box-shadow:10px002px#eee,7px7px02px#555,010px02px#555,-7px7px02px#555,-10px002px#555,-7px-7p...
[译]CSS实现垂直居中的五种方法
这篇文章是我早先保存下来的，昨天复习CSS垂直居中时偶然发现原文地址已经失效了，但我觉得它写得非常的好，所以决定把它翻译过来，以便更多人的从中受益（从内容来看，作者应该是在IE8beta版本刚刚出来的时候发表的这篇文章，所以读者们在看到相关内容时注意一下就好了）。=================================================================================================CSS实现垂直居中的五种方法 CSS有许多方法可以实现垂直居中，但是选择合适的方法却很难。我将为你展示我见过的所有的最棒的方法以及如何创建一个精致小巧的居中网页。 使用CSS实现垂直居中并不是一件容易的事，有许多不同的方法，其中一些可能在某些浏览器中不生效。让我们来看看五种不同的垂直居中的方法...
CSS中:first-child伪类
使用:first-child伪类来选择作为某个元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。考虑以下标记：如下：html:<div><p>Thesearethenecessarysteps:</p><p>Do<em>not</em>pushthebrakeatthesametimeastheaccelerator.</p><div><ul><li>香蕉</li><li>苹果</li><li>桃子</li></ul><ul><li>香蕉</li><li>苹果</li><li>桃子</li></ul></div></div>CSS:p:first-child{color:red;}ul:first-child{color:blue;}效果如下： &n...
CSS行内框（内联元素）
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（LineBox），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。示例如下：<p>这是一个段落</p><p><span>这是一个内联元素</span><span>这是第二个内联元素</span></p>设置样式如下：p{margin:0;}显示如下： 设置样式如下，可验证上述结论：p{margin:0px;}pspan{/*水平外边距可以调整行内框间距*/margin-left:50px;/*水平内边距可调整行内框间距，垂直内边距不影响行内框的高度*/padding:20px;/*垂直外边距不影响行内框的高度*/margin-top:20px;/*设置行内框的高度*/line-height:50px;/*以下属性便于显示*/background-color:tomato;opaci...
CSS利用border绘制图性
绘制梯形width:10px;border-top:10pxsolidred;border-right:10pxsolidtransparent;border-left:10pxsolidtransparent;border-bottom:10pxsolidtransparent;绘制三角形：width:0px;border-top:10pxsolidred;border-right:10pxsolidtransparent;border-left:10pxsolidtransparent;border-bottom:10pxsolidtransparent;绘制直角三角形：width:0px;border-top:20pxsolidred;border-right:0pxsolidtransparent;border-left:10pxsolidtransparent;border-bottom:10pxsolidtransparent; ...