大伟 HTML编写第一步

最新推荐文章于 2021-12-30 11:52:54 发布

wangwei830

最新推荐文章于 2021-12-30 11:52:54 发布

阅读量85

点赞数

分类专栏：工具文章标签： html css3 css

本文链接：https://blog.csdn.net/m0_46426259/article/details/120896404

版权

工具专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>天然工作室</title>
</head>

<style type="text/css">
	.name000{
		/*在一行显示*/
		display: flex;
	}
	.name001002{
		color: #0C0B0B;
		font-size: 20px;
		margin: 10px;
		font-family: "方正粗圆简体";
	}
	.name001{
		/*去掉a标签下划线*/
		text-decoration:none; 
		margin-left: 16%;
	}
	.name002{
		margin-left: 40%;
	}

	.group5{
		display: flex;
		background-color: blue;
		height: 730px;
	}
	.part{
		flex: 1;
		padding-top: 365px;
		text-align: center;
		border-right: 1px solid #FFFFFF ;
	}
	.part p{
		font-family: "方正粗圆简体";
		font-size: 20px;
		font-weight: bold;
		color: #FFFFFF;
		background-size: cover;
	}
	.part1{
		background-image: url("imgs/bg.png");
	}
	.part2{
		background-image: url("imgs/bg1.png");
	}
	.part3{
		background-image: url("imgs/bg2.png");
	}
	.part4{
		background-image: url("imgs/bg3.png");
	}
	.part5{
		background-image: url("imgs/bg4.png");
	}
</style>

<body>
	<div class="name000">
		<a href="http://www.sikiedu.com/course/841/task/68522/show" class="name001002 name001">SiKi学院HTML</a>
		<p  class="name002 name001002">首页</p>
	</div>
	<div class="group5">
		<div class="part part1">
			<p>降龙十八掌</p>
			<img src="imgs/add.png">
		</div>
		<div class="part part2">
			<p>打狗棒法</p>
			<img src="imgs/add.png">
		</div>
		<div class="part part3">
			<p>九阳真经</p>
			<img src="imgs/add.png">
		</div>
		<div class="part part4">
			<p>六脉神剑</p>
			<img src="imgs/add.png">
		</div>
		<div class="part part5">
			<p>天山折梅手</p>
			<img src="imgs/add.png">
		</div>
	</div>
</body>

<script type="text/javascript">
	
</script>

</html>

<!-- 先安装 Emmet插件 -->

<!-- 注释快捷键: Ctrl+/ -->

<!-- Sublime Text3的列对齐功能：
1. Ctrl + A （全选）
2. Ctrl + Shift + L （进入列模式）
3. 按方向键（右键），使光标置于每一行末尾，解除全选状态
4. 再按 Ctrl + 方向键（左键），使光标置于第二列数据的开头
5. 最后 Ctrl + K（Alignment插件的改键，原来的ctrl+alt+a，这个组合键可以说和很多软件都有热键冲突，果断更改），使第二行数据对齐！
 -->


<!-- HTML语法网站：  https://www.w3school.com.cn/ -->

wangwei830

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大伟 HTML编写第一步

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>天然工作室</title></head><style type="text/css"> .name000{
复制链接

扫一扫