0 0

html显示排版问题5

html文件直接打开排版没问题,放在tomcat下用ie打开排版就乱了,用谷歌打开没问题,在tomcat目录下打开也没问题。请问这是什么情况。

 

 

<!DOCTYPE HTML>

<!--
 Ex Machina: A responsive HTML5 website template collect from www.cssmoban.com
 Released for free under the Creative Commons Attribution 3.0 license
 Visit for more great templates or follow us on Twitter @HTML5T
-->

<html>
<head>
<title>文峰社区 幸福温馨社区典范</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="../../css/5grid/core.css" />
<link rel="stylesheet" href="../../css/5grid/core-desktop.css" />
<link rel="stylesheet" href="../../css/5grid/core-1200px.css" />
<link rel="stylesheet" href="../../css/5grid/core-noscript.css" />
<link rel="stylesheet" href="../../css/style3.css" />
<link rel="stylesheet" href="../../css/style-desktop.css" />
<script src="../../css/5grid/jquery.js"></script>
<script src="../../css/5grid/init.js?use=mobile,desktop,1000px&amp;mobileUI=1&amp;mobileUI.theme=none"></script>
<!--[if IE 9]><link rel="stylesheet" href="../../css/style-ie9.css" /><![endif]-->
</head><body class="homepage">
<div id="header-wrapper">
 <header id="header">
  <div class="5grid-layout">
   <div class="row">
    <div class="4u" id="logo">
     <h1><a href="#" class="mobileUI-site-name">文峰社区</a></h1>
     <p>幸福温馨社区典范</p>
    </div>
    <div class="8u" id="menu">
     <nav class="mobileUI-site-nav">
      <ul>
       <li class="current_page_item"><a href="index.html">主页</a></li>
       <li><a href="threecolumn.html">特产推荐</a></li>
       <li><a href="twocolumn1.html">视频图册</a></li>
       <li><a href="twocolumn2.html">旅游推荐</a></li>
       <li><a href="onecolumn.html">社区简介</a></li>
      </ul>
     </nav>
    </div>
   </div>
  </div>
 </header>
</div>
<div class="5grid-layout">
 <div class="row">
  <div id="banner" class="12u">
   <div class="container"><a href="#"><img src="../../images/pics01.jpg" alt=""></a></div>
  </div>
 </div>
</div>
<div id="wrapper">
 <div id="marketing">
  <div class="5grid-layout">
   <div class="row divider">
    <div class="3u">
     <section>
      <h2 class="title">社区简介</h2>
      <p class="subtitle">文峰社区被称为蘑菇之村,本村80%以上居民都有种植蘑菇,形成极具规模的蘑菇种植基地.</p>
      <p><a href="#"><img src="images/pics13.jpg" alt=""></a></p>
      <p class="button-style2"><a href="#">详 情 </a></p>
     </section>
    </div>
    <div class="3u">
     <section>
      <h2 class="title">社区纪事</h2>
      <p class="subtitle">每年农历3月22日,妈祖诞辰是全社区最热闹的时候,望妈祖保佑来年风调雨顺. </p>
      <p><a href="#"><img src="images/pics14.jpg" alt=""></a></p>
      <p class="button-style2"><a href="#">详 情 </a></p>
     </section>
    </div>
    <div class="3u">
     <section>
      <h2 class="title">休闲文化</h2>
      <p class="subtitle">社区建有篮球场,气排球,乒乓球场等体育运动场,以及居民自发组建的武术馆. </p>
      <p><a href="#"><img src="images/pics15.jpg" alt=""></a></p>
      <p class="button-style2"><a href="#">详 情 </a></p>
     </section>
    </div>
    <div class="3u">
     <section>
      <h2 class="title">政府公告</h2>
      <p class="subtitle">贯彻落实党政工作,正确实施政府的领导方针,全心全意卫人民服务,带领全社区发家致富.</p>
      <p><a href="#"><img src="images/pics16.jpg" alt=""></a></p>
      <p class="button-style2"><a href="#">详 情 </a></p>
     </section>
    </div>
   </div>
  </div>
 </div>
