一个简单的网页板块分布

最新推荐文章于 2024-05-23 06:33:49 发布

_xixi_nn

最新推荐文章于 2024-05-23 06:33:49 发布

阅读量277

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_56674431/article/details/120423700

版权

html css js 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

哇！我第一次写出来了。

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>教育科技</title>
		<meta name="keywords"content="计算机技能在线学习，Java学习，photshop学习，HTML学 习，css学习，数据结构学习">
		<meta name="description"content="提供计算机相关技能的在线教育">
		<link rel="stylesheet" href="CSS/style.css">
	</head>
	<body>
	    <header class="logo">
		   教育科技logo
	    </header>
	    <nav class="nav">
		首页，Java，photshop，HTML，css，数据结构，联系我们
	    </nav>
	    <div class="banner">banner</div>
		<main>
		<div class="c1">各项目具体介绍</div>
		<div class="c2">获得荣誉展示</div>
		<div class="c3">
			名师介绍
			<div class="teacher">
				1.王老师 </div>
				<div class="teacher">
				2.李老师</div>
				<div class="teacher">
				3.张老师</div>
		</div>
		<div class="c4">优秀学生展示
		<div class="student">
			1.易同学</div>
			<div class="student">
			2.文同学</div>
			<div class="student">
			3.郭同学</div>
	    </main>
	    <footer id="footer">
		底部，版权
	    </footer>
	</body>
</html>

CSS

.logo{
	color:#edf0a2;
	background:#4b63ba;
	font-size: 20px;
	text-align: center;
}
.nav{
	color:#c27ada;
}
.banner{
	color:#dd56a9;
	background:#efee8f;
}
.c1{
	color:#564c4f;
	background:#c7e5f2;
}
.c2{
	color:#1523a5;
	background:#e590b4;
}
.c3,.c4{
	color:#eb1a64;
}
.c3 .teacher{
	color:#651fce;
	background:#52ceb2;
}
.c4 .student{
	color:#bd69d5;
	background:#52ceb2;
}
.nav,.banner,.c1,.c4,.c2,.c3,.teacher{
	font-size: 14px;
	text-align: left;
}
#footer{
	color:#da4b69;
	font-size: 12px;
	text-align: right;
}

_xixi_nn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
一个简单的网页板块分布

哇！我第一次写出来了。HTML<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>教育科技</title> <meta name="keywords"content="计算机技能在线学习，Java学习，photshop学习，HTML学习，css学习，数据结构学习"> <meta name="de..
复制链接

扫一扫