用HTML5和CSS3怎么写出两行四列排版?

html-css012

用HTML5和CSS3怎么写出两行四列排版?,第1张

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=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>

----希望对你有帮助 ----

-------满意采纳奥-----

p {

text-indent: -2em

margin-left: 2em

}

设置text-indent: -2em以后p标签中第一行文字向左偏移,这样第二行开始的文字就等于缩进了,但是这样设置会导致第一行向左超出div,所以再用margin-left使p标签整体右移即可

你用的是比较新的浏览器了吧。

在CSS3刚出来的时候,很多浏览器都不支持,只有他们自己的私有写法,都带上自己的前缀。

像webkit的加上-webkit-前缀,火狐的加上-moz-前缀,IE加上-ms-前缀,Opera加上-o-前缀。

现在基本上能够支持的都已经支持了,可以做到把前缀去掉的标准写法也能得到支持。

对于webkit内核的浏览器来说,-webkit-写法是为了兼容早期的写法,但是标准写法不带-webkit-的也可以用。

所以导致了上面两行代码都能生效。

你学过CSS懂的,如果两行都有效,并且描述的是同一个属性,那么后者覆盖前者。