</div>
<div id="featured-area">
 <div class="5grid-layout">
    <!--
  <div class="row divider">
   <div class="4u">
    <section>
     <div class="box-style"> <a href="#"><img src="images/pics04.jpg" alt=""></a>
      <h3>Etiam posuere augue</h3>
      <p>Donec nonummy magna quis risus. Quisque eleifend. </p>
      <p class="button-style2"><a href="#">More</a></p>
     </div>
    </section>
   </div>
   <div class="4u">
    <section>
     <div class="box-style"> <a href="#"><img src="images/pics06.jpg" alt=""></a>
      <h3>Etiam posuere augue</h3>
      <p>Donec nonummy magna quis risus. Quisque eleifend. </p>
      <p class="button-style2"><a href="#">More</a></p>
     </div>
    </section>
   </div>
   <div class="4u">
    <section>
     <div class="box-style"> <a href="#"><img src="images/pics05.jpg" alt=""></a>
      <h3>Etiam posuere augue</h3>
      <p>Donec nonummy magna quis risus. Quisque eleifend. </p>
      <p class="button-style2"><a href="#">More</a></p>
     </div>
    </section>
   </div>
  </div>
 </div>
     -->
</div>
<div id="footer-wrapper">
</div>
<div>
 <div class="5grid-layout" id="copyright">
  <div class="row">
   <div class="12u">
    <p>&copy;幸福文峰社区|作者: <a href="#">林育池</a> | 微博: <a href="http://weibo.com/u/2048694594" title="新浪微博">MR.淋浴池</a></p>
   </div>
  </div>
 </div>
</div>
</body>
</html>

2013年4月23日 11:30
  • 大小: 26.1 KB

5个答案 按时间排序 按投票排序

0 0

1、你用的ie是哪个本版。
2、css样式在ie6、ie7、ie8和其他浏览器中样式可能不一样。需要进行修改css样式兼容各浏览器.

2013年4月27日 11:59
0 0

<link rel="stylesheet" href="../../css/5grid/core-1200px.css" />
<img src="images/pics05.jpg" alt="">
这里的文件引用是相对的,这样很容易出现问题,最好是修改为绝对路径

<%=request.getContextPath()%>/css/5grid/core-1200px.css
<img src="<%=request.getContextPath()%>/images/pics05.jpg" alt="">

这样就不会出现问题

2013年4月23日 14:46
0 0

原来的路径是你文件夹相对路径,在tomcat容器中使用时,你的路径发生了变化,就需要根据具体情况得到相对路径来使用

2013年4月23日 13:05
0 0

确认一下css的路径

2013年4月23日 12:53
0 0

应该是引入CSS样式表文件时的路径问题。

最好写绝对路径,比如JSP下最好这么写:
<%=request.getContextPath()%>/css/5grid/core.css

如果只能写静态html的话,把相对路径改一下

2013年4月23日 12:19

