怎么用 div + css 写出这样的表格

怎么用 div + css 写出这样的表格,第1张

<div class="tab">
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</div>
下面样式
<style>
<!--
tab{width:200px;height:auto;}
tab ul li{ list-style-type:none; line-height:25px; height:25px; border-bottom:#999999 1px dashed}
-->
</style>
还可以用下面的布局效果都一样
<dl>
<dt>标题</dt>
<dd>内容<dd>
<dd>内容<dd>
<dd>内容<dd>
</dl>
纯手打出来的,郁闷好几个单词都忘记了,还好查了一下没有错!希望对你有帮助!

css外部样式表在css中写法如下:
先建立一个样式文件,如 ahtml 的样式是 bcss。
ahtml 里边 <style type="tyle/css" href="bcss" /> bcss文件里边写 样式就好了

你可以将样式表看成是类的集合!每一种样式看成是一个类!
举例说明:
比如说要把"中国人"这三个字设置成宋体,12像素,颜色为黑色
代码如下:
WriteFont
'WriteFont这个是样式名称,你可以看成是一个类的名称
{
font-family: "宋体";
'这个是设置字体,如宋体
font-size: 12px;
'这个是设置字体大小,如12px,px代表像素
color: #000000;
'这个是设置字体颜色,如黑色,#000000代表黑色
}
样式写好后保存,这里我就随便起个名字,如保存成CSScss
现在这个样式写好了,那么怎么让效果显示出来呢请接着看!
我们在来创建一个HTML文件,怎么创建我就不说了,住要讲内容怎么跟样式表关联!
因为我之前的样式是写在一个独立的文件里,所以在另一个文件中要调用就需要跟样式表进行关联!
代码如下:
<link href="csscss" rel="stylesheet" type="text/css">
这一行代码要写在HTML文件的<Head></Head>之间,这样才能在这个文件中调用样式表中的样式!
接下来我们再的页面的<Body></Body>之间添加一个一行一列的表格,当然用别的HTML元素也是可以的!
代码如下:
<Table>
<Tr>
<Td><Td>
</Tr>
</Table>
上面的代码就是一个一行一列表格,我们再往表格中添加点内容,如:加入"中国人",代码就会变成如下结果:
<Table>
<Tr>
<Td>中国人<Td>
</Tr>
</Table>
最后的工作就是进行修饰了,也就是样式表样式的具体应用
如果我想让整个表格的文字都变成:宋体,12像素,黑色,这种情况下不管你是否会在往表格内添加行或列,所有的行和列中的文字都回变成:宋体,12像素,黑色
代码如下:
<Table Class="WriteFont">
<Tr>
<Td>中国人<Td>
</Tr>
</Table>
那么如果我只想让表格的一行当中的所有文字变成:宋体,12像素,黑色,这种情况若我再往表格内插入一行,那么被插入的那行的文字将不受样式的影响!
代码如下:
<Table>
<Tr Class="WriteFont">
<Td>中国人<Td>
</Tr>
<Tr>
<Td>外国人<Td>
</Tr>
</Table>
最后还有一种,就是我只望表格内的一个单元格的文字变成:宋体,12像素,黑色,这种情况下,若再在表格内插入行或列,这些行和列中的文字都将不会受到样式的影响!
代码如下:
<Table>
<Tr>
<Td Class="WriteFont">中国人<Td>
<Td Class="WriteFont">外国人<Td>
</Tr>
</Table>
还有很多其他的方法就不一一列举了!

跨列指的是什么
如果是让里面的标签先是到或覆盖几个列的话
你在表格里面的 最外层标签里 写style="position:absolute;width:500px"
width自己修改成想要的数

等我给你。
但是要在页面底部哦那要再放进一个表格了。如果你上面的东西够多的话,那么它就是底部了。没有什么可以控制一个东西在底部了,除非他的外面还有一个表格
<table border="0" align="center" width="200" cellPadding="0" cellSpacing="0" style="height: 200px">
<tbody>
<tr>
<td align="center" vAlign="bottom"> 
<table border="0" width="100" cellPadding="0" cellSpacing="0" style="height: 100px">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

TABLE要结合CSS你设置CSS样式,只是设置边框和背景,以及上下左右内距离和外距离。
明白了吗呵呵

<html xmlns=">

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13081202.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-30
下一篇 2023-05-30

发表评论

登录后才能评论

评论列表(0条)

保存