导航栏不对字体显示不出
代码中的字体颜色设置成白色,为什么不会再导航栏显示,另外请老师帮忙看一下代码有哪些改进之处,O(∩_∩)O谢谢
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | <!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title >3-3编程题</ title > < style type = "text/css" > *{ margin:0; padding:0; } body{ min-width: 1000px; } .header{ float:left; width: 100%; background-color: black; height:100px; line-height: 100px; /*为什么我这里不设置字体颜色会显示不出字体?*/ color:white; position: fixed; z-index: 99999;/*使导航栏显示在内容上方*/ top:0px; } div.header img{float: left;} div.header p{ float: right; } div.header p span{ cursor:pointer; } div.header p span:hover{ color: orange; } .footer{ float:left; width: 100%; background-color: black; height:50px; text-align: center; line-height:50px; color:white; position: fixed; bottom: 0; } div.footer p span{ cursor: pointer; } /*圣杯布局*/ .container{ padding: 100px 250px 0 350px; /*加入100px上内边距,使文字不被遮盖*/ } /*圣杯布局核心*/ .left,.right,.middle{ position: relative; float: left; min-height:1000px; padding-top: 100px; } .middle{ width: 100%; background-color: #ffc0cb; text-align: center; } .left{ width: 350px; background-color:#ffefdb; margin-left: -100%; left:-350px; } .right{ width: 250px; background-color: #add8e6; margin-left: -250px; right:-250px; } /*内容样式处理*/ div.left table{ width: 100%; float: right; position:absolute; top:100px; } div.left table td{ margin: 10px; padding: 10px; } div.left table tr td span{ background-color:#f06; } .denglu{ width: 100%; float: left; padding-left:10px; position:absolute; top: 100px; } h2{ margin-bottom: 10px; } .form{ width:200px; height:30px; margin-top:10px; margin-bottom:10px; font-size:10px; border-style: none; } .submit{ width:200px; height:35px; margin-top:10px; margin-bottom:10px; background-color:#ff0002; color:#fff; font-size: 14px; border-style: none; } </ style > </ head > < body > < div class = "header" > < img src = "logo.png" > < p >< span >课程</ span > < span >职业路径</ span > < span >实战</ span > < span >猿问</ span > < span >手记</ span > </ p > </ div > <!-- 这是页面的内容 --> < div class = "container" > < div class = "middle" > < img src = "6.jpg" > </ div > < div class = "left" > < table > < tr >< td >< h2 >课程推荐</ h2 ></ td ></ tr > < tr >< td >< span >职业路径</ span > HTML5与CSS3实现动态网页</ td ></ tr > < tr >< td >< span >职业路径</ span > 零基础入门Android语法与界面</ td ></ tr > < tr >< td >< span >职业路径</ span > iOS5基础语法与常用控件</ td ></ tr > < tr >< td >< span >职业路径</ span > PHP入门开发</ td ></ tr > < tr >< td >< span >职业路径</ span > Java入门开发</ td ></ tr > </ table > </ div > < div class = "right" > < div class = "denglu" > < h1 >登录</ h1 > < form > < input type = "text" name = "username" placeholder = "请输入登录邮箱/手机号" class = "form" >< br > < input type = "password" name = "password" placeholder = "6-16位密码,区分大小写,不能用空格" minlength = "6" maxlength = "16" class = "form" >< br > < input type = "submit" name = "submit" value = "提交" class = "submit" > </ form > </ div > </ div > </ div > < div class = "footer" > < p >< span >网站首页</ span > < span >企业合作</ span > < span >人才招聘</ span > < span >联系我们</ span > < span >常见问题</ span > < span >友情链接</ span ></ p > </ div > </ body > </ html > |
12
收起
正在回答
1回答
亲测导航显示的字体颜色确实是白色的,另外你的页面出现了横向滚动条,建议设置body{overflow:hidden}祝学习愉快!
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