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,如需转载请自行联系原作者

相关文章
|
13天前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
31 3
|
14天前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
39 3
|
18天前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
38 1
|
1月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
121 8
|
28天前
|
前端开发
CSS Grid 布局:span 关键字
CSS Grid 布局:span 关键字
29 0
|
1月前
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
29 0
|
1月前
|
编解码 前端开发 容器
CSS弹性布局:打造响应式与灵活的网页设计
CSS弹性布局:打造响应式与灵活的网页设计
65 0
|
2月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
2月前
|
前端开发
css 十字分割线(含四等分布局)
css 十字分割线(含四等分布局)
45 2
|
2月前
|
移动开发 前端开发 HTML5
CSS 【实战】 “四合院”布局
CSS 【实战】 “四合院”布局
30 0
CSS 【实战】 “四合院”布局