如何将我的侧栏菜单准确定位在我想要的位置?

时间:2016-04-21 18:26:41

标签: html css

大家好!
我对这个网站和HTML很新...我想建立自己的网站,但由于我没有太多关于HTML的经验和知识,我需要帮助。 我想要一个像这个网站http://crichd.in/live/上的侧栏菜单。有人能帮我吗?另外,我想在网站的左上方看到IPL T20文本。在网站上,侧栏菜单和表位于一个div框内。正如我所说,我非常高兴:|。

此外,最后一个表格内容“壁纸”有点太大了...我为它设置了自定义尺寸,但它仍然比其他框大。有人也可以解决这个问题吗?

 <html>
    <title>IPLRADAR</TITLE>
    <head>
    <style>
    #cssmenu {
      background: #333;
      list-style: none;
      margin: 0;
      padding: 0;
      width: 12em;
    }
    #cssmenu li {
      font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet      Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #cssmenu a {
      background: #333;
      border-bottom: 1px solid #393939;
      color: #ccc;
      display: block;
      margin: 0;
      padding: 8px 12px;
       text-decoration: none;
      font-weight: normal;
    }
    #cssmenu a:hover {

    background: #2580a2 url("images/hover.gif") left center no-repeat;
      color: #fff;
      padding-bottom: 8px;
    }

    </style>
    <style>
    body {
        background-color: #C0C0C0;
    }
    </style>
    <style>
    table, th, td { 
           border: 1px solid #CFD9BB;
    background: #E5E5E5;
    table-layout: fixed;

     </style>

<style> 
.div1 {
    width: 500px;
    height: 750px;
    border: 2px solid black; 
    background: #CFD9BB
}
</style>
<style> 
.div2 {
    width: 50px;
    height: 50px;
    border: 0px solid black; 
    background: #F2F2F2
}
</style>
</head>
<body>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>Company</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
<center>

<table>
<tr>
<th style="background-color: #808080" width="500px">
<h3><font size="5" COLOR="blue" face="verdana">IPL</font><Font size ="5" color="white" face="verdana">T20</font></h3>
<div style="position: relative; top: -20px; left: 5px; margin: 0; padding: 0; text-decoration: none; "><i>Free streams and news</i></th>
</tr></table>
<table>
<tr>
<td height="25px" width="500px" style="background-color: #F2F2F2; color:white;text-align:center">
<p><a href="stream.html"><font face ="verdana">Watch match (Stream)</a></font>
</td>
</tr>
<td height="25px" width="500px" style="background-color: #F2F2F2; color:white;text-align:center">
<p><a href="fixtures.html"><font face ="verdana">Fixtures this week</a></font>
</tr></td>
<tr style=" height:25px"><td height="25px" width="500px" style="background-color: #F2F2F2; color:white;text-align:center">
<p><a href="..."><font face="verdana">Wallpapers</a></font> <font size="0,5" color ="red"><div style="position: relative; top: -37px; left: 55px; margin: 0; padding: 0; text-decoration: none; ">BETA</font>
</tr></td>
</table>

0 个答案:

没有答案