1. 盒子模型:margin(边界),可被占位;border(边框);padding(填充);content(内容)
  2. 块元素:
    1.   默认占据一行,前后换行。
    2.   作为容器,装载块元素和行内元素,被装载元素的位置,会都受到容器的限制。
    3.   在CSS(display/float/position)作用下,块元素和行内元素无异。
    4.   position可以改变位置受容器的限制:
      1.   top/left/bottom/right 只有在设置了定位属性的元素中有效
      2.   相对定位(relative):是相对于自己的原始位置进行位置偏移,偏移后,原始空间仍然会被占据,不以父级作为参考。
      3.   绝对定位(absolute):相对于自己父级(必须具有定位属性的)进行位置偏移,偏移后,原始空间不被占用,脱离原有容器。若所有父级都没有定位属性,则选择浏览器作为父级。
      4.   层级次序:如由于定位(相对或绝对)而引起元素之间的遮掩,则可以通过设置 z-index:###调整层级位置,值越大就越在上层。
  3. 行内元素:
    1.   默认不占据一行,行内元素,前后不换行。
    2.   通常不作为容器,只装载内容。
  4. float:设置浮动属性时,如本身没有宽高属性时,元素将会自动占据最小的空间;如相邻元素没有使用margin(left/right)属性,相邻元素则会象磁贴一样紧紧地粘上自己。
  5. 横向与纵向布局:
    1.   横向五级菜单

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script><script type="text/javascript">
      <![CDATA[
      $(document).ready(
      function() {
      $("li")
      .bind("mouseover",function(){$(this).attr("class","normal");})
      .bind("mouseout",function(){$(this).romoveAttr("class");});
      });
      ]]>
      </script>
      <style type="text/css">
      body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      line-height: 1.5;
      }
      a {
      color: #808080;
      text-decoration: none;
      }
      a:hover {
      color: #000080;
      }
      #menu { width: 360px; }
      #menu ul { list-style: none; margin: 0px; padding: 0px; z-index:0; }
      #menu ul li { margin-top:-2px; background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border: 1px solid #ccc; position:relative;display:inline; }
      #menu ul li ul { display:none; position: absolute; left: 0px; top: 20px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; }
      #menu ul li ul li { background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; position:relative;display:block; }
      #menu ul li ul li ul{ display:none; margin-left:-2px; position: absolute; left: 180px; top: 0px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; }
      #menu ul li.normal > ul { display:block;}
      #menu ul li:hover > ul { display:block;}
      </style>
      </head>
      <body>
      <div id="menu">
      <ul>
      <li><a href="#">第一级菜单 1</a></li>
      <li><a href="#">第一级菜单 2</a>
      <ul>
      <li><a href="#">第二级菜单 2-1</a></li>
      <li><a href="#">第二级菜单 2-2</a>
      <ul>
      <li><a href="#">第三级菜单 2-2-1</a>
      <ul>
      <li><a href="#">第四级菜单 2-2-1-1</a></li>
      <li><a href="#">第四级菜单 2-2-1-2</a>
      <ul>
      <li><a href="#">第五级菜单 2-2-1-2-1</a></li>
      <li><a href="#">第五级菜单 2-2-1-2-2</a></li>
      </ul>
      </li>
      <li><a href="#">第四级菜单 2-2-1-3</a></li>
      </ul>
      </li>
      <li><a href="#">第三级菜单 2-2-2</a></li>
      </ul>
      </li>
      <li><a href="#">第二级菜单 2-3</a></li>
      </ul>
      </li>
      </ul>
      </div>
      </body>
      </html>
    2.   纵向五级菜单:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
      <script type="text/javascript">
      <![CDATA[
      $(document).ready(
      function() {
      $("li")
      .bind("mouseover",function(){$(this).attr("class","normal");})
      .bind("mouseout",function(){$(this).romoveAttr("class");});
      });
      ]]>
      </script>
      <style type="text/css">
      body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      line-height: 1.5;
      }
      a {
      color: #808080;
      text-decoration: none;
      }
      a:hover {
      color: #000080;
      }
      #menu { width: 180px; border: 1px solid #ccc; border-bottom:none;}
      #menu ul { list-style: none; margin: 0px; padding: 0px; z-index:0; }
      #menu ul li { background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; position:relative;}
      #menu ul li ul { display:none; position: absolute; left: 180px; top: 0px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; }
      #menu ul li.normal > ul { display:block;}
      #menu ul li:hover > ul { display:block;}
      </style>
      </head>
      <body>
      <div id="menu">
      <ul>
      <li><a href="#">第一级菜单 1</a></li>
      <li><a href="#">第一级菜单 2</a>
      <ul>
      <li><a href="#">第二级菜单 2-1</a></li>
      <li><a href="#">第二级菜单 2-2</a>
      <ul>
      <li><a href="#">第三级菜单 2-2-1</a>
      <ul>
      <li><a href="#">第四级菜单 2-2-1-1</a></li>
      <li><a href="#">第四级菜单 2-2-1-2</a>
      <ul>
      <li><a href="#">第五级菜单 2-2-1-2-1</a></li>
      <li><a href="#">第五级菜单 2-2-1-2-2</a></li>
      </ul>
      </li>
      <li><a href="#">第四级菜单 2-2-1-3</a></li>
      </ul>
      </li>
      <li><a href="#">第三级菜单 2-2-2</a></li>
      </ul>
      </li>
      <li><a href="#">第二级菜单 2-3</a></li>
      </ul>
      </li>
      </ul>
      </div>
      </body>
      </html>
    3. float 布局

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
      <style type="text/css">
        
        body{
      margin:0;
      padding:0;
              text-align:center
        }
      #container{
      margin:0 auto;
      width:1024px;
      height:600px;
      text-align:left;
      background:aqua;
      }
      #left{
      background:#ccc;
      float:left;
      width:10%;
      height:100%;
      }
      #middle{
      background:gray;
      width:80%;
      margin:0 10%;
      height:100%;
      }
      #right{
      background:#ccc;
      float:right;
      width:10%;
      height:100%;
      }
      }
      </style>
      <title>无标题 1</title>
      </head>
      <body>
      <div id="container">
      <div id="left">left</div>
      <div id="right">right</div>
      <div id="middle">middle</div>
      </div>
      </body>
      </html>

