标题:网页整体的制作
只看楼主
WL2311296974
Rank: 1
来 自:安徽
等 级:新手上路
帖 子:37
专家分:7
注 册:2017-3-30
结帖率:90%
 问题点数:0 回复次数:1 
网页整体的制作
哪位大神帮忙解决一下下面几个问题,谢谢!!!!!!

1、最后那个footer的div没有显示在最低端
我是通过用<p>&nbsp;</p>这个让footer显示在最低端的,有没有什么其他的办法让footer显示在最低端

2、header的div的长度没有和container的对齐,不知道是什么原因。

3、还有#aside ul li{
    border-bottom:1px dashed #999;
    margin-left:25px;
    }
怎么实现dashed虚线的左右两边都有空隙留出来。

4、四张图片下面的文字如何写在图片下面,我是通过<p>&nbsp;</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">&nbsp;</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>&nbsp;</p></td>
      </tr>
      <tr>
        <td valign="top"><img src="images/2006720165232383.jpg" width="259" height="172" align="right">
<p>齿轮公司是一家专业生产经营机械配件 、轴承、链轮、托辊、电动滚筒、齿轮、齿条、连轴器等多种产品的厂家。公司现有各种系列各种形式的联轴器,同时可根据用户的不同要求进行非标准设计及制作。产品致力于: 冶金、矿用、塑料、纺织、造纸、印刷等机械传动配套,精心打造传动机械金子品牌。&nbsp;<br>
            企业宗旨:金轮传动,恒久稳定!总经理携全体员工欢迎各界朋友前来洽谈业务。<br>
          企业宗旨:金轮传动,恒久稳定!总经理携全体员工欢迎各界朋友前来洽谈业务。</p>
        <p>企业宗旨:金轮传动,恒久稳定!总经理携全体员工欢迎各界朋友前来洽谈业务。        </p>
        <p>&nbsp;</p>
        <p><img src="images/in03.jpg" width="587" height="40"></p>
        <p>&nbsp;</p>
        <p><img src="images/70.jpg" width="119" height="123"> &nbsp;&nbsp;&nbsp;&nbsp; <img src="images/60.jpg" width="126" height="125"> &nbsp;&nbsp;&nbsp;&nbsp;<img src="images/50.jpg" width="126" height="124"> &nbsp;&nbsp;&nbsp;&nbsp;<img src="images/40.jpg" width="129" height="123"></p>
        <p>&nbsp;</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;瓦盒&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;四螺拄斜滑动&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GZQ系列轴&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;四螺拄斜滑动</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系列轴承座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;承座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系列轴承座</p>
        <p>&nbsp;</p></td>
      </tr>
    </tbody>
  </table>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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;
}
搜索更多相关主题的帖子: 图片 footer 如何 制作 网页 
2017-06-18 01:59
plaodj
Rank: 1
来 自:湖南
等 级:新手上路
帖 子:15
专家分:0
注 册:2008-3-19
得分:0 
回复 楼主 WL2311296974
1.一个完整的div标签 不嵌套的话  每个div代表一行  你article 下面就是footer  都是设置了left浮动  那浏览器是解析成一行的   不管你上面那个div占多大地盘   你要在 article 再弄个div 清除left浮动  both:clear

2.你明显两个div的宽度 在css里面就设置了不同的数值  怎么会对其?

3.aside 是个父级div  你要设置这个div的宽度  在这个宽度里面计算  ul li 你还设置了margin-left  那还有li的宽度呢   不也要计算在里面  剩下的就是在右边的宽度了

4.用table tr td  或者div实现

www.yzqz.cn
2017-08-18 03:08



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-478694-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.026440 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved