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选择器、优先级与匹配原理》。
相关推荐
div+css 布局入门,XHTML 下css+div布局总结,CSS的十八般技巧
div+css 布局入门 XHTML下css+div布局总结
div+css布局页面的使用经验总结,包括div设置,css样式表修饰div块进行页面的布局等等。
DIV+CSS网页样式与布局实例,通过不同章节的代码示例展示如何通过DIV+CSS布局网页
1、让文本框textarea适应内容自动伸缩高度:textarea style="width:300px; overflow-y:visible" 2、cursor:pointer 使鼠标变成手形 3、word-wrap:break-word;控制是否断词 ......
Div+CSS网站设计的优点 。
归纳总结了div+css网页布局中常用的到基础知识和一些规范,是学习css网页布局的很好参考资料。
自己收集并制作的 新手学习DIV+CSS难点之经验总结
这是我自己项目总结的一些布局方法,基于DIV+CSS实现的一种弹性盒模型布局,主要利用display:table-cell;这一属性来实现,兼容良好,可扩展性也比较强。适用于做前端重构、架构的童鞋。
...
...
关于div+css的用法,如今table的布局方式已经落后,div更灵活,更方便满足需求,大家一起学习吧!
遇到网页设计问题的童鞋也可以提问,这些年总结了一些学生网页制作的经验:一般的网页作业需要融入以下知识点: div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频Flash的应用、ul li、下拉...
以DIV+CSS技术在诚欣电子商城系统中的应用为切入点对DIV+CSS技术进行深入的探讨。...最后在DIV+CSS技术在诚欣电子商城系统中的应用的基础上对DIV+CSS技术进行了解析,并总结出了DIV+CSS布局网站的优点和缺陷。
此pdf文档中总结了关于div和css的布局注意事项等内容,是在学习和工作中总结出来的,希望对大家有帮助。
div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐。 <div class=box> <div class=demo> <div>1</div> <div>2</div> ...
HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
布局用CSS+DIV的优点总结
HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...