<!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/ -->
大伟 HTML编写第一步
最新推荐文章于 2024-07-10 21:47:31 发布