xiaoermingn
TowYingWang
采纳率0%
2015-10-28 15:33

IIS,用localhost打开HTML文件的问题

10

我写了一个index1.html的文件,直接双击文件打开是正常的,但是如果在浏览器输入localhost/index1.html的话,网页能正常打开,但是布局就会改变,网页中的表格移到外面了。IIS中的路径也是对的。刚学css,不知道是不是要加什么代码。下面是html文件的代码。

 <!DOCTYPE html>
<html>
<head>
<title>首页</title>
<style type="text/css">

body
{
margin:0px;
background-image:url(images/6.jpg);
}
/* 定义容器container,把所有div都放到container中 */
#container
{
position:relative;
width:1200px;
height:2000px;
background-color:white;
margin:0 auto;
}
/* 左右花边 */
#leftdec
{
position:absolute;
width:35px;
height:2000px;
background-image:url(images/9.jpg);
background-color:white;
background-position:left;
background-repeat:repeat-y;
margin-left:0px;
}
#rightdec
{
position:absolute;
width:35px;
height:2000px;
background-image:url(images/10.jpg);
background-color:white;
background-position:right;
background-repeat:repeat-y;
margin-left:1165px;
}
/* 主界面,将所有内容都放在main中 */
#main
{
position:absolute;
width:1130px;
height:2000px;
background-color:white;
margin-left:35px;
}
/* 页头装饰 */
#head
{
position:absolute;
width:1130px;
height:100px;
background-image:url(images/7.jpg);
top:0px;
}
/* 页脚装饰 */
#foot
{
position:absolute;
width:1130px;
height:100px;
background-image:url(images/8.jpg);
bottom:0px;
}
/* 四个女孩图片 */
#pic1
{
width:600px;
height:400px;
margin-top:200px;
margin-left:265px;
}
/* 带文字图片 */
#pic2
{
width:420px;
height:200px;
margin-top:100px;
margin-left:355px;
}
/* 圆形小人图片 */
#baby1
{
width:155px;
height:155px;
margin-top:100px;
margin-left:180px;
float:left;
}
#baby2
{
width:155px;
height:155px;
margin-top:100px;
margin-left:50px;
float:left;
}
#baby3
{
width:155px;
height:155px;
margin-top:100px;
margin-left:50px;
float:left;
}
#baby4
{
width:155px;
height:155px;
margin-top:100px;
margin-left:50px;
float:left;
}
/* 小人下方文字链接 */
#word
{
width:820px;
height:100px;
margin-top:0px;
margin-left:155px;
font-family:"华文行楷";
font-size:x-large;
color:black;
}
</style>
</head>
<body>
<div id="container">
<div id="leftdec"></div>

<div id="main">
<div id="head"></div>
<div id="pic1"><img src="images/5.jpg"/></div>
<div id="pic2"><img src="images/11.jpg"/></div>

<div id="baby1"><img src="images/1.jpg"/></div>
<div id="baby2"><img src="images/2.jpg"/></div>
<div id="baby3"><img src="images/3.jpg"/></div>
<div id="baby4"><img src="images/4.jpg"/></div>

<div id="word">
<table width="820px" height="90px">

<tr align="center" valign="center">
<td width="205px" height="20px">基本资料</td>
<td width="205px" height="20px">技能爱好</td>
<td width="205px" height="20px">学习经历</td>
<td width="205px" height="20px">个人评价</td>
</tr>
</table>
</div>

<div id="foot"></div>
</div><!-- end #main -->

<div id="rightdec"></div>

</div><!-- end #container -->

</body>
</html>

正常显示(直接双击显示)
图片说明

错误显示,红色箭头位置(用localhost打开)
图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • caozhy 从今以后生命中的每一秒都属于我爱的人 6年前

    换一个浏览器先看下,比如用google chrome。不排除你的计算机上有流氓软件,会在你加载html的时候注入一些脚本,导致问题。你可以用IE F12看下css。

    点赞 2 评论 复制链接分享
  • OMGCockroach OMGCockroach 6年前

    图文并茂的布局方式可以用dl dt dd,在页面布局的时候可以多用几款浏览器测试一下

    点赞 评论 复制链接分享
  • qq_17846583 小王正在学习中 6年前

    换个浏览器试试图片说明

    点赞 评论 复制链接分享
  • qq_31749413 Eenny 6年前

    换一个浏览器先看下,比如用google chrome。

    点赞 评论 复制链接分享

相关推荐