freeCodeCamp//响应式Web设计项目 - 建立致敬页面//Responsive Web Design Projects - Build a Tribute Page

最新推荐文章于 2024-07-24 21:45:01 发布

ProginnZoyo

最新推荐文章于 2024-07-24 21:45:01 发布

阅读量1.8k

点赞数 2

分类专栏： freeCodeCamp实战项目笔记文章标签： html css web html5 css3

本文链接：https://blog.csdn.net/weixin_50555183/article/details/109895712

版权

freeCodeCamp实战项目同时被 2 个专栏收录

4 篇文章 7 订阅

订阅专栏

笔记

4 篇文章 2 订阅

订阅专栏

freeCodeCamp//响应式Web设计项目 - 建立致敬页面//Responsive Web Design Projects - Build a Tribute Page

响应式Web设计项目

响应式Web设计项目

建立致敬页面
建立调查表
建立产品登陆页面
建立技术文档页面
建立个人投资组合网页

项目要求

构建一个功能类似于此的CodePen.io应用程序：https://codepen.io/freeCodeCamp/full/zNqgVx

项目目标

目标详细： Objective

User Story #1: My tribute page页面中应有一个元素带有 id=“main” ，此元素包含页面所有其他元素。
User Story #2: My tribute page页面中应有一个元素带有 id=“title” ，其中包含一个描述致敬页面主题的字符串（即文本）（例如“ Dr. Norman Borlaug”）。
User Story #3: My tribute page页面中应有一个 div 元素带有 id=“img-div” 。
User Story #4: 在 img-div 元素内，应该有一个 img 元素带有 id=“image” 。
User Story #5: 在 img-div 元素内，应该有一个带有 id=“img-caption” 的元素，该元素包含描述 img-div 所示图像的文本内容。
User Story #6: My tribute page页面中应有一个元素带有 id=“tribute-info” ，其中包含描述致敬页面主题的文本内容。
User Story #7: My tribute page页面中应有一个 a 元素带有 id=“tribute-link” ，该元素链接到一个外部站点，该站点包含有关致敬页面主题的其他信息。提示：您必须将标签的属性设置为target，然后将其设置为_blank，才能在新标签页（即 target="_blank" ）中打开链接。
User Story #8: img 元件应响应地调整，相对于它的父元素的宽度，而不会超过它的原始尺寸。
User Story #9: 该img元件应其父元素内居中。

项目代码

代码详情页

：My tribute page

html

<html>
<head>
  <meta charset="UTF-8">
  <title>致敬业</title>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</head>
<body>
  <div id="main">            <!--User Story #1-->
    <div id="title">         <!--User Story #2-->
      <h1 align="center">Dr. Norman Borlaug</h1>
    </div>
    <div id="img-div">        <!--User Story #3-->
      <img src="https://borlaug.tamu.edu/wp-content/uploads/2016/05/headshot_TexasAMAgrilife-172x300.jpg" id="image" alt="image"/><br/>        <!--User Story #4-->
      <p id="img-caption">     <!--User Story #5-->
      	Photo Credits: Texas A&M Agrilife
      </p> 
    </div>
    <div id="tribute-info">     <!--User Story #6-->
      <h5>March 25, 1914 – Sept. 12, 2009</h5>
      <p>Biography: Known as the father of the Green Revolution, Norman Ernest Borlaug was born in 1914 on a farm near Cresco, Iowa. After completing his early education in his hometown, he went on to study forestry and plant pathology at the University of Minnesota, where he earned his bachelor’s and master’s degrees and completed his doctorate in 1942. After two years as a microbiologist with the DuPont de Nemours Foundation , he took on the challenge of leading the wheat improvement efforts of the Cooperative Mexican Agricultural Program, sponsored by the Mexican government and the Rockefeller Foundation.</p>
      <p>In Mexico, Dr. Borlaug’s scientific knowledge found expression in a humanitarian mission: developing improved grain varieties to feed the hungry people of the world. A practical, energetic, hands-on researcher, Dr. Borlaug worked in the fields alongside farm workers, students, and interns, sharing his knowledge as well as the labor of producing food crops. During his twenty years in Mexico, Dr. Borlaug and his colleagues perfected a dwarf wheat variety that could produce large amounts of grain, resist diseases, and resist lodging – the bending and breaking of the stalk that often occurs in high-yielding grains. Under Dr. Borlaug’s guidance, this new wheat was planted with great success, not only in Mexico, but also in India and Pakistan. In subsequent years, the wheat was planted in nations in Central and South America, the Near and Middle East, and Africa.</p>
      <p></p>
    </div>
    <div>    <!--User Story #7-->
    <a href="https://borlaug.tamu.edu/home/dr-norman-borlaug/" target="_blank" id="tribute-link">More information about Dr. Norman Borlaug</a>  
    </div>
  </div>
