响应式Web设计项目
项目要求
构建一个功能类似于此的CodePen.io应用程序：https://codepen.io/freeCodeCamp/full/zNqgVx
项目目标
目标详细在： 网页 https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page
项目代码
代码详情页
html
<html>
<head>
<Meta charset="UTF-8">
<title>My Product Landing Page</title>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</head>
<body>
<div id="header">
<nav id="nav-bar">
<a href="#header-img" class="nav-link">Marvel characters</a>
<a href="#div" class="nav-link">Marvel animation</a>
<a href="#form" class="nav-link">Matvel movie</a>
</nav>
<br/><br/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606075010302&di=f0bae1b062c18ea8af0602129b89db8b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181117%2F0fe7a984e2c14ef1bcf11969c264e108.jpeg" id="header-img">
</div>
<div id="div">
<video id="video" controls="controls">
<source src="https://b23.tv/vXRBbB">
</video>
</div>
<form id="form" method="get" action="https://www.freecodecamp.com/email-submit">
<input type="email" id="email" name="email" placeholder="this is email" required/>
<input type="submit" id="submit">
</form>
</body>
</html>
css
body{
height: 100%;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
}
a{
color: #A5A5A5;
background-color: #333333;
margin: 1px;
padding: 5px;
border-radius: 5px;
font-family: 黑体;
text-decoration: none;
}
a:hover{
color: #A51000;
}
#header-img{
padding: 0px;
margin: 0px;
width: 100%;
height: 100px;
}
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
#nav-bar{
position: fixed;
width: 100%;
background-color: #333333;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#form {
position: relative;
width: 100%;
background-color: #333333;
display: flex;
flex-direction: row;
justify-content: center;
}
#submit {
color: #A5A5A5;
background-color: black;
border-radius: 5px;
}
#submit:hover {
background-color: #666666
}
video {
padding-top: 50px;
padding-bottom: 50px;
width: 600px;
}
Problem & Solution
Problem
- 对于< form >表单提交到静态页面不熟悉
- css布局元素始终位于视口顶部
Solution
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
