目录
一、编码过程中遇到的问题
1、在HTML中引入iconfont遇到的问题
先进入iconfont官网选择你想要的iconfont，加入你的项目，进入项目之后生成链接（我习惯使用Font class方式，网上有其他方式引入HTML的方法）
点击生成的代码，把它显示的内容复制到你自己的iconfont.css文件中，也可以直接在HTML中用<link>标签引入（link标签中的href写上图中生成的代码）
注意！一定要在src的网址前面加http: ，不然会引入失败
在HTML中使用如下代码引入图标
<i class="iconfont icon-sanheng1"></i>2.插入图片
根据用户视图的大小，图片的长度和宽度要自适应显示，不要出现变形情况
作为背景图片插入时，可以通过设置z-index将图片置于底层，也可以直接应用background:url();来设置
3.浮动问题
在本次实战编码中，有很多地方用到了float属性，要注意使用float对正常文件流造成的影响，以及如何处理。具体关于浮动问题的知识，可见上一篇文章
二、具体实战成果
我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="task6.css">
<link rel="stylesheet" href="icon.css">
</head>
<body>
<div class="head">
<div class="title">
<p style="float: left; color: rgb(174, 127, 219);background-color: white;letter-spacing: 2px;padding: 2px;">FORTY</p>
<p style="letter-spacing: 2px;float: left;margin-left: 10px;">BY HTMLS UP</p>
<i class="iconfont icon-sanheng1" style="letter-spacing: 2px;float: right;"></i>
<p style="margin-right: 10px;float: right;letter-spacing: 2px;">MENU</p>
<!-- <i class="iconfont icon-youjiantou"></i> -->
</div>
<div class="word">
<p style="font-size: 30px;">Landing</p>
<hr style="width: 80%;">
<p>LOREM IPSUM SIT AMET NULLAN CONSEQUAT <br>SED VEROEROS. TEMPUS ADIPISCING NULLA.</p>
</div>
</div>
<div class="content1">
<img src="img/tnt.jpg" alt="" style="float: left;">
<div class="text">
<p style="font-size: 20px;">Orci maecenas</p>
<hr style="width: 150px;">
<p>Nullam et orci eu lorem consequat tincidunt vivamus et sa gttis magna sed nunc rthoncus <br>
condimentum sem. In fficitur ligula tate urna. Maecenas massa sed magna lacinia magna <br>
pellentesque lorem ipsum dolor, Nullam et orci eu lorem consequat tincidunt. Vivamus et <br>
sagitis tempus.
</p>
<button>LEARN MORE</button>
</div>
</div>
<div class="content2">
<img src="img/tnt.jpg" alt="" style="float: right;">
<div class="text">
<p style="font-size: 20px;">Rhoncus magna</p>
<hr style="width: 150px;">
<p>Nullam et orci eu lorem consequat tincidunt vivamus et sa gttis magna sed nunc rthoncus <br>
condimentum sem. In fficitur ligula tate urna. Maecenas massa sed magna lacinia magna <br>
pellentesque lorem ipsum dolor, Nullam et orci eu lorem consequat tincidunt. Vivamus et <br>
sagitis tempus.
</p>
<button>LEARN MORE</button>
</div>
</div>
<div class="content1">
<img src="img/tnt.jpg" alt="" style="float: left;">
<div class="text">
<p style="font-size: 20px;">Sed nunc ligula</p>
<hr style="width: 150px;">
<p>Nullam et orci eu lorem consequat tincidunt vivamus et sa gttis magna sed nunc rthoncus <br>
condimentum sem. In fficitur ligula tate urna. Maecenas massa sed magna lacinia magna <br>
pellentesque lorem ipsum dolor, Nullam et orci eu lorem consequat tincidunt. Vivamus et <br>
sagitis tempus.
</p>
<button>LEARN MORE</button>
</div>
</div>
<div class="content2" style="height: 270px;">
<div class="text">
<p style="font-size: 20px;">Massa libero</p>
<hr style="width: 150px;">
<p>Nullam et orci eu lorem consequat tincidunt vivamus et sa gttis magna sed nunc rthoncus <br>
condimentum sem. In fficitur ligula tate urna. Maecenas massa sed magna lacinia magna <br>
pellentesque lorem ipsum dolor, Nullam et orci eu lorem consequat tincidunt. Vivamus et <br>
sagitis tempus.
</p>
<button>GET STARTED <i class="iconfont icon-youjiantou"></i></button>
</div>
</div>
<div class="foot">
<p>© Untitled </p>
<p> | </p>
<p> Design: </p>
<p style="text-decoration: underline;">HTML5 UP</p>
</div>
</body>
</html>*{
margin: 0;
padding: 0;
}
.head{
width:100%;
height:300px;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background: url(img/head.jpg) no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
.title{
padding: 4px 5px;
}
p , i{
color: white;
}
hr{
margin: 10px 0px;
border-top: white;
border-color: white;
}
.word{
margin-top: 100px;
padding-left: 10%;
}
.content1{
width: 100%;
height: 300px;
background-color: rgb(45, 45, 105);
}
.content2{
width: 100%;
height: 300px;
background-color: rgb(70, 70, 146);
}
img{
width: 300px;
}
.text{
padding-left: 50px;
padding-top: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
button{
width: 200px;
color: white;
border: 1px solid white;
padding: 15px;
margin-top: 15px;
background-color: transparent;
letter-spacing: 2px;
}
.foot{
width: 100%;
height: 100px;
box-sizing: border-box;
background-color: rgb(45, 45, 105);
display: flex;
flex-direction: row;
align-items: center;
padding-left: 100px;
}
.foot p{
color: rgb(137, 176, 207);
}
我的成果图
需改进的问题
1、对相关css属性还是不熟练，尤其关于布局问题
2、习惯于在html标签中直接修改style属性，这不利于今后的实际工作开发
3、对于调整图片适应性还存在疑惑
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
