html - Asp.net 日历自定义 css 样式

Question

我想在我的站点中使用 asp.net 日历，我发现下面的设计并想使用 css 将其设置为我的日历设计:

我现在使用下面的 html 和 css 来设计这样的:

 <asp:Calendar ID="Calendar1" runat="server" DayNameFormat="FirstLetter" Font-Names="Tahoma" Font-Size="11px" NextMonthText="." PrevMonthText="." SelectMonthText="»" SelectWeekText="›" CssClass="myCalendar" OnSelectionChanged="Calendar1_SelectionChanged" OnDayRender="Calendar1_DayRender" CellPadding="0">
            <OtherMonthDayStyle ForeColor="#b0b0b0" />
            <DayStyle CssClass="myCalendarDay" ForeColor="#2d3338" />
            <DayHeaderStyle CssClass="myCalendarDayHeader" ForeColor="#2d3338" />
<SelectedDayStyle Font-Bold="True" Font-Size="12px" CssClass="myCalendarSelector" />
            <TodayDayStyle CssClass="myCalendarToday" />
            <SelectorStyle CssClass="myCalendarSelector" />
            <NextPrevStyle CssClass="myCalendarNextPrev" />
            <TitleStyle CssClass="myCalendarTitle" />
        </asp:Calendar>

CSS

    .myCalendar {  
    background-color: #f2f2f2;  
    width: 156px;  
    border:10px solid #4CCAEF !important;
    border-top:0px !important;}  
    .myCalendar a {  
    text-decoration: none;  }  
