几个常用的css风格的页面简单用法介绍

最新推荐文章于 2024-03-24 23:15:19 发布

云焰

最新推荐文章于 2024-03-24 23:15:19 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/yan_dk/article/details/10728965

版权

介绍几个常用的页面风格的做法。

导航菜单式的风格

页面效果

页面源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE> New Document </TITLE>
<style type="text/css">
/*导航*/
.navlink{ height:40px; width:100%; background:url(images/navbg.png); position:relative;}
.navlink ul{ padding-left:0px; margin-left:20px;}
.navlink ul li{ float:left; line-height:44px; padding-left:20px;}
.navlink ul li a{ color:#ffffff; text-decoration:none; font-size:12px; display:block; height:40px; width:104px; text-align:center;}
.navlink ul li a:hover{background:url(images/navabg.png); }
.navlink span{ position:absolute; right:30px; top:14px; color:#ffffff; font-size:12px;}
</style>
</HEAD>

<BODY>
<div class="navlink">
<ul>
<li><a href="index.html" >首页</a></li>
<li><a href="satelliteinfo.html">资源介绍</a></li>
<li><a href="search.html">数据及产品查询</a></li>
<li><a href="成果展示.html">成果展示</a></li>
<li><a href="bzgf.html">标准及规范</a></li>
<li><a href="###">行业动态</a></li>
</ul>
<span>今天是2013年7月12日星期五！</span>
</div>
</BODY>
</HTML>