<html>
<head>
<title>div+css布局</title>
<link rel="stylesheet" type="text/css" href="外部样式.css" />
<style type="text/css">
.div-1{
border:1px solid grey;
width:33%;
height:100%;
float:left;
}
.sp{
border:1px solid pink;
width:100%;
height:50%;
}
</style>
</head>
<body>
<!--
选择器：
1.标签选择器：通过标签名控制标签内容的样式，相同的标签名都会被控制到
2.id选择器:通过id名控制文本的样式，需和#号配合使用，id名建议一个文件里最好不要重复
3.类选择器:通过class名控制文本的样式，需和.配合使用，不同的标签取相同的class名的话，这些标签的文本内容都会被控制到
样式：
1.内嵌样式：放在标签的里面
2.内部样式：放在同一个html文件里的，一般放在head里面，但是不放在标签里面
3.外部样式：一个单独的css文件，需和html做关联，关联代码：
<link rel="stylesheet" type="text/css" href="外部样式.css" />
-->
<div style="border:1px solid green;width:90%;height:130%;margin-left:5%;">
<div id="divtop">今天天气很好</div>
<div id="divbottom">
<div class="div-1"></div>
<div class="div-1">
<span class="sp">1</span>
<span class="sp">1</span>
</div>
<div class="div-1"></div>
</div>
</div>
</body
<head>
<title>div+css布局</title>
<link rel="stylesheet" type="text/css" href="外部样式.css" />
<style type="text/css">
.div-1{
border:1px solid grey;
width:33%;
height:100%;
float:left;
}
.sp{
border:1px solid pink;
width:100%;
height:50%;
}
</style>
</head>
<body>
<!--
选择器：
1.标签选择器：通过标签名控制标签内容的样式，相同的标签名都会被控制到
2.id选择器:通过id名控制文本的样式，需和#号配合使用，id名建议一个文件里最好不要重复
3.类选择器:通过class名控制文本的样式，需和.配合使用，不同的标签取相同的class名的话，这些标签的文本内容都会被控制到
样式：
1.内嵌样式：放在标签的里面
2.内部样式：放在同一个html文件里的，一般放在head里面，但是不放在标签里面
3.外部样式：一个单独的css文件，需和html做关联，关联代码：
<link rel="stylesheet" type="text/css" href="外部样式.css" />
-->
<div style="border:1px solid green;width:90%;height:130%;margin-left:5%;">
<div id="divtop">今天天气很好</div>
<div id="divbottom">
<div class="div-1"></div>
<div class="div-1">
<span class="sp">1</span>
<span class="sp">1</span>
</div>
<div class="div-1"></div>
</div>
</div>
</body
</html>
外部样式.css：
div{
color:orange;
}
#divtop{
border:1px solid red;
font-size:30px;
width:100%;
height:20%;
}
#divbottom{
border:1px solid blue;
font-size:30px;
width:100%;
height:80%;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
