css的入门问题

dingyuanpu 2010-08-13 09:21:41
最近刚刚学习css 我从一个例子摘下一段css 是html的css是嵌套在html页面里面的 在Eclipse也正常 但是我把css代码写到css文件再在jsp里引用 这样整体的布局就不是剧中了 有谁碰到过这样的问题啊 帮忙解决下昂 邮箱angelboyzg@163.com
QQ63098776@qq.com 帮帮忙了
...全文
98 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
fengyuananan 2010-08-17
  • 打赏
  • 举报
回复
楼上正解
renlingjie 2010-08-16
  • 打赏
  • 举报
回复
楼主你的jsp里是否有如下情况:
1.标签未被关闭 如 <br> <hr>等
2.属性值未加双引号 ""
3.有些元素被不正确嵌套 形如 <a><b>naiyou</a></b>

html里用的是 XHTML DTD,而你的jsp里用的是 HTML DTD...不知道和这个有没有关系
dingyuanpu 2010-08-16
  • 打赏
  • 举报
回复
我靠 找到原因了
在html中用DW建立的html是这样的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在ecplice建立的jsp是这样的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

只要把html中的<!........>替换掉 jsp中的就可以了 纠结啊
dingyuanpu 2010-08-13
  • 打赏
  • 举报
回复
我好像是用的jsp的页面啊
darrenluo 2010-08-13
  • 打赏
  • 举报
回复
我试了 没问题啊 是居中的
taotao119 2010-08-13
  • 打赏
  • 举报
回复
style.css 代码
body {
background: #FFF;
font: 13px/1.5 Arial;
margin:0;
padding:0;
}

.rounded {
background: url(images/left-top.gif) top left no-repeat;
width:100%;
}
.rounded h2 {
background:
url(images/right-top.gif)
top right no-repeat;
padding:20px 20px 10px;
margin:0;

}
.rounded .main {
background:
url(images/right.gif)
top right repeat-y;
padding:10px 20px;
margin:-2em 0 0 0;
}
.rounded .footer {
background:
url(images/left-bottom.gif)
bottom left no-repeat;
}
.rounded .footer p {
color:#888;
text-align:right;
background:url(images/right-bottom.gif) bottom right no-repeat;
display:block;
padding:10px 20px 20px;
margin:-2em 0 0 0;
font:0/0;
}

#header,#pagefooter,#content{
margin:0 auto;
width:760px;}

html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1-1-1 布局固定宽度</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<LINK href="style.css" type=text/css rel=stylesheet>
</head>
<body>
<div id="header">
<div class="rounded">
<h2>Page Header</h2>
<div class="main">
<p>
这是一行文本,这里作为样例,显示在布局框中。<br/>
这是一行文本,这里作为样例,显示在布局框中。 </p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="content">
<div class="rounded">
<h2>Page Content</h2>
<div class="main">
<p>
这是一行文本,这里作为样例,显示在布局框中。<br />
这是一行文本,这里作为样例,显示在布局框中。
</p>
<p>
这是一行文本,这里作为样例,显示在布局框中。<br />
这是一行文本,这里作为样例,显示在布局框中。
</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="pagefooter">
<div class="rounded">
<h2>Page Footer</h2>
<div class="main">
<p>
这是一行文本,这里作为样例,显示在布局框中。
</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>

</body>
</html>
这个是可以正常的代码
dingyuanpu 2010-08-13
  • 打赏
  • 举报
回复
body {
background: #FFF;
font: 13px/1.5 Arial;
margin:0;
padding:0;
}

.rounded {
background: url(images/left-top.gif) top left no-repeat;
width:100%;
}
.rounded h2 {
background:
url(images/right-top.gif)
top right no-repeat;
padding:20px 20px 10px;
margin:0;

}
.rounded .main {
background:
url(images/right.gif)
top right repeat-y;
padding:10px 20px;
margin:-2em 0 0 0;
}
.rounded .footer {
background:
url(images/left-bottom.gif)
bottom left no-repeat;
}
.rounded .footer p {
color:#888;
text-align:right;
background:url(images/right-bottom.gif) bottom right no-repeat;
display:block;
padding:10px 20px 20px;
margin:-2em 0 0 0;
font:0/0;
}

#header,#pagefooter,#content{
margin:0 auto;
width:760px;}

我把里面的 有关于css 弄出来 另写了个css文件 在<link rel="stylesheet" rev="stylesheet" href="css/css.css" type="text/css" media="all" /> 其他的代码什么都没动
dingyuanpu 2010-08-13
  • 打赏
  • 举报
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1-1-1 布局固定宽度</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
body {
background: #FFF;
font: 13px/1.5 Arial;
margin:0;
padding:0;
}

.rounded {
background: url(images/left-top.gif) top left no-repeat;
width:100%;
}
.rounded h2 {
background:
url(images/right-top.gif)
top right no-repeat;
padding:20px 20px 10px;
margin:0;

}
.rounded .main {
background:
url(images/right.gif)
top right repeat-y;
padding:10px 20px;
margin:-2em 0 0 0;
}
.rounded .footer {
background:
url(images/left-bottom.gif)
bottom left no-repeat;
}
.rounded .footer p {
color:#888;
text-align:right;
background:url(images/right-bottom.gif) bottom right no-repeat;
display:block;
padding:10px 20px 20px;
margin:-2em 0 0 0;
font:0/0;
}

#header,#pagefooter,#content{
margin:0 auto;
width:760px;}



</style>
</head>
<body>
<div id="header">
<div class="rounded">
<h2>Page Header</h2>
<div class="main">
<p>
这是一行文本,这里作为样例,显示在布局框中。<br/>
这是一行文本,这里作为样例,显示在布局框中。 </p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="content">
<div class="rounded">
<h2>Page Content</h2>
<div class="main">
<p>
这是一行文本,这里作为样例,显示在布局框中。<br />
这是一行文本,这里作为样例,显示在布局框中。
</p>
<p>
这是一行文本,这里作为样例,显示在布局框中。<br />
这是一行文本,这里作为样例,显示在布局框中。
</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="pagefooter">
<div class="rounded">
<h2>Page Footer</h2>
<div class="main">
<p>
这是一行文本,这里作为样例,显示在布局框中。
</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>

</body>
</html>
这个是可以正常的代码
chuchuzinnia 2010-08-13
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 darrenluo 的回复:]
贴代码吧
[/Quote]
darrenluo 2010-08-13
  • 打赏
  • 举报
回复
贴代码吧

81,090

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