HTML_css-CSDN博客

本文链接：https://blog.csdn.net/weixin_47484523/article/details/113152628

div+css

index. html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>div+css</title>
		<link rel="stylesheet" href="css/index.css" type="text/css" />  <!--外部文件链入,必须写在头部-->
		<!--
			作者：shidiwen
			时间：2021-01-21
			描述：div+css
			div:盒模型,盒子,一个一个的模块,默认占一行
			css:层叠样式表
			link:链接 rel:链接的样式 stylesheet:样式表 href:地址 url:链接
			*通配符,指的是给所有的标签一加载就要首先完成的样式
			class:类名分类及,命名方式可以用英文+数字/下划线,不可以用纯数字,单个字母,其它符号,中文命名,可以重复使用的
			id:id命名,命名方式和class一样,但是id是具备唯一标识的,不能多次重复使用
		-->
	</head>
	<body>
		<div class="no1">asdfas</div>        
		<div class="no2">第二个div</div>
		    <img src="img/222BE81FD8FD238CA964A07CFE859419%20.jpg" />   <!--文本溢出了,图片文字不会把div撑宽-->
		<div class="no3">这是第三个div</div>          <!--class命名前面加.-->
		<div id="no4">这是第四个div</div>                <!--id命名前面加#-->
		<table>                                           <!--标签前面不加-->
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<h1 class="no1">aslkfjasjkdf;</h1>
	</body>
</html>

index.css:

@charset "utf-8";
*{
	padding: 0px;
	margin: 0px;
} 
body{
	background-color: #b2b2b2;
}
.no1{
	width:400px;
	height:300px;
	background-color: pink;
}
.n-no1{
	width: 100px;
	height: 100px;
	background-color:palegreen;
	float: left;
}
.n-no2{
	width: 100px;             
	height:100px;
	background-color:plum;
	float: left;
}
.no2{
	width: 500px;
	height: 400px;
	background-color: gold;
}
.no3{
	width: 300px;
	height: 400px;
	background-color:lavender;
}
#no4{
	width: 500px;
	height: 500px;
	background-color: lightblue;
}
table{
	width: 400px;
	height: 400px;
	background-color: yellow;
	border:1px red solid;
}
h1{
	width: 300px;
	height: 200px;
	background-color: peru;
}

text.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" type="text/css"/>
	</head>
	<body>
		<div class="no1">
			<div class="n-no1">11111</div>  <!--父类浮动不会影响子类,子类浮动不会影响父类-->            
			<div class="n-no2">33333</div>
		</div>
		<div class="no2">第二个</div>
		<div class="no3">第三个</div>
	</body>
</html>

在这里插入图片描述

龙湖地产界面:

longhu.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		 <!--
		    float:浮动,影响的是并列结构,不影响父子结构,也不受父级或者子级的影响
		    margin-left:auto; 
		    margin-right:auto; 建立在没有做float的情况下,在父级块中居中
		 -->
		<link rel="stylesheet" href="css/longhu.css" type="text/css" />
	</head>
	<body>
		<div class="main">
			<div class="logo">
			</div>
			<div class="nav"></div>
			<div class="banner"></div>
			<div class="m-main">
				<div class="left">
					<div class="no1">
						<div class="n-no1"></div>
					    <img src="img/u=1962986734,2519871017&fm=26&gp=0.jpg" width="100" height="100" />
						<p></p>
					</div>
					<div class="no2">
						<ul></ul>
						<ul></ul>
					</div>
				</div>
				<div class="right"></div>
			</div>
			<div class="bottom"></div>
		</div>
	</body>
</html>

longhu.css

@charset "utf-8";
*{
	padding:0px;
	margin: 0px;
}
body{
	background-color: #00327c;
}
.main{
	width:1421px;
	height:867px;
	background-color: lightblue;
	margin-left: auto;             
	margin-right: auto;
}
.logo{
	width: 900px;
	height: 80px;
	background-color: papayawhip;
	margin-left: auto;
	margin-right: auto;
}
.nav{
	width: 900px;
	height: 37px;
	background-color: hotpink;
	margin-left: auto;
	margin-right: auto;
}
.banner{
	width: 900px;
	height: 238px;
	background-color: burlywood;
	margin-left: auto;
	margin-right: auto;
}
.m-main{
	width: 900px;
	height: 422px;
	background-color: gold;
	margin-left: auto;
	margin-right: auto;
}
.left{
	width: 650px;
	height: 422px;
	background-color: yellowgreen;
	float: left;
}
.no1{
	width: 650px;
	height: 200px;
	background-color: plum;
}
.n-no1{
	width: 650px;
	height: 30px;
	background-color: goldenrod;
}
img{
	float: left;
}
p{
	width: 500px;
	height: 170px;
	background-color: orange;
	float: left;
}
.no2{
	width: 650px;
	height: 222px;
	background-color: darkgray;
}
ul{
	width:310px;
	height: 222px;
	background-color:orchid ;
	float: left;
	margin-left: 10px;
}
.right{
	width: 243px;
	height: 422px;
	background-color: lightcoral;
	float: left;
}
.bottom{
	width: 900px;
	height: 60px;
	background-color: burlywood;
	margin-left: auto;
	margin-right: auto;
}