仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 716|回复: 8
打印 上一主题 下一主题

[DIV+CSS] DIV教程之自己用css制造的一组平面感很强的按钮款式

[复制链接]
逍遥一派 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 10:38:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
现在我们不再使用之前所学的“table”定位技术,而是采用Div+CSS的方式实现各种定位。





<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>平面感按钮款式</title><style>.submit1{background:url(/uploadfile/200807/11/6F134150910.gif)0px-13px;border:1pxsolid#cfab25;padding-top:2px;cursor:pointer;}.submit2{background:url(/uploadfile/200807/11/6F134150910.gif)0px-69px;border:1pxsolid#8b9c56;padding-top:2px;cursor:pointer;}.submit3{background:url(/uploadfile/200807/11/6F134150910.gif)0px-8px;border:1pxsolid#cfab25;height:32px;font-weight:bold;padding-top:2px;cursor:pointer;font-size:14px;color:#660000;}.submit4{background:url(/uploadfile/200807/11/6F134150910.gif)0px-64px;border:1pxsolid#8b9c56;height:32px;font-weight:bold;padding-top:2px;cursor:pointer;font-size:14px;color:#336600;}.submit5{background:url(/uploadfile/200807/14/1513200969.gif)0px-5px;border:1pxsolid#7AADC8;padding-top:2px;cursor:pointer;}.submit6{background:url(/uploadfile/200807/14/1513200969.gif)0px0px;border:1pxsolid#7AADC8;height:32px;font-size:14px;font-weight:bold;padding-top:2px;cursor:pointer;}</style></head><body><p><inputname="button"type="button"class="submit1"id="button"value="提交"/><inputname="button2"type="button"class="submit2"id="button2"value="提交"/><inputname="button5"type="button"class="submit5"id="button5"value="提交"/></p><p><inputname="button3"type="button"class="submit3"id="button3"value="提交"/><inputname="button4"type="button"class="submit4"id="button4"value="提交"/><inputname="button6"type="button"class="submit6"id="button6"value="提交"/></p></body></html>
尺度之路www.ckuyun.com提醒:能够先修正部分代码后再运转
切入正题,其实DIV+CSS正确的说法应该是XHTML+CSS,说成DIV的原因只是让它能更明确地和TABLE布局方法区分开来,并不是说一个页面里没有TABLE,而是在什么地方使用TABLE,你要认识到TABLE是表格,是存放数据用的,而不是用来布局的。
若相依 该用户已被删除
沙发
发表于 2015-1-18 07:31:57 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
飘灵儿 该用户已被删除
板凳
发表于 2015-1-24 12:06:37 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
小魔女 该用户已被删除
地板
发表于 2015-2-1 10:54:28 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
愤怒的大鸟 该用户已被删除
5#
发表于 2015-2-7 06:32:06 | 只看该作者
可以使用 CSS 检查工具进行设计。
逍遥一派 该用户已被删除
6#
 楼主| 发表于 2015-3-6 19:45:08 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
蒙在股里 该用户已被删除
7#
发表于 2015-3-13 08:09:50 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
山那边是海 该用户已被删除
8#
发表于 2015-3-13 08:09:50 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
不帅 该用户已被删除
9#
发表于 2015-3-20 17:44:04 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-29 22:27

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表