使用html和css制作简单的网页

最新推荐文章于 2024-07-27 22:02:30 发布

置顶愤怒的阿木木

最新推荐文章于 2024-07-27 22:02:30 发布

阅读量5.8k

点赞数 21

分类专栏： web 练习案例文章标签： css html

本文链接：https://blog.csdn.net/qq_44364267/article/details/108912620

版权

web 练习案例专栏收录该内容

6 篇文章 4 订阅

订阅专栏

使用html和css制作简单的网页

创作不易，可否给作者点个赞再走

html部分：

/**
* author 阿木木
* date 09/26  10:23
* /
<html>
	<head>
		<title>首页</title>
		<link type="text/css" rel="stylesheet" href="css/stylt.css" />
	</head>
	<body>
		<div class="title">
			粤嵌多元化课程体系，满足不同学员需求
		</div>
		<div class="main">
			<ul>
				<li class="fl">
					<div class="boxa">
                       <div><a href=""><img src="img/embedded.jpg" /></a></div>
					   <div class="desc"><a href="">嵌入式开发</a> </div>
					</div>
					<div class="boxb fl mt10">
					   <div><a href=""><img src="img/vr.jpg" /></a></div>
					   <div class="desc"><a href="">vr/ar</a> </div>
					</div>
					<div class="boxb fr mt10">
						<div><a href=""><img src="img/cross_e_commerce.jpg" /></a></div>
						<div class="desc"><a href="">跨境电商</a> </div>
					</div>
					<div class="clear"></div>
					<div class="boxc mt10">
						<div><a href=""><img src="img/unity.jpg" /></a></div>
						<div class="desc"><a href="">Unity游戏开发</a> </div>
					</div>
					</li>
				<li class="fl ml10">
					<div class="boxb fl">
					    <div><a href=""><img src="img/ui.jpg" /></a></div>
					    <div class="desc"><a href="">全栈UI设计</a> </div>
					</div>
					<div class="boxb fr">
						<div><a href=""><img src="img/python.jpg" /></a></div>
						<div class="desc"><a href="">Python</a> </div>
					</div>
					<div class="clear"></div>
					<div class="boxc mt10">
						<div><a href=""><img src="img/senior_e_commerce.jpg" /></a></div>
						<div class="desc"><a href="">高级电商</a> </div>
					</div>
					<div class="boxa mt10">
						<div><a href=""><img src="img/h5.jpg" /></a></div>
						<div class="desc"><a href="">web前端</a> </div>
					</div>
				</li>
				<li class="fl ml10">
					<div class="boxc">
						<div><a href=""><img src="img/c.jpg" /></a></div>
						<div class="desc"><a href="">C/C++</a> </div>
					</div>
					<div class="boxa mt10">
						<div><a href=""><img src="img/java.jpg" /></a></div>
						<div class="desc"><a href="">JAVA大数据</a> </div>
					</div>
					<div class="boxb fl mt10">
						<div><a href=""><img src="img/web_safe.jpg" /></a></div>
						<div class="desc"><a href="">网络安全+运维</a> </div>
					</div>
					<div class="boxb fr mt10">
						<div><a href=""><img src="img/sem.jpg" /></a></div>
						<div class="desc"><a href="">SEM</a> </div>
					</div>
				</li>
				<li class="fr">
					<div class="boxb fl">
						<div><a href=""><img src="img/big_data.jpg" /></a></div>
						<div class="desc"><a href="">大数据</a> </div>
					</div>
					<div class="boxb fr">
						<div><a href=""><img src="img/seo.jpg" /></a></div>
						<div class="desc"><a href="">SEO</a> </div>
					</div>
					<div class="clear"></div>
					<div class="boxc mt10">
						<div><a href=""><img src="img/cloud.jpg" /></a></div>
						<div class="desc"><a href="">Linux云计算</a> </div>
					</div>
					<div class="boxb mt10 fl">
						<div><a href=""><img src="img/android.jpg" /></a></div>
						<div class="desc"><a href="">android</a> </div>
					</div>
					<div class="boxb mt10 fr">
						<div><a href=""><img src="img/php.jpg" /></a></div>
						<div class="desc"><a href="">PHP</a> </div>
					</div>
					<div class="clear"></div>
					<div class="boxc mt10">
						<div><a href=""><img src="img/marketing.jpg" /></a></div>
						<div class="desc"><a href="">网络营销</a> </div>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>

css部分：

*{
	margin: 0px;
	padding: 0px;
}
body{
	
}
li{
	list-style: none;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.ml10{
	margin-left: 10px;
}
.title{
	width: 100%;
	height: 125px;
	text-align: center;
	line-height: 125px;
	font-size: 30px;
}
.main{
	width: 1196px;
	height: 592px;
	margin: 0px auto;
}
li{
	width: 292px;
	height: 592px;
}
.boxa{
	width: 292px;
	height: 292px;
	background-color: red;
	position: relative;
	}
.boxb{
	width: 141px;
	height: 141px;
	background-color: green;
	position: relative;
     }
.boxc{
	 width: 292px;
	 height: 141px;
	 background-color: yellow;
	 position: relative;
	  }
.clear
{
	clear: both;
}
.mt10{
	margin-top: 10px;
}
a{
	color: aliceblue;
	text-decoration: none;
	font-size: 14px;
}
.desc{
	position: absolute;
	left: 10px;
	bottom: 12px;
}