CSS教程：三列固定网页布局实例_flex布局怎么布局左中右资源-CSDN文库

147 浏览量 2020-12-03 15:58:50 上传评论收藏 62KB PDF 举报

资源推荐

资源详情

资源评论

CSS教程：三列固定网页布局实例教程：三列固定网页布局实例

我们的讲解会包含一些标准元素，如logo、顶栏、导航栏、文本区域、用于文章分类的中列和用于插入Google Adsense

120X600广告的右侧列。

　　今天软件开发网将向大家讲解如何通过设计一个HTML/CSS的基本结构，来创造一个简单且常用的三列式固定页面布

局。

　　我们的讲解会包含一些标准元素，如logo、顶栏、导航栏、文本区域、用于文章分类的中列和用于插入Google

Adsense120X600广告的右侧列。所以您完全可以将这些代码快速拷贝并重新利用在自己的前端开发项目中。

HTML结构

下图说明了我在页面中添加的HTML/CSS元素。

　　这个结构其实已经可以直接使用了。您只需再重新定义字体、背景颜色、每个层和HTML标签的字体风格和一些其他自定

义类。

点击下载源代码文件

步骤一:HTML文件结构

创建一个新页面，并且把以下代码复制然后粘贴到<body>标签内:

<div id=”container”>

<div id=”topbar”>顶栏/Logo层</div>

<div id=”navbar”>

<a href=“index.html?home”>Home</a>

<a href=“index.html?about”>About</a>

<a href=“mailto:myemailaddres@email.com”>Contact me</a>

</div>

<div id=”main”>

<div id=”column_left”>

<h1>文章标题</h1>

<h2>2008年12月5日</h2>

<p>在这里添加您的文本内容</p>

</div>

<div id=”column_right”>

<h3>分类</h3>

右侧内容添加分类或widget (twitter、我博客的读者等…)

</div>

<div id=”column_right_adsense”>

<h3>AdSense</h3>

Adsense 120 X 600

</div>

<!– Don’t remove spacer div. Solve an issue about container height –>

<div class=”spacer”></div>

</div>

<div id=”footer”>? 2008 Information about your site</div>

</div>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38738983

粉丝: 5
资源: 873

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip