百度前端学院第9到11天

最新推荐文章于 2024-08-23 10:53:05 发布

qq_40891002

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量171

点赞数

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/qq_40891002/article/details/106102365

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

写这个页面的时候自己竟然写了300多行css,什么代码的复用什么的都没用用到，用到最笨的方法，一个页面一个页面老老实实的写

，觉得几种布局方式确实有效，3天我也确实没做完，用了大概5天左右，权当记录一下了，毫无参考价值，总之慢慢变好，慢慢学

习吧

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>完美的网页</title>
		<link rel="stylesheet" type="text/css" href="完美的网页（切图）.css">
	</head>
	<body background="images/背景.jpg">
		<div class="title1">
			<div class="helloworld">Hello World</div>
			<div class="duanluo"><p>
			china is speeding up strategic plan. standards.traffic rules. laws and rugulations on accident-incurred liabilities for its smart car industry. Economic information </p>
			 <p style="text-align: center;">Daily reported Thursday</p></div>	
			<div class="signup">
			<div class="title">CREATE YOUR ACCOUNT</div>
			<div class="title2">IT IS ABSOLUTELY FREE</div>
			<div class="diyi">neirong</div>
			<div class="dier">neirong2</div>
			<div class="disan">sign up</div>
			</div>
			<div class="white">
			<div class="white1">
				<div class="title01">&nbsp;&nbsp;BOATLOADS OF AWESCME</div>
				<div class="title02">Ready-made,customizable,HTML
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;landing page sections</div>
				<div class="logoinput">
					<div class="top">
						<div class="li1"><img src="images/logo图标_03.png"/></div>
						<div class="li2"><img src="images/logo图标_05.png"/></div>
					</div>
					<div class="bottom">
						<div class="li3"><img src="images/logo图标_07.png"/></div>
						<div class="li4"><img src="images/logo图标_08.png"/></div>
					</div>
				</div>
			</div>
			</div>
			<div class="background2"><div class="limian">
			<div class="hezizuo">
				<p style="font-size: 30px;color: white;">Supportive policies <br> China's smart <br>car</p>
				<p style="font-size: 12px;color: white;">China will come up with its own smart car<br>standards.traffic rules.laws and regulations <br>relating to safety. according to the China<br>Industry Innovation Alliance for the intelli-<br>gent and Connected Vehicles</p>
				<div class="changfang">
					<div class="xiaohe1">CHECK OUT FEATURES</div>
					<div class="xiaohe2">TRY PRODUCT FOR FREE</div>
				</div>
				
			</div>
            <div class="heziyou"><img src="images/youcetu_03.png"/></div>
			</div>
			</div>
			<div class="wenzi"><div class="title111">
			 try Our Awesome Proudcts
			</div>
			<div class="fangge">
				<div class="neihezi1">
				 <img src="images/小图_07.png"/>
				</div>
				<div class="neihezi2">
			    <img src="images/小图_09.png" />
				</div>
				<div class="neihezi3">
			    <img src="images/小图_11.png"/>
				</div>
			</div>
		</div>
		<div class="xiaoniao">
			<div class="juzhong">
				<div class="zuoshangtu"><img src="images/小鸟_16.png"></div>
				<div class="youshangtu"><img src="images/小鸟_18.png"></div>
				<div class="zuoxiatu"><img src="images/小鸟_26.png"></div>
				<div class="youxiatu"><img src="images/小鸟_23.png"></div>
			</div>
		</div>
		<div class="author">
			<div class="author1">
				<h1 style="text-align: center;">Our Awesome Crew</h1>
				<p style="font-size: 12px; text-align: center; ">our unique online teaching style easy for everyone.Whether you <br>are trying to land a new jot. brush up on your skills.</p>
				<div class="author11">
					<img src="images/author_31.png">
				</div>
			</div>
		</div>
		<div class="aaa">
			<div class="bbb">
				<div class="box2">
					<div class="zuobox2"><img src="images/dierdaoshu_35.png"></div>
					<div class="youbox2"><img src="images/dierdaoshu_37.png"></div>
				</div>
			</div>
		</div>
		<div class="zuihou">
			<img src="images/zuihouyizhangtu_42.png">
		</div>
		</div>
	</body>
</html>

css部分

.title1{
	position: relative;
}
*{
	margin: 0;
	padding: 0;
}
.helloworld{
	color: white;
	position: absolute;
	top: 40px;
	left: 550px;
	font-size: 30px;
/* 	background-color: red; */
}
.duanluo{
	color: white;
	position:absolute;
	top: 100px;
	left: 300px;
	width: 610px;
	height: 200px;
	/* background-color: green; */
}
.signup{

	width: 960px;
	height: 200px;
	border: 1px solid black;
	/* background-color: red; */
	position: absolute;
	left: 150px;
	top: 250px;
	text-align: center;
	color: white;

}
.diyi,.dier{
/* 	background-color: red; */
	color: white;
	width: 250px;
	height: 4px;
	line-height: 4px;
	float: left;
	margin: 45px 20px;
	padding: 20px;
	border: 1px solid bisque;
	}
	.disan{
 		background-color: white;
		color: black;
		width: 90px;
		height: 4px;
		line-height: 4px;
		float: left;
		margin: 45px 20px;
		padding: 20px;
		
		/* border: 1px solid bisque; */
	}
	.title{
	/* background-color: red; */
	margin-top: 40px;
	}
	.title2{
	/* background-color: red; */
	margin-top: 2px;
	font-size: 10px;
	color: rosybrown;
	}
	.white{
		width: 100%;
		height: 480px;
		background-color: white;
		position: absolute;
		top: 550px;
	}
	.white1{
		margin: 0 auto;
	   /* background-color: red; */
		width: 960px;
		height: 480px;
	/* 	border: 1px solid green; */
		position: relative;
	}
	.title01{
		/* position: absolute;
		top: 70px;
		left: 30px; */
		margin: 30px auto 10px auto;
		width: 300px;
		height: 30px;
	/* 	background-color: red; */
		font-size: 13px;
		font-family: sans-serif;
	}
	.title02{
		width: 400px;
		height: 70px;
		margin: 10px auto 10px auto;
/* 	    background-color: gray; */
		font-size: 22px;
		font-family: sans-serif;
	}
	.logoinput{
		margin: 20px auto;
	 
		width: 870px;
		height: 310px;
	}
	.top{
		display: flex;
	
	}
	.top li1{
		flex: 1;
		margin: 0 auto;
	}
	.top li2{
		flex: 1;
	}
	.bottom{
		display: flex;
	}
	.bottom li3{
		flex: 1;
	}
	.bottom li4{
		flex: 1;
	}
	 	.background2{
		width: 100%;
		height: 500px;
		position: absolute;
		top: 1100px;
		background-color: red;
	    background-image: url(images/dierbeijing_02.png); 
	} 
.limian{
	width: 1300px;
	height: 500px;
 	/* border: 1px solid blue; */
	margin: 0 auto;
 	display: flex; 
overflow: hidden;
}
.hezizuo{
	width: 350px;
	height: 370px;
 /*   border: 1px solid red; */
/* 	background-color: grey; */
	margin: 90px;
 	flex: 1; 
	padding: 0px 20px 40px 100px;

}
.changfang{
	width: 340px;
	height: 100px;
	/* border: 1px solid red; */
	margin: 40px 0px;
	display: flex;
}
.xiaohe1{
	height: 30px;
	width: 30px;
/* 	border: 1px solid red; */
	flex: 1;
	margin: 20px 5px 10px 1px;
	font-size: 12px;
	color: black;
	background-color: white;
	line-height: 30px;
}
.xiaohe2{
	height: 30px;
	width: 30px;
	/* border: 1px solid red; */
	flex: 1;
	margin: 20px 5px 10px 1px;
	font-size: 12px;
	color: white;
	line-height: 30px;
}
.heziyou{
		width: 800px;
		height: 410px;
	 	border: 1px solid red; 
	 /* 	background-color: blue; */
		flex: 1;
		margin: 80px 0px;
	/* 	float: left; */
		
}
.heziyou img{
	width: 500px;
	height: 370px;
	margin: 20px;
}
.wenzi{
	width: 100%;
	height: 420px;
/* 	border: 1px solid red; */
	position: absolute;
	top: 1600px;

}
.title111{
	width: 300px;
    height: 40px;
	/* background-color: red; */
	margin-left: 500px;
	color: black;
	font-size: 20px;
	
}
.fangge{
	height: 370px;
	width: 960px;
	/* border: 1px solid red; */
	margin: 5px auto;
	display: flex;
}
.neihezi1,.neihezi2,.neihezi3{
	
	height: 340px;
	/* border: 1px solid red; */
	flex: 1;
	margin: 10px;
	/* background-color: red; */
}
	.neihezi1 img{
	width: 250px;
	height: 320px;
	/* margin: 2px; */
	padding: 10px;
	margin: 2px;
} 
.xiaoniao{
	width: 100%;
	height: 500px;
	/* border: 1px solid red; */
	/* background-color: red; */
	position: absolute;
	top: 2010px;
/* 	overflow: hidden; */
}
.juzhong{
	width: 960px;
	height: 500px;
/* 	border: 1px solid green; */
	margin: 0 auto;
}
.zuoshangtu{
	width: 420px;
	height: 200px;
	/* border: 1px solid green; */
 	float: left; 
	margin: 15px 1px 15px 37px;
}
.youshangtu{
	width: 290px;
	height: 180px;
	/* border: 1px solid red; */
	float: right;
	margin: 25px 40px;
}
 .zuoxiatu{
		width: 290px;
		height: 180px;
	/* 	border: 1px solid blue; */
		float: left;
		margin: 40px 15px 2px 37px;
	} 
	.youxiatu{
		width: 420px;
		height: 220px;
	/* 	border: 1px solid green; */
		float: right; 
		margin: 15px;
	}
	.zuoshangtu img{
		width: 420px;
		height:200px;
		margin: 0px;
	}
	.youshangtu img{
		width: 290px;
		height:180px;
	}
	.zuoxiatu img{
		width: 290px;
		height: 180px;
	}
	.youxiatu img{
		width: 420px;
		height: 220px;
	}
	.author{
		width: 100%;
		height: 550px;
	/* 	background-color: red; */
		position: absolute;
		top: 2510px;
	}
	.author1{
		width: 960px;
		height: 520px;
	/* 	border: 2px solid red; */
		margin: 0 auto;
	    
	/* 	background-color: blue; */
		
	}
	.author11{
		width: 500px;
		height: 400px;
		margin:  10px 80px;
	}
	.author11 img{
		width: 700px;
		height: 400px;
	}
	.aaa{
		width: 100%;
		height: 450px;
		position: absolute;
		top: 3030px;
		
	}
	.bbb{
		width: 960px;
		height: 450px;
		margin: 0 auto;
	/* 	border: 1px solid red; */
		
	}
	.zuobox2,.youbox2{
		width: 280px;
		height: 320px;
/* 		border: 1px solid red; */
		
		float: left;
		margin: 80px 80px;
	}
	.zuobox2 img{
		width: 280px;
		height: 320px;
	}
	.youbox2 img{
		width: 280px;
		height: 320px;
	}
	.zuihou{
		width: 100%;
		height: 300px;
		position: absolute;
		top: 3500px;
		border: 1px solid cadetblue;
		background-color: red;
	}
	.zuihou img{
		width: 100%;
		height: 300px;
	}

qq_40891002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度前端学院第9到11天

写这个页面的时候自己竟然写了300多行css,什么代码的复用什么的都没用用到，用到最笨的方法，一个页面一个页面老老实实的写，觉得几种布局方式确实有效，3天我也确实没做完，用了大概5天左右，权当记录一下了，毫无参考价值，总之慢慢变好，慢慢学习吧HTML部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>完美的网页</title> &lt
复制链接

扫一扫

专栏目录