回答: 2017-03-19的关于css+div布局的疑问 2017-04-05
原问题为红色,回答为黑色
第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题:
1、布局问题:经常出现一个div被挤出来?做到一半少一个div布局?
布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确到每一像素(是否含有边框像素);但是,在纸上花的草图再好再精确,也需要实际操练。
回答:
(1) 关于定位:绝对定位是相当于窗体的;相对定位是相对于父辈div;浮动定位也是相当于父辈div;需要注意的时,当前一个div采用绝对定位, 后一个div采用相对定位时,要判定好父辈div是哪个?是否已经定位?
(2) 关于元素定位:如果没有定位position; left(不起作用)和margin-left(起作用)是不同的;如果定位position; left和margin-left是相同的。
(3) 布局的时候尽量用背景颜色来区分不同的分块,不要用边框来区分。
2、定位问题:明明都定位了,为什么还出现div布局混乱的现象?
(未解)为什么可以通过设置margin-left/right的值为负数可以解决,但是在其他浏览器显示效果仍错误?
回答:父辈div定位出现错误;
3、div中图片的定位,为什么按照理论设定的值,就是到不了应有的位置?
是图片定位错误还是参照物div弄错了?
回答:图片所在div必须定位,如果不定位,left和margin-left作用不同;且图片所在div定位是相对还是绝对也是不同的。
4、内边距与外边局的问题?
可以分清定义,为什么实际运用时总是得不到应有的效果呢?问题在哪?
回答:思路不清晰,定位出错了。
5、div中文字的对齐方式、行间距?
对齐方式没问题,行间距怎么调?用line-height么? 字与字的间距怎么调?
回答:行间距就是通过line-height设置;通过数值大小来确定。
6、div中有序列表的应用?
div中的有序列表可以用来做水平和垂直的菜单栏,可以设置边框,但是它前面的点时怎么缩小的?插入图片做序号时,图片与文字如何对齐,为什么会混乱?
回答:最好不要用图片做序号,不然就把图片做的一样大(目前对能力不咋样的我只能如此。。)
文字后面的日期除了用单独的div做,为什么我用<span>标签做出来会自动空一行,原因在哪?
回答:现在试是正确的。之前不知道错误出在哪里,现在也没找到
7、为什么做好的静态网页在这个浏览器中就可以正常显示,换了其他浏览器就不可以了呢?
是代码错误还是浏览器兼容问题?
回答:要么是定位出错,要么是兼容性问题
回答: 2017-03-19的关于css+div布局的疑问 2017-04-05的更多相关文章
- 关于css+div布局的疑问 2017-03-19
第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- 网站实战 从效果图开始CSS+DIV 布局华为网站
经过我们的前面css的学习,我们已经分模块的掌握的CSS的技术,但是,要是完整的做一个页面,我们还没有接触过,这次呢,小强老师来和大家完整的利用CSS+DIV做一个网站案例,我们来模仿下华为的网站. ...
- CSS+DIV布局初练—DIV元素必须成对出现?
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
- CSS:CSS+DIV布局网页
现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...
- CSS+DIV布局应用(2015年06月10日)
Div+css布局应用 一.html元素分类 2.1.顶级元素(Top-level element) 定义 组成html页面最顶级标签 特点 1. 不可设置宽高: 2. 必须在文档流中处于最高级位置: ...
- css+div 布局遇到的小常识
/根目录../上层目录举例如下: 在photo.css文件中写入: div.ls{ background:url(../photo/framels.jpg) no-repeat left; }div. ...
- css+div布局案例
给最外层的div命名一个class 有针对性的进行css布局. <div class="joinus-info"> <div class="form-t ...
- css div布局示例2(head-main-footer
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- devexpress表格控件gridcontrol实现纵向标头
1.devexpress控件gridcontrol中的标头默认是横向的,如果要实现纵向标头应该怎么做呢.通过官网的资料整理了一个简单的案例,给大家分享一下.运行效果图如下: 2.数据绑定代码如下: D ...
- BZOJ 3391: [Usaco2004 Dec]Tree Cutting网络破坏(搜索)
这道直接遍历一遍求出每个点的子节点数目就行了= = CODE: #include<cstdio>#include<iostream>#include<algorithm& ...
- SpringMVC 集成velocity
前言 没有美工的时代自然少不了对应的模板视图开发,jsp时代我们用起来也很爽,物极必反,项目大了,数据模型复杂了jsp则无法胜任. 开发环境 idea2016.jdk1.8.tomcat8.0.35 ...
- JNI调用的helloworld(JNI_OnLoad映射方式)
本示例展示JNI的基本示例,helloworld级别的,不过是用JNI_OnLoad映射的方式. 直接看代码,先看包含native method的Person.java的代码: package hel ...
- Spring框架中 配置c3p0连接池 完成对数据库的访问
开发准备: 1.导入jar包: ioc基本jar jdbcTemplate基本jar c3p0基本jar 别忘了mysql数据库驱动jar 原始程序代码:不使用配置文件方式(IOC)生成访问数据库对象 ...
- Cloud9vue&vux上传github小步骤
成功后创建出以下文件,再输入: git init 再输入:$ git remote add origin https://github.com/github用户名/vux1 然后:git add. 按 ...
- Ubuntu下安装Redis并实现远程访问
之前的一篇随笔写到Redis在Windows下的安装,但目前好多大数据处理的服务是在Linux上的,所以想以Redis为例并实现在Windows上利用C#代码远程访问. 以在Ubuntu下为例,步骤如 ...
- 编程那些事儿:如何快速地"借用"CSS
做前端开发有时候会碰到任务紧急,需要马上写好静态页的问题.比如,设计师给你扔了一个设计稿,要你在下班之前搞定.这时候你如热锅上的蚂蚁,如果自己写css的话,时间紧张,于是上网找了一下相关模板页面,找到 ...
- 使用python操作InfluxDB
环境: CentOS6.5_x64InfluxDB版本:1.1.0Python版本 : 2.6 准备工作 启动服务器 执行如下命令: service influxdb start 示例如下: [roo ...
- KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-body-res
koahub body res Format koa's respond json. Installation $ npm install koahub-body-res Use with koa v ...