<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="v
iewport" content="width=device-width, initial-scale=1.0">
<title>University Professor Dashboard</title>
<style>
* {
margin
: 0;
padding
: 0;
box-sizing
: border-box;
font-family
: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color
: #f5f7fa;
padding
: 20px;
color
: #333;
}
.dashboard-container {
max-width
: 1200px;
margin
: 0 auto;
}
.dashboard-header {
display: flex;
justify-content
: space-between;
align-items
: center;
margin-bottom
: 20px;
padding-bottom
: 15px;
border-bottom
: 1px solid #ddd;
}
.dashboard-title {
font-size
: 24px;
font-weight
: 600;
color
: #2c3e50;
}
.filters {
display: flex;
gap
: 15px;
}
.filter-item {
padding
: 8px 12px;
border
: 1px solid #ddd;
border-radius
: 4px;
background
: white;
cursor
: pointer;
}
.dashboard-grid {
display: grid;
grid-template-columns
: 1fr 1fr;
grid-template-rows
: auto auto;
gap
: 20px;
}
.dashboard-card {
background
: white;
border-radius
: 8px;
box-shadow
: 0 2px 10px rgba(0, 0, 0, 0.05);
padding
: 20px;
display: flex;
flex-direction
: column;
}
.card-header {
display: flex;
justify-content
: space-between;
align-items
: center;
margin-bottom
: 15px;
padding-bottom
: 10px;
border-bottom
: 1px solid #eee;
}
.card-title {
font-size
: 18px;
font-weight
: 600;
color
: #2c3e50;
}
.card-more {
color
: #3498db;
cursor
: pointer;
font-size
: 14px;
}
.card-content {
flex
: 1;
display: flex;
flex-direction
: column;
gap
: 15px;
}
.chart-container {
height
: 200px;
background
: #f8f9fa;
border-radius
: 4px;
display: flex;
align-items
: center;
justify-content
: center;
color
: #7f8c8d;
margin-bottom
: 10px;
}
.data-
table {
width
: 100%;
border-collapse
: collapse;
}
.data-
table th, .data-
table td {
padding
: 10px;
text-align
: left;
border-bottom
: 1px solid #eee;
}
.data-
table th {
font-weight
: 600;
color
: #7f8c8d;
font-size
: 14px;
}
.status-indicator {
display: inline-
block;
width
: 10px;
height
: 10px;
border-radius
: 50%;
margin-right
: 5px;
}
.status-good {
background-color
: #2ecc71;
}
.status-warning {
background-color
: #f39c12;
}
.status-bad {
background-color
: #e74c3c;
}
.task-list {
list-style-type
: none;
}
.task-item {
padding
: 10px 0;
border-bottom
: 1px solid #eee;
display: flex;
align-items
: center;
}
.task-item
:last-child {
border-bottom
: none;
}
.task-checkbox {
margin-right
: 10px;
}
.task-text {
flex
: 1;
}
.task-date {
color
: #7f8c8d;
font-size
: 14px;
}
.calendar-v
iew {
display: grid;
grid-template-columns
: repeat(7, 1fr);
gap
: 5px;
}
.calendar-day {
height
: 30px;
display: flex;
align-items
: center;
justify-content
: center;
border-radius
: 4px;
font-size
: 14px;
}
.calendar-day.header {
font-weight
: 600;
color
: #7f8c8d;
background
: none;
}
.calendar-day.event {
background
: #e3f2fd;
color
: #1976d2;
}
.calendar-day.today {
background
: #1976d2;
color
: white;
}
.gauge-container {
display: flex;
justify-content
: space-around;
margin
: 15px 0;
}
.gauge {
text-align
: center;
}
.gauge-circle {
width
: 80px;
height
: 40px;
border-radius
: 80px 80px 0 0;
background
: #e0e0e0;
position
: relative;
overflow
: hidden;
margin
: 0 auto 10px;
}
.gauge-fill {
position
: absolute;
bottom
: 0;
width
: 100%;
background
: #3498db;
transition
: height 0.5s;
}
.gauge-label {
font-size
: 14px;
color
: #7f8c8d;
}
@media (max-width
: 768px) {
.dashboard-grid {
grid-template-columns
: 1fr;
}
}
</style>
</head>
<body>
<div class="dashboard-container">
<div class="dashboard-header">
<div class="dashboard-title">Professor Dashboard</div>
<div class="filters">
<div class="filter-item">This Semester</div>
<div class="filter-item">This Month</div>
<div class="filter-item">This Week</div>
</div>
</div>
<div class="dashboard-grid">
<!-- Teaching Module -->
<div class="dashboard-card">
<div class="card-header">
<div class="card-title">Teaching</div>
<div class="card-more">V
iew Details</div>
</div>
<div class="card-content">
<div class="chart-container">
Average Grades by Course (Bar Chart)
</div>
<div class="gauge-container">
<div class="gauge">
<div class="gauge-circle">
<div class="gauge-fill" style="height
: 75%"></div>
</div>
<div class="gauge-label">Student Satisfaction</div>
</div>
<div class="gauge">
<div class="gauge-circle">
<div class="gauge-fill" style="height
: 60%"></div>
</div>
<div class="gauge-label">Course Completion</div>
</div>
</div>
<div>
<h4>This Week's Classes</h4>
<
table class="data-
table">
<
tr>
<th>Course</th>
<th>Date/Time</th>
<th>Location</th>
</
tr>
<
tr>
<td>CS 101</td>
<td>Mon, 10
:00 AM</td>
<td>Room 302</td>
</
tr>
<
tr>
<td>DS 205</td>
<td>Wed, 2
:00 PM</td>
<td>Lab 115</td>
</
tr>
<
tr>
<td>CS 301</td>
<td>Fri, 11
:00 AM</td>
<td>Room 410</td>
</
tr>
</
table>
</div>
</div>
</div>
<!-- Research Module -->
<div class="dashboard-card">
<div class="card-header">
<div class="card-title">Research</div>
<div class="card-more">V
iew Details</div>
</div>
<div class="card-content">
<div class="chart-container">
Project Progress (P
ie Chart)
</div>
<div class="chart-container" style="height
: 150px;">
Research Funding Usage (Bar Chart)
</div>
<div>
<h4>Recent Publications</h4>
<
table class="data-
table">
<
tr>
<th>Paper Title</th>
<th>Journal/Conference</th>
<th>Status</th>
</
tr>
<
tr>
<td>AI in Education</td>
<td>Journal of EdTech</td>
<td><span class="status-indicator status-good"></span>Published</td>
</
tr>
<
tr>
<td>Data Visualization Methods</td>
<td>Viz Conference</td>
<td><span class="status-indicator status-warning"></span>Under Rev
iew</td>
</
tr>
<
tr>
<td>Learning Analytics</td>
<td>LAK Conference</td>
<td><span class="status-indicator status-bad"></span>Revisions Needed</td>
</
tr>
</
table>
</div>
</div>
</div>
<!-- Student Supervision Module -->
<div class="dashboard-card">
<div class="card-header">
<div class="card-title">Student Supervision</div>
<div class="card-more">V
iew Details</div>
</div>
<div class="card-content">
<div>
<h4>Graduate Student Progress</h4>
<
table class="data-
table">
<
tr>
<th>Student</th>
<th>Thesis Topic</th>
<th>Progress</th>
<th>Status</th>
</
tr>
<
tr>
<td>Alex Johnson</td>
<td>ML in Healthcare</td>
<td>85%</td>
<td><span class="status-indicator status-good"></span>On
Track</td>
</
tr>
<
tr>
<td>Sam Davis</td>
<td>Data Privacy</td>
<td>60%</td>
<td><span class="status-indicator status-warning"></span>Needs Attention</td>
</
tr>
<
tr>
<td>Taylor Kim</td>
<td>EdTech Tools</td>
<td>45%</td>
<td><span class="status-indicator status-bad"></span>Behind Schedule</td>
</
tr>
</
table>
</div>
<div>
<h4>Upcoming Meetings</h4>
<
table class="data-
table">
<
tr>
<th>Student</th>
<th>Date/Time</th>
<th>Purpose</th>
</
tr>
<
tr>
<td>Alex Johnson</td>
<td>Oct 15, 2
:00 PM</td>
<td>Thesis Draft Rev
iew</td>
</
tr>
<
tr>
<td>Sam Davis</td>
<td>Oct 16, 10
:00 AM</td>
<td>Research Problems</td>
</
tr>
</
table>
</div>
</div>
</div>
<!-- Adminis
trative Module -->
<div class="dashboard-card">
<div class="card-header">
<div class="card-title">Adminis
trative</div>
<div class="card-more">V
iew Details</div>
</div>
<div class="card-content">
<div>
<h4>Tasks To Do</h4>
<ul class="task-list">
<li class="task-item">
<input type="checkbox" class="task-checkbox">
<div class="task-text">Submit grades for CS 101</div>
<div class="task-date">Oct 20</div>
</li>
<li class="task-item">
<input type="checkbox" class="task-checkbox">
<div class="task-text">Rev
iew department budget</div>
<div class="task-date">Oct 22</div>
</li>
<li class="task-item">
<input type="checkbox" class="task-checkbox">
<div class="task-text">Prepare faculty meeting presentation</div>
<div class="task-date">Oct 25</div>
</li>
<li class="task-item">
<input type="checkbox" class="task-checkbox">
<div class="task-text">Submit research grant proposal</div>
<div class="task-date">Nov 1</div>
</li>
</ul>
</div>
<div>
<h4>Upcoming Meetings & Events</h4>
<div class="calendar-v
iew">
<div class="calendar-day header">S</div>
<div class="calendar-day header">M</div>
<div class="calendar-day header">T</div>
<div class="calendar-day header">W</div>
<div class="calendar-day header">T</div>
<div class="calendar-day header">F</div>
<div class="calendar-day header">S</div>
<div class="calendar-day">1</div>
<div class="calendar-day">2</div>
<div class="calendar-day">3</div>
<div class="calendar-day">4</div>
<div class="calendar-day">5</div>
<div class="calendar-day">6</div>
<div class="calendar-day">7</div>
<div class="calendar-day">8</div>
<div class="calendar-day">9</div>
<div class="calendar-day">10</div>
<div class="calendar-day">11</div>
<div class="calendar-day event">12</div>
<div class="calendar-day">13</div>
<div class="calendar-day">14</div>
<div class="calendar-day">15</div>
<div class="calendar-day event">16</div>
<div class="calendar-day">17</div>
<div class="calendar-day today">18</div>
<div class="calendar-day">19</div>
<div class="calendar-day event">20</div>
<div class="calendar-day">21</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Firefox下table布局错乱
本文探讨了在Firefox浏览器中使用display:block属性导致table布局错乱的现象，并提供了两种解决方案：一是使用display:table-row属性；二是使用display: ''。同时讨论了这两种方法在不同浏览器中的兼容性。
扫一扫
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
