<!DOCTYPE HTML>

<html>

<head>

	<title>div浮动</title>

	<style type="text/css">

		 body{

		 	margin: 0px 1px 2px 3px;

		 }

		 #father{

		 	background-color: yellow;

		 	width: 100%;

		 	height: 100px;

		 	border: dashed green;

		 }

		 #son1{

		 	float: left;

		 }

		 #son2{

			float: left;

		 }

		 #son3{

			float: left;

		 }

		 #clear{

		 	clear: both;

		 }

	</style>

</head>

   	<body>

   		<!--是div在同一列上,如果清楚浮动效果 同层div也会浮动-->

   		<div id="father">

   			<div id="son1">aaaaaa</div>

   			<div id="son2">bbbbbb</div>

   			<div id="son3">cccccc</div>

   			<div id="clear"></div>

   			<div>dddddddddddd</div>

   		</div>

   	</body>

</html> 
<!DOCTYPE HTML>

<html>

<head>

	<title>div浮动</title>

	<style type="text/css">

		 body{

		 	margin: 0px 1px 2px 3px;

		 }

		 #father{

		 	background-color: yellow;

		 	width: 100%;

		 	height: 100px;

		 	border: dashed green;

		 	position:relative;

		 }

		 #son1{

		 	position: absolute;

		 	margin-left: 60%;

		 }

		 #son2{

		 }

	</style>

</head>

   	<body>

   		<!--相对定位，元素没有脱离文本流-->

   		<!--绝对定位，是相对于浏览器-->

   		<!--如果相对于父节点的绝对定位，父节点要设置相对定位,脱离文本流-->

   		<!--result     bbbbbb      aaaaaaaaaa-->

   		<div id="father">

   			<div id="son1">aaaaaa</div>

   			<div id="son2">bbbbbb</div>

   		</div>

   	</body>

</html> 
<!DOCTYPE HTML>

<html>

<head>

	<title>div常用样式</title>

	<style type="text/css">

		 #father{

		 	background-color: yellow;

		 	width: 100%;

		 	height: 100px;

		 	border:1px dashed green;

		 }

		 #son1，#son2,#son3{

		 	background-color: green;

		 	width: 100px;

		 	margin-left: 5px;

		 	margin-top: 5px;

		 	display: inline; /*3个div显示在同一行*/

		 }

		 #son3{

			display: none; /*隐藏第三个div*/

		 }

		 #son2:hover,#son1:hover{

		 	background-color: blue;

		 	cursor: hand;

		 }

	</style>

</head>

   	<body>

   		<div id="father">

   			<div id="son1">aaaaaa</div>

   			<div id="son2">bbbbbb</div>

   			<div id="son3">bbbbbb</div>

   		</div>

   	</body>

</html>

CSS_样式sample的更多相关文章

  1. css_样式样式器的分类

    详情:http://www.w3school.com.cn/h.asp 1.标签样式器:此样式器仅对html页面中div标签有效果 div{ background-color: rosybrown; ...

  2. react native 第三方组件react-native-swiper 轮播组件

    github地址:https://github.com/leecade/react-native-swiper 使用方法:安装:npm i react-native-swiper –save 查看模块 ...

  3. CSS_简介/语法结构/长度单位/应用方式/标签的样式重置/表单样式重置

    一.CSS简介:  w3c(World Wide Web Consortium):万维网联盟,是规定网页标准的一个组织(叫做Web标准) Web标准:是由w3c和其他标准化组织制定的一系列标准的集合, ...

  4. Css_加载样式

    第一种效果: 代码如下: <div class="loading"> <span></span> <span></span&g ...

  5. 浏览器默认样式(user agent stylesheet)+cssreset

    每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整 ...

  6. PHP团队 编码规范 & 代码样式风格规范

    一.基本约定 1.源文件 (1).纯PHP代码源文件只使用 <?php 标签,省略关闭标签 ?> : (2).源文件中PHP代码的编码格式必须是无BOM的UTF-8格式: (3).使用 U ...

  7. Sample Apps by Android Team -- Amazed

    Sample Apps by Android Team 代码下载:http://pan.baidu.com/s/1eSNmdUE , 代码原地址:https://code.google.com/arc ...

  8. bootstrap入门-4.排版及其他固定样式

    本篇包括以下内容:排版.代码.表格.表单. 总结:超无聊,弃更. · 排版样式                                     标题 h1-h6 取消加粗,字体大小也有一定变化 ...

  9. 仿iOS Segmented Control样式"

    同步发表于http://avenwu.net/2015/02/05/styled_radiogroup_segmented_control Fork on github https://github. ...

随机推荐

  1. Js动态传递不定数目的参数

    回调程序中,经常有这样的需求:用户传递一个回调方法,该方法可以有不定的参数. 如果参数数目固定则很容易实现,看代码: //回调函数1 function callback1(a,b,c) { alert ...

  2. 【转】 实现 Cocos2d-x 全局定时器

    转自:http://www.tairan.com/archives/3998 cocos2d-x 中有自己的定时器实现,一般用法是在场景,层等内部实现,定时器的生命周期随着它们的消亡而消亡,就运行周期 ...

  3. Ruby准备工作

    解释性语言,自上而下执行,纯面向对象,跨平台,动态绑定,没有多重继承.NetBeans sun公司开发irb指令可快速实时输入并返回结果 quit 或者exitrdoc hello.rb 生成html ...

  4. css的框架——common.css

    @charset "utf-8"; /* 字体 */ .n{ font-weight:normal; font-style:normal; } .b{font-weight:bol ...

  5. (四)学习JavaScript之className属性

    参考:http://www.w3school.com.cn/jsref/prop_classname.asp HTML DOM Anchor 对象 定义和用法 className 属性设置或返回元素的 ...

  6. Runnable、Callable、Future和FutureTask用法

    http://www.cnblogs.com/dolphin0520/p/3949310.html java 1.5以前创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable ...

  7. Appium自动化测试环境的搭建及脚本执行

    之前搭建了robotium的环境,并使用了一下,因为需要兼顾到ios的测试,所以这次又搭建了appium的环境.关于Appium的介绍网上有很多了,也可以去它的官网学习,这里就不在赘述了. 具体搭建步 ...

  8. H5制作1--母亲节快乐

    H5作品现在很流行额. 早上起的很早.就自己试着去了解了一下.感觉很easy. 用了百度的H5在线制作工具.感觉很easy.顺便给百度做下推广吧.h5.baidu.com 于是就有了自己的第一个dem ...

  9. new和delete为什么要匹配

    operator new和operator delete函数有两个重载版本: void* operator new (size_t); // allocate an object void* oper ...

  10. Ubuntu下部署SVN+SVNManager

    本文参考了一下博客,特此感谢: 灰烬之灵    一米阳光做IT.测试 环境描述:ubuntu 13.04 1.先创建svn组和svn用户: sudo addgroup svnsudo useradd ...