手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >使用CSS格式化页面布局示例(附图)
使用CSS格式化页面布局示例(附图)
摘要:源代码:NewDocument页面头部页面导航首页日志相册留言板状态左侧栏中间内容右侧栏滚动信息栏底部实现效果:

源代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> New Document </title>

<meta name="Generator" content="EditPlus">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<style type="text/css">

<>

</style>

</head>

<body>

<div id="header">页面头部</div>

<div id="menu">

页面导航

<tr>

<td>

<a href="" target="_blank" >首页 <a href="" target="_blank" >日志 <a href="" target="_blank" >相册 <a href="" target="_blank" >留言板 <a href="" target="_blank" >状态

</td>

</tr>

</div>

<div id="content">

<div>左侧栏</div>

<div>中间内容</div>

<div>右侧栏</div>

</div>

<div id="footer1">滚动信息栏</div>

<div id="footer2">底部</div>

</body>

</html>

实现效果:

1

【使用CSS格式化页面布局示例(附图)】相关文章:

CSS浮动布局基础

CSS实现样式布局的锦囊妙计22招

css3 线性渐变和径向渐变示例附图

新浪微博CSS布局实例分析

利用CSS实现禁止双击选择页面内容的实例展示

使用CSS框架布局的缺点和优点

宽度百分比单位的转换公式及示例

CSS网页布局的技巧

Div CSS实例教程:页面制作方法

用CSS手写导航条没有任何图片附效果图

精品推荐
分类导航