</body>
</html>

css

#main {
  width: 1000px;
  height: auto;
  background-color: pink;
}
#title {
  color: blue;
  padding:20px;
}
#img-div {
  width: 300px;
  margin:20px;
  float: right;
  display: flex;      
  align-items: center;    
  justify-content: center;     <!--User Story #9-->
  flex-direction: column;
}
#image {
  width: 250px;
}
img {
  max-width: 100%; <!--User Story #8--> 
}
#img-caption {
  padding: 0;
}
#tribute-info {
  padding: 20px;
  margin:20px;
  font-size:17px;
}
h5{
  padding: 0px;
  margin: 10px;
  font-size: 20px;
}
#tribute-link{
  color: black;
  float: right;
}
a:hover{
  color: red;
}

Problem & Solution

Problem

	 对于FlexBox容器中的属性运用不熟练

Solution

flex的6个属性

flex-direction：容器内项目的排列方向（默认为横向排列）
flex-wrap：容器内项目换行方式
flex-flow：以上两个属性的简写方式
justify-content：项目在主轴上的对齐方式
align-items：项目在交叉轴上对齐方式
align-content：定义多根轴线的对齐方式。

运用

创建一个FlexBox容器

#box{
	display: flex;
}

flex-direction

#box {
	flex-direction: row | row-reverse | column | column-reverse;
}

row:沿水平主轴由左向右排列 （默认）
row-reverse:沿水平主轴由右向左排列
column:沿垂直主轴由上到下排列
column-reverse:沿垂直主轴由下到上排列

flex-wrap

#box {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap:不换行 （默认）
wrap:换行（第一行在上方）
wrap-reverse:必要时拆行或拆列 （以反方向顺序）

flex-flow

#box {
	flex-flow: <flex-direction> || <flex-wrap>;
}

两种属性的值用||连接；

justify-content

#box {
	jusify-content: flex-start | flex-end | center | space-between | space-around;
}

若主轴为X轴
flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐
space-around:每个项目两侧的间隔相等 （项目之间的间隔比项目与边框的间隔大一倍）

align-items

#box {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

若主轴为y轴
flex-start:上对齐
flex-end:下对齐
center:居中
baseline:项目的第一行文字的基线对齐
stretch:若项目未设置高度或设为auto，将占满整个容器的高度（默认）

align-content

#box {
	flex-direction: flex-start | flex-end | center | space-between | space-around | stretch;
}

若多根轴线在y轴上对齐方式
flex-start:与交叉轴起点对齐
flex-end:与交叉轴终点对齐
center:与交叉轴的中点对齐
space-between:与交叉轴两端对齐，轴线之间间隔平均分布
space-around:每根轴线两侧间隔都相等
stretch:轴线占满整个交叉轴

ProginnZoyo

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
freeCodeCamp//响应式Web设计项目 - 建立致敬页面//Responsive Web Design Projects - Build a Tribute Page

freeCodeCamp//响应式Web设计项目 - 建立致敬页面//Responsive Web Design Projects - Build a Tribute Page响应式Web设计项目项目要求项目目标项目代码代码详情页htmlcssProblem & SolutionProblemSolutionflex的6个属性运用响应式Web设计项目建立致敬页面建立调查表建立产品登陆页面建立技术文档页面建立个人投资组合网页项目要求构建一个功能类似于此的CodePen.io应用程序
复制链接

扫一扫