用HTML5和CSS3怎么写出两行四列排版?
发布网友
发布时间：2022-04-25 14:30
共1个回答
热心网友
时间：2022-04-19 06:19
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>用html+CSS做表格</title>
<style type="text/css">
ul{padding:0;
width:324px; /*设置表格宽 */
height:42px; /*设置表格高*/
margin:30px;
border-top:#000 1px solid; /*设置表格上边框*/
border-right:#000 1px solid; /*设置表格右边框*/
}
li{ border-left:#000 1px solid; /*设置表格左边框*/
border-bottom:#000 1px solid;/*设置表格下边框*/
/*设置单元格边框*/
list-style:none; /*清除项目列表前的标记*/
float:left; /*设置单元格浮动，用于水平排列*/
display:block; /*设置单元格为块级元素于用语控制大小等*/
width:80px; /*设置单元格宽*/
height:20px; /*设置单元格高*/
text-align:center; /*设置单元格内文本对齐方式*/
}
</style>
</head>
<body>
<!-- 原理就是利用项目列表的每个项目做出表格中的每个单元格，然后通过设置ul和li的边框达到设置表格的边框效果 -->
<ul>
<li>表格1</li>
<li>表格2</li>
<li>表格3</li>
<li>表格4</li>
<li>表格A</li>
<li>表格B</li>
<li>表格C</li>
<li>表格D</li>
</ul>
</body>
</html>
----希望对你有帮助 ----
-------满意采纳奥-----
