html+css主页页眉实现
Posted yayun0516
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html+css主页页眉实现相关的知识，希望对你有一定的参考价值。
.html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>512义工新闻</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="page">
<div class="banner"></div>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">义工新闻</a></li>
<li><a href="">义工之家</a></li>
<li><a 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="log">
<marquee width="460px" height="25px" scrollamount="1" direction="left" scrolldelay="10">招募公告：</marquee>
<span class="login">
<form>
<label>用户名:</label><input type="text" class="input1"/>
<label>密码:</label><input type="password" class="input1"/>
<input type="submit" value="登陆"/>
</form>
</span>
</div>
</div>
<div >
</div>
<div></div>
</body>
</html>
.css代码如下：
body
margin:0;
font-size:12px;
background:#c9c9c9;
.page
width:835px;
margin:0 auto;
.banner
height:172px;
background:url(../images/page_02.jpg);
.nav
<span style="color:#ff0000;">height:35px;</span>
background:url(../images/page_04.gif);
margin-top:-17px;
.nav ul
list-style:none;
font-size:14px;
color:#fff;
.nav ul li
float:left;
width:80px;
text-align:center;
<span style="color:#ff0000;">line-height:35px;/*可以使字体垂直居中*/</span>
.nav ul li a
color:#fff;
text-decoration:none;
.nav ul li a:hover
text-decoration:underline;
color:#fba;
.log
<span style="color:#ff0000;">height:25px;</span>
.input1
width:100px;
.login
float:right;
marquee
<span style="color:#ff0000;">line-height:25px;</span><span style="color: rgb(255, 0, 0); font-family: Arial, Helvetica, sans-serif;">/*可以使字体垂直居中*/</span><span style="color:#ff0000;">
</span>
page_02下图：
page_04下图：
以上是关于html+css主页页眉实现的主要内容，如果未能解决你的问题，请参考以下文章
带有侧导航和内容区域的 CSS3/HTML5 粘性页眉/页脚
如何从 Webpack 4 中的页眉/页脚（和 css/js 注入）生成静态页面的 html 模板（lodash 模板不起作用）？