网页整体制作
哪位大神帮忙解决一下下面几个问题,谢谢!!!!!!1、最后那个footer的div没有显示在最低端
我是通过用<p> </p>这个让footer显示在最低端的,有没有什么其他的办法让footer显示在最低端
2、header的div的长度没有和container的对齐,不知道是什么原因。
3、还有#aside ul li{
border-bottom:1px dashed #999;
margin-left:25px;
}
怎么实现dashed虚线的左右两边都有空隙留出来。
4、四张图片下面的文字如何写在图片下面,我是通过<p> </p>这个写在图片下面,有没有其他的方法。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
</div>
<div id="header">
<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 id="nav">
</div>
<div id="aside">
<div id="left1">
<form action="#">
<table>
<tr>
<td height="25" class="tdright">账号:</td>
<td height="25" class="tdleft"><input type="text" value="账号"></td>
</tr>
<tr>
<td height="25" class="tdright">密码:</td>
<td height="25" class="tdleft"><input type="text" value="密码"></td>
</tr>
<tr>
<td height="25" class="tdright"><input type="submit" value="提交"></td>
<td height="25" class="tdleft"><input type="reset" value="重置"></td>
</tr>
<tr>
<td height="25" class="tdleft">兴趣:</td>
<td height="25"><input type="checkbox">唱歌
<input type="checkbox">跳舞
<input type="checkbox">游泳</td>
</tr>
<tr>
<td height="25"><label for="">男</label><input type="radio" name="sex"></td>
<td height="25"><label for="">女</label><input type="radio" name="sex"></td>
</tr>
<tr>
<td height="25"> </td>
</tr>
</table>
<select name="select" id="select">
<option value="">选项</option>
<option value="">中国</option>
<option value="">安徽</option>
<option value="">芜湖</option>
<option value="">合肥</option>
</select>
</form>
</div>
<p>产品介绍</p>
<ul>
<li><a href="#">玩具齿轮</a></li>
<li><a href="#">钟表齿轮</a></li>
<li><a href="#">DVD齿轮</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 id="article">
<table cellspacing="0" cellpadding="0" width="585" border="0">
<tbody>
<tr>
<td align="middle" height="0"> </td>
</tr>
<tr>
<td><p><img src="images/in01.jpg" width="587" height="40"></p>
<p> </p></td>
</tr>
<tr>
<td valign="top"><img src="images/2006720165232383.jpg" width="259" height="172" align="right">
<p>齿轮公司是一家专业生产经营机械配件 、轴承、链轮、托辊、电动滚筒、齿轮、齿条、连轴器等多种产品的厂家。公司现有各种系列各种形式的联轴器,同时可根据用户的不同要求进行非标准设计及制作。产品致力于: 冶金、矿用、塑料、纺织、造纸、印刷等机械传动配套,精心打造传动机械金子品牌。 <br>
企业宗旨:金轮传动,恒久稳定!总经理携全体员工欢迎各界朋友前来洽谈业务。<br>
企业宗旨:金轮传动,恒久稳定!总经理携全体员工欢迎各界朋友前来洽谈业务。</p>
<p>企业宗旨:金轮传动,恒久稳定!总经理携全体员工欢迎各界朋友前来洽谈业务。 </p>
<p> </p>
<p><img src="images/in03.jpg" width="587" height="40"></p>
<p> </p>
<p><img src="images/70.jpg" width="119" height="123"> <img src="images/60.jpg" width="126" height="125"> <img src="images/50.jpg" width="126" height="124"> <img src="images/40.jpg" width="129" height="123"></p>
<p> </p>
<p> 瓦盒 四螺拄斜滑动 GZQ系列轴 四螺拄斜滑动</p>
<p> 系列轴承座 承座 系列轴承座</p>
<p> </p></td>
</tr>
</tbody>
</table>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="footer">
</div>
</body>
</html>
css:
@charset "utf-8";
*{margin:0;
padding:0;
}
#container{
width:780px;
height:87px;
background-image:url(images/top.jpg);
}
#header{
width:790px;
height:20px;
background-color:#FFF;
}
#nav{
width:780px;
height:156px;
background-image:url(images/1.jpg);
}
#aside{
width:192px;
height:610px;
background-color:#3FF;
float:left;
}
#aside p
{
font-family:隶书;
font-size:26px;
padding-left:55px;
border-bottom:1px dashed #999;
line-height:40px;
}
#aside ul li{
width:192px;
height:auto;
border-bottom:1px dashed #999;
background-color:#3FF;
font-family:隶书;
font-size:22px;
line-height::12px;
letter-spacing:3px;
margin-left:25px;
list-style:none;
}
#aside ul li a,#aside ul li a:link
{
display:block;
text-decoration:none;
}
#aside ul li a:hover
{
background:red;
}
#article{
width:588px;
height:610px;
background-color:#CCC;
float:left;
}
#footer{
width:780px;
height:100px;
background-image:url(images/jws020.gif);
float:left;
}
#header ul li
{
width:780px;
height:auto;
font-family:隶书;
font-size:20px;
list-style:none;
}
#header ul li a,#header ul li a:link
{
background:yellow;
border-bottom:1px solid blue;
text-decoration:none;
float:left;
padding-left:12px;
}
#header ul li a:hover
{float:left;
background-image:url(images/button_1.gif);
}
#left1
{
width:192px;
height:180px;
background-color:#3FF;
}
.text-left
{
font-size:13px;
}
.tdleft
{
font-size:14px;
text-align:left;
}
.tdright
{
font-size:14px;
text-align:right;
}