#html #css
Вопрос:
Я новичок в html и пытаюсь создать страницу выхода из системы, которая должна выглядеть примерно так,
Я попробовал, но я не могу расположить значок в нужном месте, и все это должно быть заключено в коробку, которую я тоже не могу. Это мой код для того же самого.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Thank you!</title>
</head>
<i class="bi bi-check-circle"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="125" fill="#5D883C" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
</svg>
<body>
<div style="Width: 800px;
Height: 300px;
margin: 10px;">
</div>
<span style=
"font-size: 35px;
color: #707070;
margin-left: 30%;
text-align: center;"> Thank you! We value your support and partnership.</span>
<h4>
<span style="font-size: 16px; font-family:Calibri; color: #707070; text-align: center; margin-left: 45%;">Click here to log back in:
</span>
<a href="/App/Login.aspx"><span style="font-size: 16px; color:#5D883C;text-align: center;">Login</span></a>
</h4>
</body>
</html>
Нужна помощь в этом. Заранее спасибо
Комментарии:
1. Вот хороший ресурс: w3.org/Style/Examples/007/center.en.html
Ответ №1:
Вам просто нужно добавить это в свой CSS
svg{
display: block;
margin: 0 auto;
}
Дайте мне знать, если это сработает для вас.
Ответ №2:
Вот, сделал это:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Thank you!</title>
<style>
html, body
{
font-family: sans-serif;
}
#center
{
margin: 0 auto;
margin-top: 100px;
width: 1000px;
text-align: center;
}
#ty
{
font-size: 35px;
color: #707070;
display: blocK;
}
#bottom
{
width: 100%;
height: 40px;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
font-size: 16px;
border-top: 1px solid #555;
background-color: #ddd;
line-height: 40px;
}
svg
{
display: block;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="center">
<i class="bi bi-check-circle"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="125" fill="#5D883C" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
</svg>
<span id="ty"> Thank you! We value your support and partnership.</span>
<div id="bottom">
<span>Click here to log back in:</span>
<a href="/App/Login.aspx"><span style="font-size: 16px; color:#5D883C;text-align: center;">Login</span></a>
</div>
</div>
</body>
</html> Запустите полностью страницу
Комментарии:
1. Спасибо за помощь. Он работает нормально, но только одна вещь, нижняя часть также должна быть заключена внутри коробки в центре, как показано на рисунке. Я не могу понять, как я могу объединить центральный и нижний div?
Ответ №3:
Аналогичная реализация с использованием встроенных стилей выглядит следующим образом
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Thank you!</title>
</head>
<i class="bi bi-check-circle"></i>
<body>
<div style="width: 100%; text-align: center;">
<div
style="
border: 5px solid #f7f7f7;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="125"
height="125"
fill="#5D883C"
class="bi bi-check-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
/>
</svg>
<div>
<span style="font-size: 35px; color: #707070; text-align: center;">
Thank you! We value your support and partnership.</span
>
</div>
<div style="background-color: #f7f7f7; padding: 1px; margin-top: 20px;">
<h4>
<span
style="
font-size: 16px;
font-family: Calibri;
color: #707070;
text-align: center;
"
>Click here to log back in:
</span>
<a href="/App/Login.aspx"
><span
style="font-size: 16px; color: #5d883c; text-align: center;"
>Login</span
></a
>
</h4>
</div>
</div>
</div>
</body>
</html>
Код и коробка здесь
Ответ №4:
Вы можете попробовать вот так:
.container {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
width: 800px;
height: 300px;
margin: 10px;
border: 1px solid grey;
border-radius: 10px;
padding: 0;
padding-top: 50px;
-webkit-box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.75);
box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.4);
}
.title {
font-size: 35px;
color: #707070;
/*margin-left: 30%;*/
text-align: center;
}
h4 {
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid grey;
width: 100%;
margin: 0;
}
.desc {
font-size: 16px;
font-family: Calibri;
color: #707070;
text-align: center;
/*margin-left: 45%;*/
} <body>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="125" fill="#5D883C" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
</svg>
<p class="title"> Thank you! We value your support and partnership.</p>
<h4>
<p class="desc">Click here to log back in: </p>
<a href="/App/Login.aspx">
<span style="font-size: 16px; color:#5D883C;text-align: center;">Login</span>
</a>
</h4>
</div>
</body>