div里面的

标记为什么会跑到div的外面

yibajian0607 2011-12-01 09:50:19
<!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>
<style type="text/css">
*{ font-family:"微软雅黑";
line-height:1.5;
background-color:#CCCCCC;}
li{ list-style:none;
float:left;
padding:8px;}
ul{ margin:0 auto;
padding:0;}
a{ text-decoration:none;
color:#FF6600;
font-size:18px;}
a:hover{ background-color:#FFFFFF;}
.hr{ color:#FF6600; width:100%; height:3px; position:absolute; top:24px;}
.img{ position:absolute;
top:0px; left:200px;}
.div{ height:20px;
width:1000px;
margin:3px auto;
position:relative; }
.div1{ clear:both;}
.div2{ height:360px;
width:200px;
background-color:#FFFFFF;
margin:60px;}
.heater{ font-size:20px;
font-weight:600;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div class="div">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">淘宝商城</a></li>
<img class="img" src="../images/a.gif" />
<li><a href="#">聚划算</a></li>
<li><a href="#">电器城</a></li>
<li><a href="#">良无限</a></li>
<li><a href="#">吃喝玩乐</a></li>
<li><a href="#">HiTao装扮</a></li>
<li><a href="#">影视书城</a></li>
<li><a href="#">一淘网</a></li>
<img src="../images/b.gif" />
<li><a href="#">VIP专区</a></li>
<li><a href="#">我的保障</a></li>

</ul>
</div>
<div class="div1"></div>
<div class="div2">
<p>淘宝服务</p>

</div>
</body>
</html>
...全文
671 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
去圣西罗-为尤文喝彩 2011-12-02
  • 打赏
  • 举报
 回复
.div2{overflow:hidden;}
小韩 2011-12-02
  • 打赏
  • 举报
 回复

这是完整代码！


<!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>

<style type="text/css">

/*body是针对该页面的属性进行样式设置，你对它进行背景设置 只对页面的背景产生影响，不会对其他标签有反应，而你*是通配符，你给它设置了样式 是所有的标签都会继承它的样式！所以建议楼主以后设置样式尽量可以不选用*通配符来！*/

body{ font-family:"微软雅黑";

  line-height:1.5;

  background-color:#CCCCCC;}

li{ list-style:none;

  float:left;

padding:8px;}

ul{ margin:0 auto;

  padding:0;} 

a{ text-decoration:none;

  color:#FF6600;

  font-size:18px;}

a:hover{ background-color:#FFFFFF;}  

.hr{ color:#FF6600; width:100%; height:3px; position:absolute; top:24px;}

.img{ position:absolute;

  top:0px; left:200px;}

.div{ height:20px;

  width:1000px;

  margin:3px auto;

  position:relative; }   

.div1{ clear:both;}

.div2{ height:360px;

  width:200px;

background-color:#FFFFFF;

margin:60px;}



.heater{ font-size:20px;

  font-weight:600;}   

  

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>



<body>

<div class="div">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">淘宝商城</a></li>

<img class="img" src="../images/a.gif" />

<li><a href="#">聚划算</a></li>

<li><a href="#">电器城</a></li>

<li><a href="#">良无限</a></li>

<li><a href="#">吃喝玩乐</a></li>

<li><a href="#">HiTao装扮</a></li>

<li><a href="#">影视书城</a></li>

<li><a href="#">一淘网</a></li>

<img src="../images/b.gif" />

<li><a href="#">VIP专区</a></li>

<li><a href="#">我的保障</a></li>



</ul>

</div>

<div class="div1"></div>

<div class="div2" style="clear:both">

<p>淘宝服务</p>



</div>

</body>

</html>
小韩 2011-12-02
  • 打赏
  • 举报
 回复
楼主的样式没有问题~至于P标签 有背景~是因为你设置了*的样式 背景~ 所以会导致p标签继承了*的样式！解决办法就是你把*号 改成body就可以了！详细代码看下面红色字部分：



<!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>

<style type="text/css">

/*body是针对该页面的属性进行样式设置，你对它进行背景设置 只对页面的背景产生影响，不会对其他标签有反应，而你*是通配符，你给它设置了样式 是所有的标签都会继承它的样式！所以建议楼主以后设置样式尽量可以不选用*通配符来！*/body{ font-family:"微软雅黑";

  line-height:1.5;

  background-color:#CCCCCC;}li{ list-style:none;

  float:left;

padding:8px;}

ul{ margin:0 auto;

  padding:0;} 

a{ text-decoration:none;

  color:#FF6600;

  font-size:18px;}

a:hover{ background-color:#FFFFFF;}  

.hr{ color:#FF6600; width:100%; height:3px; position:absolute; top:24px;}

.img{ position:absolute;

  top:0px; left:200px;}

.div{ height:20px;

  width:1000px;

  margin:3px auto;

  position:relative; }   

.div1{ clear:both;}

.div2{ height:360px;

  width:200px;

background-color:#FFFFFF;

margin:60px;}



.heater{ font-size:20px;

  font-weight:600;}   

  

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>



<body>

<div class="div">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">淘宝商城</a></li>

<img class="img" src="../images/a.gif" />

<li><a href="#">聚划算</a></li>

<li><a href="#">电器城</a></li>

<li><a href="#">良无限</a></li>

<li><a href="#">吃喝玩乐</a></li>

<li><a href="#">HiTao装扮</a></li>

<li><a href="#">影视书城</a></li>

<li><a href="#">一淘网</a></li>

<img src="../images/b.gif" />

<li><a href="#">VIP专区</a></li>

<li><a href="#">我的保障</a></li>



</ul>

</div>

<div class="div1"></div>

<div class="div2" style="clear:both">

<p>淘宝服务</p>



</div>

</body>

</html>


希望能够帮助到楼主！
yibajian0607 2011-12-02
  • 打赏
  • 举报
 回复
啊哈哈 谢谢各位了 我昨天晚上瞅了半个小时 没看出来 谢谢大家 我是初学的 以后希望大家多多指导啊
p2227 2011-12-01
  • 打赏
  • 举报
 回复
*{ font-family:"微软雅黑";
line-height:1.5;
background-color:#CCCCCC;}

其实是在里面的，因为你有这么一句，p的背景也是灰色的，跟背景一样，你看起来还为是在背景那里，style加上

p{background-color:#FFFFFF;}

就达到你的效果了。
前端面试题杂烩part1
web app 问题：手机端 click 事件会有大约 300ms 的延迟 ...原因：手机端事件 ...click，因为在touch事件触发之后，浏览器要判断用户是否会做出双击屏幕的操作，所以会等待300ms来判断，再做出是否触发c
p标签为什么不能嵌套div标签？如果嵌套会发生什么呢？
当我们学html时，老师就告诉我们p标签不能嵌套div标签，但是为什么呢？今天我亲测了下原因，帖图来证！
HTML基础入门
因为它不是一门编程语言，所以并没有像C++和Java那样学起来晦涩难懂，而且我们是边授课边实践的，讲到一个知识点，就要打一个代码例子，所以上手也很快。时间过了也快有一年了，有些知识也遗忘了一些，现在重新整理...
HTML概述及常用语法
列表就是信息资源的一种展示形式，可以使得信息结构化和条理化，以列表的样式显示出来。双标签中的第一个标签表示...标记语言：是一套标记标签，用来描述网页的一种语言。元素描述了文档的标题。元素包含了文档的元
HTML（1）基本标签
HTML 超文本标记语言，由一系列标签组成 基本HTML结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body ...
CSS

61,125

社区成员

60,706

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章