java 个人网站 时时更新
接着上回，java 个人网站第四十四回:CSS内容样式居中布局，这回我们接着介绍，上回说到想将table去掉，后来在网上看到了有种方法可以使文本不跑到页面边去，可以在table标签加样式定义，所以我就暂且留下了table标签，并对head.css进行代码添加，如下：
table{
table-layout: fixed;
word-wrap:break-word;
text-align:left;
width:960px;
其中word-wrap:break_word;为自动换行设置，table-layout:fixed;为固定table的布局大小，不会跟着文本内容大小变化而变化，好了先看下演示效果：(图1)
其中我们将站点名称单独放在一行中，将站点简介跟语言，数据库，大小跟用途放在同一行两列中，将order跟context放到同一行中，这样，一个站点我们用三行来排版显示，接着，我们发现站点简介的内容在表格中左边靠边框太近了，显得不美观，应该有一定的距离，而其右边又没有对齐，也不好看，所以我就上网找了资料，如何解决该问题呢？这就关于表格内边距的设置与文本对齐方式的设置，我们在修改shownetpoint.jsp页面代码如下：
table
s:iterator value="#request.netpoints"
tr
td
font 站点名称：
a href="netpoint/onenetpoint?username=s:property value="#session.username"/netpointname=s:property value="name" /"s:property value="name" //a
/font
/td
/tr
tr
td style="padding: 10px 50px 10px 20px;"br/
p style="text-indent:2em; text-align:justify;text-justify:inter-ideograph;"站点简介:
s:property value="mini_remarks" /
/p
/td
td style="text-align:center;"
语言：s:property value="lang_type" /
数据库：s:property value="database_type" /
大小：s:property value="size_type" /
用途：s:property value="use_type" /
!-- 图片：s:property value="img_src" / --
/td
/tr
tr
td
a href="orderlist/addorderlist?username=s:property value="#session.username"/netpointname=s:property value="name" /"order/a
a href="context/tocontext?username=s:property value="#session.username"/netpointname=s:property value="name" /"context/a
/td
/tr
/s:iterator
/table
我们在简短介绍这一表格添加了内边距的设置：style="padding: 10px 50px 10px 20px;"，对应参数为上左下右，在文本内容上添加了段首缩进与左右对齐方式的设置：style="text-indent:2em; text-align:justify;text-justify:inter-ideograph;"其中text-indent:2em;段首缩进2em，而text-align:justify;text-justify:inter-ideograph;则用来左右对齐，好了，接着看下效果：(图2)
表格内边距有了，也对齐，好了，这回先到这里，下回我们接着进行美化。。。。
java 个人网站 谢谢大家的支持
图1
图2
一、java 个人网站 第四十六回:CSS基础之表格的大小设置
java 个人网站 时时更新
接着上回：java 个人网站第四十五回:CSS基础之表格内边距与文本左右对齐缩进。这回，我们介绍下在table定义了table-layout: fixed;word-wrap:break-word;样式下，如何调整表格的大小，首先，看下效果如下：(图1)
这里我们将站点简介的表格宽度设置为width:560px;再看下页面代码如下：
body
table class=table
s:iterator value="#request.netpoints"
tr
td style="width:560px;"
font 站点名称：
a href="netpoint/onenetpoint?username=s:property value="#session.username"/netpointname=s:property value="name" /"s:property value="name" //a
/font
/td
/tr
tr
td style="padding: 10px 50px 10px 20px;"br/
p style="text-indent:2em; text-align:justify;text-justify:inter-ideograph;"站点简介:
s:property value="mini_remarks" /
/p
/td
这里你可能会有疑问，不是说将站点简介这个表格的宽度设置为width:560px;么，怎么站点简介这里没有设置该style反而在站点名称这里设置了？起初，我也是将该style="width:560px;"设置在站点简介的td里面，可发现该style="width:560px;"居然失效了，上网找了下解决方法，原来应该将该样式定义放在表格的第一个td里面，为什么是放在第一个里面呢，原因只有一个，我们table应用的样式为class=table,也是我们在head.css里面定义的样式，代码如下：
.table{
table-layout: fixed;
word-wrap:break-word;
text-align:left;
width:960px;
该处地方我们使用了table-layout: fixed;将表格大小固定住了，也就是如果table根据其行列的数量来平分大小，而为了使该定义失效，我们自己改变表格的宽度，我们需要在第一个td里面加宽度设置。
好了，这回先到这里，下回我们接着学习CSS基础。
java 个人网站 谢谢大家的支持
图1
本文链接：http://www.dengper.com/licai/12652.html 转载需授权！
网友评论