文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | 免费看大片 | WPS | 杀毒软件
清风网络
首 页 软件下载 网络学院 数码学院
QQ 电脑入门 游戏 操作系统 图形处理 办公软件 媒体动画 精文荟萃 工具软件 网络编程 程序开发 网络技术 认证考试 网站建设 文章专栏
当前位置:清风网络学院网站建设Div+CssDIV CSS网页布局实例:十步学会用CSS建站
精品推荐
特别推荐
·初学者来看:学习网页技术CSS怎么入门?
·CSS网页设计非常有用技巧
·DIV+CSS的命名规则有利于网站优化
·多个CSS样式表争夺特定选择符的控制权
·学习CSS制作网页总结的一些经验技巧
·CSS初学者应该保持的一种心态
·CSS常见问题和技巧总结
·DIV+CSS常见错误汇总
·设计中常用的十个CSS技巧
·网站配色,CSS主色调配色方案
·你是哪个等级的CSS开发人员?
·简单的CSS改进网站设计三个技巧
·使用CSS样式表让英文文本自动换行
·用CSS给网页图片添加滤镜效果
·国外译文:网页设计如何使用CSS的选择器模式?
·常见的CSS问题的“一站式”的解决方案
·学习CSS从何入手技术
·CSS注释、命名、继承性、样式排序等CSS技巧的小结
·推荐好文:无懈可击的CSS圆角技术
·标准网页中用CSS进行段落排版的方法
热点TOP10
·DIV CSS网页布局实例:十步学会用CSS建站
·Div+CSS+JS树型菜单,可刷新
·5款纯div+css制作的弹出菜单(标准且无js)
·Javascript +CSS横向三级导航菜单
·用CSS实现动态显示的五角星级效果
·Web标准学习:未知高度的非表格垂直对齐
·CSS:鼠标经过时改变背景颜色或图片
·用CSS如何控制网页中图片自适应大小?
·站长推荐:53个CSS-不可或缺的技巧
·CSS实现表格边框阴影和背景渐变效果
·CSS+DIV+JS导航菜单和Flash效果差不多
·div+css实现圆角边框
·采用Table+CSS实现的TabPane 选项卡代码实例
·CSS网页设计非常有用技巧
·CSS实例:让页脚保持在未满屏页面的底部
·DIV CSS布局网页实例:简单表单form标准化实例
·兼容 IE 和 FF 的换行 CSS 推荐样式
·背景图片居中显示(HTML,CSS技巧)
·DIV+CSS常用的网页布局代码
·学习CSS从何入手技术

DIV CSS网页布局实例:十步学会用CSS建站

日期:2007年7月24日 作者: 查看:[大字体 中字体 小字体]


  <h2>Contact Us</h2> 
  <p>Phone: (07) 853 6060<br /> 
    Fax: (07) 853 6060<br /> 
    Email: <a href="mailto:info@enlighten.co.nz" >info@enlighten.co.nz</a><br /> 
    P.O Box: 14159, Hamilton, New Zealand</p> 
  <p><a href="http://css.jorux.com/wp-admin/post.php#" >More contact information…</a></p> 
</div>
<div id="content">
  <h2>About</h2>
  <p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in
    front and back end development. To view some of the web sites we have created view our
    portfolio.</p>
  <p>We are currently undergoing a 'face lift', so if you have any questions or would
    like more information about the services we provide please feel free to contact us.</p>
  <h2>Contact Us</h2>
  <p>Phone: (07) 853 6060<br />
    Fax: (07) 853 6060<br />
    Email: <a href="mailto:info@enlighten.co.nz" >info@enlighten.co.nz</a><br />
    P.O Box: 14159, Hamilton, New Zealand</p>
  <p><a href="http://css.jorux.com/wp-admin/post.php#" >More contact information…</a></p>
</div>

刷新页面可以看到在Content层中又出现一些空白,这是由于<h2><p>标签的默认边距(margin)造成的,我们必须消除这些恼人的空白,当又不想把网页中所有的<h2><p>标签地边距都设为0,这就需要使用css的子选择器("child css selector"),在html的文件结构中,我们想控制的<h2><p>标签(child)是属于#content层(parent)的,因此在css文件中写入:

#content h2 {  
 margin: 0;  
 padding: 0;  
}  
#content p {  
 margin: 0;  
 padding: 0;  
}
#content h2 {
 margin: 0;
 padding: 0;
}
#content p {
 margin: 0;
 padding: 0;
}

这样我们就告诉浏览器,仅仅是隶属于content层的<h2><p>标签的margin和padding的值为0!

第六步:页面内的基本文本的样式(css)设置:

你是不是厌倦了那些大红大绿的背景,现在是去掉它们的时候了,只保留导航条的红色背景。真是难为您居然能坚持学习本教程到此,很好,再过几步,你就能很好了解css控制整个网页版面(Layout)的能力。

–言归正传–

先设置全局的文本样式:

body {  
 font-family: Arial, Helvetica, Verdana, Sans-serif;  

上一页 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] 下一页 




上一篇:DIV CSS标准制作网页学习之学习DTD的元素

下一篇:用CSS如何控制网页中图片自适应大小?

DIV CSS网页布局实例:十步学会用CSS建站 相关文章:
·为什么iexplore.exe在打开网页时CPU使用会100%?
·DIV CSS网页布局实例:十步学会用CSS建站
·Photoshop实例:制作超酷影片画面场景
·Photoshop精细抠像实例
·Photoshop实例:调出漂亮MM的唯美效果
·ASP.NET上传文件的实例
·能上QQ却打不开网页的原因及解决办法
·3DS Max特效片头精彩实例——星光灿烂
·常用网页使用js技巧收集(200多个)
·去除视频中自动弹出网页
DIV CSS网页布局实例:十步学会用CSS建站 相关软件:
·Dreamweaver 网页设计
·中文版Excel 2003实例与技巧
·photoshop cs 超梦幻网页创意宝典
·Flash MX 动画制作实例教程
·东方网页王III 正式版
·CorelDraw12 入门与实例(图文教程 菜鸟先飞系列教材)
·古典网页模板
·中文版 AutoCAD2004 应用实例与技巧
·PhotoShop7 设计百例 + 经典实例教程 + 滤镜教学
·AutoCAD2002入门与实例详解

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源:http://www.vipcn.net
| 帮助(?) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.vipcn.net All Rights Reserved. 鄂ICP备05000083号Powered by:viphot