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

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. [html5] 学习笔记-表单新增的元素与属性(续)

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  2. 基于basys2用verilog设计多功能数字钟(重写)

    话不多说先上图         前言 自从学习FPGA以来,唯一做过的完整系统就是基于basys2得多功能数字表.记得当时做的时候也没少头疼,最后用时间磨出来了一个不是很完整的小系统,当时还是产生了满 ...

  3. 源码(03) -- java.util.Collection<E>

     java.util.Collection<E> 源码分析(JDK1.7) -------------------------------------------------------- ...

  4. Python学习--16 正则表达式

    正则表达式是一种描述性的语言,用来匹配字符串.凡是符合规则的字符串,我们认为就是匹配了. 正则表达式并非Python独有的,它与语言无关.很多语言都支持正则表达式. 我们经常用正则表达式来匹配电子邮件 ...

  5. 对Node.JS的事件轮询(Event Loop)的理解

    title: Node.JS的事件轮询(event loop)的理解 categories: 理解 tags: Node JS 机制 当我们知道I/O操作和创建新线程的开销是巨大的! 网站延迟的开销 ...

  6. 矢量切片(Vector tile)番外一:Proj4js

    说明:番外篇是对正篇矢量切片(Vector tile)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...

  7. 【Javaweb】笔面试题 ---(1)

    Javaweb 面试题:理解才是最重要的,而不是原封不动的背下来 一.请简述doget和dopost它们的区别 1) get是从服务器上获取数据,post是向服务器传送数据. 2) 在客户端,Get方 ...

  8. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  9. WebApi实现通讯加密

    一. 场景介绍: 如题如何有效的,最少量的现有代码侵入从而实现客户端与服务器之间的数据交换加密呢? 二. 探究: 1.需求分析 webapi服务端 有如下接口: public class ApiTes ...

  10. 自行搭建私有云ownCloud,启用SSL,其他配置

    ownCloud简介 ownCloud(官网)是一款开源的私有云框架,可以通过它实现个人网盘的功能,如果拥有一个性能不错的VPS,那么就可以摆脱奇慢无比的百度云等网盘啦!我花了大约一天的时间总算搭好了 ...