刚刚接触建站,需要弄这样一段代码,不会,特向各位大佬们提问,求教
需要写什么一段代码,才能做出上图的效果:
效果1:每一排三个栏目,大小可调
效果2:每一个选项,颜色可以自定义
效果3:能够链接到不同网址
刚刚接触建站,需要弄这样一段代码,不会,特向各位大佬们提问,求教
需要写什么一段代码,才能做出上图的效果:
效果1:每一排三个栏目,大小可调
效果2:每一个选项,颜色可以自定义
效果3:能够链接到不同网址
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
.box {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 660px;
background-color: #ccc;
}
.box > a {
width: 200px;
height: 50px;
border-radius: 10px;
text-align: center;
line-height: 50px;
margin: 5px;
text-decoration: none;
}
.box > a.c1 {
background-color: #c66;
color: #fff;
}
.box > a.c2 {
background-color: #696;
color: #fff;
}
.box > a.c3 {
background-color: #66f;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<a href="1.html" class="c3">标签1</a>
<a href="2.html" class="c1">标签2</a>
<a href="3.html" class="c2">标签3</a>
<a href="4.html" class="c1">标签4</a>
<a href="5.html" class="c3">标签5</a>
<a href="6.html" class="c2">标签6</a>
<a href="7.html" class="c3">标签7</a>
<a href="8.html" class="c2">标签8</a>
<a href="9.html" class="c1">标签9</a>
</div>
</body>
</html>