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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!