1、用Dreamweaver新建一个HTML文件；
2、按ctrl+s先保存，以防突然断电数据丢失；
3、修改title为html+css实现横向导航；
4、新建一个divid为“a”，添加ulli标签；
5、在li中添加自己想要的文字并调整好文字间距，按F12预览；6、首先去掉字体前面的小黑点。
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
以下代码已经实现了需要的功能，导航条固定在了网页的顶部，这个主要是使用position:fixed，然后将top值设置为0即可。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>固定在窗口顶部</title> <style type="text/css">*{padding:0px
margin:0px}body, ul, li{
background-color:white
font-size:12px
font-family:Arial, Helvetica, sans-serif
text-align:center}#main{
width:20px
height:1000px
margin:0px auto
background-color:#CCC}#nav{
width:500px
margin:0px auto
position:fixed/*固定作用*/
top:0px
left:490px
/*ie6下样式，加下划线表示只针对ie6 的hack */
_position:absolute/* 把导航栏位置定义为绝对位置 关键*/
_top:expression(documentElement.scrollTop + "px") /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
z-index:9999 /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
text-align:left}a{
color:#000000
text-decoration:none}.menu{
width:120px
height:18px
margin:0px 4px 0px 0px
background-color:#F5F5F5
color:#999999
border:1px solid #EEE8DD
padding:6px 0px 0px 0px
overflow-y:hidden
cursor:hand
display:inline
list-style:none
font-weight:bold
float:left}</style></head><body><div id="nav">
<ul>
<li class="menu"><a href="#">前台专区</a></li>
<li class="menu"><a href="#">后台专区</a></li>
<li class="menu"><a href="#">交流专区</a></li>
</ul></div><div id="main">大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 </div></body></html>
解决方法:1.html和body的高度设置100%，为当前屏幕的高度，container高度也设置为100%，这样就继承了当前屏幕的高度.
2.上下两个导航栏固定定位,脱离了文档流,需要占位处理
3.将container设置为flex布局，换轴，因为上下两端有了占位，直接将main高度设置为100%
4.main设置overflow：auto超出部分显示滚动条。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）