您的位置：首页 > Web前端 > CSS

HTML CSS/<div> 布局页面小案例

2018-03-16 11:17 676 查看

学自w3cSchool的HTML教程：http://www.w3school.com.cn/html/html_layout.asp

1.使用<div>布局：
<head>
<style>
#header {
    background-color:blue;
    color:red;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
#notice {
   width:40px;
   color:black;
   float:right;
}
</style>

</head>

<body>

<div id="header">
<h1>欢迎来到**大学程序设计类课程在线评测系统</h1>
</div>

<div id="nav">
在线练习<br>
在线测评<br>
查看成绩<br>
查看做题记录<br>
</div>

<div id="notice">
消息<br>
</div>

<div id="section">
<p>
本系统是来提高程序设计类课程能力的！
</p>
<p>
just for fun!
</p>
</div>

<div id="footer">
by zzj
</div>

</body>
2.用表格的HTML布局
注释：<table> 元素不是作为布局工具而设计的。

<table> 元素的作用是显示表格化的数据。
使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：<body>

<table class="lamp">
<tr>
<th>
<img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>

</body>

<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp td {
width:40px;
}
</style>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML CSS

相关文章推荐

新的分享

章节导航