代码
<link rel="stylesheet" href="css/style.css">
<title>我的网站</title>
</head>
<body>
<div><h3>稳住，我们能赢</h3></div>
<div>content-box</div>
<div>border-box</div>
<h1>稳住，我们能赢</h1>
<div class="hezi"></div>
<div class="sj">水晶图片</div>
<div class="six">
1991年1月，发行专辑《一起走过的日子》，专辑同名主打歌《一起走过的日子》获得十大劲歌金曲奖以及十大中文金
曲奖 [131-132] ；2月，发行粤语专辑《爱不完》 [133] ；该专辑发行首日录音带的销量达到16万张，而激光唱片的销量则有7.2
万张 [134] ；6月，发行国语专辑《我和我追逐的梦》；同年，获得十大劲歌金曲奖最受欢迎男歌手奖。1992年，在洛杉矶、旧金山
等地举行美加巡回演唱会；9月，发行加入华纳唱片公司以后的首张专辑《真我的风采》；该专辑发行后销量达到40万张 [134] ；同
年，在提前录制的央视春晚视频中，刘德华与毛阿敏、张雨生合唱歌曲《心中常驻芳华》 [135]<img src="images/dehua.jpg" width
="171px" height="220px"> ；此外，他还发行了专辑《谢谢你
的 爱》，同名主打歌曲《谢谢你的爱》获得第十六届十大中文金曲奖 [136]。1993年1月至2月，在香港红磡体育馆举行20场“真我的
风采演唱会”；4月，推出加入飞碟唱片公司后的首张专辑《真情难收》，其中的主打歌曲《一辈子的错》由刘德华作词；11月，推出
专辑粤语专辑《答案就是你》，专辑中的歌曲《永远寂寞》获得第16届十大中文金曲获奖 [136]。1994年，发行国语专辑《忘情水》，
同名主打歌《忘情水》获得第17届十大中文金曲奖最受欢迎国语歌曲金奖以及第1届华语榜中榜Channel [V]中文Top 20榜中榜歌曲奖
[137-138] ；8月6日至25日，在香港红磡体育馆举行20场演唱会；11月25日，发行国语专辑《天意》；专辑中表达友情的主打歌曲《
友谊历久一样浓》是刘德华个人填词的作品；同年，获得十大劲歌金曲奖最受欢迎男歌手奖</div>
<br>
<br>
<div class="se"></div>
<div class="me"></div>
<div class="le"></div>
css代码
div {
width: 300px;
height: 50px;
border: 1px solid pink;
}
div:nth-child(2) {
width: 200px;
height: 200px;
background-color: red;
box-sizing: content-box;
padding: 10px;
border: 15px solid pink;
}
/*盒子的大小为width+padding+border content-box此值为其默认值，其让元素维持W3C的标准Box Mode*/
div:nth-child(3) {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box;/*padding border不撑开盒子了*/
border: 15px solid red;
/*margin: 10px;*/
/*盒子大小为width 就是说padding和border包含在width里面的*/
}
h3 {
/*padding-left: 10px;*/
margin-left: 10px;
background-color: purple;
}
h1 {
font-size: 100px;
/*text-shadow:水平距离 垂直距离 模糊 阴影颜色*/
text-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
}
.hezi {
width: 200px;
height: 200px;
border: 10px solid red;
/*box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影;*/
box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
}
.sj {
width: 249px;
height: 249px;
line-height: 249px;
background-color: pink;
margin: 100px;
background: url("../images/sj.jpg") 0 0 no-repeat;
font-size: 30px;
text-align: center;
color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
box-shadow: 5px 5px 10px 16px rgba(255, 255, 255, 0.4) inset,
5px 4px 10px rgba(0, 0, 0, 0.3);
}
.six {
width: 500px;
height: 500px;
border: 1px solid pink;
margin: 0 auto;/*让盒子居中对齐*/
}
.six img {
float: right;/*开始的时候，浮动是用来做文字环绕效果的*/
}
.se {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;/*转换为行内块元素，就可以放一行上 有宽度高度 但是元素之间有空隙，不方便处理*/
float: left;
}
.me {
width: 200px;
height: 200px;
background-color: hotpink;
display: inline-block;
float: left;
}
.le {
width: 200px;
height: 200px;
background-color: deeppink;
display: inline-block;
float: left;
}
结果
image.png
image.png
image.png
代码
<title>浮动吧</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<section>
<div>熊大</div>
<div>熊二</div>
</section>
<div class="lai">奔跑吧，兄嘚</div>
<div class="qu">奔跑吧，兄嘚</div>
<span>额的个神啊</span>
<span>额的个神啊</span>
代码
.father {
width: 500px;
height: 300px;
background-color: pink;
border: 10px solid red;
padding: 10px;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
float: right;
}
section {
width: 800px;
height: 500px;
background-color: pink;
}
section div:first-child {
width: 200px;
height: 200px;
background-color: purple;
float: left;
}
section div:last-child {
width: 249px;
height: 300px;
background-color: blue;
float: left;
}
/*熊大和熊二都浮动，则盒子顶对齐*/
/*熊大不浮动，熊二浮动，熊二会跑到下一行*/
.lai {
height: 200px;
background-color: pink;
float: left; /*块级元素添加后，具有行内快的特性*/
}
.qu {
height: 200px;
background-color: pink;
float: left; /*块级元素添加后，具有行内快的特性*/
}
span {
background-color: purple;
height: 100px;
float: left;/*行内元素添加后，具有行内快的特性*/
}
/*行内快的特性，可以一行放多个，有宽度和高度，盒子的大小是由内容决定的*/
结果
image.png
image.png
