仍在学习中，我已尽我所知尽一切努力来完成这项工作。我正在尝试应用以下内容：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 关注
- 60 浏览
添加回答
举报
0/150
提交
取消