.myCalendar .myCalendarTitle {  
    font-weight: bold;  
    height:40px;line-height:40px;
    background-color:#4CCAEF;
    color:#ffffff;
}  
.myCalendar th.myCalendarDayHeader  
{
    height:25px;
    border-bottom: outset 2px #fbfbfb; 
    border-right: outset 2px #fbfbfb; 
}
.myCalendar td.myCalendarDay {  
    border: outset 2px #fbfbfb;
}  
  .myCalendar td.myCalendarDay:nth-child(7) a{color:#c52e2e !important;}
.myCalendar .myCalendarNextPrev {  
    text-align: center;  
}  

.myCalendar .myCalendarNextPrev a  {font-size:1px;}
.myCalendar .myCalendarNextPrev:nth-child(1) a{color:#4CCAEF!important;background:url("prevMonth.png") no-repeat center center;}
.myCalendar .myCalendarNextPrev:nth-child(1) a:hover,.myCalendar .myCalendarNextPrev:nth-child(3) a:hover{background-color:transparent;}
.myCalendar .myCalendarNextPrev:nth-child(3) a{color:#4CCAEF!important;background:url("nextMonth.png") no-repeat center center;}
.myCalendar td.myCalendarSelector a {  
    background-color: #25bae5;  
}  

.myCalendar .myCalendarDayHeader a,
.myCalendar .myCalendarDay a,   
.myCalendar .myCalendarSelector a,  
.myCalendar .myCalendarNextPrev a {  
    display: block;  
    line-height: 20px;  
}  
.myCalendar .myCalendarToday{  background-color: #f2f2f2; -webkit-box-shadow: 0 0 7px 3px #e5e5e5;
box-shadow: 0 0 7px 3px #e5e5e5;}
.myCalendar .myCalendarToday a{color:#25bae5 !important;}
.myCalendar .myCalendarDay a:hover,   
.myCalendar .myCalendarSelector a:hover {  
    background-color: #25bae5;  
}

**我的页面来源:**

//

<div>
    <table id="Calendar1" class="myCalendar" cellspacing="0" cellpadding="0" title="Calendar" style="border-width:1px;border-style:solid;font-family:Tahoma;font-size:11px;border-collapse:collapse;">
<tr><td colspan="7" style="background-color:Silver;"><table class="myCalendarTitle" cellspacing="0" style="font-family:Tahoma;font-size:11px;width:100%;border-collapse:collapse;">
    <tr><td class="myCalendarNextPrev" style="width:15%;"><a href="javascript:__doPostBack('Calendar1','V5193')" style="color:Black" title="Go to the previous month">.</a></td><td align="center" style="width:70%;">اردیبهشت 1393</td><td class="myCalendarNextPrev" align="right" style="width:15%;"><a href="javascript:__doPostBack('Calendar1','V5255')" style="color:Black" title="Go to the next month">.</a></td></tr>
</table></td></tr><tr><th class="myCalendarDayHeader" align="center" abbr="شنبه" scope="col" style="color:#2D3338;">ش</th><th class="myCalendarDayHeader" align="center" abbr="یکشنبه" scope="col" style="color:#2D3338;">ی</th><th class="myCalendarDayHeader" align="center" abbr="دوشنبه" scope="col" style="color:#2D3338;">د</th><th class="myCalendarDayHeader" align="center" abbr="ﺳﻪشنبه" scope="col" style="color:#2D3338;">ﺳ</th><th class="myCalendarDayHeader" align="center" abbr="چهارشنبه" scope="col" style="color:#2D3338;">چ</th><th class="myCalendarDayHeader" align="center" abbr="پنجشنبه" scope="col" style="color:#2D3338;">پ</th><th class="myCalendarDayHeader" align="center" abbr="جمعه" scope="col" style="color:#2D3338;">ج</th></tr><tr><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5222')" style="color:#B0B0B0" title="فروردین 30">30</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5223')" style="color:#B0B0B0" title="فروردین 31">31</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5224')" style="color:#2D3338" title="اردیبهشت 01">1</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5225')" style="color:#2D3338" title="اردیبهشت 02">2</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5226')" style="color:#2D3338" title="اردیبهشت 03">3</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5227')" style="color:#2D3338" title="اردیبهشت 04">4</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5228')" style="color:#2D3338" title="اردیبهشت 05">5</a></td></tr><tr><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5229')" style="color:#2D3338" title="اردیبهشت 06">6</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5230')" style="color:#2D3338" title="اردیبهشت 07">7</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5231')" style="color:#2D3338" title="اردیبهشت 08">8</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5232')" style="color:#2D3338" title="اردیبهشت 09">9</a></td><td title="aaaaa" class="myCalendarToday" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5233')" style="color:#2D3338" title="اردیبهشت 10">10</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5234')" style="color:#2D3338" title="اردیبهشت 11">11</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5235')" style="color:#2D3338" title="اردیبهشت 12">12</a></td></tr><tr><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5236')" style="color:#2D3338" title="اردیبهشت 13">13</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5237')" style="color:#2D3338" title="اردیبهشت 14">14</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5238')" style="color:#2D3338" title="اردیبهشت 15">15</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5239')" style="color:#2D3338" title="اردیبهشت 16">16</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5240')" style="color:#2D3338" title="اردیبهشت 17">17</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5241')" style="color:#2D3338" title="اردیبهشت 18">18</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5242')" style="color:#2D3338" title="اردیبهشت 19">19</a></td></tr><tr><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5243')" style="color:#2D3338" title="اردیبهشت 20">20</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5244')" style="color:#2D3338" title="اردیبهشت 21">21</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5245')" style="color:#2D3338" title="اردیبهشت 22">22</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5246')" style="color:#2D3338" title="اردیبهشت 23">23</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5247')" style="color:#2D3338" title="اردیبهشت 24">24</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5248')" style="color:#2D3338" title="اردیبهشت 25">25</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5249')" style="color:#2D3338" title="اردیبهشت 26">26</a></td></tr><tr><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5250')" style="color:#2D3338" title="اردیبهشت 27">27</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5251')" style="color:#2D3338" title="اردیبهشت 28">28</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5252')" style="color:#2D3338" title="اردیبهشت 29">29</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5253')" style="color:#2D3338" title="اردیبهشت 30">30</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5254')" style="color:#2D3338" title="اردیبهشت 31">31</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5255')" style="color:#B0B0B0" title="خرداد 01">1</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5256')" style="color:#B0B0B0" title="خرداد 02">2</a></td></tr><tr><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5257')" style="color:#B0B0B0" title="خرداد 03">3</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5258')" style="color:#B0B0B0" title="خرداد 04">4</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5259')" style="color:#B0B0B0" title="خرداد 05">5</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5260')" style="color:#B0B0B0" title="خرداد 06">6</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5261')" style="color:#B0B0B0" title="خرداد 07">7</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5262')" style="color:#B0B0B0" title="خرداد 08">8</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5263')" style="color:#B0B0B0" title="خرداد 09">9</a></td></tr>

</form>

但是我有很多问题，我不能设置今天的风格，我的设计很糟糕，不像下图，大家能帮我一个完美的css吗？谢谢？

Answer 1

这就是我目前所拥有的，它肯定能够为您指明正确的方向:

http://jsfiddle.net/7wm8L/3/

有很多 CSS 更改，我还添加了一个带有类 calendarWrapper 的 div，这是在日历上添加边框的更好方法，但是不打破表格其余部分中 td 的边界。

<div class="calendarWrapper">
<!--Calendar here -->
</div>

CSS:

.calendarWrapper
{
    background-color: #4CCAEF;
    padding: 10px;
    display: inline-block;
}

.myCalendar
{
    background-color: #f2f2f2;
    width: 156px;
    border: none !important;
}

    .myCalendar a
    {
        text-decoration: none;
    }

    .myCalendar .myCalendarTitle
    {
        font-weight: bold;
        height: 40px;
        line-height: 40px;
        background-color: #4CCAEF;
        color: #ffffff;
        border: none !important;
    }

    .myCalendar th.myCalendarDayHeader
    {
        height: 25px;
    }

    .myCalendar tr
    {
        border-bottom: solid 1px #ddd;
    }

    .myCalendar table tr
    {
        border-bottom: none !important;
    }

    .myCalendar tr:last-child td
    {
        border-bottom: none;
    }

    .myCalendar tr td.myCalendarDay, .myCalendar tr th.myCalendarDayHeader
    {
        border-right: solid 1px #ddd;
    }

    .myCalendar tr td:last-child.myCalendarDay, .myCalendar tr th:last-child.myCalendarDayHeader
    {
        border-right: none;
    }

    .myCalendar td.myCalendarDay:nth-child(7) a
    {
        color: #c52e2e !important;
    }

    .myCalendar .myCalendarNextPrev
    {
        text-align: center;
    }

        .myCalendar .myCalendarNextPrev a
        {
            font-size: 1px;
        }

        .myCalendar .myCalendarNextPrev:nth-child(1) a
        {
            color: #4CCAEF!important;
            background: url("prevMonth.png") no-repeat center center;
        }

            .myCalendar .myCalendarNextPrev:nth-child(1) a:hover, .myCalendar .myCalendarNextPrev:nth-child(3) a:hover
            {
                background-color: transparent;
            }

        .myCalendar .myCalendarNextPrev:nth-child(3) a
        {
            color: #4CCAEF!important;
            background: url("nextMonth.png") no-repeat center center;
        }

    .myCalendar td.myCalendarSelector a
    {
        background-color: #25bae5;
    }

    .myCalendar .myCalendarDayHeader a,
    .myCalendar .myCalendarDay a,
    .myCalendar .myCalendarSelector a,
    .myCalendar .myCalendarNextPrev a
    {
        display: block;
        line-height: 20px;
    }

    .myCalendar .myCalendarToday
    {
        background-color: #f2f2f2;
        -webkit-box-shadow: 1px 1px 8px 1px #8f8f8f;
        box-shadow: 1px 1px 8px 1px #8f8f8f;
        display: inline-block;
        width: 22px !important;
        height: 19px !important;
        border: 2px solid #f2f2f2;
        margin-left: -1px;
        margin-top: -1px;
        position: relative;
    }

        .myCalendar .myCalendarToday a
        {
            color: #25bae5 !important;
            font-weight: bold;
        }

            .myCalendar .myCalendarToday a:after
            {
                content: "TODAY";
                color: #000;
                font-size: 0.5em;
                display: inline-block;
                pointer-events: none;
                width: 100%;
                float: left;
            }

    .myCalendar .myCalendarDay a:hover,
    .myCalendar .myCalendarSelector a:hover
    {
        background-color: #25bae5;
    }