HTML的组成部分
-
<李>
dtd部分:文档类型说明,声明版本,标准
-
<李>页眉部分:给机器看的李
<李>身体部分:给人看的李
CSS控制div显示
-
<李> & lt; div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是& lt; div>固有的唯一格式表现。可以通过& lt; div>的类或id应用额外的样式。
<李>如下代码是CSS通过id设置每个div的宽高和背景色李
<代码> & lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;风格类型=" text/css "比;
#一个{
宽度:200 px;
身高:100 px;
背景:红色;
}
# b {
宽度:200 px;
身高:100 px;
背景:蓝色;
}
# c {
宽度:200 px;
身高:100 px;
背景:绿色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=癮”祝辞& lt;/div>
& lt; div id=癰”祝辞& lt;/div>
& lt; div id=" c "祝辞& lt;/div>
& lt;/body>
& lt;/html>
网络前端开发学习Q-q-u-n: 767273102,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频)
执行效果:
浮动布局
我们先写两个div设置上背景颜色看看效果
<代码> & lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;风格类型=" text/css "比;
# lside {
身高:200 px;
背景:红色;
}
# rside {
身高:200 px;
背景:绿色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=" lside "在我是左边& lt;/div>
& lt; div id=" rside "在我是右边& lt;/div>
& lt;/body>
& lt;/html>
网络前端开发学习Q-q-u-n: 767273102,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频)
上文也说ddiv的内容会自动地开始一个新行,所以想将两个div左右排列就要进行浮动布局
我们分别在CSS中加浮上属性
<代码> & lt;风格type=" text/css "比;
# lside {
身高:200 px;
背景:红色;
浮:左;
}
# rside {
身高:200 px;
背景:绿色;
浮:正确;
}
& lt;/style>
效果如下图:
清除浮动
当有浮动布局和普通div共同存在时,会发生如下覆盖的情况
<代码> & lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;风格类型=" text/css "比;
# lside {
身高:200 px;
背景:红色;
浮:左;
}
# rside {
身高:300 px;
背景:绿色;
浮:正确;
}
#{正常
身高:400 px;
背景:蓝色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=" lside "在我是左边& lt;/div>
& lt; div id=" rside "在我是右边& lt;/div>
& lt; div id=罢！钡脑谖也簧柚酶《? lt;/div>
& lt;/body>
& lt;/html>
网络前端开发学习Q-q-u-n: 767273102,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频)
