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

时间: 2024-10-08 20:27:08

CSS_样式sample的相关文章

CSS_样式特性

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS样式特性</title><style > /* 1.继承性 */body{ font-family: "宋体","黑体","文泉驿正黑"}/*2.层叠性 设置不同的声明,效果会叠加 */h1{ color: red; font-

CSS_样式

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>样式</title><!-- 2.内部样式:在head元素里面的style标签里写样式,此样式可以被当前页面上众多元素复用 --><style > /*CSS的注释是这样的*/ h2{ color: blue; } </style><!-- 3.外部样式:在单独的

Css_加载样式

第一种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> .loading{ width: 80px; height: 40px; margin: 0 auto; margin-t

Sample Apps by Android Team -- Amazed

Sample Apps by Android Team 代码下载:http://pan.baidu.com/s/1eSNmdUE 本次是项目Amazed代码学习记录. 一.创建自定义View @.在onSizeChanged中,通过如参w(宽)和h(高)的比较来判断手机是处于横向(Landscape)还是纵向(Portrait). @.在onDraw中进行自定义View的界面绘制. @.绘制界面需要Canvas和Paint: 1.Cnavas:用来控制画什么,比如画直线(drawLine).画矩

bootstrap全局css样式

以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ .hidden-xs { display: none!important; } } @media (max-width: 991px) and (min-width: 768px){ .hidden-sm { display: none!important; } } @media (min-widt

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

每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐.不同浏览器甚至同一浏览器不同版本的默认样式是不同的.这才带来了很多的坑,让大家用cssreset去填.. 一.浏览器默认样式 了解各浏览器的默认样式能让我们对每条Reset规则的写法做到心中有数,对我们了解浏览器的差异,写各浏览器兼容的代码也有很大帮助. 所以先看看浏览器默认样式长什么样: FF

html5 canvas 笔记二(添加样式和颜色)

色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = transparency value 1 // globalAlpha 示例 2 ctx.fillStyle = '#FD0'; 3 ctx.globalAlpha = 0.2; 4 5 // rgba() 示例 6 ctx.strokeStyle = "rgba(255,0,0,0.5)&quo

bootstrap 全局 CSS 样式

http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 复制 <!DOCTYPE html> <html lang="zh-CN"> ...

一个简陋的 CSS 样式

有些网友对 Smart Framewok 中的 Sample 示例的样式比较感兴趣.由于本人对前端不太精通,但为了满足网友们的需求,只好献丑了. 以下这个简陋的 CSS 样式: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56