CSS后面还有一个点是什么意思

html-css024

CSS后面还有一个点是什么意思,第1张

就是嵌套的关系咯, 看你上面的css,

应该是这样调用:

<div class="qV_boxCon ">

<ul class="lpic">

<li>xxx</li>

</ul>

</div>

要用JS来控制的，单纯的CSS做不到，给你个代码，可以直接拿去用：

<div id="dpro" style="overflow:hiddenwidth:100%px padding:10px margin:0 10px">

                    <table width="100%" border="0" cellspacing="0" cellpadding="0">

                      <tr>

                        <td id="dpro1">

                        <table width="100%" cellpadding="0" cellspacing="0" border="0">

                            <tr>

                    

<td><div class="index_pic"><a href="product_show.asp?id=41" title="轻轮"><img src="UploadFiles/20131017164757151.png" width="148" height="139" /><span>轻轮</span></a></div></td>

                            

<td><div class="index_pic"><a href="product_show.asp?id=40" title="轻轮"><img src="UploadFiles/20131017164724200.png" width="148" height="139" /><span>轻轮</span></a></div></td>

                            

<td><div class="index_pic"><a href="product_show.asp?id=39" title="SB-6509-948 "><img src="UploadFiles/2013101716460566.png" width="148" height="139" /><span>SB-6509-948&nbsp</span></a></div></td>

                            

<td><div class="index_pic"><a href="product_show.asp?id=38" title="CPT-5854-85BRK4 "><img src="UploadFiles/20131017164529355.png" width="148" height="139" /><span>CPT-5854-85BRK4&nbsp…</span></a></div></td>

                            

<td><div class="index_pic"><a href="product_show.asp?id=37" title="CPT-4856-85BRK4 "><img src="UploadFiles/20131017164455666.png" width="148" height="139" /><span>CPT-4856-85BRK4&nbsp…</span></a></div></td>

                            

<td><div class="index_pic"><a href="product_show.asp?id=36" title="CPT-5851-85BRK4 "><img src="UploadFiles/20131017164420861.png" width="148" height="139" /><span>CPT-5851-85BRK4&nbsp…</span></a></div></td>

                            

<td><div class="index_pic"><a href="product_show.asp?id=35" title="医用脚轮"><img src="UploadFiles/20131017164359417.png" width="148" height="139" /><span>医用脚轮</span></a></div></td>

                            

<td><div class="index_pic"><a href="product_show.asp?id=34" title="轻轮"><img src="UploadFiles/20131017164322134.jpg" width="148" height="139" /><span>轻轮</span></a></div></td>

                            

<td><div class="index_pic"><a href="product_show.asp?id=33" title="京华小叶花"><img src="UploadFiles/20139281463567.jpg" width="148" height="139" /><span>京华小叶花</span></a></div></td>

                            

                            </tr>

                        </table>

                        </td>

                        <td id="dpro2">&nbsp </td>

                      </tr>

                    </table>

                    </div>

                    <!-- pro end -->

                    <script language="javascript">

                var ddp = document

                var dpro = ddp.getElementById("dpro")

                var dpro1 = ddp.getElementById("dpro1")

                var dpro2 = ddp.getElementById("dpro2")

                var dspeed=5 //滚动的速度,数值越大越慢

                dpro2.innerHTML=dpro1.innerHTML

                function Marquee()

                {

                    if(dpro2.offsetWidth-dpro.scrollLeft<=0)

                    {

                        dpro.scrollLeft-=dpro1.offsetWidth

                    }

                    else

                    {

                        dpro.scrollLeft++

                    }

                }

                var MyMar=setInterval("Marquee()",dspeed)

                dpro.onmouseover=function() 

                {

                    clearInterval(MyMar)

                }

                dpro.onmouseout=function() 

                {

                    MyMar=setInterval("Marquee()",dspeed)

                }

                </script>

只有css根本看不出来是哪里出错了，我这里有一个比较不错的你可以考虑下换个试试：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

.menu {

font-family: verdana, sans-serif

width:750px

position:relative

font-size:0.85em

padding-bottom:250px

}

.menu ul {

padding:0

margin:0

list-style-type: none

}

.menu ul li {

float:left

position:relative

}

.menu ul li a, .menu ul li a:visited {

display:block

text-decoration:none

color:#000

width:139px

height:3em

color:#000

border:1px solid #fff

border-width:1px 1px 0 0

background:#dfc184

padding-left:10px

line-height:3em

}

* html .menu ul li a, .menu ul li a:visited {

width:149px

w\idth:139px

}

.menu ul li ul {

display: none

}

table {

margin:-1px

border-collapse:collapse

font-size:1em

}

/* specific to non IE browsers */

.menu ul li:hover a {

color:#fff

background:#bd8d5e

}

.menu ul li:hover ul {

display:block

position:absolute

top:3em

margin-top:1px

left:0

width:150px

}

.menu ul li:hover ul li ul {

display: none

}

.menu ul li:hover ul li a {

display:block

background:#faeec7

color:#000

height:auto

line-height:1.2em

padding:5px 10px

width:129px

}

.menu ul li:hover ul li a.drop {

background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat

}

.menu ul li:hover ul li a:hover {

background:#c9c9a7

color:#000

}

.menu ul li:hover ul li:hover ul {

display:block

position:absolute

left:150px

top:0

width:150px

}

.menu ul li:hover ul li:hover ul.left {

left:-150px

}

</style>

</head>

<body>

<div class="menu">

<ul>

<li><a href="../boxes/index.html">公司简介

</a>

<table><tr><td>

<ul>

<li><a href="#">公司首页1</a></li>

<li><a href="#">公司首页1</a></li>

<li><a href="#">公司首页1</a></li>

<li><a href="#">公司首页1</a></li>

<li><a href="#">公司首页1</a></li>

</ul>

</td></tr></table>

</li>

<li><a class="drop" href="../menu/index.html">公司简介

</a>

<table><tr><td>

<ul>

<li><a href="#">公司简介1</a></li>

<li><a href="#">公司简介1</a></li>

<li><a href="#">公司简介1</a></li>

<li><a href="#">公司简介1</a></li>

<li><a class="drop" href="#">hover/公司简介1

</a>

<table><tr><td>

<ul>

<li><a href="#">公司简介2</a></li>

<li><a href="#">公司简介2</a></li>

<li><a href="#">公司简介2</a></li>

</ul>

</td></tr></table>

</li>

</ul>

</td></tr></table>

</li>

<li><a href="../mozilla/index.html">产品介绍

</a>

<table><tr><td>

<ul>

<li><a href="#">产品介绍1</a></li>

<li><a href="#">产品介绍1</a></li>

<li><a href="#">产品介绍1</a></li>

<li><a href="#">产品介绍1</a></li>

</ul>

</td></tr></table>

</li>

<li><a href="../opacity/index.html">联系我们

</a>

<table><tr><td>

<ul>

<li><a href="#">联系我们1</a></li>

<li><a href="#">联系我们1</a></li>

<li><a href="#">联系我们1</a></li>

<li><a class="drop" href="#">联系我们1

</a>

<table><tr><td>

<ul class="left">

<li><a href="#">联系我们2</a></li>

<li><a href="#">联系我们2</a></li>

<li><a href="#">联系我们2</a></li>

</ul>

</td></tr></table>

</li>

</ul>

</td></tr></table>

</li>

</ul>

</div>

</body>

</html>