今天学习的div，感觉对编辑html更为方便快捷，但还是需要多练，多熟悉一下思路和逻辑方式

越来越感觉，代码不是重要的，重要的是方向和思路，am的float clearfloat 及属性，还有overflow 溢出的三个属性
最重要的是边框左圣诞树 做div的布局算数把我整蒙圈了，用border四个边距设置来做三角形是重点
下午学的盒子 内外边距 边框border margin的重叠取值 和顺序
还有css的初始化

一：div不是功能标签，可以放文字、图片各种元素的块标签，常常用来布局

float浮动：left，right 左右属性

清除浮动：clear：left，right，both左右一起清除

二：溢出

overflow：hidden超出会隐藏 ，scroll 滚动条，auto 超出有滚动，反之。

三：用边框样式做：圣诞树 三角形

border-top：顶

border-left：左

border-right：右

border-bottom：底

PM：

盒子模型：外边距：margin 边框：border 内边距：padding

margin重叠现象：只要有一个元素没有float ，就会出现重叠，这时取相邻最大值

margin的顺序：上有下左（顺时针）

CSS初始化：

*{margin:0px;

padding:0px;}

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>div</title>
  6.         <!-- <div></div>不是功能标签
  7.         可以放文字、图片及各种元素的块标签 常常用来布局 -->
  8. <style>
  9.     #d1{
  10.         background-color:blue;
  11.         width:200px;height:50px;
  12.         float: left;
  13.     }
  14.     #d2{
  15.         background-color:red;
  16.         width:200px;height:50px;
  17.         /* float浮动属性:left,right. */
  18.         float: right;
  19.     }
  20.     #d3{
  21.         background-color:green;
  22.         height: 200px;
  23.         /* 清除浮动 ：left，right，both左右一起清除*/
  24.         clear:both;
  25.         /* 溢出处理
  26.          内容超出div会隐藏
  27.         overflow: hidden; */
  28.     /* 不管内容是否超出,都会加滚动条
  29.         overflow: scroll;
  30.        内容不超出div没有滚动条,超出自动添加滚动条 */
  31.          overflow: auto;
  32.       /* overfl的属性只能有一个存在 */
  33.       }
  34.     #header{
  35.         width: 0px;    height: 0px;
  36.         border-top: 100px solid white;
  37.         border-right: 100px solid white;
  38.         border-bottom: 100px solid green;
  39.         border-left: 100px solid white;
  40.         float: left;
  41.         margin-left: 100px;    }
  42.     #main{    width: 0px;    height: 0px;
  43.         border-top: 200px solid white;
  44.         border-right: 200px solid white;
  45.         border-bottom: 200px solid green;
  46.         border-left: 200px solid white;    }
  47.     #footer{
  48.         width: 100px;
  49.         height: 300px;
  50.         background-color: darkolivegreen;
  51.         margin-left: 150px;    }
  52.         li{
  53.             list-style-type: none;
  54.             float:left;
  55.             margin: 20px;
  56.         }
  57.         /* 盒子模型:
  58.             外边距:margin
  59. 语法：
  60.     margin:20px；像素值; --表示4方向外边距都20px
  61.     margin:20px 40px；像素值1 像素值2;表示margin-top和bottom 20px，margin-left和right40px
  62.     margin:20px 40px 60px 80px;像素值1 像素值2 像素值3 像素值4;表示4个方向 top left bottom right 顺时针方向
  63.             边框:border
  64.             内边距:padding
  65.         margin重叠现象：只要有一个元素没有float属性，就会出现重叠现象，这时取相邻最大值*/
  66.         /* CSS初始化:
  67.         *{
  68.             margin: 0px; padding: 0px;
  69.         } */
  70.         #big{
  71.             width: 100px;
  72.             height: 100px;
  73.             background-color: yellow;
  74.         }
  75.         #small1{
  76.             width: 150px;
  77.             height: 150px;
  78.             background-color: red;
  79.             border: 20px solid #00FFFF;
  80.             /* margin值的顺序是 上右下左 */
  81.             margin: 10px 20px 40px;
  82.             padding: 10px;
  83.             }
  84.         #small2{
  85.             width: 100px;
  86.             height: 100px;
  87.             background-color: blue;
  88.             float:left;
  89.             margin: 10px;
  90.         }
  91.         #small3{
  92.             width: 100px;
  93.             height: 100px;
  94.             background-color: magenta;
  95.             margin:30px;}
  96.         #small4    {
  97.             width: 100px;
  98.             height: 100px;
  99.             background-color: pink;
  100.             clear: both;
  101.             margin: 20px;
  102.         }
  103. </style>
  104.     </head>
  105.     <body>
  106.     <body id="big">
  107.         <div id="d1">我是左div</div>
  108.         <div id="d2">我是右div</div>
  109.         <div id="d3">我是第三div</div>
  110.         <div id="header"></div>
  111.         <div id="main"></div>
  112.         <div id="footer"></div>
  113.         <div id="small1">戒指</div>
  114.         <div id="small2"></div>
  115.         <div id="small3"></div>
  116.         <div id="small4"></div>
  117.     </div>
  118.     <ul>
  119.         <li>首页</li>
  120.         <li>新闻</li>
  121.         <li>学校概况</li>
  122.     </ul>
  123.     </body>
  124. </html>
