电子日历HTML布局,css

css

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

* {

box-sizing: border-box;

padding: 0;

margin: 0;

}

body {

background: #7e9dff;

font-family: "Roboto", sans-serif;

display: flex;

align-items: center;

height: 100vh;

}

.main-container {

background: #ecfffc;

color: #7e9dff;

width: 500px;

margin: auto;

border-radius: 10px;

}

h4 {

color: #7e9dff;

opacity: 0.7;

}

ul {

list-style: none;

}

a {

text-decoration: none;

}

.calendar-head {

display: flex;

justify-content: space-between;

padding: 30px;

border-bottom: 2px solid #7e9dff;

}

.calendar-body {

padding: 30px;

text-align: center;

}

.weekdays {

text-transform: uppercase;

color: #7e9dff;

font-weight: bold;

font-size: 0.9rem;

display: grid;

grid-template-columns: repeat(7, 1fr);

margin-bottom: 10px;

}

.days {

display: grid;

grid-template-columns: repeat(7, 1fr);

}

.days li {

padding: 10px 0;

cursor: pointer;

position: relative;

}

.days li:hover {

color: #c74b43;

}

.previous-month {

opacity: 0.2;

}

.date-with-event {

border: 2px solid #7e9dff;

padding: 10px;

border-radius: 50%;

}

.date-with-event:hover {

background: #7e9dff;

color: #ecfffc;

font-weight: bold;

}

.event-count {

position: absolute;

top: 0;

right: 5px;

font-size: 0.6rem;

background: #c74b43;

color: #fff;

display: block;

padding: 2px 5px;

border-radius: 50px;

}

.active {

background: #7e9dff;

color: #ecfffc;

font-weight: bold;

padding: 10px;

border-radius: 50%;

}

.calendar-footer {

display: flex;

align-items: center;

justify-content: space-between;

padding: 30px;

border-top: 2px solid #7e9dff;

}

.add-event-btn {

color: #7e9dff;

padding: 10px 15px;

border: 2px solid #7e9dff;

border-radius: 50%;

}

.add-event-btn:hover {

background: #7e9dff;

color: #ecfffc;

}