CSS网页制作:各式各样的按钮制作方式

文章简介:CSS网页制作:各式各样的按钮制作方式。

按钮整理
网页中通过链接来实现页面的跳转,链接的重要表现形式就是按钮
将各式各样的按钮制作方式整理一下。

1,网页中默认的按钮(如表单中的按钮,下拉框,单选按钮,多选按钮,上传按钮等)

2,css基本样式制作的按钮(如添加边框,背景色等)

3,图片制作的按钮
a,按钮形状+文字一起的图片按钮
b,只有按钮形状,通过html加文字
c,各种图标按钮(不是按钮的形状,但有按钮功能)
d,两张图片拼接的按钮(一般处理圆角)

4,纯css3样式按钮(圆角,阴影(内阴影),渐变等)
a,css3样式+文字
b,css3样式+文字+小图标

时间: 2024-10-03 08:21:30

CSS网页制作:各式各样的按钮制作方式的相关文章

CSS网页设计技巧:input按钮在IE浏览器的兼容问题

文章简介:CSS网页设计技巧:input按钮在IE浏览器的兼容问题. 这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结.所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下. Html Code: <input type="submit"; class="form-submit" value="subscribe" name=&qu

CSS网页制作:CSS的面试题和练习

文章简介:如果你处在一个需要面试别人有关于CSS方面技巧和知识,一时想起来还真有点难.我把我能想出来的整理在一起,提供给大家参考. 如果你处在一个需要面试别人有关于CSS方面技巧和知识,一时想起来还真有点难.我把我能想出来的整理在一起,提供给大家参考. 练习要做 正如他们说的,大家实际工作很重要.当然,大家通过工作练习更为重要.这些都是一些练习,并不特别困难,任何人或有没有CSS经验都应该做得到.只看或只听,这样做是没有任何意义的.在CodePen中做练习就挺完美的.   CodePen如何使用

CSS网页制作实例:有条件的添加hover样式

文章简介:CSS网页制作实例:有条件的添加hover样式. 给元素添加一个hover样式,很简单,我们来看一个透明度的例子吧: 1 2 3 4 5 6 div { opacity: 1.0; } div:hover { opacity: 0.5; } 但是如果我们只是想让当前真正hover了的div显示,而让其他的div模糊呢?假设我们的HTML结构如下: 1 2 3 4 5 <section> <div></div> <div></div> &

DIV CSS网页制作之不规则文字排版的CSS样式

css|网页 我们在网页设计中,会遇到许多意想不到的情况,不规则文字的排版就是其中之一了,我们该如何面对这样的排版要求呢?CSS代码又该如何编写呢? 遇到这样的情况,通常情况下我们有两种选择: 1.用图片来制作,并应用热区制作链接,这样的方式可以很方便的解决问题,但对搜索引擎很不友好,它不知道你这里到底有什么. 2.用Flash来完成,还可以加上动感的特效,除了同样对搜索引擎不友好之外,还存在着用户是不是安装有flash播放插件的风险,以及浏览器对flash文件的屏蔽的问题. 这两种方法都不是可

CSS网页制作技巧:IE浏览器下li的默认高度问题

文章简介:CSS网页制作技巧:IE浏览器下li的默认高度问题. 昨天,在家打开IE7浏览器看"视频导航网"的时候,发现居然有排版错误. 用F12开发者工具看了下,发现 li 的默认高度既然不统一? 用工具看了下,发现火狐高度解析统一为33px,而IE7解析高度根据字的不一样,默认解析的高度为30px,纯数字的解析高度为31px;中英文组合的解析高度为32px; 解决方法一:给LI设置高度后,IE7正常了,但IE6问题依然存在.原来,LI里面还嵌套着A标签,给A也设置一个高度后问题解决.

CSS网页制作技巧:DIV+CSS网页布局常犯错误汇总

文章简介:随着CSS网页布局越来越普及,国内大部分网站已经采用CSS网页布局的制作方法.在应用DIV+CSS编码时很容易犯一些错误,这里列举一些常见的错误,帮助新手朋友更好的学习与进步. 随着CSS网页布局越来越普及,国内大部分网站已经采用CSS网页布局的制作方法.在应用DIV+CSS编码时很容易犯一些错误,这里列举一些常见的错误,帮助新手朋友更好的学习与进步. 一.检查HTML元素是否有拼写错误 是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检

CSS网页制作技巧:兼容主流浏览器的背景颜色透明

文章简介:CSS网页制作技巧:兼容主流浏览器的背景颜色透明. 以前都是用jquery来写背景透明,方法简单,但是有缺点,脚本没加载完时,背景颜色是不透明的.如果换成在css里写好的话,效果就很好了..transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持f

HTML+CSS网页制作实例:制作左上角卷角效果的网页

文章简介:HTML+CSS网页制作实例:制作左上角卷角效果的网页. 英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/ 这篇文章中我们将介绍如何制做paper左上角的卷角效果. 我想让我的几句文字以一张有卷角折叠效果的纸为背景,如果直接用一张图片,很容易实现,但是这里我要用css来实现. 我的这种实现方法并不是非常具有创新意义,但是还是值得拿出来分享的,简单的来说,除了一个矩形

CSS网页制作实例代码:模拟新浪微博的三角图像

文章简介:CSS网页制作实例代码:新浪微博的三角图像. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta