display:block是什么效果
#mainnav{width:700px;height:29px;margin:0auto;font-size:14px;}#mainnav*{margin:0;padd...
#mainnav{width:700px;height:29px;margin:0 auto;font-size:14px;}
#mainnav *{margin:0;padding:0;}
#mainnav li{float:left;list-style:none;}
#mainnav li a{display:block;width:80px;height:29px;line-height:30px;color:#fff;text-decoration:none;text-align:center;} #mainnav li a:hover{background: url(images/3.gif) repeat-x;}
<div id="mainnav">
<ul>
<li><a href="?">00000000</a></li>
<li><a href="?">11111111</a></li>
<li><a href="?">22222222</a></li>
<li><a href="?">33333333</a></li>
<li><a href="?">4444444</a></li>
<li><a href="?">555555</a></li>
</ul>
</div>
用css+div制作一个导航,有几个地方不明白,请高人解答
1,#mainnav *{}的作用是将<div>下的所有标签都设置一个属性?
2,#mainnav li a{display:block,display:block这个属性是干什么用的,我去掉后只发现字体变小了,float是控制列表项都向左对齐为一行么?
3,div标签的内容是默认紧贴着排列的么?那div标签之间默认是什么样的排列方式呢? 展开
#mainnav *{margin:0;padding:0;}
#mainnav li{float:left;list-style:none;}
#mainnav li a{display:block;width:80px;height:29px;line-height:30px;color:#fff;text-decoration:none;text-align:center;} #mainnav li a:hover{background: url(images/3.gif) repeat-x;}
<div id="mainnav">
<ul>
<li><a href="?">00000000</a></li>
<li><a href="?">11111111</a></li>
<li><a href="?">22222222</a></li>
<li><a href="?">33333333</a></li>
<li><a href="?">4444444</a></li>
<li><a href="?">555555</a></li>
</ul>
</div>
用css+div制作一个导航,有几个地方不明白,请高人解答
1,#mainnav *{}的作用是将<div>下的所有标签都设置一个属性?
2,#mainnav li a{display:block,display:block这个属性是干什么用的,我去掉后只发现字体变小了,float是控制列表项都向左对齐为一行么?
3,div标签的内容是默认紧贴着排列的么?那div标签之间默认是什么样的排列方式呢? 展开
3个回答
展开全部
首先,你上面的语法#mainnav *{margin:0;padding:0;}中的意思是将ID为#mainnav下的所有后代元素应用样式,用“*”一般是针对IE6及以下版本的!
其次,a 元素是是一个行内元素,display:block;就是将他强行转化为块级元素。行内元素没有没有上下填充,也就是说你设置padding-top padding-bottom将是徒劳,#mainnav li a{display:block;width:80px;height:29px;line-height:30px;color:#fff;text-decoration:none;text-align:center;}
是让连接表现得像块极元素,增大起点击区域。以为你后面的a:hove背景图片的实现打下基础。float的意思是让文档(标签)脱离普通文档流的一种方法,它是用来定位的其中一种方法。float:left表示的是让第一个浮动元素相对于其父元素的左边对齐,后面的元素(在同一个嵌套级别)接上前面的一个元素贯穿在同一条线上,也就是整齐的对准在同一行上。浮动的时候,如果没有对父元素显视的设置宽度的话,它会自动收缩,你对父元素设置背景色就可以看到。这一点在设计导航条的时候尤其要注意。
再次,对于你的第三个问题,答案是肯定的(呵呵)因为你已经将空白边和填充设置为0了,浏览器的默认方式是相对于前一级容器元素left:0;top:0; 想对显示深入的了解的话,看看CSS框模型就是了。
对于div标签的默认显示方式:div标签是块级元素,也就是在他显示的行内不会有其他的块级元素,它会自动换行的。
其次,a 元素是是一个行内元素,display:block;就是将他强行转化为块级元素。行内元素没有没有上下填充,也就是说你设置padding-top padding-bottom将是徒劳,#mainnav li a{display:block;width:80px;height:29px;line-height:30px;color:#fff;text-decoration:none;text-align:center;}
是让连接表现得像块极元素,增大起点击区域。以为你后面的a:hove背景图片的实现打下基础。float的意思是让文档(标签)脱离普通文档流的一种方法,它是用来定位的其中一种方法。float:left表示的是让第一个浮动元素相对于其父元素的左边对齐,后面的元素(在同一个嵌套级别)接上前面的一个元素贯穿在同一条线上,也就是整齐的对准在同一行上。浮动的时候,如果没有对父元素显视的设置宽度的话,它会自动收缩,你对父元素设置背景色就可以看到。这一点在设计导航条的时候尤其要注意。
再次,对于你的第三个问题,答案是肯定的(呵呵)因为你已经将空白边和填充设置为0了,浏览器的默认方式是相对于前一级容器元素left:0;top:0; 想对显示深入的了解的话,看看CSS框模型就是了。
对于div标签的默认显示方式:div标签是块级元素,也就是在他显示的行内不会有其他的块级元素,它会自动换行的。
Storm代理
2023-07-25 广告
2023-07-25 广告
StormProxies是一家可靠的代理服务提供商,提供原生IP(住宅原生IP)和高匿名代理服务。以下是关于StormProxies的原生IP服务的一些信息:1. 住宅原生IP:StormProxies提供的住宅原生IP是指从真实的家庭或企...
点击进入详情页
本回答由Storm代理提供
展开全部
回答你的问题
1,*号的意思是什么字符都可以
比如#mainnav1 #mainnav2 都适用mainnav*的样式
2,display:block可以理解为块。把这个区域变成块状。当然你加了宽度和高度效果不明显了。如果去掉宽度和高度试试。再去掉display试试就发现问题了。
float:left;向左边浮动。
3,是默认紧帖的 也就是margin:0;
之间的内容是换行的。也就是第一样东西放了一行。第2样东西放第2行。如果都加了float:left就等于是把他们都放在了一行。而且按照帖左边排排放的意思。不知道我的回答你还满意么
1,*号的意思是什么字符都可以
比如#mainnav1 #mainnav2 都适用mainnav*的样式
2,display:block可以理解为块。把这个区域变成块状。当然你加了宽度和高度效果不明显了。如果去掉宽度和高度试试。再去掉display试试就发现问题了。
float:left;向左边浮动。
3,是默认紧帖的 也就是margin:0;
之间的内容是换行的。也就是第一样东西放了一行。第2样东西放第2行。如果都加了float:left就等于是把他们都放在了一行。而且按照帖左边排排放的意思。不知道我的回答你还满意么
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
语法:
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
参数:
block : CSS1 块对象的默认值。用该值为对象之后添加新行
none : CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline : CSS1 内联对象的默认值。用该值将从对象中删除行
compact : CSS2 分配对象为块对象或基于内容之上的内联对象
marker : CSS2 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用
inline-table : CSS2 将表格显示为无前后换行的内联对象或内联容器
list-item : CSS1 将块对象指定为列表项目。并可以添加可选项目标志
run-in : CSS2 分配对象为块对象或基于内容之上的内联对象
table : CSS2 将对象作为块元素级的表格显示
table-caption : CSS2 将对象作为表格标题显示
table-cell : CSS2 将对象作为表格单元格显示
table-column : CSS2 将对象作为表格列显示
table-column-group : CSS2 将对象作为表格列组显示
table-header-group : CSS2 将对象作为表格标题组显示
table-footer-group : CSS2 将对象作为表格脚注组显示
table-row : CSS2 将对象作为表格行显示
table-row-group : CSS2 将对象作为表格行组显示
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
参数:
block : CSS1 块对象的默认值。用该值为对象之后添加新行
none : CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline : CSS1 内联对象的默认值。用该值将从对象中删除行
compact : CSS2 分配对象为块对象或基于内容之上的内联对象
marker : CSS2 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用
inline-table : CSS2 将表格显示为无前后换行的内联对象或内联容器
list-item : CSS1 将块对象指定为列表项目。并可以添加可选项目标志
run-in : CSS2 分配对象为块对象或基于内容之上的内联对象
table : CSS2 将对象作为块元素级的表格显示
table-caption : CSS2 将对象作为表格标题显示
table-cell : CSS2 将对象作为表格单元格显示
table-column : CSS2 将对象作为表格列显示
table-column-group : CSS2 将对象作为表格列组显示
table-header-group : CSS2 将对象作为表格标题组显示
table-footer-group : CSS2 将对象作为表格脚注组显示
table-row : CSS2 将对象作为表格行显示
table-row-group : CSS2 将对象作为表格行组显示
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询
广告 您可能关注的内容 |