第一部分 inline-block
一、inline-block之间的缝隙(inline-block再ie8以下版本不显示，考虑到兼容性，一般会设置display:inlin-block;*display:inline;即可正常显示)
做导航条时，可以用ul li标签，同时设置li标签display:inline-block
在style设置li{diaplay:inline-block}
<ul>
<li>tag1</li>
<li>tag2></li>
<li>tag3</li>
</ul>
ul li设置导航.png
通过以下方法可以去除缝隙
1、每个li之间没有空隙即可
<ul>
<li>tag1</li><li>tag2</li><li>tag3</li>
</ul>
2、类似于第一种做法的设置
<ul>
<li>tag1</li
<li>tag2</li
<li>tag3</li>
</ul>
3、给每个li设置一个负margin，但是会导致第一个元素左边突出边缘，所以可以单独设置每个margin值，第一个不进行设置，其他的再设置。
li:first-child:margin-left:0;
4、也可对其父元素设置font-size:0，该容器一定要对字体重新设置font-size
二、父容器无法包括浮动元素，会对后面的元素造成影响。
可以 设置overflow:auto;即可。
第二部分 空格
可实现空格，但是一般不会常用，如果需要空格较多，可通过css设置
如果排版格式需要可加上<pre> </pre>标签即可吗，即可保留你输入的格式
第三部分 导航条
凡是长得一样的建议 用li设置，可点击用a链接
横排排列，两种方式diaplay:inline-block和float（一般除了让元素横着还且用于大区块的布局或）设置
鼠标放上去会有颜色，可以有两种方式：Js和hover(兼容性应用再普通元素上只能再ie8以上可以使用，应用再a上，6/7/8都可以)
媒体查询
@media screen and (max-width:500px){#hd{display:block;}#sd{display:none;}}
横排导航是显示的，但是竖排导航平时是display:none,当鼠标滑过hover时display：block
横排导航做好后，竖排导航的位置如何放置的
竖排导航作为子元素，如何不被父元素包括呢，可以对子元素进行绝对定位position:absolute;left:**;top:100%（父容器高度值）;display:none;
网友评论