SpringSide开发实战（三）：漫谈CSS和页面布局 - 编程入门网

如果我们要美化页面，比如添加网站特有的图片，我们可以修改#logo、#advertisment 、#appendix的css代码，甚至当以后别人美化我的网站时，可以把这三个div的visible设置 为false，而直接定义#header的样式。在这里，我们只简单的把#logo的背景设置为logo图 片，并去掉边框。下面是css代码：

#logo {}{ 　　 float:left; 　　 height: 60px; 　　 width: 200px; 　　 background:url(../images/xkland_logo.gif) no-repeat left top; }

对于其他的div，我们还需要为它们添加内容，#loginView这个稍微特殊一点，需要添加 标题和表单，而其他的div就简单得多，只需要标题和列表就够了。这里我们以#loginView 为例，下面是添加内容之后的效果：

SpringSide开发实战（三）：漫谈CSS和页面布局(8)

别看这里面布局也挺复杂的，我也完全没有使用表格。下面是html代码：

<div id="loginView"> 　 <h3>用户登录</h3> <form name="form1" id="form1" method="post" action=""> 　 <p>用户名： 　　　 <input class="textInput" name="userName" type="text" id="userName" /> 　 </p> 　 <p>密　码： 　　 <input class="textInput" name="password" type="password" id="password" /> 　 </p> 　 <ul> 　　　 <li>忘记密码？</li> 　　　 <li>新用户注册</li> 　　　 <li><input type="checkbox" name="checkbox" value="checkbox" />记住我 </li> 　 </ul> 　 <p class="clear"> 　 <input type="submit" name="Submit" value="登　录" /> 　 </p> </form> </div>

可以看到，我使用的h3标签来作为标题，这样避免了为标题另外嵌套一个div，对输入文 本框定义了类textInput来定义它们的样式，而其他的文本内容，我都是使用了p标签和ul、 li标签，从上面的效果图就可以看出CSS的强大。下面是它们的css代码：

#loginView {}{ 　　 border: 1px solid #0F54C3; 　　 width: 280px; 　　 margin:1px 0px; } h3 {}{ 　　 border-bottom-width: 2px; 　　 border-bottom-style: solid; 　　 border-bottom-color: #0F54C3; 　　 padding-top: 5px; 　　 padding-right: 5px; 　　 padding-bottom: 5px; 　　 padding-left: 15px; 　　 margin: 0px; 　　 font-size: 10.5pt; } #loginView p {}{ 　　 margin:3px; 　　 text-align:center; } #loginView form {}{ 　　 margin:0px; } .textInput {}{ 　　 border: 1px solid #CCCCCC; 　　 width: 15em; 　　 height:12px; } #loginView ul {}{ 　　 margin:8px 10px 3px 10px; } #loginView ul li {}{ 　　 float: left; 　　 width: 130px; 　　 height:18px; } .clear {}{ 　　 clear: left; }

总之，使用CSS将程序和美工分离是绝对的真理，我们程序员只要能够在框框内输出正确 的数据就够了，这样能够尽量减少程序的bug，美化页面的事就让界面设计师去做吧。当然 ，我们程序员还是要能够在html中设计正确的division划分和嵌套，让界面设计师在设计界 面的时候能够找到定义CSS的锚点。

最后提一下，如果你的公司附近有几所大学的话，那么恭喜你，你只需要设置少量的奖 金举办一个什么CSS设计大赛，那么你的网站就有成十上百

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!