Зверстати сторінку, як показано на малюнку (круг з цифрою в середині та тонкий прямокутник). Всі розміри задані в пікселах і не змінюються при розширенні вікна браузера. Відображатися сторінка повинна правильно у всіх сучасних браузерах.
Результат:
файл *.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример страницы</title>
</head>
<body>
<div class="form">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c3">3</div>
<div class="c4">4</div>
<div class="c5">5</div>
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
</div>
</body>
</html>
файл *.css
.form {
/*outline: 1px solid #aaaaaa;*/
width: 370px; /*368px*/
height: 40px;
}
.c1, .c2, .c3 {
width: 40px;
height: 40px;
border-radius:20px;
background-color: #B2D235;
text-align: center;
color: white;
line-height: 35px;
}
.c4 {
width: 40px;
height: 40px;
border-radius:20px;
background-color: #AB4A9C;
left: 240px;
top: -120px;
position: relative;
text-align: center;
color: white;
line-height: 35px;
}
.c5 {
width: 40px;
height: 40px;
border-radius:20px;
background-color: #CCCCCC;
left: 320px;
top: -160px;
position: relative;
text-align:center;
line-height: 35px;
}
.c2 {
left: 80px;
top: -40px;
position: relative;
}
.c3 {
left: 160px;
top: -80px;
position: relative;
}
.p1 {
width: 40px;
height: 4px;
background-color: #CCCCCC;
position: relative;
left: 40px;
top: -180px;
}
.p2 {
width: 40px;
height: 4px;
background-color: #CCCCCC;
position: relative;
left: 120px;
top: -185px;
}
.p3 {
width: 40px;
height: 4px;
background-color: #CCCCCC;
position: relative;
left: 200px;
top: -190px;
}
.p4 {
width: 40px;
height: 4px;
background-color: #CCCCCC;
position: relative;
left: 280px;
top: -195px;
}
файл *.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример страницы</title>
</head>
<body>
<div class="form">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c3">3</div>
<div class="c4">4</div>
<div class="c5">5</div>
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
</div>
</body>
</html>
.form {
/*outline: 1px solid #aaaaaa;*/
width: 370px; /*368px*/
height: 40px;
}
.c1, .c2, .c3 {
width: 40px;
height: 40px;
border-radius:20px;
background-color: #B2D235;
text-align: center;
color: white;
line-height: 35px;
}
.c4 {
width: 40px;
height: 40px;
border-radius:20px;
background-color: #AB4A9C;
left: 240px;
top: -120px;
position: relative;
text-align: center;
color: white;
line-height: 35px;
}
.c5 {
width: 40px;
height: 40px;
border-radius:20px;
background-color: #CCCCCC;
left: 320px;
top: -160px;
position: relative;
text-align:center;
line-height: 35px;
}
.c2 {
left: 80px;
top: -40px;
position: relative;
}
.c3 {
left: 160px;
top: -80px;
position: relative;
}
.p1 {
width: 40px;
height: 4px;
background-color: #CCCCCC;
position: relative;
left: 40px;
top: -180px;
}
.p2 {
width: 40px;
height: 4px;
background-color: #CCCCCC;
position: relative;
left: 120px;
top: -185px;
}
.p3 {
width: 40px;
height: 4px;
background-color: #CCCCCC;
position: relative;
left: 200px;
top: -190px;
}
.p4 {
width: 40px;
height: 4px;
background-color: #CCCCCC;
position: relative;
left: 280px;
top: -195px;
}
Немає коментарів:
Дописати коментар