主要是将一张图片一网页的显示展现出来以练习HTML5中基本样式的学习，先是图片头部的一些设计~
505.html
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>505教室</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<a class="logo" href="#"></a>
<div class="nav">
<ul>
<li><a class="active" href="">首页</a></li>
<li><a href="">专题</a></li>
<li><a href="">创新科技</a></li>
<li><a href="">学堂在线</a></li>
<li><a href="">论坛</a></li>
</ul>
</div>
<div class="login">
<a class="back1" href="#">注册</a>
<a class="back2" href="#">登录</a>
</div>
<div class="clear"></div>
<div class="div1"></div>
</header>
<!-- <footer>
版权所有983249284098009809809809809
</footer> -->
</body>
</html>
style.css
@charset "utf-8";
html , body , header , a , ul , li {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
.clear {
clear: both;
}
header {
height: 104px;
background: #40485f;
}
.logo {
background: url(../image/logo.png);
height: 60px;
width: 144px;
display: block;
margin-top:5px;
margin-left: 70px;
float: left;
}
.login {
float: right;
margin-top: 16px;
margin-right: 64px;
}
.login a {
height: 42px;
width: 74px;
display: block;
color: #fff;
float: left;
line-height: 42px;
text-align: center;
text-decoration: none;
}
.back1 {
background: #20B5F5;
}
.back2 {
background: #FE8500;
margin-left: 20px;
}
.nav {
float: left;
margin-left: 125px;
}
.nav ul li {
float: left;
}
.nav ul li a {
color: #fff;
font-size: 14px;
text-decoration: none;
display: block;
height: 74px;
line-height: 74px;
padding: 0 25px;
text-align: center;
}
.nav ul li a:hover , .active {
background: #013057;
}
footer {
height: 30px;
background: #000;
color: #fff;
}
.div1 {
height: 30px;
background: red;
}
运行效果：
时间： 2024-10-12 18:48:09