仓酷云

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

[DIV+CSS] 给大家带来Html+Css做圆角表格和制造圆角表格(Table)的完全代码

[复制链接]
变相怪杰 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:18:54 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
你可以轻松地控制页面的布局。
<html>
<head>
<title>CSS圆角效果</title>
<metahttp-equiv="content-type"content="text/html;charset=gb2312">
<styletype="text/css">
div.RoundedCorner{background:#9BD1FA}
b.rtop,b.rbottom{display:block;background:#FFF}
b.rtopb,b.rbottomb{display:block;height:1px;overflow:hidden;background:#9BD1FA}
b.r1{margin:05px}
b.r2{margin:03px}
b.r3{margin:02px}
b.rtopb.r4,b.rbottomb.r4{margin:01px;height:2px}
</style>
</head>
<body>
<divclass="RoundedCorner">
<bclass="rtop"><bclass="r1"></b><bclass="r2"></b><bclass="r3"></b><bclass="r4"></b></b>
<br>无图片完成圆角框<br><br>
<bclass="rbottom"><bclass="r4"></b><bclass="r3"></b><bclass="r2"></b><bclass="r1"></b></b>
</div>
</body>
</html>
---------------------------------------------------------------------------------------
制造圆角表格(Table)的完全代码
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"/>
<html>
<head>
<styletype="text/css">
body{background-color:#FFF;}
div#nifty1{margin:010px;background:#9BD1FA;}
div#nifty2{margin:010px;background:#9BD1FA;}
div#nifty3{margin:010px;background:#9BD1FA;}
div#nifty4{margin:03px;background:#9BD1FA;}
div#nifty5{margin:03px;background:#9BD1FA;}
b.rtop,b.rbottom{display:block;background:#FFF}
b.rtopb,b.rbottomb{display:block;height:1px;
overflow:hidden;background:#9BD1FA}
b.r1{margin:05px}
b.r2{margin:03px}
b.r3{margin:02px}
b.rtopb.r4,b.rbottomb.r4{margin:01px;height:2px}
</style>
</head>
<body>
<tablewidth="100%"cellpadding="0"cellspacing="0">
<tr>
<td>
<divid="nifty1">
<bclass="rtop">
<bclass="r1"></b>
<bclass="r2"></b>
<bclass="r3"></b>
<bclass="r4"></b>
</b>
<divstyle="height:20px;">
紧缩一下
</div>
<bclass="rbottom">
<bclass="r4"></b>
<bclass="r3"></b>
<bclass="r2"></b>
<bclass="r1"></b>
</b>
</div>
</td>
<td>
<divid="nifty2">
<bclass="rtop">
<bclass="r1"></b>
<bclass="r2"></b>
<bclass="r3"></b>
<bclass="r4"></b>
</b>
<divstyle="height:20px;">
紧缩一下
</div>
<bclass="rbottom">
<bclass="r4"></b>
<bclass="r3"></b>
<bclass="r2"></b>
<bclass="r1"></b>
</b>
</div>
</td>
<td>
<divid="nifty3">
<bclass="rtop">
<bclass="r1"></b>
<bclass="r2"></b>
<bclass="r3"></b>
<bclass="r4"></b>
</b>
<divstyle="height:20px;">
紧缩一下
</div>
<bclass="rbottom">
<bclass="r4"></b>
<bclass="r3"></b>
<bclass="r2"></b>
<bclass="r1"></b>
</b>
</div>
</td>
<td>
<divid="nifty4">
<bclass="rtop">
<bclass="r1"></b>
<bclass="r2"></b>
<bclass="r3"></b>
<bclass="r4"></b>
</b>
<divstyle="height:20px;">
紧缩一下
</div>
<bclass="rbottom">
<bclass="r4"></b>
<bclass="r3"></b>
<bclass="r2"></b>
<bclass="r1"></b>
</b>
</div>
</td>
<td>
<divid="nifty5">
<bclass="rtop">
<bclass="r1"></b>
<bclass="r2"></b>
<bclass="r3"></b>
<bclass="r4"></b>
</b>
<divstyle="height:20px;">
紧缩一下
</div>
<bclass="rbottom">
<bclass="r4"></b>
<bclass="r3"></b>
<bclass="r2"></b>
<bclass="r1"></b>
</b>
</div>
</td>
</tr>
</table>
</body>
</html>


一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。
小妖女 该用户已被删除
沙发
发表于 2015-1-18 06:03:23 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
爱飞 该用户已被删除
板凳
发表于 2015-1-24 12:05:38 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
山那边是海 该用户已被删除
地板
发表于 2015-2-1 10:41:10 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
柔情似水 该用户已被删除
5#
发表于 2015-2-7 06:32:06 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
精灵巫婆 该用户已被删除
6#
发表于 2015-2-21 00:12:32 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
只想知道 该用户已被删除
7#
发表于 2015-3-6 19:45:08 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
分手快乐 该用户已被删除
8#
发表于 2015-3-13 08:09:48 | 只看该作者
可以使用 CSS 检查工具进行设计。
老尸 该用户已被删除
9#
发表于 2015-3-20 17:44:04 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-16 07:55

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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