DIV + CSS布局的一些知识汇总
以下是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布局的一些知识汇总相关推荐
- 计算机创新课堂教案,广东省创新杯说课大赛计算机类一等奖作品:《DIV+CSS布局网页》教学设计方案...
<广东省创新杯说课大赛计算机类一等奖作品:<DIV+CSS布局网页>教学设计方案>由会员分享,可在线阅读,更多相关<广东省创新杯说课大赛计算机类一等奖作品:<DIV ...
- 根本不存在 DIV + CSS 布局这回事
实际上div不是用来布局的,div只是用来表示一个其它元素都无法准确表达语意的一个块区,只有CSS是用于布局的,所以根本就不存在div+CSS布局这回事.反过来,table布局的时候经常依赖于CSS定 ...
- html中表格布局还是div布局,Table布局 VS Div+CSS布局,选哪个?
Table布局 和 Div+CSS布局的争论,过了7-8年了,今天看到一篇文章<为什么我们不建议用Table布局>,又想发表下自己的见解,供初学 <为什么我们不建议用Table布局& ...
- DIV+CSS布局基本流程及实例介绍
都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称.DIV+CS ...
- div css教程 属性,Div+CSS布局入门教程
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- 网页设计(四)——DIV+CSS布局3
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
- div+css布局与table布局比较
div+css布局与table布局比较 一.背景介绍 table布局是网页早期布局实现的主要手段,当时的网页构成,相对也比较简单,多是以文本 以及静态图片等组成的,类似于报纸的形式,分区分块显示,ta ...
- div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧 在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
- div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...
最新文章
- 一步一步学Silverlight 2系列(22):在Silverlight中如何用JavaScript调用.NET代码
- 如何使用 React 和 React Hooks 创建一个天气应用
- 寻宝机器人电路板焊接_专业维修淮安市KUKA库卡KRC2机器人回收{机器人调试}
- WPF Visibility的用法
- mysql的记录操作的日志文件_MySql 的操作日志 历史记录
- 如何配置openjdk的 java home
- switch case 遇到判断type分支的写法
- SpringBoot启动一下就结束了
- python cross val score_python - sklearn cross_val_score的精度低于手动交叉验证 - 堆栈内存溢出...
- php添加pdo_mysql_php下添加pdo_mysql扩展
- qt中实现多语言功能
- autocad2014点击保存闪退_autocad2014启动闪退 AutoCAD启动时闪退怎么办
- 树莓派实现SIM868 ppp拨号上网
- 货捕头API接口,item_search - 根据关键词取商品列表
- 连接tcp服务器出现的问题及解决方法
- jQuery 08-13
- C++设计模式——中介者模式(高屋建瓴)
- 2008中国互联网十大网络流行词
- React SSR - 01 SSR 介绍 和 快速开始
- MUX实现逻辑功能(反相器/与门/或门/与非门/或非门/异或门/同或门)