一超链接样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
a{
width: 200px;
height: 80px;
line-height: 80px;
font-size: 18px;
text-align: center;
background-color: #3064bb;
display: block;
text-decoration: none;
color: white;
}
a:hover{
width: 200px;
height: 80px;
background-color: rgb(192, 191, 174);
}
</style>
<body>
<a href="#">HTMLL</a >
<a href="#">CSS</a>
<a href="#">JAVASCRIP</a>
<a href="#">Vue</a>
<a href="#">Reate</a>
</body>
</html>
效果样式
二、报名界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>222</title>
</head><style>
/* 大盒子 */
.baner{
background-image: url(./bk.png);
height: 500px;
/* 高默认铺平整个屏幕 */
/* 背景图不平铺 */
background-repeat: no-repeat;
background-color: #f3f3f4;
/* 背景图位置 */
background-position: left bottom;
/* 继承子类 h1 p a 继承。行内元素居右*/
text-align: right;
}
.baner h1{
font-size: 36px;
font-weight: 400;
/* 行内居中 */
line-height: 100px;
}
.baner p{
font-size: 20px;
}
/* a既又盒子属性,有背景图,比字体大,用block,又能改变行内位置用inline */
.baner a{
width: 125px;
height: 40px;
/* 块元素不能改变位置, */
/* display: block; */
display: inline-block;
line-height: 40px;
text-decoration: none;
text-align: center;
color: black;
background-color: orange;
}
a:hover{
color: aliceblue;
}
</style>
<body>
<div class="baner"><h1>让创造产生价值</h1>
<p>我们希望小游戏平台可以提供无限的可能性,让每一个创作者都可以将他们的才华和创意传递给用户。</p>
<a href="#">我要报名</a></div>
</body>
</html>
效果界面
总结
可常练习,综合性很强!