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

分手后的思念是犯贱 2023-02-25 08:50 3阅读 0赞

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

## 导航菜单式的风格 ##

##   页面效果 ##

![Center][]

## 页面源码 ##

<table> 
 <tbody> 
  <tr> 
   <td>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br> &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br> &nbsp;&lt;HEAD&gt;<br> &nbsp; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;<br> &nbsp; &lt;TITLE&gt; New Document &lt;/TITLE&gt;<br> &lt;style type="text/css"&gt;<br> /*导航*/<br> .navlink{ height:40px; width:100%; background:url(images/navbg.png); position:relative;}<br> .navlink ul{ padding-left:0px; margin-left:20px;}<br> .navlink ul li{ float:left; line-height:44px; padding-left:20px;}<br> .navlink ul li a{ color:#ffffff; text-decoration:none; font-size:12px; &nbsp;display:block; height:40px; width:104px; text-align:center;}<br> .navlink ul li a:hover{background:url(images/navabg.png); }<br> .navlink span{ position:absolute; right:30px; top:14px; color:#ffffff; font-size:12px;}<br> &lt;/style&gt;<br> &nbsp;&lt;/HEAD&gt;<br> <br> <br> &nbsp;&lt;BODY&gt;<br> &nbsp; &lt;div class="navlink"&gt;<br> &nbsp; &nbsp; &nbsp; &lt;ul&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href="index.html" &gt;首页&lt;/a&gt;&lt;/li&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href="satelliteinfo.html"&gt;资源介绍&lt;/a&gt;&lt;/li&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href="search.html"&gt;数据及产品查询&lt;/a&gt;&lt;/li&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href="成果展示.html"&gt;成果展示&lt;/a&gt;&lt;/li&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href="bzgf.html"&gt;标准及规范&lt;/a&gt;&lt;/li&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href="###"&gt;行业动态&lt;/a&gt;&lt;/li&gt;<br> &nbsp; &nbsp; &nbsp; &lt;/ul&gt;<br> &nbsp; &nbsp; &lt;span&gt;今天是2013年7月12日 星期五！&lt;/span&gt;<br> &nbsp; &lt;/div&gt;<br> &nbsp;&lt;/BODY&gt;<br> &lt;/HTML&gt;</td> 
  </tr> 
 </tbody> 
</table>

# tab标签风格 #

## 页面效果 ##

## 页面源码 ##

[Center]: /images/20230209/28b580ea0cf04217bb41d678a073975c.png