仍在學習中，我已盡我所知盡一切努力來完成這項工作。我正在嘗試應用以下內容：https://codepen.io/tech-lane/pen/XWbqGyx到我在此處找到的布局中的標題：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_make_a_website應用它時，CSS 無法正確設置其樣式。我希望這里有人能指出我正確的方向。
1 回答
胡子哥哥
TA貢獻1825條經驗 獲得超6個贊
試試這個代碼：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Style the top navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%;
/* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%;
/* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
@import url("https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap");
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container * {
margin: 0;
padding: 0;
}
.container .box {
width: 250px;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
}
.container .box .title {
width: 100%;
position: relative;
display: flex;
align-items: center;
height: 50px;
}
.container .box .title .block {
width: 0%;
height: inherit;
background: #ffb510;
position: absolute;
animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
display: flex;
}
.container .box .title h1 {
font-family: 'Poppins';
color: #fff;
font-size: 32px;
-webkit-animation: mainFadeIn 2s forwards;
-o-animation: mainFadeIn 2s forwards;
animation: mainFadeIn 2s forwards;
animation-delay: 1.6s;
opacity: 0;
display: flex;
align-items: baseline;
position: relative;
}
.container .box .title h1 span {
width: 0px;
height: 0px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ffb510;
-webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
animation: popIn 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
animation-delay: 2s;
margin-left: 5px;
margin-top: -10px;
position: absolute;
bottom: 13px;
right: -12px;
}
.container .box .wordCarousel {
font-size: 36px;
font-weight: 100;
color: #939393;
}
.container .box .wordCarousel div {
overflow: hidden;
position: relative;
float: left;
height: 45px;
padding-top: 5px;
margin-top: -10px;
}
.container .box .wordCarousel div li {
font-family: Serif;
color: #ccc;
font-weight: 250;
padding: 0 5px;
height: 45px;
margin-bottom: 45px;
display: block;
}
.flip4 {
animation: flip4 15s cubic-bezier(1, 1, 0.32, 1.2) infinite;
}
@keyframes flip4 {
0% {
margin-top: -360px;
}
5% {
margin-top: -270px;
}
25% {
margin-top: -270px;
}
30% {
margin-top: -180px;
}
50% {
margin-top: -180px;
}
55% {
margin-top: -90px;
}
75% {
margin-top: -90px;
}
80% {
margin-top: 0px;
}
99.99% {
margin-top: 0px;
}
100% {
margin-top: -270px;
}
}
@keyframes mainBlock {
0% {
width: 0%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
@keyframes secBlock {
0% {
width: 0%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
@keyframes mainFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes popIn {
0% {
width: 0px;
height: 0px;
background: #e9d856;
border: 0px solid #ddd;
opacity: 0;
}
50% {
width: 10px;
height: 10px;
background: #e9d856;
opacity: 1;
bottom: 45px;
}
65% {
width: 7px;
height: 7px;
bottom: 0px;
width: 15px;
}
80% {
width: 10px;
height: 10px;
bottom: 20px;
}
100% {
width: 7px;
height: 7px;
background: #e9d856;
border: 0px solid #222;
bottom: 13px;
}
}
@keyframes secFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.5;
}
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="box">
<div class="title">
<span class="block"></span>
<h1>Lane Willmore<span></span></h1>
</div>
<!-- here role goes -->
<h4 class="wordCarousel">
<div>
<!-- Use classes 2,3, or 4 to match the number of words -->
<ul class="flip4">
<li>word 1</li>
<li>word 2</li>
<li>word 3</li>
<li>word 4</li>
</ul>
</div>
</h4>
</div>
</div>
</div>
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
- 1 回答
- 0 關注
- 168 瀏覽
添加回答
舉報
0/150
提交
取消