关于css+div布局的疑问 2017-03-19

第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题:

1、布局问题:经常出现一个div被挤出来?做到一半少一个div布局?

布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确到每一像素(是否含有边框像素);但是,在纸上花的草图再好再精确,也需要实际操练。

2、定位问题:明明都定位了,为什么还出现div布局混乱的现象?

(未解)为什么可以通过设置margin-left/right的值为负数可以解决,但是在其他浏览器显示效果仍错误?

3、div中图片的定位,为什么按照理论设定的值,就是到不了应有的位置?

是图片定位错误还是参照物div弄错了?

4、内边距与外边局的问题?

可以分清定义,为什么实际运用时总是得不到应有的效果呢?问题在哪?

5、div中文字的对齐方式、行间距?

对齐方式没问题,行间距怎么调?用line-height么? 字与字的间距怎么调?

6、div中有序列表的应用?

div中的有序列表可以用来做水平和垂直的菜单栏,可以设置边框,但是它前面的点时怎么缩小的?插入图片做序号时,图片与文字如何对齐,为什么会混乱?

文字后面的日期除了用单独的div做,为什么我用<span>标签做出来会自动空一行,原因在哪?

7、为什么做好的静态网页在这个浏览器中就可以正常显示,换了其他浏览器就不可以了呢?

是代码错误还是浏览器兼容问题?

(未完待续。。。)

希望通过实践自己一步步找到答案,而不是记住别人的经验之谈,不去实践。别人的知识可以借鉴,但终究不是自己的。

I hardly stay up before, but now I begin to steal some time form the peaceful night.

时间: 2024-12-25 05:08:07

关于css+div布局的疑问 2017-03-19的相关文章

网站实战 从效果图开始CSS+DIV\布局华为网站

经过我们的前面css的学习,我们已经分模块的掌握的CSS的技术,但是,要是完整的做一个页面,我们还没有接触过,这次呢,小强老师来和大家完整的利用CSS+DIV做一个网站案例,我们来模仿下华为的网站. 主要分为以下6部分来做: 相信参看如下视频地址: 01   建立华为站点:               http://www.tudou.com/programs/view/Vbo8EffWPQw/ 02   华为站开始:                   http://www.tudou.com

CSS+DIV布局中absolute和relative区别

http://developer.51cto.com/art/201009/225201.htm CSS+DIV布局中absolute和relative区别 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. 详解CSS+DIV布局定位 在用CSS+DIV进行布局定位的时候,一

CSS:CSS+DIV布局网页

现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS. CSS盒模型: 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)

CSS+DIV布局应用

Div+css布局应用 一.html元素分类 2.1.顶级元素(Top-level element) 定义 组成html页面最顶级标签 特点 1. 不可设置宽高: 2. 必须在文档流中处于最高级位置: 3. 包含所有块级元素及内联元素,不可被包含: 常见元素 html body frameset 2.2.块级元素(Block-level element) 定义 以块显示的元素,常用于排版,默认情况下每一个块级元素会换行显示. 特点 1.每一个块级元素总是在新行上开始: 2.高度,行高以及外边距和

CSS+DIV布局

1.1 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位. 1.2 盒子模型

CSS+DIV布局(二)

布局的三种方式 一.常规流 以前没有学布局的时候,属于常规流 元素按照常规显示方式显示,块级元素垂直排列.行内元素就是水平排列 二.浮动 float:left; float:right: float:none; 典型应用两个div水平排列 **************************布局步骤************************************** 一.画效果图 二.使用DIV进行分割 三.使用CSS来控制DIV进行布局 遵循盒模型 四. 使用以上三步进行细分 ****

十天学会DIV+CSS(DIV布局)

一列布局: 一列固定宽度.一列固定宽度居中.一列自适应宽度.一列自适应宽度居中 一列固定宽度 <head> <style type="text/css"> #layout { height: 300px; width: 400px; background: #99FFcc; }</style> </head> 一列固定宽度居中 <head> <style type="text/css"> #la

CSS+DIV布局中absolute和relative的区别

来源 :http://developer.51cto.com/art/201009/225201_1.htm   解释的很好.摘下来后面自己能看看. 区别:定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. position各个属性值的定义: 1.static:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)

2017/03/19学习笔记

继承中的同名成员变量处理方法 1.当子类成员变量和父类成员变量同名时2.子类依然从父类继承同名变量3.在子类中通过作用域分辨符::进行同名成员区分(在子类中使用父类的同名成员,显式地使用类名限定符)4.同名成员存储在内存中的不同位置 继承中的static关键字 继承和stataic关键字在一起会产生什么现象?1.父类定义的静态成员,将被子类所共享2.根据静态成员自身的访问特性和子类的继承方式,在类层次体系中具有不同的访问性质(遵守子类的访问控制)3.子类中访问静态成员,用以下形式:类名::成员或