2 baidu 29579569 baidu_29579569 于 2016.02.04 12:28 提问

新手 求大神知道html中的问题 5C
 <ul class="demo1">
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
这是一个简单的导航栏
然后我添加样式
<style type="text/css">
ul,li{
     list-style:none;   
     margin:0px;
     padding: 0px;
    }
    a{
        color:#06F
        text-decoration:none;
        }
.demo li{
      background-color: rgba(238,238,238,1);    
      -webkit-transition:all 0.3s ease-in-out 0s;
      -moz-transition:all 0.3s ease-in-out 0s;
      transition:all 0.3s ease-in-out 0s;
      padding-left:1%;  
      height:50px;
      min-height: 50px; 
      width: 0;
      font-family:"Arial";
      font-size: 20px;
    }
.demo li a{
        width:50%;  
        height: 50px;
        line-height:50px;
        padding-left:5px;
        positin:absolute;
    }
.demo li:hover{
      background-color: rgba(238,238,238,1);    
      -website-transition:all 0.3s ease-in-out 0s;
      -moz-transition:all 0.3s ease-in-out 0s;
      -o-transition:all 0.3s ease-in-out 0s;
      -ms-transition:all 0.3s ease-out-in 0s;
      transition: all 0.3s ease-in-out 0s;  
      width:50%;
    }       
</style>

怎么将两个代码写在一起 然后在浏览器上显示 我直接放在一起 把样式放在head中,然后body是导航栏,浏览器上只显示了导航栏 没有样式

7个回答

showbo
showbo   Ds   Rxr 2016.02.04 13:40

你样式里面是demo,ul加的class是demo1。。。

 <ul class="demo">
    <li><a href="#">Home</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
u013251457
u013251457   2016.02.04 14:52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-transitional.dtd">