相关推荐

    html5响应式排版点击页面三折页展开收缩显示特效

    html5响应式排版点击页面三折页展开收缩显示特效 html5响应式排版点击页面三折页展开收缩显示特效

    HTML print打印(分页,统计,排版)

    * loadDate data,model,shownum(数据源[数组],模板页面,每页显示数) data 建议最大数据量不要超过500 * loadTABLE 利用模版创建TABLE代码 * insertTABLE 插入数据 * formwork 创建分页框架 * setAlign ...

    html的原生解析与排版资源

    解析HTML使用富文本显示,显示文字效果更好,原生样式,字体等可以调节

    HTML参考大全word格式

    常见问题: * 如果编写完了 HTML 文件但是不能在浏览器中看见结果,可能是保存文件时使用了错误的文件名或扩展名。 * 如果编辑了 HTML 文件但是修改结果并没有在浏览器中显示,可能是浏览器缓存了页面,需要使用...

    排版软件 PageMake6.5

    安装PageMaker 6.5的最小系统要求: Intel 486 处理器,Windows 95/NT 4.0操作系统,VGA显示卡,光盘(CD-ROM)驱动器及3.5寸软驱。 安装的内存为:在Windows 95上给PageMaker分配8MB内存,在Windows NT 4.0上则要...

    HTML5 + CSS3 制作的图文并茂页面

    HTML5和CSS3制作的展示类页面,使用了HTML5及CSS3的新标签和特性,页面图文并茂。兼容IE9+、Chrome、Firefox等主流浏览器;页面兼容不同分辨率的屏幕。包含一个html文件,四个css文件,一个js文件及若干图片。由于...

    css+html做的股票页面

    css+html做的股票页面,便于初学者进行学习!

    班车时刻表移动端 实现div点击显示/隐藏.html

    html css 编写的移动端时刻表代码,纵向排列,卡片形式,点击车程在下方显示出详细路线,避免了页面跳转加载缓慢问题,点击一个div显示/隐藏另一个div,排版简洁大方,蓝白配色

    HTML 个人信息/个人简历页面(静态)

    这是我大学时候的一次Web前端开发的课程作业。 内容是关于个人信息的展示页面,主要使用了css+div,界面比较美观。 没有积分的可以私聊我或者评论,留下邮箱,私发给你。

    HypertextTypographer::memo: 突出显示并修复网页排版中可能存在的编码问题

    相反,它旨在仅阻止令人沮丧且难以发现的排版问题。 检测到什么? “Smart”或“Typographers”引号( “ , ” , ' , ' ) 水平椭圆 ( … ) 破折号 ( ‒ , – , — , ― ) 分数 ( ½ , ¼ , ¾ ) 什么没有检测...

    Html题目问题已经答案完整版

    浏览器下载数据后解析HTML源文件,解析的过程中实现对页面的排版,解析完成后在浏览器中显示基础页面; 7).分析页面中的超链接并显示在当前页面,重复以上过程直至无超链接需要发送,完成全部显示。 2.DOCTYPE声明...

    HTML初识基础认知 + HTML标签

    HTML初识基础认知是学习HTML标签的基础,理解HTML的基本语法和标签的关系,能够使用排版标签实现网页中的标题、段落等效果,使用相对路径选择不同目录下的文件,使用媒体标签在网页中显示图片、播放音频和视频,使用...

    html5全屏可拖拽的横向图片布局.zip

    html5基于TweenMax来制作拖拽图片预览动画特效。拖拽效果使用的是Draggabilly插件。这是一款html5和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布,可以通过鼠标前后拖拽图片。当点击图片...

    html5快捷键

    可以详细的查看关于Html5的各种快捷输入方法,按Tab显示

    仿魅族官网完整源码(html+cssl+JavaScript)

     实现响应式布局,确保页面在不同设备上的正常显示和良好用户体验。  使用原生JavaScript完成轮播图、关联滚动等交互功能,提升页面的动态效果。  根据页面设计图精确还原页面的样式和布局,保持页面的一致性...

    《脑动力 html+css标签速查效率手册》.(刘丽霞)

     《脑动力:HTMLCSS标签速查效率手册》共分18章,前10章主要介绍了HTML标签和相关属性,包括文字、排版、列表、超链接、多媒体、表格、表单、框架等知识点。后8章介绍了CSS属性的详细用法和示例代码,包括文本显示...

    html+css考试题.docx

    在 HTML 中,标记 &lt;pre&gt; 的作用是预排版标记,用于在网页中显示预格式化的文本。 26.下面不属于 CSS 插入形式的是( A ).A.索引式B.联式C.嵌入式D.外部式 知识点:CSS 插入形式 在 CSS 中,不属于插入形式的是...

    网页排版应该考虑IE6的兼容性问题

    网页排版应该考虑IE6的兼容性问题 网页排版是网页设计中非常重要的一步,但是,如果不考虑IE6的兼容性问题,可能会导致很多用户无法正常访问网站。IE6仍然是许多用户所喜欢的浏览器,占据着浏览器市场的40%以上份额...

    掌握HTML标记的常用标记 了解XML的作用 xml 课件

    事实上每一个HTML文档都是一种静态的网页文件,这个文件里面包含了HTML指令代码,严格来说这些指令代码并不是一种程序语言,它只是一种排版网页中资料显示位置的标记结构语言,易学易懂,非常简单。HTML的普遍应用...

Global site tag (gtag.js) - Google Analytics