您的位置：首页 > Web前端 > HTML5

蓝鸥零基础学习HTML5第八讲样式布局一

2016-09-23 10:40 489 查看

蓝鸥零基础学习HTML5第八讲样式布局一

1.浮动到底是什么鬼

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

/*body {

font-size:0px;

}*/

div {

width:100px;

height:100px;

text-align: center;

line-height: 100px;

border:1px solid red;

/*display: inline-block;*/

font-size:16px;

float:right;

}

</style>

</head>

<body>



<div>我是DIV1</div>

<div>我是DIV2</div>

<div>我是DIV3</div>

<div>我是DIV4</div>

</body>

</html>

2.浮动的特性

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

/*div {

border:1px solid red;

float:left;

}*/

/*span {

width:100px;

height:100px;

border:1px solid red;

float: left;

padding:10px;

}*/

/*div {

width: 100px;

height: 100px;

background: red;

float: left;

}

span,strong {

display: inline-block;

width:40px;

height:40px;

border:1px solid yellow;

}

p {

height:50px;

width:400px;

background: pink;

}*/

div{

background: red;

overflow: hidden;

}

h2 {

margin:0;

width:300px;

height:300px;

border:1px solid black;

background: yellow;

float: left;

}

p{

height:300px;

background: blue;

}

</style>

</head>

<body>









<div>

<h2>我是H2</h2>

</div>

<p></p>

</body>

</html>

3.Bfc

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

/*div {

width:300px;

height:300px;

border:10px solid red;

font-size:24px;

overflow: hidden;

margin:0 auto;

}*/

/*div:hover{

color:blue;

text-decoration: underline;

}*/

/*div:after{

content: "我是伪类";background: red;

}*/

#box1 {

width:540px;

border:10px solid red;

margin:0 auto;

/*height:108px;*/

}

span {

width:100px;

height:100px;

border:4px solid blue;

text-align: center;

line-height: 100px;

float:left;

}

.clear:after{

content: "";display: block;clear: both;

}

</style>

</head>

<body>





<div id="box1" class="clear">

<span class="class1">1</span>

<span class="class2">2</span>

<span class="class3">3</span>

<span class="class4">4</span>

<span class="class5">5</span>

</div>



</body>

</html>

4.提升层级半级

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#box1 {

width:100px;

height:100px;

background: red;

float:left;

margin-right:3px;

}

#box2 {

width:200px;

height:210px;

background: yellow;

}

</style>

</head>

<body>

<div id="box1">div1</div>

<div id="box2">“深港通相关准备工作已基本就绪，国务院已批准《深港通实施方案》。”李克强总理在8月16日的国务院常务会议上明确表示。

　　在今年的政府工作报告中，李克强总理提出，要“适时启动深港通”，各方对此普遍期待并寄予厚望。201</div>

</body>

</html>

5.定位是什么鬼

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div {

width:300px;

height:300px;

border:10px solid black;

position: relative;

}

span {

width:100px;

height:100px;

background: red;

text-align: center;

line-height: 100px;

font-size:40px;

position: absolute;

}

.span1{

left:100px;

}

.span2{

top:100px;

}

.span3{

right:0px;

top:100px;

}

.span4{

bottom: 0px;

left: 100px;

}

</style>

</head>

<body>

<div>

<span class="span1">1</span>

<span class="span2">2</span>

<span class="span3">3</span>

<span class="span4">4</span>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html html5 蓝鸥龙江 css

相关文章推荐

新的分享

章节导航

蓝鸥零基础学习HTML5第八讲 样式布局一

蓝鸥零基础学习HTML5第八讲样式布局一