网页设计-小结

最新推荐文章于 2021-06-05 05:44:52 发布

pioayang

最新推荐文章于 2021-06-05 05:44:52 发布

阅读量739

点赞数

CC 4.0 BY-SA版权

分类专栏： jsp 文章标签： javaEE 网页设计布局 ajax jsp

本文链接：https://blog.youkuaiyun.com/pioayang/article/details/19540055

jsp 专栏收录该内容

6 篇文章

订阅专栏

本文讨论了从frame布局转换为div布局时遇到的问题，特别是如何在多个div中进行跳转。同时，提供了避免使用frame的方法，并介绍了将html转换为jsp时字体大小不一致的解决策略。通过案例分析，详细解释了布局调整、样式控制和脚本管理的技巧，以确保网页在不同浏览器和环境下的一致性呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 div布局代替frame布局后该如何跳转

a 在多个div中<%request.getRequestDispatcher("xxxx.action").forword()%>

b 1)如果想避免使用frame，可以把你的菜单单独放到一个jsp里，然后其它的各个页面去include这个jsp，在各jsp通过脚本控制菜单的显示。
2)再者就是使用模板语言替代jsp
3)再者就是用ajax请求，返回结果后重构dom，
4)如果dom不大的话，也可以一次性加载，然后通过dispaly来控制显示问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>test</title>
<style type="text/css">
html,body{
overflow:hidden;
height:100%;
margin:0;
padding:0;
font:14px/1.8 Georgia, Arial, Simsun;
}
html{
_padding:110px 0;
}
#hd{
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
background:#999;
}
#bd{
position:absolute;
top:110px;
right:0;
bottom:110px;
left:0;
overflow:hidden;
width:100%;
_height:100%;
}
#side{
position:absolute;
top:0;
left:0;
bottom:0;
overflow:auto;
width:200px;
_height:100%;
background:#666;
}
#main{
position:absolute;
_position:static;
top:0;
right:0;
bottom:0;
left:210px;
overflow:auto;
_overflow:hidden;
_height:100%;
_margin-left:210px;
background:#666;
}
#content{
_overflow:auto;
_width:100%;
_height:100%;
}
#ft{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100px;
background:#999;
}
/* 与布局无关，一些说明性内容样式 */
.tit-layout{margin:30px 0 0;font-size:18px;text-align:center;}
.copyright{font-weight:bold;text-align:center;}
#feature{width:200%;line-height:4;}
#feature .hd{padding:20px 15px;}
#feature .hd h2{margin:0;font-size:16px;}
#feature .bd ol{margin-top:0;}
#feature .bd h3{margin:0;padding:0 15px;font-size:14px;}
#feature .ft{padding:10px 15px 30px;}
</style>
</head>
<body>
<div id="hd">
<h1 class="tit-layout">div仿框架布局之典型的两栏布局Version2.0（Private）</h1>
</div>
<div id="bd">
<div id="side">侧边栏</div>
<div id="main">
<div id="content">
<div id="feature" class="feature">
<div class="hd">
<h2>div仿框架布局Version2.0的特征：</h2>
<span>update: 2008.09.22</span>
</div>
<div class="bd">
<h3>优点：</h3>
<ol>
<li>以div代替frameset，用css实现仿框架布局</li>
<li>在web标准模式Standard Mode下运行</li>
<li>兼容IE6,7,8; Firefox; Chrome; Safari; Opera浏览器，没被列入的浏览器未测试</li>
<li>内容栏区域可以允许出现宽为100%或超100%的元素，如：
<p><div class="main"><div style="width:100%;"></div></div></p>
<p><div class="main"><iframe style="width:100%;"></iframe></div></p>
</li>
<li>适用于：后台；邮箱等地方</li>
</ol>
</div>
<div class="ft">
<a href="http://blog.doyoe.com/" title="去css探索之旅浏览更多div布局文章">More</a>
</div>
</div>
</div>
</div>
</div>
<div id="ft">
<address class="copyright">Copyright © <a href="http://blog.doyoe.com/">doyoe.com</a></address>
</div>
</body>
</html>

二 html 变成 jsp，字体大小不一样

1 jsp头引入要改变

<%@page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

2 引入的css，js 路径需要修改