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

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.

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

  1. 回答: 2017-03-19的关于css+div布局的疑问 2017-04-05

    原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...

  2. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  3. CSS+DIV布局初练—DIV元素必须成对出现?

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

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

    经过我们的前面css的学习,我们已经分模块的掌握的CSS的技术,但是,要是完整的做一个页面,我们还没有接触过,这次呢,小强老师来和大家完整的利用CSS+DIV做一个网站案例,我们来模仿下华为的网站. ...

  5. CSS:CSS+DIV布局网页

    现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...

  6. CSS+DIV布局应用(2015年06月10日)

    Div+css布局应用 一.html元素分类 2.1.顶级元素(Top-level element) 定义 组成html页面最顶级标签 特点 1. 不可设置宽高: 2. 必须在文档流中处于最高级位置: ...

  7. css+div布局案例

    给最外层的div命名一个class 有针对性的进行css布局. <div class="joinus-info"> <div class="form-t ...

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

    一列布局: 一列固定宽度.一列固定宽度居中.一列自适应宽度.一列自适应宽度居中 一列固定宽度 <head> <style type="text/css"> ...

  9. css+div 布局遇到的小常识

    /根目录../上层目录举例如下: 在photo.css文件中写入: div.ls{ background:url(../photo/framels.jpg) no-repeat left; }div. ...

随机推荐

  1. (一)Redis在windows下的安装和使用

    1.下载redis服务端,地址:https://github.com/MSOpenTech/redis/releases 包含安装程序和源码. 2.解压<Redis-x64-3.2.100.zi ...

  2. 《JAVASCRIPT高级程序设计》DOM扩展

    虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

  3. [html5] 学习笔记-html5增强的页面元素

    在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...

  4. 循环语句——do…while语句

    一.do while语句结构 do { 执行语句 } while (条件表达式); 条件表达式必须是trur或false 二.do while语句特点 不论条件是否满足,都先执行一次执行语句 三.示例 ...

  5. PowerShell 批量修改AD属性

    环境:win 2008 R2 在管理工具中打开用于 windows powershell 的ActiveDirectory模块命令行窗口或打开命令提示符窗口输入PowerShell回车再输入impor ...

  6. 5分钟快速入门 - Less

    下面给大家讲解下Less,纯手工,入门级别,相信没学过的人阅读完后就懂了,以下是我要讲的四点: 简单介绍 Less CSS 是一个使用广泛的 CSS 预处理器. 对 CSS 进行扩展,减少很多 CSS ...

  7. 读书笔记 effective c++ Item 15 在资源管理类中提供对原生(raw)资源的访问

    1.为什么需要访问资源管理类中的原生资源  资源管理类是很奇妙的.它们是防止资源泄漏的堡垒,没有资源泄漏发生是设计良好的系统的一个基本特征.在一个完美的世界中,你需要依赖这样的类来同资源进行交互,绝不 ...

  8. Thrift入门初探(2)--thrift基础知识详解

    昨天总结了thrift的安装和入门实例,Thrift入门初探--thrift安装及java入门实例,今天开始总结一下thrift的相关基础知识. Thrift使用一种中间语言IDL,来进行接口的定义, ...

  9. ajax面试汇总

    Ajax系列面试题总结: 1.Ajax 是什么? 如何创建一个Ajax? Ajax并不算是一种新的技术,全称是asychronous javascript and xml,可以说是已有技术的组合,主要 ...

  10. Java集合框架之三:HashMap源码解析

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! HashMap在我们的工作中应用的非常广泛,在工作面试中也经常会被问到,对于这样一个重要的集合模型我们有必要弄清楚它的使用方法和它底层的实 ...