330 div+css Experience
今天学习的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;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div</title>
<!-- <div></div>不是功能标签
可以放文字、图片及各种元素的块标签 常常用来布局 -->
<style>
#d1{
background-color:blue;
width:200px;height:50px;
float: left;
}
#d2{
background-color:red;
width:200px;height:50px;
/* float浮动属性:left,right. */
float: right;
}
#d3{
background-color:green;
height: 200px;
/* 清除浮动 ：left，right，both左右一起清除*/
clear:both;
/* 溢出处理
内容超出div会隐藏
overflow: hidden; */
/* 不管内容是否超出,都会加滚动条
overflow: scroll;
内容不超出div没有滚动条,超出自动添加滚动条 */
overflow: auto;
/* overfl的属性只能有一个存在 */
}
#header{
width: 0px; height: 0px;
border-top: 100px solid white;
border-right: 100px solid white;
border-bottom: 100px solid green;
border-left: 100px solid white;
float: left;
margin-left: 100px; }
#main{ width: 0px; height: 0px;
border-top: 200px solid white;
border-right: 200px solid white;
border-bottom: 200px solid green;
border-left: 200px solid white; }
#footer{
width: 100px;
height: 300px;
background-color: darkolivegreen;
margin-left: 150px; }
li{
list-style-type: none;
float:left;
margin: 20px;
}
/* 盒子模型:
外边距:margin
语法：
margin:20px；像素值; --表示4方向外边距都20px
margin:20px 40px；像素值1 像素值2;表示margin-top和bottom 20px，margin-left和right40px
margin:20px 40px 60px 80px;像素值1 像素值2 像素值3 像素值4;表示4个方向 top left bottom right 顺时针方向
边框:border
内边距:padding
margin重叠现象：只要有一个元素没有float属性，就会出现重叠现象，这时取相邻最大值*/
/* CSS初始化:
*{
margin: 0px; padding: 0px;
} */
#big{
width: 100px;
height: 100px;
background-color: yellow;
}
#small1{
width: 150px;
height: 150px;
background-color: red;
border: 20px solid #00FFFF;
/* margin值的顺序是 上右下左 */
margin: 10px 20px 40px;
padding: 10px;
}
#small2{
width: 100px;
height: 100px;
background-color: blue;
float:left;
margin: 10px;
}
#small3{
width: 100px;
height: 100px;
background-color: magenta;
margin:30px;}
#small4 {
width: 100px;
height: 100px;
background-color: pink;
clear: both;
margin: 20px;
}
</style>
</head>
<body>
<body id="big">
<div id="d1">我是左div</div>
<div id="d2">我是右div</div>
<div id="d3">我是第三div</div>
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
<div id="small1">戒指</div>
<div id="small2"></div>
<div id="small3"></div>
<div id="small4"></div>
</div>
<ul>
<li>首页</li>
<li>新闻</li>
<li>学校概况</li>
</ul>
</body>
</html>
<title>边框样式圣诞树</title>
<style>
#a1{
width: 0px;height: 0px;
background-color: antiquewhite;
border-top: 0px solid #00FFFF;
border-right: 100px solid white;
border-bottom: 100px solid darkgreen;
border-left: 100px solid white;
margin-left: 340px;
}#a2{
width: 0px;height: 0px;
background-color: antiquewhite;
border-top: 0px solid #00FFFF;
border-right: 200px solid white;
border-bottom:200px solid darkgreen;
border-left: 200px solid white;
margin-left: 240px;
}#a3{
width: 0px;height: 0px;
background-color: antiquewhite;
border-top: 00px solid #00FFFF;
border-right: 300px solid white;
border-bottom: 300px solid darkgreen;
border-left: 300px solid white;
margin-left: 140px;
}#a4{
width: 80px;height: 530px;
background-color: orangered;
margin-left: 400px;
} </style>
</head>
<body>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
<div id="a4"></div>
</body>
用div做方格子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>方格子</title>
<style >
*{margin:0px;padding:0px;}
#aa{width: 750px;
background-color: lightgray;
}
#a1{width: 150px;height:150px;
background-color: red;
float: left;
}
#a2{width: 150px;height:150px;
background-color: blue;
float: left;
}
#a3{width:150px;height:150px;
background-color: blanchedalmond;
float: left;
}
#a4{width:150px;height:150px;
background-color: aquamarine;
float:left;
}
#a5{width:150px;height:150px;
background-color: palegreen;
float:right;
}
#a6{height:200px;width:480px;
background-color: cyan;
float: left;
}
#a7{width: 270px;height:275px;
background-color:ivory;
float: right;
}
#a8{height:200px;width:330px;
background-color: darkorange;
float: left;}
#a10{width: 270px;height:275px;
background-color: red;
float: right; }
#a11{width: 480px;height:150px;
background-color: green;
}
#a12{width: 100%;height:150px;
background-color: orchid;
float: left;
}
#a9{height:200px;width:150px;
background-color: greenyellow;
float: left;}
</style>
</head>
<body id="aa">
<div id="a1">这是1</div>
<div id="a2">这是2</div>
<div id="a3">这是3</div>
<div id="a4">这是4</div>
<div id="a5">这是5</div>
<div id="a6">这是6</div>
<div id="a7">这是7</div>
<div id="a8">这是8</div>
<div id="a9">这是9</div>
<div id="a10">这是10</div>
<div id="a11">这是11</div>
<div id="a12">这是12</div>
</body>
</html>
330 div+css Experience的更多相关文章
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- div+css页面右侧底部悬浮层
效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...
- DIV+CSS规范命名大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...
- DIV+CSS 清除浮动方法总结
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
- 十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
- DIV+CSS布局网站基本框架
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- DIV+CSS常用的网页布局代码
单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...
- div+css实例教程
DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...
随机推荐
- AI Conditional GAN
Conditional GAN 参考链接: https://arxiv.org/pdf/1611.07004v1.pdf
- C#模板设计模式使用和学习心得
模板设计模式: 模版方法模式由一个抽象类和一个(或一组)实现类通过继承结构组成,抽象类中的方法分为三种: 抽象方法:父类中只声明但不加以实现,而是定义好规范,然后由它的子类去实现. 模版方法:由抽象类 ...
- yum 彻底删除nodejs，重新安装
第一步 用自带的包管理先删除一次 yum remove nodejs npm -y1手动删除残留 进入 /usr/local/lib 删除所有 node 和 node_modules文件夹进入 /us ...
- Flask上下文管理源码分析 ——（3）
引出的问题 Flask如何使用上下文临时把某些对象变为全局可访问 首先我们做如下的几种情况的假设 情况一:单进程单线程 这种情况可以基于全局变量存储临时的对象 情况二:单进程多线程 这种情况会出现多个 ...
- 关于 i++ 与 ++i
首先关于这个真的不想在看资料了,自己都背过了,++i 和 i++,在单独使用时,就是 i=i+1. a = ++i 相当于 i=i+1; a = i; (先i = i + 1,再使用i的 ...
- python 基本数据类型以及运算符操作
一.基本数据类型 为何要区分类型? 数据类型的值是变量值得类型,变量值之所以区分类型,是因为变量的值 用来记录事物的状态,而事物的状态有不同的种类,对应着,也必须用不 用类型去区分它们. 1.数字类型 ...
- 使用mongo-express管理mongodb数据库
前面的话 本文将详细介绍一款用nodejs开发的基于Web的mongodb数据库管理工具mongo-express 安装 首先,全局安装 mongo-express 包 npm install -g ...
- koa-router 后台路由管理框架
koa-router是koa框架配套的路由管理模块,对后台的接口分离出来. 首先引入koa和koa-router, 然后分批设置路由: 代码中的institution.modifyInsStatus是 ...
- Java集合：HashMap底层实现和原理（源码解析）
Note:文章的内容基于JDK1.7进行分析.1.8做的改动文章末尾进行讲解. 一.先来熟悉一下我们常用的HashMap: 1.概述 HashMap基于Map接口实现,元素以键值对的方式存储,并且允许 ...
- nuxt.js实战之window和document对象的使用
在开发nuxt项目的时候,我们难免会使用到document来获取dom元素.如果直接在文件中使用就会报错.这是因为document是浏览器端的东西服务端并没有. 解决方法: 我们只需要在使用的地方通过 ...