ul,li{ list-style:none; margin: 0px; padding: 0px; } a{ color:#06F text-decoration:none; } .demo li{ background-color: rgba(238,238,238,1); -webkit-transition:all 0.3s ease-in-out 0s; -moz-transition:all 0.3s ease-in-out 0s; transition:all 0.3s ease-in-out 0s; padding-left:1%; height:50px; min-height: 50px; width: 0; font-family:"Arial"; font-size: 20px; } .demo li a{ width:50%; height: 50px; line-height:50px; padding-left:5px; positin:absolute; } .demo li:hover{ background-color: rgba(238,238,238,1); -website-transition:all 0.3s ease-in-out 0s; -moz-transition:all 0.3s ease-in-out 0s; -o-transition:all 0.3s ease-in-out 0s; -ms-transition:all 0.3s ease-out-in 0s; transition: all 0.3s ease-in-out 0s; width:50%; }




u013251457
u013251457   2016.02.04 15:01
u013251457
u013251457   2016.02.04 15:11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-transitional.dtd">

ul,li{ list-style:none; margin: 0px; padding: 0px; } a{ color:#06F text-decoration:none; } .demo li{ background-color: rgba(238,238,238,1); -webkit-transition:all 0.3s ease-in-out 0s; -moz-transition:all 0.3s ease-in-out 0s; transition:all 0.3s ease-in-out 0s; padding-left:1%; height:50px; min-height: 50px; width: 0; font-family:"Arial"; font-size: 20px; } .demo li a{ width:50%; height: 50px; line-height:50px; padding-left:5px; positin:absolute; } .demo li:hover{ background-color: rgba(238,238,238,1); -website-transition:all 0.3s ease-in-out 0s; -moz-transition:all 0.3s ease-in-out 0s; -o-transition:all 0.3s ease-in-out 0s; -ms-transition:all 0.3s ease-out-in 0s; transition: all 0.3s ease-in-out 0s; width:50%; }




u013251457
u013251457   2016.02.04 15:13
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-transitional.dtd">
<html>
<meta charset="utf8"></meta>
<style type="text/css">
ul,li{
     list-style:none;   
     margin: 0px;
     padding: 0px;
    }
    a{
        color:#06F
        text-decoration:none;
        }
.demo li{
      background-color: rgba(238,238,238,1);    
      -webkit-transition:all 0.3s ease-in-out 0s;
      -moz-transition:all 0.3s ease-in-out 0s;
      transition:all 0.3s ease-in-out 0s;
      padding-left:1%;  
      height:50px;
      min-height: 50px; 
      width: 0;
      font-family:"Arial";
      font-size: 20px;
    }
.demo li a{
        width:50%;  
        height: 50px;
        line-height:50px;
        padding-left:5px;
        positin:absolute;
    }
.demo li:hover{
      background-color: rgba(238,238,238,1);    
      -website-transition:all 0.3s ease-in-out 0s;
      -moz-transition:all 0.3s ease-in-out 0s;
      -o-transition:all 0.3s ease-in-out 0s;
      -ms-transition:all 0.3s ease-out-in 0s;
      transition: all 0.3s ease-in-out 0s;  
      width:50%;
    }       
</style>
<body>
    <ul class="demo">
    <li><a href="#">Home</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>


hefy780144
hefy780144   2016.02.04 15:21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-transitional.dtd">

ul,li{ list-style:none; margin: 0px; padding: 0px; } a{ color:#06F text-decoration:none; } .demo li{ background-color: rgba(238,238,238,1); -webkit-transition:all 0.3s ease-in-out 0s; -moz-transition:all 0.3s ease-in-out 0s; transition:all 0.3s ease-in-out 0s; padding-left:1%; height:50px; min-height: 50px; width: 0; font-family:"Arial"; font-size: 20px; } .demo li a{ width:50%; height: 50px; line-height:50px; padding-left:5px; positin:absolute; } .demo li:hover{ background-color: rgba(238,238,238,1); -website-transition:all 0.3s ease-in-out 0s; -moz-transition:all 0.3s ease-in-out 0s; -o-transition:all 0.3s ease-in-out 0s; -ms-transition:all 0.3s ease-out-in 0s; transition: all 0.3s ease-in-out 0s; width:50%; }




Mr_li13
Mr_li13   2016.02.05 01:34

样式中的demo这个写错了,你的类定义是demo1

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
MSP430读取mpu6050卡尔曼滤波
MSP430读取mpu6050卡尔曼滤波,一直研究滤波的问题就是没弄出来,求大神知道啊,
新手,求大神决绝问题
用css怎么写出  左边的一段,一段竖线!!!!
基于MFC ppi计算器
新手自己写的ppi计算器,开发环境:vs2010 win8.1 ,求指导,求大神指导
ListView复用checkBox的解决方法
这个demo很好的解释和解决了ListView中复用checkBox的问题,并能实时知道选中的个数,供新手观看和参考,写的不好请大神不要吐槽。
html&css 新手入门常遇到的bug总结
本人也是web前端新手一枚,之前有过java和C#的相关工作经验,因为兴趣问题将技术学习方向转移到前端开发方向上来,目前正在学习基础中。 由于html和css都是属于静态代码,无法进行动态调试,这就让一些bug不容易被发现,对于刚入门的新手们来说是比较困难的。然而很多时候,找了一个多小时,最后也许发现其实只是class名少写或错写了一个字母而已,确实比较让人崩溃…… 这里稍微总结一下这些天遇到
Go 语言从新手到大神:每个人都会踩的五十个坑 (1-12)
本文翻译自最近各种 Go 语言社区分享的很多的英文文档 50 Shades of Go: Traps, Gotchas, and Common Mistakes for New Golang Devs,小编第一眼以为 50 Shades of Grey…… Go语言是一个简单却蕴含深意的语言。但是,即便号称是最简单的C语言,都能总结出一本《C陷阱与缺陷》,更何况Go语言呢。Go语言中的许
从基础小白到业内大神,ps高手的成长之路
他是《ps高手炼成记》丛书作者 网易金云奖获得者 领跑设计创办人 学员60万 …… 他是顾领中 你的最后一个设计老师     现在的顾领中老师,学员累计高达60万,但是一开始让他走上设计之路,纯属是当初填错大学志愿。 成为了设计系新生的顾领中,身在曹营心在汉,心中仍然满是金融、银行、公务员。 但是命运既然选中
《Redis起步》 初学者应该看得一篇文章
Redis 是一个key-value存储系统。和Memcached类似,但是解决了断电后数据完全丢失的情况,而且她支持更多无化的value类型,除了和string外,还支持lists(链表)、sets(集合)和zsets(有序集合)几种数据类型。这些数据类型都支持push/pop、add/remove及取交集并集和差集及更丰富的操作,而且这些操作都是原子性的。
第一章html练习4:聚美优品新手指南页面
聚美优品新手指南页面 [新用户注册][用户登录帮助] 常见问题 用户协议 注册帮助 登录帮助 新手指南 - 登陆或注册 购物流程 新用户注册 Step 1 点击页面右上方的“注册”按钮注册聚美优品账号。 登录 Step 2 注册前请仔细阅读《聚美优品用户协议》,如无异议请点击“同意以下协议并注册”。请根据相应提示在信息栏内填入您的注册信息。
易语言钓鱼源码
求大神买走 求大神买走 易语言钓鱼源码