第一个注意点:选择器的使用(标签、class、id)

三种选择器中id(#)的优先级最高,根据id名筛选出唯一元素;

如下输入:#menu{ width:1200px; height:45px; background:#90F}

     <div id="menu"></div>

其次是class(.)的优先级较高,根据id名筛选出唯一元素;

如下输入:.text{ width:200px; height:45px; text-align:center; line-height:45px; vertical-align:middle}

     <div class="text"></div>

标签优先级最差,根据标签名选中元素;

如下输入:div{text-align:center; vertical-align:middle; line-height:100px}

     <div>微软雅黑</div>

  第二个注意点:外边距margin、内边距padding和流float的使用

外边距margin和内边距padding的使用是相对于边框的调整,四边框按上右下左顺时针调整;

特殊使用:外边距margin一般配合流float来使用,流float给操作的对象规定一个方向(left向左流、right向右流),被操作对象按此按此方向进行布局

如下(导航栏的制作):

    .text{ width:200px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
    .text:hover{ background-color:#000; color:#F00; cursor:pointer}

  <div id="menu">

    <div class="text">首页</div>
    <div class="text">产品介绍</div>
    <div class="text">产品图片</div>
    <div class="text">产品参数</div>
    <div class="text">关于服务</div>
    <div class="text">联系我们</div>
  </div>

另外,内边距padding:如果加了内边距,该元素会相应的变大,则需要在相应的高度属性中进行调整;

如下输入:

    <div style="width:100px; height:80px; background-color:#90C; float:left; padding:20px 0px 0px 0px"></div>(这里height由100px调整为80px,加padding效果)

  第三个注意点:分层z-index的使用条件

使用分层z-index时,要配合位置属性来调整;如果缺少属性位置的设置,则没有显示效果。

如下输入:

  <div style="width:300px; height:300px; background-color:#0F0; position:relative; z-index:5px"></div>
  <div style="width:300px; height:300px; background-color:#009; position:relative; z-index:2px; margin:-50px 0px 0px 50px"></div>

关于div+css排版布局中需注意的细节问题的更多相关文章

  1. HTML CSS + DIV实现排版布局

    HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...

  2. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  3. 【笔记-前端】div+css排版基础,以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  4. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  5. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

  6. DIV+css排版问题技巧总结---v客学院技术分享

                DIV+css排版问题技巧总结 一.排版思路 1.从上到下,从左到右,从大到小. 2.首先确定排版分区,排除色块分布,然后再从简单的部分开始. 3.在某一块内将HTML部分写好 ...

  7. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

  8. DIV+CSS 网页布局之:混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  9. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

随机推荐

  1. (cljs/run-at (JSVM. :browser) "简单类型可不简单啊~")

    前言  每逢学习一个新的语言时总要先了解这门语言支持的数据类型,因为数据类型决定这门语言所针对的问题域,像Bash那样内置只支持字符串的脚步明显就是用于文本处理啦.而数据类型又分为标量类型(Scala ...

  2. Server from URL

    在你做网页时,如果网页需要运行ActiveX或脚本,并且他们位于客户端以外的地方, 那么可以添加这个注释语句,IE当然不会不理他, IE会按照他指出的URL去找脚本的位置. 这句话的作用是让Inter ...

  3. Newtonsoft.Json输出JSON 时动态忽略属性

    一,前言 最近做项目采用Json形式和其他客户端交互,借助于Newtonsoft.Json . 由于业务场景不同,输出的Json内容也不同.要想忽略的属性,可以借助Newtonsoft.Json的特性 ...

  4. JAVA程序打包成exe小程序的过程

    编程软件:myeclipse2014 打包exe软件:exe4j 1:在myeclipse2014新建java项目编写程序 2:打包成jar,分两种情况(有无外部依赖包) 无外部依赖包:点击项目--- ...

  5. 分享一个废弃已久的插件架构 (.Net)

    框架介绍 1:将插件暴露的页面数据接口复用到任何 WebForm和Mvc 架构的系统. 2:插件可在线卸载,发布,更新. 3:插件可分布式 独立 部署. 4:插件之间完全解耦,通过Url跳转 相互不需 ...

  6. webstrom一键上传github及使用

    对于webstrom是我参加it修真园时就推荐使用的,其他编辑器我也没什么使用过.读大学的时候还是比较喜欢 Notepad++. 现在说一下webstrom主要的关键点吧! 一.实现一键上传githu ...

  7. SpringWeb增删改查

    模型类: package com; public class Model { private int id; private String name; private String dtype; pr ...

  8. Linux之grep及正则表达式

    grep简介 grep 是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来.通常grep有三种版本grep.egrep(等同于grep -E)和fgrep.egrep为扩展的g ...

  9. 【HTML】table元素

    1.最简单的table <table> <tr> <th></th> </tr> <tr> <td></td& ...

  10. 使用pdfbox分页保存pdf为图片

    一.背景 pdfbox作为Apache开源的PDF操作工具,允许创建新的PDF文档,操作现有文档,以及从文档中提取内容的能力.Apache PDFBox还包括一些命令行实用工具.本文楼主主要介绍其中的 ...