Ver 1.2
This commit is contained in:
AK
+30
-38
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Лабораторная работа №1</title>
|
||||
<style>
|
||||
/* Демонстрация наследования (Inheritance) - шрифт наследуется всеми элементами */
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #ffffff;
|
||||
@@ -14,80 +14,74 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Селектор идентификатора (ID Selector) */
|
||||
#layout-table {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/* Селектор элементов (Element selector) */
|
||||
table, th, td {
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
/* Оформление шапки: Явным образом задать шрифт (monospace), цвет и размер */
|
||||
#header {
|
||||
background-color: #eeeeee;
|
||||
color: #000000; /* Каскадирование */
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Каскадирование (Cascading) */
|
||||
#header span.variant {
|
||||
font-weight: bold;
|
||||
color: #cc0000;
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
/* Селектор классов (Class selector) */
|
||||
.content-cell {
|
||||
padding: 15px;
|
||||
vertical-align: top;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* Селектор дочерних элементов (Child Selector `>`) */
|
||||
#point-form > .form-group {
|
||||
margin-bottom: 20px; /* Отступы в px */
|
||||
padding: 10px; /* Отступы в px */
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
border: 1px dashed #aaaaaa;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
margin-right: 15px; /* Отступ в px */
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
|
||||
#point-form input[type="text"] {
|
||||
margin-left: 10px; /* Отступ в px */
|
||||
padding: 4px; /* Отступ в px */
|
||||
margin-left: 10px;
|
||||
padding: 4px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.r-button {
|
||||
margin-right: 10px; /* Отступ в px */
|
||||
padding: 5px 10px; /* Отступ в px */
|
||||
margin-right: 10px;
|
||||
padding: 5px 10px;
|
||||
background-color: #dddddd;
|
||||
border: 1px solid #888888;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.r-button.active {
|
||||
background-color: #888888;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#submit-btn {
|
||||
margin-top: 15px; /* Отступ в px */
|
||||
padding: 8px 16px; /* Отступ в px */
|
||||
margin-top: 15px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#clear-history-btn {
|
||||
padding: 5px 10px; /* Отступ в px */
|
||||
margin-bottom: 10px; /* Отступ в px */
|
||||
padding: 5px 10px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -95,13 +89,13 @@
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
margin-top: 5px; /* Отступ в px */
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
.global-error {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px; /* Отступ в px */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table-scroll-container {
|
||||
@@ -111,11 +105,11 @@
|
||||
|
||||
#results-table th {
|
||||
background-color: #eeeeee;
|
||||
padding: 8px; /* Отступ в px */
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#results-table td {
|
||||
padding: 8px; /* Отступ в px */
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -123,7 +117,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Пасхалка */
|
||||
#oscar-easter-egg {
|
||||
position: fixed;
|
||||
bottom: -350px;
|
||||
@@ -142,8 +135,8 @@
|
||||
<table id="layout-table">
|
||||
<tr>
|
||||
<td colspan="2" id="header">
|
||||
<span>ФИО: <b>Кливцов Александр Александрович</b></span> |
|
||||
<span>Группа: <b>P3215</b></span> |
|
||||
<span>ФИО: <b>Кливцов Александр Александрович</b></span> |
|
||||
<span>Группа: <b>P3215</b></span> |
|
||||
<span class="variant">Вариант: 12729</span>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -156,7 +149,7 @@
|
||||
<td class="content-cell">
|
||||
<h3>Форма проверки</h3>
|
||||
<form id="point-form">
|
||||
|
||||
|
||||
<div class="global-error" id="global-error"></div>
|
||||
|
||||
<div class="form-group" id="x-group">
|
||||
@@ -173,13 +166,13 @@
|
||||
<label><input type="checkbox" name="xval" value="2"> 2</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group" id="y-group">
|
||||
<label for="y-input"><b>Изменение Y:</b></label>
|
||||
<input type="text" id="y-input" name="yval" placeholder="-3 ... 5">
|
||||
<span class="error" id="y-error"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group" id="r-group">
|
||||
<label><b>Изменение R:</b></label><br>
|
||||
<button type="button" class="r-button" data-val="1">1</button>
|
||||
@@ -190,7 +183,7 @@
|
||||
<input type="hidden" id="r-hidden" name="rval" value="">
|
||||
<span class="error" id="r-error"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" id="submit-btn" disabled>Проверить попадание</button>
|
||||
</form>
|
||||
</td>
|
||||
@@ -199,7 +192,7 @@
|
||||
<td colspan="2" class="content-cell">
|
||||
<h3>История проверок</h3>
|
||||
<button type="button" id="clear-history-btn">Очистить историю</button>
|
||||
|
||||
|
||||
<div class="table-scroll-container">
|
||||
<table id="results-table">
|
||||
<thead>
|
||||
@@ -220,8 +213,7 @@
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Пасхалка -->
|
||||
<img id="oscar-easter-egg" src="assets/oscar.png" alt="Toasty">
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user