求教:為什么給.topmenu .lihover b設(shè)置字體大小樣式?jīng)]用呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>顯示大類下面的小類和圖片懸浮</title>
<style type="text/css">
? ? ? body{
? ? ? ?/*margin: 0;*/
? ? ? ?padding: 0;
? ? ? ?behavior: url(css/csshover.htc);
? ? ? }
? ? ? .topmenu{
? ? ? ?border:2px solid #e4393c;
? ? ? ?width: 220px;
? ? ? ?margin:0;
? ? ? ?padding: 0;
? ? ? }
? ? ? .toptitle{
? ? ? ?background-color: #e4393c;
? ? ? ?height: 40px;
? ? ? ?line-height: 40px;
? ? ? ? font-size: 12px;
? ? ? ?font-weight: bold;
? ? ? ?color: white;
? ? ? ? /*text-align: center;*/
? ? ? ?padding-left: 20px;
? ? ? }
? ? ? .topmenu li{
? ? ? ?list-style: none;
? ? ? ?height: 30px;
? ? ? ?line-height: 30px;
? ? ? ?font-size: 11px;
? ? ? ?padding-left: 12px;
? ? ? ?z-index: 3;
? ? ? ?background-image: url(0.jpg);
? ? ? ?background-repeat: no-repeat;
? ? ? ?background-position: right;
? ? ? }
? ? ? .topmenu li a{
? ? ? ?text-decoration: none;
? ? ? ?color: #313131;
? ? ? }
? ? ? .topmenu li a:hover{
? ? ? ?text-decoration: underline;
? ? ? ?font-weight: bold;
? ? ? ?color: #e4393c;
? ? ? }
? ? ? .topmenu .lihover{/*鼠標(biāo)移動到上面時,應(yīng)用的樣式*/
? ? ? ? ?border: 1px solid #ddd;
? ? ? ? ?border-right: 0;
? ? ? ? ?box-shadow: 0 0 8px #ddd;
? ? ? ? ?-moz-box-shadow: 0 0 8px #ddd;
? ? ? ? ?-webkit-box-shadow: 0 0 8px #ddd;
? ? ? ? ?background-image: none;
? ? ? ? ?height: 60px;
? ? ? ? ?border-left: 4px solid #e4393c;
? ? ? }
? ? ? .submenu{
? ? ? ? display: none;
? ? ? ? width: 715px;
? ? ? ? left: 220px;
? ? ? ? top: 40px;
? ? ? ? position: absolute;
? ? ? ? border: 1px solid #ddd;
? ? ? ? z-index: 4;
? ? ? ? box-shadow: 0 0 8px #ddd;
? ? ? ? ?-moz-box-shadow: 0 0 8px #ddd;
? ? ? ? ?background-color: white;
? ? ? }
? ? ? .leftdiv{
? ? ? ??
? ? ? ? float: left;
? ? ? ? width: 490px;
? ? ? ? ?margin: 5px;
? ? ? }
? ? ? .rightdiv{
? ? ? ?
? ? ? ?float: left;
? ? ? ?width: 200px;
? ? ? ?margin: 5px;
? ? ? }
? ? ? .topmenu .lihover .submenu{/*懸浮層*/
? ? ? ?display: block;
? ? ? }
? ? ? .topmenu .lihover span{/*白色矩形框*/
? ? ? ?background-color: white;
? ? ? ?z-index: 20;
? ? ? ?width: 20px;
? ? ? ?height: 60px;
? ? ? ?float: right;
? ? ? ?position: relative;
? ? ? }
? ? ? .leftdiv dl{
? ? ? ?display: block;
? ? ? ?border-bottom: 1px solid #eee;
? ? ? ?padding-bottom: 6px;
? ? ? ?overflow: hidden;
? ? ? }
? ? ? .leftdiv dl dt{
? ? ? ?/*display: block;*/
? ? ? ?float: left;
? ? ? ?width: 60px;
? ? ? ?text-align: right;
? ? ? ?height:22px;
? ? ? ?line-height: 22px;
? ? ? ?padding-right: 8px;
? ? ? }
? ? ? .leftdiv dl dt a{
? ? ? ?color: #e4393c;
? ? ? ?font-weight: bold;
? ? ? ?text-decoration: underline;
? ? ? ?font-size: 10px;
? ? ? }
? ? ? .leftdiv dl dd{
? ? ? ?overflow: hidden;
? ? ? }
? ? ? .leftdiv dl dd a{
? ? ? ?display: block;
? ? ? ?float: left;
? ? ? ?border-left: 1px solid #ccc;
? ? ? ?color: #737373;
? ? ? ?font-size: 9px;
? ? ? ?padding: 0 8px;
? ? ? ?height: 14px;
? ? ? ?line-height: 14px;
? ? ? ?margin: 4px 0;
? ? ? }
? ? ? .rightdiv dl dd{
? ? ? ?margin: 3px 0;
? ? ? }
? ? ? .rightdiv dl dt{
? ? ? ?color: #e4393c;
? ? ? ?font-size: 10px;
? ? ? ?font-weight: bold;
? ? ? }
? ? ? .rightdiv dl dd a{
? ? ? ?font-size: 9px;
? ? ? ?color: #737373;
? ? ? ?line-height: 22px;
? ? ? }
? ? ? .rightdiv dl dd a:hover{
? ? ? ?color: #737373;
? ? ? ?font-weight: normal;
? ? ? }
? ? ? .topmenu li b{
? ? ? ? display:none;
? ? ? }
? ? ? .topmenu .lihover b{
? ? ? ? display: block;
? ? ? ? height: 20px;
? ? ? ? line-height: 20px;
? ? ? ? font-weight: normal;
? ? ? ? font-size: 6px;/*這條語句為什么沒效果啊。。。*/
? ? ? }
? ? ? .rightPic{
? ? ? ? position: relative;
? ? ? ? bottom: -20px;
? ? ? ? right: -35px;
? ? ? }
</style>
</head>
2016-05-11
有些瀏覽器,比如谷歌,可以支持的最小字體是12px,你設(shè)置小于12px的字體時,是沒有效果的.你設(shè)置大于12px的字體試試.
2016-04-13
topmenu與后邊的點之間應(yīng)該有一個空格