<w:p> <w:pPr> <w:spacing w:line="600" w:line-rule="exact"/> <w:ind w:first-line-chars="1775" w:first-line="5680"/> <w:jc w:val="center"/> <w:rPr>

这个标签描述了一个段落的格式，包括行距、缩进、对齐方式等。其中，w:spacing 标签中的 w:line 属性指定了行距的大小，单位是 1/20 磅；w:line-rule 属性指定了行距的计算方式；w:ind 标签中的 w:first-line-chars 属性指定了首行缩进的字符数；w:first-line 属性指定了首行缩进的大小，单位是 1/20 磅；w:jc 标签中的 w:val 属性指定了段落的对齐方式，包括左对齐、居中、右对齐等；w:rPr 标签用于描述段落内的文本格式，包括字体、字号、颜色等。总的来说，这个标签的作用是控制段落的格式，使其更符合要求。

完善<table class="table table-hover tar"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </tr> </thead> <tbody> <div><tr> <td><img src="img/t_recommen/cup.jpg" width="200" height="150"><br>健身水杯 </td> <td>100</td> <td><input type="number" value="1" min="1"></td> <td>100</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/t_recommen/xiaomi.jpg" width="200" height="150"><br>商品2</td> <td>200</td> <td><input type="number" value="1" min="1"></td> <td>200</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/mobile/m2.jpg" width="200" height="150"><br>商品3</td> <td>300</td> <td><input type="number" value="1" min="1"></td> <td>300</td> <td><button class="btn btn-danger">删除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总价：</td> <td colspan="2">600</td> </tr> </div> </tfoot> </table>这个代码让他美观

要让这个表格更美观，可以使用CSS样式来进行美化。以下是一个例子： ```html <style> .tar { margin: 20px auto; border-collapse: separate; border-spacing: 0px 10px; } .tar th { background-color: #f5f5f5; font-weight: bold; } .tar td { vertical-align: middle; } .tar tbody tr:hover { background-color: #f5f5f5; } .tar tbody td img { display: block; margin: 0 auto; } .tar tfoot td { font-weight: bold; text-align: right; } </style> <table class="table table-hover tar"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><img src="img/t_recommen/cup.jpg" width="200" height="150"><br>健身水杯</td> <td>100</td> <td><input type="number" value="1" min="1"></td> <td>100</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/t_recommen/xiaomi.jpg" width="200" height="150"><br>商品2</td> <td>200</td> <td><input type="number" value="1" min="1"></td> <td>200</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/mobile/m2.jpg" width="200" height="150"><br>商品3</td> <td>300</td> <td><input type="number" value="1" min="1"></td> <td>300</td> <td><button class="btn btn-danger">删除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总价：</td> <td colspan="2">600</td> </tr> </tfoot> </table> ``` 在这个例子中，我们使用了自定义的CSS样式来美化表格。我们设置了表格的外边距和内边距，以及表格单元格之间的间距。我们还设置了表头的背景颜色和字体加粗，以及表格单元格的垂直对齐方式。我们还使用了:hover伪类来设置鼠标悬停时的背景颜色，并将每个商品的图片居中显示。你可以根据需要进行调整，并添加其他样式来进一步美化表格。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Poems</title> <style> p:hover { color: red; font-weight: bold; } body { background-color: MistyRose; font-family: Arial, sans-serif; color: DarkSlateGray; } h2 { font-size: 30px; font-family: Georgia, serif; color: DarkSlateBlue; margin-bottom: 5px; } p { font-size: 20px; line-height: 28px; margin-top: 0px; margin-bottom: 20px; } .hover { color: white; background-color: DarkSlateGray; cursor: pointer; } </style> </head> <body> <h2>Poem 1</h2> <p>Roses are red,<br> Violets are blue,<br> Sugar is sweet,<br> And so are you.</p> <h2>Poem 2</h2> <p>There is a charm about<br> the forbidden that makes<br> it unspeakably desirable.</p> <script> var hoverEls = document.querySelectorAll('.hover'); hoverEls.forEach(function(hoverEl) { hoverEl.addEventListener('mouseover', function() { hoverEl.classList.add('hover'); }); hoverEl.addEventListener('mouseout', function() { hoverEl.classList.remove('hover'); }); }); </script> </body> </html>优化这段代码，为其段落给予不同的字体以及加入表格

对于代码的优化，可以像下面这样对段落进行样式调整，给予不同的字体，并且加入表格： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Poems</title> <style> body { background-color: MistyRose; font-family: sans-serif; color: DarkSlateGray; } h2 { font-size: 30px; font-family: Georgia, serif; color: DarkSlateBlue; margin-bottom: 5px; } p:first-of-type { font-size: 25px; line-height: 35px; font-family: Arial, sans-serif; margin-top: 0px; margin-bottom: 20px; } p:last-of-type { font-size: 23px; line-height: 33px; font-family: Verdana, sans-serif; margin-top: 20px; margin-bottom: 0px; } table { border-collapse: collapse; border-spacing: 0px; } td { padding: 10px; border: 1px solid black; } </style> </head> <body> <h2>Poem 1</h2> <p>Roses are red,<br> Violets are blue,<br> Sugar is sweet,<br> And so are you.</p> <h2>Poem 2</h2> <p>There is a charm about<br> the forbidden that makes<br> it unspeakably desirable.</p> <table> <tr> <td>表格中的内容1</td> <td>表格中的内容2</td> </tr> <tr> <td>表格中的内容3</td> <td>表格中的内容4</td> </tr> </table> </body> </html>

<w:p> <w:pPr> <w:spacing w:line="600" w:line-rule="exact"/> <w:ind w:first-line-chars="1775" w:first-line="5680"/> <w:jc w:val="center"/> <w:rPr>

相关推荐

android-line-spacing:Android行距实验实用程序

font-line：OpenType垂直指标报告和字体行距调整工具

retext-sentence-spacing:用于检查句子间距的插件

The 'lineSpacing' attribute is deprecated. Use the tag instead

nave中设置lineSpacing属性<text maxLines="2" lineBreak="explicit" lineSpacing="10">没有生效怎办

在html中如何让中的内容间距变大

<input type ='submit' placeholder ="计算" value="计算" style="display: flex;width:120px;height: 44px;border-style:solid;border-color:#C23531;background-color:#C23531;font-size: 17px;letter-spacing:3px;"> 这样设置了，但还是无法居中，而且边框效果也不对

设置行与行之间的空白间隔

<TextBlock> <Run Text="Hello World" Typography.Kerning="{Binding Kerning, Converter={StaticResource KerningToSpacingConverter}}" /> </TextBlock>在后台怎么写

table { border-collapse: collapse; border-spacing: 0; }

textlint-rule-preset-ja-spacing:处理空间周围样式的textlint规则的集合

最新推荐

####这是一篇对python的详细解析

菜日常菜日常菜日常菜日常

zigbee-cluster-library-specification

管理建模和仿真的文件

MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析

用Spring boot和vue写一个登录注册界面

JSBSim Reference Manual

"互动学习：行动中的多样性与论文攻读经历"

MATLAB柱状图在数据分析中的作用：从可视化到洞察

命名ACL和拓展ACL标准ACL的具体区别