HTML使用<span>和<div>布局中遇到的问题

最新推荐文章于 2022-10-14 18:09:21 发布

MissTic01

最新推荐文章于 2022-10-14 18:09:21 发布

阅读量1.2k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/MissTic01/article/details/50451451

版权

HTML 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一.使用<span>来布局时（http://www.w3school.com.cn/html/html_layout.asp）

遇到的问题如下：

1.<table>中border的选择，一般情况下，选择border="1"效果如下： border

如果改为border="0"效果如

少了外边框。

2.可以在<table>中用width和height来控制表格的大小

3.对表格中的单元格控制他的颜色文本对其方式等功能要在<td>或<th>中添加属性，而不是在<tr>中

4.控制表格单元格中的文本对齐方式的方法如下：

<tr valign="top">
<td bgcolor="#ffff99" width="150px" height="200px" text-align:"top;">
<b>Mennu</b><br/>
HTML<br/>
CSS<br/>
JavaScript<br/>
</td>
<td bgcolor="#EEEEEE" width="400px" height="200px" text-align:"top;">Content goes here</td>
</tr>

需要注意的是<tr>那是valign="top"而不是align="top";在<td>中是text-align:"top"而不是text-align="top"

5.colspan是对列的控制，放在<td>中，而不是在<tr>中

二.使用<div>来进行HML布局

<div>放在<head>中

<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color: #99bbbb;}
div#menu {background-color: #ffff99;height:200px;width:150px; float:left;}
div#content {background-color:#eeeeee;height:200px;width: 350px;float: left;}
div#footer {background-color: #99bbbb; clear: both; text-align: center;}
h1 {margin-bottom: 0;}
h2 {margin-bottom:0; font-size:18px;}
ul {margin:0;}
li {list-style: none;}
</style>
</head>

<body>
<div id="container">

<div id="header">
<h1>Main Title of web page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>

<div id="content">content goes here</div>
<div id="footer">copyright W3Scool.com.cn</div>
</div>
</body>