用border做圣诞树
  1. <title>边框样式圣诞树</title>
  2.         <style>
  3.             #a1{
  4.                 width: 0px;height: 0px;
  5.                 background-color: antiquewhite;
  6.                 border-top: 0px solid #00FFFF;
  7.                 border-right: 100px solid white;
  8.                 border-bottom: 100px solid darkgreen;
  9.                 border-left: 100px solid white;
  10.                 margin-left: 340px;
  11.             }#a2{
  12.                 width: 0px;height: 0px;
  13.                 background-color: antiquewhite;
  14.                 border-top: 0px solid #00FFFF;
  15.                 border-right: 200px solid white;
  16.                 border-bottom:200px solid darkgreen;
  17.                 border-left: 200px solid white;
  18.                 margin-left: 240px;
  19.             }#a3{
  20.                 width: 0px;height: 0px;
  21.                 background-color: antiquewhite;
  22.                 border-top: 00px solid #00FFFF;
  23.                 border-right: 300px solid white;
  24.                 border-bottom: 300px solid darkgreen;
  25.                 border-left: 300px solid white;
  26.                 margin-left: 140px;
  27.             }#a4{
  28.                 width: 80px;height: 530px;
  29.                 background-color: orangered;
  30.                 margin-left: 400px;
  31.             }
  32.  
  33.         </style>
  34.     </head>
  35.     <body>
  36.         <div id="a1"></div>
  37.         <div id="a2"></div>
  38.         <div id="a3"></div>
  39.         <div id="a4"></div>
  40.     </body>

用div做方格子

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>方格子</title>
  6.     <style >
  7.             *{margin:0px;padding:0px;}
  8.         #aa{width: 750px;
  9.             background-color: lightgray;
  10.         }
  11.         #a1{width: 150px;height:150px;
  12.         background-color: red;
  13.         float: left;
  14.         }
  15.         #a2{width: 150px;height:150px;
  16.         background-color: blue;
  17.         float: left;
  18.         }
  19.         #a3{width:150px;height:150px;
  20.         background-color: blanchedalmond;
  21.         float: left;
  22.         }
  23.         #a4{width:150px;height:150px;
  24.         background-color: aquamarine;
  25.         float:left;
  26.         }
  27.         #a5{width:150px;height:150px;
  28.         background-color: palegreen;
  29.         float:right;
  30.         }
  31.         #a6{height:200px;width:480px;
  32.         background-color: cyan;
  33.         float: left;
  34.         }
  35.          #a7{width: 270px;height:275px;
  36.         background-color:ivory;
  37.         float: right;
  38.         }
  39.         #a8{height:200px;width:330px;
  40.         background-color: darkorange;
  41.         float: left;}
  42.         #a10{width: 270px;height:275px;
  43.         background-color: red;
  44.         float: right;    }
  45.         #a11{width: 480px;height:150px;
  46.         background-color: green;
  47.         }
  48.         #a12{width: 100%;height:150px;
  49.         background-color: orchid;
  50.         float: left;
  51.         }
  52.         #a9{height:200px;width:150px;
  53.         background-color: greenyellow;
  54.         float: left;}
  55.     </style>
  56. </head>
  57.     <body id="aa">
  58.         <div id="a1">这是1</div>
  59.         <div id="a2">这是2</div>
  60.         <div id="a3">这是3</div>
  61.         <div id="a4">这是4</div>
  62.         <div id="a5">这是5</div>
  63.         <div id="a6">这是6</div>
  64.         <div id="a7">这是7</div>
  65.         <div id="a8">这是8</div>
  66.         <div id="a9">这是9</div>
  67.         <div id="a10">这是10</div>
  68.         <div id="a11">这是11</div>
  69.         <div id="a12">这是12</div>
  70.     </body>
  71. </html>

330 div+css Experience的更多相关文章

  1. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  2. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  3. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  4. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  5. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  6. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  7. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  9. div+css实例教程

    DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...

随机推荐

  1. Docker（1）：CentOS7 安装Docker

    1.查看系统内核,docker要求系统的内核版本高于3.10 #  uname -r 2.升级yum包,确保最新 #   yum update 3.安装所需要依赖包 #   yum install - ...

  2. PHP利用MySQL保存session

    实现环境: PHP 5.4.24 MySQL 5.6.19 OS X 10.9.4/Apache 2.2.26 一.代码 CREATE TABLE `session` ( `skey` ) CHARA ...

  3. input 各种限制

    test 1.限制只能输入或黏贴11位长度的数字 <input onkeyup="this.value=this.value.replace(/\D/g,'')" onaft ...

  4. MariaDB第三章：数据库设计与备份--小白博客

    数据库设计 1．第一范式(确保每列保持原子性) 第一范式是最基本的范式.如果数据库表中的所有字段值都是不可分解的原子值,就说明该数据库表满足了第一范式. 2．第二范式(确保表中的每列都和主键相关) 第 ...

  5. 03-JavaScript之数据类型

    JavaScript之数据类型 1.介绍 JavaScript数据类型分为两类:原始类型(primitive type)和对象类型(object type) 2.原始类型 数字 - number.字符 ...

  6. Linux C/C++ 链接选项之静态库--whole-archive,--no-whole-archive和--start-group, --end-group

    参照这两篇博客: http://stackoverflow.com/questions/805555/ld-linker-question-the-whole-archive-option http: ...

  7. springcloud

    基本术语 1.服务器 服务器:是提供计算服务的设备.由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力.服务器的构成:包括处理器.硬盘.内存.系统总线等,和通用 ...

  8. css---遮罩层

    <div id="body"> 显示页面的全部内容 <div id="open">打开弹框</div> </div&g ...

  9. Nodejs的安装配置及如何在sublimetext2中运行js

    Nodejs的安装配置及如何在sublimetext2中运行js听语音 | 浏览:4554 | 更新:2015-06-16 11:29 Nodejs的安装配置及如何在sublimetext2中运行js ...

  10. mongoDB 文档操作_删

    mongoDB 文档删除 MySQL对比 mysql delete from table where ... mongo db.collection.deleteOne(query) 删除函数 del ...