Html Asp.net日历自定义css样式

我想在我的网站中使用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>

**我的页面来源：**

//

اردیبهشت 1393
شیدﺳچپج

---

但我有很多问题，我不能设置今天的风格，我的设计非常糟糕，不喜欢下面的图片，大家能帮我一个完美的css吗？谢谢你？

这是我到目前为止所拥有的，它肯定能为你指明正确的方向：

CSS有很多变化，我还添加了一个

div

，带有

calendarWrapper

类，这是在日历上添加边框的更好方法，但不会在表的其余部分破坏td上的边框

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

---

除了asp代码之外，您是否可以“查看源代码”并为日历提供生成的

html

，以便我可以在小提琴中使用它？@wf4是的，我现在提供。谢谢。

<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>

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

.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;
    }