1
で
たぶん誰かがそれに目を通すと、私に私が間違っているヒントを与えることができます。ありがとうございました。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}
/********** LANDINGPAGE.CSS **********/
/********** **********/
*, header, footer {
font-family: 'Roboto', sans-serif;
font-size: 1vw;
color: #4c4c4c;
letter-spacing: 0.05em;
text-decoration: none;
}
h1 {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 4vw;
}
/********** SITE **********/
.wrap_site {
max-width: 100%;
margin: 0 5%;
}
.wrap_content {
display: flex;
align-items: center;
justify-content: center;
}
.button {
border: 1px solid #4c4c4c;
display: inline-block;
cursor: pointer;
font-size: 1vw;
padding: 8px 18px;
background-color: white;
}
.button:hover {
transition: background-color 0.5s ease;
color: white;
background-color: #4c4c4c;
}
/********** HEADER **********/
.wrap_header {
left: 0;
right: 0;
top: 0;
border-bottom: 1px solid #4c4c4c;
padding-top: 1rem;
padding-bottom: 1rem;
}
header {
display: flex;
justify-content: space-between;
}
/********** FOOTER **********/
.wrap_footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 5%;
border-top: 1px solid #4c4c4c;
padding-top: 1rem;
padding-bottom: 1rem;
}
footer {
display: flex;
justify-content: space-between;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
\t <div class="wrap_site">
\t <div class="wrap_header">
\t \t <header>
\t \t \t <p></p> <!-- filler -->
\t \t \t <p>This website is currently under construction.</p> \t </header> \t </div>
\t \t \t \t \t \t
\t <main class="wrap_content">
\t \t <h1>Hi, my name is x. Welcome to my website.</h1>
\t \t <h2 id="translate">你好, 我叫 x。欢迎来到我的网站。</h2>
\t \t </br>
\t \t <h2><a href="#" class="button">ABOUT ME</a></h2> \t </main>
\t \t
\t <div class="wrap_footer">
\t \t <footer>
\t \t \t <a href="mailto:x">[email protected] </a>
\t \t \t <a href="imprint">⚖️ Imprint</a> \t </footer> \t </div> \t </div>
<!-- AUTOTRANSLATE -->
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/x-javascript">
jQuery(function ($) {
var languages = ["¡Hola, me llamo x! Bienvenido a mi página web.", "Привет, меня зовут x. Добро пожаловать на мой сайт.","Hallo, ich heiße x. Willkommen auf meiner Webseite.", "你好, 我叫 x。欢迎来到我的网站。"];
var counter = 0;
var $exc = $('#translate')
setInterval(function() {
$exc.text(languages[counter++]);
if (counter >= languages.length) {
counter = 0;
}
}, 2500)
})
</script>
</body>
</html>
は、あなたが "垂直方向と水平方向中央" によって何を意味するか説明できますか？たぶんあなたが達成しようとしているもののスクリーンショット。 –
は[こちら] [1]何かを中心におよそ良い記事です;）水平および垂直。 私が始まるの提案;） [1]：https://css-tricks.com/centering-css-complete-guide/ – Darex1991