DIV+CSS 基础的更多相关文章

  1. div+css基础

    Div+css技术 Div是用于存放文字,图片,元素的容器 Css 是用于指定存放在div中的内容如何显示,包括内容的位置和外观(层叠样式表) Html 文件 <!--必须引入的文件--> ...

  2. div+css基础教程

    本文存下来作为备忘. 第一节  了解div+css 一.什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和 ...

  3. 2天驾驭DIV+CSS (基础篇)(转)

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

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

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

  5. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  6. DIV+CSS专题:第一天 XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  7. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  8. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  9. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

随机推荐

  1. Grunt 认识

    基本工作流: JS合并.JS压缩.CSS压缩.CSS Sprite.图片优化.测试.静态资源缓存(版本更新)... 基于工作流产生的工具: JSHint(jshint.com).CSSLint(css ...

  2. 推荐7款新鲜出炉的HTML5/CSS3应用

    1.HTML5/CSS3发光文字可自定义文字色彩效果很赞 要分享的这款HTML5/CSS3文字效果很帅,鼠标滑过文字时,文字会出现发光的特效,并且我们可以自定义文字和颜色. 在线演示 源码下载 2.H ...

  3. 10款精美的HTML5表单登录联系和搜索表单

    1.HTML5/CSS3仿Facebook登录表单 这款纯CSS3发光登录表单更是绚丽多彩.今天我们要分享一款仿Facebook的登录表单,无论从外观还是功能上说,这款登录表单还是挺接近Faceboo ...

  4. Socket 广播

    1.广播端口 Socket中的广播端口是什么意思,是谁对应谁的? 这个广播端口 指定 客户端接收广播消息时要使用的端口号. 参考: 1.快速Python 原型 2.receive UDP broadc ...

  5. linux 定时执行任务 crontab

    欲编写定时任务访问网页和打开图片 原来写法为 #!/bin/bash #可以执行 echoecho "Hello" > dir/file.txt #不可以执行 xdg-ope ...

  6. AJAX项目中的一些总结

    最近在做AJAX数据处理交互,遇到一些问题,备份以免以后忘记 1.参数地址问题 确保参数地址的正确性 ; 阅读后台源码,参数和返回值要确定: 一般的大点公司应该有规范: 2.关于ajax事件触发请求多 ...

  7. ExtJS实战 01——HelloWorld

    前言 Extjs5的发布已经有些日子了,目前的最新稳定版本是Extjs5.1.0,我们可以在官方网站进行下载.不过笔者今天访问得到的是502Bad Gateway,原因可能是sencha的nigix没 ...

  8. C# 编写Window服务基础(一)

    一.Windows服务介绍: Windows服务以前被称作NT服务,是一些运行在Windows NT.Windows 2000和Windows XP等操作系统下用户环境以外的程序.在以前,编写Wind ...

  9. js定时器 特定时间执行某段程序的例子

    定时器想必大家并不陌生吧,在本文为大家详细介绍下js中是如何实现定时器的,具体原理及代码如下. 例子: $(function(){ var handler = function(){ //www.jb ...

  10. Mysql备份--mysqldump&outfile

    1.备份工具mysqldump 客户端和服务器端都能用select outfile 只能写到服务器端 2.按表单位备份 a.单个表备份 mysqldump -uusername -p database ...