我的讲解会包含一些标准元素，如logo、顶栏、导航栏、文本区域、用于文章分类的中列和用于插入Google Adsense 120X600广告的右侧列。所以您完全可以将这些代码快速拷贝并重新利用在自己的前端开发项目中。
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>
步骤二:CSS文件
现在,创建一个CSS文件然后链接到index.html
/* ——————————
HTML重定义标签
—————————— */
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;}
input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}
a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}
/* ——————————
页面结构
—————————— */
/* #container has an absolute width (780 pixel) */
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:28px;}
#navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline;}
#main{width:auto; display:block; padding:10px 0;}
#column_left{width:460px; margin-right:20px; float:left;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; padding:10px 0; font-size:11px; color:#666666;}
/* ——————————
自定义类
—————————— */
/* 在这里添加您的自定义类 … */
保存所有文件然后就可以试试了！
分享到：
相关推荐
"css-template三列布局"指的是利用CSS来创建一种常见的网页布局模式，即页面分为三个等宽或不等宽的列。这种布局广泛应用于网站的头部、主体内容和侧边栏。接下来，我们将深入探讨如何实现这样的布局，并介绍一些...
CSS3允许我们使用`position: fixed`属性来创建固定定位的元素，使得元素始终相对于浏览器窗口定位，而不是相对于其父元素。在这个模板中，左侧导航菜单就是通过这种方式实现的。菜单的宽度通常设置为一个固定的值，...
7. **Grid布局**：CSS网格布局（Grid）提供了一个二维的布局系统，可以轻松创建复杂的、响应式的网格。它允许开发者定义行和列的大小，并将元素放置在网格的任意单元格中。 8. **响应式设计**：随着移动设备的普及...
2. **网格布局（Grid Layout）**：CSS Grid允许创建二维布局，其中元素可以分布在行和列上。通过定义行和列的大小，可以轻松创建复杂的、响应式的网格系统，如电商网站的商品展示区域。 3. **Flex布局（Flexible ...
通过查看和学习这些文件，你可以了解如何将基本的HTML结构与CSS样式结合，以创建一个功能齐全、视觉吸引人的三列布局网站。无论你是初学者还是经验丰富的开发者，这个模板都是一个很好的参考资料，可以帮助你提升...
在网页设计领域，布局是至关重要的，而"DIV+CSS实现3列布局"是一个常见的网页布局方式，尤其适合初学者入门。在这个经典案例中，我们将深入理解如何利用HTML的`div`元素和CSS来创建一个包含左、中、右三列的结构。 ...
在"经典CSS+DIV布局模板"中，你可能会看到各种布局结构，如： - **一栏布局**：适用于内容较少或者主要内容居中的网站。 - **两栏布局**：通常分为侧边栏和主内容区，常见于博客和新闻网站。 - **三栏布局**：多...
4. **Grid布局**：CSS Grid布局允许我们创建二维网格，适用于更复杂的布局。定义行和列后，可以通过`grid-template-columns`和`grid-template-rows`分配空间。右侧`div`可设置固定宽度，左侧`div`则自适应填充剩余...
4. **布局模式**：`DIV+CSS`布局主要有三种主要模式：流体布局、固定布局和响应式布局。流体布局使用百分比定义宽度，能自适应不同屏幕尺寸；固定布局则使用像素单位，适用于固定大小的屏幕；响应式布局则根据设备...
固定布局适用于屏幕尺寸相对固定的场景，而流体布局则能让页面随浏览器窗口大小变化而自适应。随着移动设备的普及，响应式布局变得尤为重要，它能确保网页在不同设备上都能呈现出良好的用户体验。 此外，书中的实例...
3. **Flexbox布局**：现代CSS提供了Flexbox（弹性盒布局），它为复杂的一维布局提供了强大支持，如中心对齐、自适应间距等。理解Flexbox的属性，如flex-direction、justify-content、align-items等，能极大提升布局...
在网页设计领域，CSS（Cascading Style Sheets）布局是构建网页结构的关键技术。它允许开发者控制网页元素的样式、位置和排列方式，使得网页设计更加灵活和美观。本资源"CSS布局之道"是一个专为初学者准备的学习资料...
3. 三列布局：常见于企业网站，两侧辅助信息，中间主要内容。 4. 自适应布局：根据屏幕尺寸变化调整布局。 5. 栅格布局：基于网格系统，灵活划分页面空间。 6. 圣杯布局：两侧固定宽度，中间内容区自适应。 7. 菜单...
在网页设计领域，"DIVCSS完美布局"是构建现代网页结构的一种核心技术。"DIV"是HTML中的一个无语义的容器元素，全称为“Division”，即分隔或区域的意思，而"CSS"则代表“Cascading Style Sheets”，即层叠样式表，...
6. **Grid布局**：CSS Grid是另一项CSS3新特性，用于二维布局，可以精确控制行和列，适用于创建复杂的网格系统。 7. **浮动布局**：浮动布局是早期常见的布局方式，通过`float`属性使元素脱离文档流，但现代布局...
1. **CSS布局基础**：CSS布局主要分为流体布局、固定布局、混合布局和响应式布局等类型。流体布局使页面元素随浏览器窗口大小变化而自适应；固定布局则保持页面宽度不变，常用于桌面端设计；混合布局结合两者，兼顾...
浮动常用于创建多列布局，而定位则能精确控制元素在页面上的位置，如相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。 4. CSS3新特性：CSS3引入了许多新功能，如伪类和伪元素、过渡(transitions)、动画...
- **固定布局**：宽度固定，不随浏览器窗口大小改变而变化，适用于对宽度有严格要求的设计。 - **流体布局**：宽度根据浏览器窗口大小自适应，提供良好的跨设备兼容性。 - **响应式布局**：使用媒体查询等技术，...
总结，"div+css 网页模板布局 固定宽度右窄左宽"是一个基础但实用的网页设计技巧，它能够帮助我们创建具有清晰结构的网页，同时也为响应式设计打下基础。通过熟练掌握这些技巧，开发者可以构建出美观且功能丰富的...
3. **定位**：CSS提供了多种定位方式，如静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。理解这些定位方法的差异，可以帮助我们创建复杂布局。 4. **浮动**：浮动（float）...