WebDesign

发表于 | 分类于 ，

FreeCodeCamp-Projects

本文记录我在fcc中文社区刷的题，做的小项目。2020/4/1。

Responsive Web Design Projects

响应式网页设计项目。在此之前已经学过基本的知识，一天内把前面的小练习做完，现在是时候把学到的技能付诸实践了！通过接下来的项目，fcc让我有机会实践目前所学的技能，原理和概念，HTML，CSS，可视化设计，辅助功能等。

  1. 搭建致敬页
  2. 搭建调查表格
  3. 搭建产品主页
  4. 搭建技术文档页面
  5. 搭建个人作品集页面

致敬页

fcc题目（需求）地址

我制作的页面地址

这个页面制作简单，很基本的页面，但有一个地方需要注意：

img元素应相对于其父元素的宽度响应地调整大小，但不超过其原始大小。

我一开始忽略了这个需求，看错误报告也发下缩小页面后图片不能自适应，对于手机端来说更是个大问题，所以为图片添加css样式

1
2
3
4
5
#image {
			max-width:100%;
			height:auto; 
			margin:0 auto;
}

如此一来图片可以随着拉伸页面进行自适应了，问题也就解决了。( •̀ ω •́ )y

调查表单

fcc题目（需求）地址

我制作的页面地址

给网页添加了背景图，但是发现这样会使文字看不清，想要实现背景图和颜色遮罩，我一开始想要使用伪类元素解决：

1
2
3
4
5
6
7
8
9
body::after{
  position:absolute;
  content:"";
  width:100%;
  height:100%;
  top:0;
  left:0;
  background: rgba(255, 255, 255, 0.2);
}

出现文字也被遮罩，所以我使用添加新标签

，添加css为

1
2
3
4
5
6
main {
  background: rgba(255, 255, 255, 0.2);
  width:100%;
  height:100%;
  position:absolute;
}

可以实现。

但是当内容高度大于窗口高度，需要滑动滚动条时，出现问题：

下方没有了遮盖，检查代码发现main标签添加了绝对定位absolute，虽然高度为100%，那是针对浏览器窗口大小所定的，并非随着body大小而改变，将 

1
position:absolute;

去掉即可 。（尽量让代码简洁，不要出现多余的代码😵）

制作表单，让其居中时发现form始终无法居中，分析原因是form本身只是一个表单，对页面根本没有布局的作用，因此无法居中，解决方法是在form外面嵌套div标签，给div标签添加css样式text-align:center;解决。

产品登录页

题目需求页面

我制作的网页

运用flexbox可以布局灵活的页面.

1
2
3
4
5
6
7
8
9
10
11
12
13
#nav-bar {
  width: 50%;
  float: right;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}
footer {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

媒体查询也是响应式布局的好方法。当视口宽度最大值小于400px时，padding:0;

1
2
3
4
5
@media (max-width: 400px) {
  .nav-link {
    padding:0;
  }
}

使用iframe给网页嵌入视频，点击全屏无反应，查阅资料说不建议使用iframe，bug多，改用video标签引入后可以使用。

1
2
3
<video src="http://www.w3school.com.cn/i/movie.ogg" controls>
//此处可以添加多个<source></source>  添加多个视频格式不一样，解决浏览器兼容性问题。
</video>

flexbox和媒体查询的使用较为生疏，多使用才能熟练掌握。

技术文档

题目需求页面

我制作的网页地址

设计可以滚动的侧边导航栏：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 290px;
  height: 100%;
  width:300px;
  text-align: center;
}
.uu {
  /*   100%则没有滚动的空间 */
  height: 88%;
  /*   滚动条的设置 */
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 20px;
  border-right: 5px solid #ccc;
}

媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media only screen and (max-width:800px)
{
/*   响应手机端 */
  #navbar ul{
    border:1px solid #ccc;
    height:200px;
  }
  #navbar{
    position:absolute;   //浮在页面最上方
    width:100%;           //视口宽度
    max-height:270px;
    border:1px solid blue;
  }
}

个人网站

题目需求页面

我制作的页面

插入图片下方有缝隙

添加图片样式，解决

1
vertical-align:bottom;

flex和grid是当前流行的布局方法。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

我一开始使用flex布局实现下图：

1
2
3
4
5
6
7
8
9
10
11
12
13
#flexx{ /*父盒子*/
  width:100%;
  display:flex;
  flex-flow: row wrap;
  justify-content:space-around;
  align-items:center;
  align-content:space-around;
}
#flexx div{ /*子盒子*/
  width:400px;
  height:450px;
  display:flex;
}

使用grid布局

1
2
3
4
5
6
7
8
9
#usegrid{
  width:100%;
  display:grid;
  grid-gap:50px;  
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  max-width:1280px;
  padding:0 20px;
  margin: 0 auto; //居中。
}

同样可以实现，更为方便。

在为project-title两边添加隐藏尖括号，鼠标悬停时显示时，使用

1
2
3
4
5
6
.code{
	display:none;
}
.code:hover{
	display:inline-block;
}

导致文字位置发生移动。因为display:none;不会保留元素位置。

使用visibility可以解决，隐藏时保留位置。

1
2
3
4
5
6
.code{
	visibility:hidden;
}
.code:hover{
	visibility:visible;
}

如果是文字的话，可以把内容颜色设为与背景色一致，悬停时改变颜色。

这几个小项目难度不大，但是需要留意小细节的地方，可以学到响应式布局的方法。