-
浅谈CSS 浏览器样式重置终结版
所属栏目:[系统] 日期:2020-05-12 热度:129
副标题#e# 浏览器的一些默认样式,有时候真的是特别丑; 虽然现在有现成的 UI 框架,但有时候写个小东西不想用那么庞大的 UI 框架,这篇文章介绍解决一些样式问题,最后将给出完整的重置样式表; 如果有遇到其它样式问题,评论区提建议,我将持续更新 样式问[详细]
-
CSS实现标签效果的示例代码
所属栏目:[系统] 日期:2020-05-12 热度:198
这里以制作图片右上角标签为例,用CSS以最简单、直接的方式实现效果。 实现效果 实现思路 准备两个div(一个父容器,一个标签div),分别设置宽高,并设置相对布局。 使标签div居于父容器右上角,设置内容居中显示,设置背景和字体颜色,旋转该div。 将父[详细]
-
CSS实现带箭头的提示框效果【示例代码】
所属栏目:[系统] 日期:2020-05-12 热度:148
我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了; 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形;只不过它这个尖角是通过两个三角形来实现的;[详细]
-
使用css创建一个优惠券的方法
所属栏目:[系统] 日期:2020-05-12 热度:198
添加优惠券类目,展示用户的优惠券 常见的设计样式如下图,核心为半圆 分步拆解 优惠券的特点是带有反向圆角,为了展示效果更好,适配多种场景,不推荐使用背景图片形式,建议使用 css . 网上有几种方案: 一种是 boder+clip 的形式,裁剪出4个小半圆角,拼凑在一起[详细]
-
使用CSS 给表单必选项添加星号的实现方法
所属栏目:[系统] 日期:2020-05-12 热度:84
在制作网页表单的时候,如果一个选项是必填的,通常会给选项添加一个星号,比如 Typecho 的评论表单: p class=form-grouplabel for=author姓名/label span class=required*/spaninput type=text id=author name=author required=required size=30 class=f[详细]
-
Css深刻理解width:auto的用法
所属栏目:[系统] 日期:2020-05-12 热度:87
看了我上篇文章的人可能觉得我小题大做,css2有什么好看的?那么我就参考《css世界》这本书,与大家一同复习理解下具体的点,对我们代码的影响。 首先,我们需要清楚width默认值就是auto,所以不用去人为写代码控制其宽度自动哦。 常见的4种宽度表现 充分[详细]
-
CSS高级技巧:滑动门技术
所属栏目:[系统] 日期:2020-05-12 热度:156
上一篇CSS教程 文章:CSS高级技巧:图片替换滑动门(Sliding Doors) 还是决定把滑动门单独提作一种单独的技术. 它是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, 就可以实现. 滑动门一般用做网站Tab导航,[详细]
-
CSS高级技巧:文字环绕图片
所属栏目:[系统] 日期:2020-05-11 热度:87
上一篇CSS教程 文章:CSS高级技巧:滑动门文字环绕图片(SandBags) 在印刷业中, 常用的文字图片混搭的排版法被延伸到了Web视觉设计中, 如何来完成呢? 这里说的并不是简单的文字包围图片, 不过原理很类似, 同样是通过float属性来完成效果的. 先看一看效果图:[详细]
-
CSS高级技巧:网页布局
所属栏目:[系统] 日期:2020-05-11 热度:160
上一篇CSS教程 文章:CSS高级技巧:文字环绕图片布局 CSS至关重要的作用, CSS的设计初衷. CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需[详细]
-
CSS DIV制作梯形状的不规则网站导航
所属栏目:[系统] 日期:2020-05-11 热度:177
前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航,就尝试做了一下。结果碰到了几个问题,后来在同事的提醒下总算完成了,记录一下也跟大家分享分享。 先看图(图片只是大致做了一下) 效果展示: 运行代码[详细]
-
语义化H1标签
所属栏目:[系统] 日期:2020-05-11 热度:107
大家都知道搜索引擎比较喜欢H1。在SEO中H1也是很基础也很重要的一步。但有些时候为了界面风格的原因,很多标题性的文字做成了图片。大多数情况下,切割页面的时候就直接用上了图片。在代码上,H1也就对搜索引擎失去了作用。 h1img src=http://www.jb51.net[详细]
-
WEB标准教程:功能相似的标签的用法
所属栏目:[系统] 日期:2020-05-11 热度:125
在XHTML标签中有一些标签的作用是相似的,当然这里的相似是指语义相似,以至于很多人都不清楚这些相似的标签如何使用,那么今天的主题就是分解相似的标签,明确各个标签的用途。在前面我们已经讲过了strong与em的区别。除了strong与em之外还有一些相似的标[详细]
-
看看网页高手怎么理解Web标准
所属栏目:[系统] 日期:2020-05-11 热度:132
与老友闲聊,不想夜晚的猫子都很亢奋,聊了很多。Web标准及Div CSS相关知识是老友很擅长的,妙语连珠。我觉得聊天过程完整也较有意义,转贴闲聊过程如下: 横导航链接为什么要用UL LI 为什么不直接在一行写上文本链接呢 列表本身就有列表符号,同时列表项也[详细]
-
WEB标准教程:P标签的应用
所属栏目:[系统] 日期:2020-05-11 热度:84
从今天开始,我将全面的共享出我所能理解的所有WEB标准方面的知识放在这个WEB标准能有多难?的专栏里。当然由于振之的水平有限,所讲并非是完全正确的。在看了这个专栏的文章的时候要理性的分析,要有自己的判断,欢迎各位朋友提出自己的看法与意见。 很多[详细]
-
Web前端开发的Firefox插件
所属栏目:[系统] 日期:2020-05-11 热度:93
一、Web Developer Web Developer 可说是网页设计师最常使用的一个 Firefox 扩充套件,它可以协助我们在设计网页时能够更加的得心易手,内建 HTML、CSS、Feed等检验器,让我们所设计出来的网页能够符合标准化,不但可以省下日后维护的时间金钱,更能确保我[详细]
-
css魔法之左边竖条的多种实现方法
所属栏目:[系统] 日期:2020-05-11 热度:108
问题描述:在只使用一个标签的情况下实现左边竖线 通用标签与样式如下: html: div class=div1实现左边竖线/div css: .div1 {width: 200px;height: 50px;line-height:50px;text-align: center;background: #ccc;position: relative; } 方法一:使用border[详细]
-
CSS文本超出2行就隐藏并且显示省略号
所属栏目:[系统] 日期:2020-05-11 热度:57
overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webk[详细]
-
CSS教程:建议font-size使用em
所属栏目:[系统] 日期:2020-05-11 热度:155
在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的察看-文字大小设置已无任何作用。对字体感觉太小的浏览者而[详细]
-
line-height使文本居中的3像素bug问题
所属栏目:[系统] 日期:2020-05-11 热度:163
虽然题目这么写,可是这真是bug吗?我觉得不算。 line-height使文本居中的3像素bug,先查下这3px的底细,怎么查?观察 FW 先写个height、line-height都为30px,背景为红色的元素,设置文字为12px。然后量下,果然有3px的bug。同时增加或者减少height、line[详细]
-
IE8.0Beta比较不错的功能:WebSlices
所属栏目:[系统] 日期:2020-05-11 热度:181
这两天M$出了个IE8beta1版~害得我的Google Reader里全是IE8的信息,可惜有用的信息太少了,在翻M$的网站时,倒是发现了一个比较帅的功能:WebSlices。 简单的来说,它的功能就是把网页的某一块剪出来放收藏夹里。这个功能与Mac OS上的Web Clip Widget性质[详细]
-
css网页设计非常有用的解决办法
所属栏目:[系统] 日期:2020-05-11 热度:84
目录介绍针对浏览器的选择器让IE6支持PNG透明移除超链接的虚线给行内元素定义宽度让固定宽度的页面居中图片替换技术最小宽度隐藏水平滚动条 一. 介绍 这篇文章包括了8个非常有用的解决办法, 在进行css设计遇到问题时你就会用到它们. 二. 针对浏览器的选择[详细]
-
CSS教程:关于H1的使用技巧
所属栏目:[系统] 日期:2020-05-11 热度:92
来蓝色一直都在潜水,很少写帖子,太对不起大家了.下面和大家探讨一个话题,希望能引起大家的兴趣. 关于H1,一直都想和大家讨论H1用法的问题,可在RTX上好象一直没有提起大家的兴趣. 看过很多页面,很多人对H1的理解都不一样,个人有个人独到的创新想法,这样的答[详细]
-
CSS教程:弄懂闭合浮动元素
所属栏目:[系统] 日期:2020-05-11 热度:200
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种[详细]
-
Web标准:关于web标准的一些初学的知识
所属栏目:[系统] 日期:2020-05-11 热度:125
Web标准使您能通过最少的工作,生成可被最广大受众访问的Web站点。Web标准的承诺是:只需设计页面一次,即可让该页以完全相同的方式在任何现代的浏览器中显示和工作。例如,在按照标准生成以后,旨在在MicrosoftInternetExplorer中以某种方式显示的页可在[详细]
-
IE8、IE7、IE6、FF简单的CSS HACK测试
所属栏目:[系统] 日期:2020-05-11 热度:86
简单试用了一下IE8后,今天相对有时间点,对IE8、IE7、IE6、Firefox2.0.0.12做了简单的一些CSSHACK测试。 样式代码: p{color:#f00;} xhtml代码: p文字/p 主要是测试文字这个颜色在不同浏览器下使用hack的一些结果报告。 早上测试的东西少了几个,这里补[详细]