css样式
3.1、边框属性
所有的HTML标签都有边框，默认边框不可见
border
设置边框的样式
l 格式：宽度 样式 颜色
例如：border:1px solid red ，1像素粗的 实线 红色边框。
线条样式：solid 实线，none 无边，double 双线
width
用于设置标签的宽度
height
用于设置标签的高度
background-color
用于设置标签的背景颜色
背景颜色设置的两种主流方式：
①英文单词 例如：red,blue,yellow
②颜色代码 格式：#红绿蓝， 每一个颜色用两个16进制位数表示
例如：#ff1100 红色ff，绿色11，蓝色00，红色颜色最重，绿色其次，没有蓝色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* background-color来设置背景颜色
*
* 背景颜色设置的两种主流方式：
英文单词 例如：red,blue,yellow
颜色代码 格式：#红绿蓝， 每一个颜色用两个16进制位数表示
例如：#ff1100 红色ff，绿色11，蓝色00，红色颜色最重，绿色其次，没有蓝色
*/
#d1 {
border: 1px solid blue;
font-size: 70px;
border-width: 10px;
border-style: dashed;
background-color: cyan;
}
</style>
</head>
<body>
<div id="d1">
我好帅
</div>
</body>
</html>
布局
3.2.1、float
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动属性
l 格式：
选择器{float:属性值;}
常用属性值：
none：元素不浮动（默认值）
left：元素向左浮动
right：元素向右浮动
注意：因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的板式），从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
* 设置了浮动的属性,会脱离原有的版式,影响到其他元素.从而会影响排版
*/
#d1{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
#d2{
background-color: green;
width: 110px;
height: 110px;
float: right;
}
#d3{
background-color: blue;
width: 120px;
height: 120px;
}
/* 用clear:both;来清除浮动*/
#d{
clear:both;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d"></div>
<div id="d3"></div>
</body>
</html>
/* 用clear:both;来清除浮动*/
#d{
clear:both;
}
8445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
