极客时间之BOSS直聘手机端界面(一)
2019-07-01 本文已影响220人
极课编程
1.在VSCode中新创建一个项目并新建images文件夹以及index.html
2.将网页中的图片下载到本地images文件夹
双击图片就可以保存到本地
3.基本html结构(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="home-header">
<img src="./images/home-search-text.png" alt="">
<form action="">
<input type="text">
<button>搜索</button>
</form>
</div>
<!-- 分类 -->
<div class="home-categories">
<dl>
<dt>
<img src="./images/technology.png" alt="">
<div>技术</div>
</dt>
<dd>
<a href="" class="tag">Java</a>
<a href="" class="tag">PHP</a>
<a href="" class="tag">Web前端</a>
<a href="" class="tag">数据挖掘</a>
<a href="" class="tag">C++</a>
<a href="" class="tag">Python</a>
<a href="" class="tag">Android</a>
<a href="" class="tag">iOS</a>
</dd>
</dl>
</div>
<!-- 页脚 -->
<div class="home-footer">
<p>违法和不良信息举报邮箱：jubao@kanzhun.com</p>
<p>企业服务热线和举报投诉：400 065 5799</p>
</div>
</div>
</body>
</html>
4.下载Live Server插件浏览页面
浏览index.html如下图所示
5.创建main.css并在index.html中引用CSS文件
将body的外边距设置为0并设置字体
body {
margin: 0;
font-family: Arial, Helvetica, 'Microsoft Yahei',sans-serif;
}
设置.home-header样式
.home-header {
background: url(../images/home-bg.png) no-repeat;
/* 宽度100% 高度自适应 */
background-size: 100% auto;
/* 因为图片太大，需要让图片居中 */
text-align: center;
}
因为图片太大，需要让图片居中 ，在浏览器中测试
给img设置宽度
.home-header > img {
width: 65%;
}
实际效果如下图所示：
给img添加一个外边距
.home-header > img {
width: 65%;
/* 表示根路径root element的尺寸 也就是html默为16像素的字体大小*2 为32Px */
margin: 2rem;
}
给表单设置样试并居中显示
.home-header form {
background: white;
width: 90%;
/* 居中显示 */
margin: 0 auto;
}
效果如下图：
将头部.home-header添加底部内边距(padding-bottom)
.home-header {
background: url(../images/home-bg.png) no-repeat;
/* 宽度100% 高度自适应 */
background-size: 100% auto;
/* 因为图片太大，需要让图片居中 */
text-align: center;
/* 底部内边距 */
padding-bottom: 2rem;
}
设置行高，垂直居中
.home-header form {
background: white;
width: 90%;
/* 居中显示 */
margin: 0 auto;
/* 设置行高，垂直居中 */
line-height: 2.2rem;
/* 设置圆角 */
border-radius: 2.2rem;
}
效果如下图：
设置input的宽度、设置按钮字体大小和颜色
.home-header form input {
width: 75%;
}
.home-header form button{
font-size: 0.9rem;
color: #5cd5c7;
font-weight: lighter;
/* 边框背影全部去掉 */
border: none;
background: none;
}
最终效果如下：
