CSS样式实现的五角星，浮动和定位问题

sspanzervor1 2018-12-24 10:36:06

如题，在站立找到一个CSS实现五角星的代码，放到页面中，但是希望它能在每个盒子（代表房间）的蓝色背景标题栏的右侧（房间号靠左排列）；然而，调整代码后，五角星仍然无法在每个盒子的顶部，不知是何原因？

代码如下，烦请各位高手大神帮忙看下，在线等，非常感谢！





<!--#include file="conn.asp"-->

<%

	dim rs, sql

	set rs=db.execute("select * from t_ward where c_ward_floor='4F'")

%>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>房态平面图 - 主页面</title>



<link rel="stylesheet" href="jquery-ui-1.9.2.custom/css/base/jquery-ui-1.9.2.custom.min.css">

<style>

* {margin:0; padding:0;}

html, body, table {border-width:0; height:100%; width:100%;} 

thead {height:3%;}

tbody {height:95%;}

 

#tdTop {background-color:#D1D1D1;}

#tdTop span {font-size:12px; padding-right:5px;}

#tdNav {background-color:#0065A5; height:95%; text-wrap:none;width:10%; z-index:2;}

#tdPoint {height:100%; width:5px;}

#tdMain {background-color:white; height:100%; width:100%; z-index:1; font:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif}

#frmNav {background-color:#0056a5; height:100%; overflow:hidden; visibility:inherit; width:200px;}



.navPoint {color:white; cursor: pointer; font-family:Webdings; font-size:16px;}

/*span {border-width:0; padding:0; margin:0;}

*/



/* 主页面房间框的CSS样式*/

.form_title {

    font-size:24px;

    margin:10px 0 5px 10px;

    text-align:left;

}

.plan_ul { float:left; width:550px; word-wrap:break-word; word-break:break-all;}

.plan_li { display:inline-block; float:left; width:120px; height:80px; border:1px solid #0065A5; margin:5px; vertical-align:top;}

.titlebar {background-color:#0065A5; border:1px solid #0065A5; color:white; padding:2px; text-align:left; font:normal normal bold 12px/20px Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}



.titlebar_stars{ display:inline; margin:-50px 0 0 0; vertical-align:top; text-align:right; line-height:20px; height:20px; width:20px}



.star.smaller {

    border-color: #F60 transparent transparent transparent;

    border-style: solid;

    border-top-width: 5px;

    border-right-width: 10px;

    border-left-width: 10px;

	display:inline-block;

	float:right;

    height: 0;

    margin-top: 5px;

    margin-bottom: 3.21429px;

    position: relative;

    width: 0;

	line-height:20px;

	vertical-align:top;

}

.star.smaller:before,

.star.smaller:after {

    border-color: #F60 transparent transparent transparent;

    border-style: solid;

    border-top-width: 5px;

    border-right-width: 10px;

    border-left-width: 10px;

	display:inline-block;

    content: '';

    display: inline;

    height: 0;

    left: -10px;

    position:absolute;

    top: -5px;

    width: 0;

}

.star.smaller:before {

    transform: rotate(70deg);

}

.star.smaller:after {

    transform: rotate(-70deg);

}



</style>



<script src="jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>

<script src="jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>

<script src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>

<script language="javascript">

 

//导航栏显示隐藏

function aaa() {

    if (document.getElementById("switchPoint").innerHTML==3) {

        document.getElementById("switchPoint").innerHTML=4;

        document.getElementById("tdNav").style.display="none";

    }

    else {

        document.getElementById("switchPoint").innerHTML=3;

        document.getElementById("tdNav").style.display="";

    }

}

</script>



</head>

<body bgcolor=skyblue>



<TABLE border=0 cellPadding=0 cellSpacing=0 >

      <thead>

          <tr>

            <td id="tdTop" name="tdTop" colspan="3" align="right">

                <span id="spLog" name="spLog">当前登录用户：<%=request.Cookies("ftt_uid")%></span>                     

                <span id="spRelog" name="spRelog"><a href="ftt_login.asp">重新登录</a></span>

            </td>

        </tr>

    </thead>

    <tbody>       

    	<tr> 

            <td align="center" valign="middle" id="tdNav" name="tdNav" nowrap>

                <iframe id="frmNav" name="frmNav" frameborder="0" src="ftt_navLeft.asp"></iframe>

            </td>

            <td name="tdPoint" id="tdPoint" align="center" valign="middle" onClick="aaa();" nowrap>

                    <span class="navPoint" id="switchPoint">3</span>

            </td>

			<td align="center" valign="top" nowrap bgcolor="#005CB9" id="tdMain" name="tdMain">

            	<h2 class="form_title">房态示意图</h2>

            	<ul class="plan_ul">

                	<li style=" display:block;float:left; height:20px; width:560px; overflow:hidden; vertical-align:top">4F</li>

                <% do while not rs.eof%>

                	<li class="plan_li">

                    	<p class="titlebar">

							<%=rs("c_ward_name")%><div class="titlebar_stars"><div class="star smaller"></div><div class="star smaller"></div></div>

                        </p>

                        <p><img src="Images/person2.png" width="30"></p>	

					</li>

                <%  rs.movenext

				  Loop

				%>

                </ul>

            </td>

		</tr>

	</tbody>

</TABLE>

</body>

</html>