以下是polaris在工作中零碎记录下来的知识,在此汇总一下。

1、开发之前,应设计好页面布局

2、插入多张图片时,如果想要图片并排,注意之间不能换行,换行会被当成空格。且一般与它的父元素也别换行。

3、float:left是对当前元素而言的

4、当需要位移一点点时,可以使用相对定位:position:relative;left:10px;top:7px;等

5、一般,网页分为:头部、导航和内容,有时还有脚部。

设计时,可以有两种方法:

5.1、对于静态网页(html),可以使用div来分成几部分。如下:

而对于content,可能还得分为左右。如:

5.2、对于动态网页(如jsp),可以把这些页面分开,然后导入需要的部分。每个页面可能就只包含自己的content。

6、对于CSS的设计,可以根据上面第一种情况来实施。

6.1 将CSS文件分门别类:
base.css,header.css,nav.css,footer.css
其中,base.css包含页面中通用的css设置
然后,新建一个main.css文件,把上面的css文件放入其中
@import url("base.css");
@import url("header.css");
@import url("nav.css");
@import url("footer.css");

6.2 编写CSS时,可以按如下顺序执行:
(1)先编写全局样式(base.css)
* { margin:0; padding:0; word-wrap:break-word; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
a { color:#0287CA; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
img { border:none; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/

(2)然后是可大范围内重用的样式

大多数页面都会用到头部样式、导航样式和尾部样式。因此,header.css、nav.css和footer.css是可以重用的样式
#header{
width:800px;
height:80px;
border: 1px solid #AAAAAA;
margin:10px auto;
background:#3B5998;
}
margin:10px auto使其能够居中。

(3)最后编写细节方面的样式
这里主要是为每个页面单独编写属于自己的样式。

以上是一些零碎的知识,希望对Web开发人员有所帮助,不好之处还请指正。

进一步阅读:点击此处阅读《CSS选择器、优先级与匹配原理》。

本文转自polaris1119 51CTO博客,原文链接:http://blog.51cto.com/polaris/396797,如需转载请自行联系原作者

DIV + CSS布局的一些知识汇总相关推荐

  1. 计算机创新课堂教案,广东省创新杯说课大赛计算机类一等奖作品:《DIV+CSS布局网页》教学设计方案...

    <广东省创新杯说课大赛计算机类一等奖作品:<DIV+CSS布局网页>教学设计方案>由会员分享,可在线阅读,更多相关<广东省创新杯说课大赛计算机类一等奖作品:<DIV ...

  2. 根本不存在 DIV + CSS 布局这回事

    实际上div不是用来布局的,div只是用来表示一个其它元素都无法准确表达语意的一个块区,只有CSS是用于布局的,所以根本就不存在div+CSS布局这回事.反过来,table布局的时候经常依赖于CSS定 ...

  3. html中表格布局还是div布局,Table布局 VS Div+CSS布局,选哪个?

    Table布局 和 Div+CSS布局的争论,过了7-8年了,今天看到一篇文章<为什么我们不建议用Table布局>,又想发表下自己的见解,供初学 <为什么我们不建议用Table布局& ...

  4. DIV+CSS布局基本流程及实例介绍

    都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称.DIV+CS ...

  5. div css教程 属性,Div+CSS布局入门教程

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  6. 网页设计(四)——DIV+CSS布局3

    前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...

  7. div+css布局与table布局比较

    div+css布局与table布局比较 一.背景介绍 table布局是网页早期布局实现的主要手段,当时的网页构成,相对也比较简单,多是以文本 以及静态图片等组成的,类似于报纸的形式,分区分块显示,ta ...

  8. div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧

    div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧 在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...

  9. div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)

    本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...

最新文章

  1. 一步一步学Silverlight 2系列(22):在Silverlight中如何用JavaScript调用.NET代码
  2. 如何使用 React 和 React Hooks 创建一个天气应用
  3. 寻宝机器人电路板焊接_专业维修淮安市KUKA库卡KRC2机器人回收{机器人调试}
  4. WPF Visibility的用法
  5. mysql的记录操作的日志文件_MySql 的操作日志 历史记录
  6. 如何配置openjdk的 java home
  7. switch case 遇到判断type分支的写法
  8. SpringBoot启动一下就结束了
  9. python cross val score_python - sklearn cross_val_score的精度低于手动交叉验证 - 堆栈内存溢出...
  10. php添加pdo_mysql_php下添加pdo_mysql扩展
  11. qt中实现多语言功能
  12. autocad2014点击保存闪退_autocad2014启动闪退 AutoCAD启动时闪退怎么办
  13. 树莓派实现SIM868 ppp拨号上网
  14. 货捕头API接口,item_search - 根据关键词取商品列表
  15. 连接tcp服务器出现的问题及解决方法
  16. jQuery 08-13
  17. C++设计模式——中介者模式(高屋建瓴)
  18. 2008中国互联网十大网络流行词
  19. React SSR - 01 SSR 介绍 和 快速开始
  20. MUX实现逻辑功能(反相器/与门/或门/与非门/或非门/异或门/同或门)

热门文章

  1. 如何在Azure machine learning中使用异常检测
  2. 深度学习NN、CNN、RNN、和DNN你了解吗?
  3. SAP MM T-code MD04的使用,是有前提的!
  4. 吴恩达机器学习笔记 —— 1 绪论:初识机器学习
  5. 《数学之美》第20章 不要把鸡蛋都放到一个篮子里--谈谈最大熵模型
  6. 2019年人工智能行业现状与发展趋势报告
  7. AR智能提升工业效率的4大场景与应用实践!
  8. 物联网面临的7大网络安全威胁
  9. 阿里商业白皮书:每个企业都要变成一个数据公司
  10. CSDN与易观联合发布《2017-2018中国人工智能产业路线图》