CSS_样式sample
<!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的更多相关文章
- css_样式样式器的分类
详情:http://www.w3school.com.cn/h.asp 1.标签样式器:此样式器仅对html页面中div标签有效果 div{ background-color: rosybrown; ...
- react native 第三方组件react-native-swiper 轮播组件
github地址:https://github.com/leecade/react-native-swiper 使用方法:安装:npm i react-native-swiper –save 查看模块 ...
- CSS_简介/语法结构/长度单位/应用方式/标签的样式重置/表单样式重置
一.CSS简介: w3c(World Wide Web Consortium):万维网联盟,是规定网页标准的一个组织(叫做Web标准) Web标准:是由w3c和其他标准化组织制定的一系列标准的集合, ...
- Css_加载样式
第一种效果: 代码如下: <div class="loading"> <span></span> <span></span&g ...
- 浏览器默认样式(user agent stylesheet)+cssreset
每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整 ...
- PHP团队 编码规范 & 代码样式风格规范
一.基本约定 1.源文件 (1).纯PHP代码源文件只使用 <?php 标签,省略关闭标签 ?> : (2).源文件中PHP代码的编码格式必须是无BOM的UTF-8格式: (3).使用 U ...
- Sample Apps by Android Team -- Amazed
Sample Apps by Android Team 代码下载:http://pan.baidu.com/s/1eSNmdUE , 代码原地址:https://code.google.com/arc ...
- bootstrap入门-4.排版及其他固定样式
本篇包括以下内容:排版.代码.表格.表单. 总结:超无聊,弃更. · 排版样式 标题 h1-h6 取消加粗,字体大小也有一定变化 ...
- 仿iOS Segmented Control样式"
同步发表于http://avenwu.net/2015/02/05/styled_radiogroup_segmented_control Fork on github https://github. ...
随机推荐
- [Everyday Mathematics]20150102
设 \[ a_1=3,\quad a_{n+1}=\dfrac{1}{2}(a_n^2+1)\quad(n=1,2,\cdots). \] 试求 \[ \vsm{n}\dfrac{1}{1+a_n}. ...
- 2014年25 款最新最棒的jQuery插件
网络上提供了大量非常有用的 jQuery 插件,帮助大家完善网站的体验.所以我们在这里收集了 2014 年发布的,并且是非常有用的插件,希望能帮助大家找到自己需要并且喜欢的,提升网站的质量! HAMM ...
- NOIP2009 靶形数独
4．靶形数独 (sudoku.pas/c/cpp) [问题描述] 小城和小华都是热爱数学的好学生, 近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了, ...
- 在中国Windows Azure服务中创建应用程序的一些不同之处
Azure 中的托管服务由一个应用程序(用于在托管服务中运行)和 XML 配置文件(定义托管服务的运行方式)组成.托管服务同时使用服务定义文件 (.csdef) 和配置文件 (.cscfg).有关详细 ...
- cocos2d-x在NDK r9下的编译问题
:69: error: format not a string literal andno format arguments [-Werror=format-security]cc1plus.exe: ...
- HIbernate学习笔记（二） hibernate对象的三种状态与核心开发接口
1.在hibernate中持久化对象有三个状态,这个面试时可能会问到: (1)transient瞬时态:在数据库中没有与之匹配的数据,一般就是只new出了这个对象,并且在session缓存中也没有即此 ...
- SQL Server优化相关的工具脚本
SQL Server性能优化的一些常用脚本,适用于SQL Server 2008,更高的版本某些系统表的字段有所不同,建议参考MSDN. 死锁相关 /************************* ...
- HW5.36
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- Hadoop概念学习系列之URI深入（三十二）
ls / ------------------------ 这是查本地Linux上的根 hadoop fs -ls / ------------- 这是查hdfs上的根 或者, had ...
- Java反射机制(获取Class对象的三种方式+获取Class中的构造函数进行对象的初始化+获取反射类的字段+获取反射类的一般方法)
反射技术其实就是动态加载一个指定的类,并获取该类中的所有内容.而且将字节码文件封装成对象,并将字节码文件中的内容都封装成对象,这样便于操作这些成员,简单来说:反射技术可以对一个类进行解剖,反射大大增强 ...