我的讲解会包含一些标准元素，如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;}
/* ——————————
自定义类
—————————— */
/* 在这里添加您的自定义类 … */
保存所有文件然后就可以试试了！
分享到：
相关推荐
8.1.4 创建CSS布局页面 8.2 Dreamweaver CS3的CSS管理 8.3 CSS代码调试 8.3.1 安装Firefox Web Developer 8.3.2 界面总览 8.3.3 主要功能 8.4 Web Accessibilty Toolbar 8.4.1 安装工具栏 8.4.2 界面与功能总览 第9...
11.2 创建CSS布局 246 11.2.1 新建布局页面 246 11.2.2 插入div进行布局 247 11.2.3 创建CSS规则 250 11.3 CSS调试辅助工具 256 11.3.1 Web Developer插件的安装 256 11.3.2 Web Developer插件概要 258 11.3.3 Web ...
然后是摸块布局设计，页面总体布局设计、链接页面的CSS的文件、要遵 循设计页面的通用规则，设计#heard对象部分由网页的logo部分和导航区构成，在 是设计#content对象部分，content分为三列，第一行由分为头片新闻区...
剖析CSS原理4大核心：盒子模型、标准流、浮动、定位创建主流流览器全兼容的网站：IE 6/UE 7/ Firefox讲解各类网页布局方法：固定宽度布局、变宽布局制作流行的网页元素：导航、菜单、圆角、面板为学习者提供：CSS...
创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <link rel="stylesheet" href="URL../.css"> 3.CSS样式特征 1.继承性 必须是父子（有层叠嵌套的关系）结构 大部分的...
主要包含一个用于显示数量的元素，如 `<div>`，并使用 CSS 对其进行美化和布局。 使用 JavaScript 来获取新能源汽车数量的数据。可以通过调用 API 或从数据库中提取数据，或者根据预设的固定数据进行模拟。可以使用...
布局和样式将最适合PSD，并使用流畅和固定的布局技术以及媒体查询将其调整为不同的屏幕尺寸。 所使用CSS属性应具有较高的全局浏览器支持（Edge，Firefox，Chrome，Safari等），并且该站点将需要在所有宽度从320px...
该应用程序包括使用Bootstrap网格系统（容器，行和列）的响应式布局。 我还使用了Bootstrap子列和粘性页脚。 我创建了三个html页面（index.html，Portfolio.html和contact.html）。 响应式导航栏将是小屏幕的切换栏...
布局和样式将最适合PSD，并使用流畅和固定的布局技术以及媒体查询来调整为不同的屏幕尺寸。 所使用CSS属性应具有较高的全局浏览器支持（Edge，Firefox，Chrome，Safari等），并且该站点将需要在所有宽度从320px开始...
请查看文档，并了解列，节，布局和按钮的工作方式。 固定链接 您可以通过添加permalink: /link/you/want/来配置页面的永久permalink: /link/you/want/到最前面。 意识到！ 由于GitHub页面的链接处理怪癖，您将需要...
ASP.NET 2.0使用Web Part创建应用程序之二（共二） 体验 .net2.0 的优雅（2） -- ASP.net 主题和皮肤 NET2.0系列介绍（一）.NET 2.0 中Web 应用程序主题的切换 ASP.NET 2.0 中Web 应用程序主题的切换 2.0正式版中...
（3）针对页面自适应问题，本文结合渐进增强以及拥抱流式布局的思想，同时研究利用了移动设备的视口特性，实现跨分辨率、跨设备的页面自适应。 （4）针对系统的功能实现问题，通过结合利用原生态框架与HTML5的跨平台...
[强烈推荐, 文档不多, 很快就可以看完, 看完了, 就会使用play了] 目录 MVC应用程序模型 - 7 - app/controllers - 8 - app/models - 8 - app/views - 8 - 请求生命周期 - 8 - 标准应用程序布局layout - 9 - app...
标准应用程序布局layout - 9 - app目录 - 9 - public目录 - 10 - conf目录 - 10 - lib目录 - 11 - 开发生命周期 - 11 - 连接到java调试器 - 12 - 类增强Enhancement - 13 - 02.HTTP路由 - 13 - 关于REST - 14 - ...
2个目标文件，FTP的目标是：（1）提高文件的共享性（计算机程序和/或数据），（2）鼓励间接地（通过程序）使用远程计算机，（3）保护用户因主机之间的文件存储系统导致的变化，（4）为了可靠和高效地传输，虽然用户...
2个目标文件，FTP的目标是：（1）提高文件的共享性（计算机程序和/或数据），（2）鼓励间接地（通过程序）使用远程计算机，（3）保护用户因主机之间的文件存储系统导致的变化，（4）为了可靠和高效地传输，虽然用户...