boss直聘项目说明

1.container包裹整个文档

2.home-header 首页头部，头部插入一张图片，一个搜索框（form 要提交的表单 action）+输入框（功能）【  左边是一个输入文本框  <input type="text" name="">
                <button >搜索</button>右边是一个按钮】，背景图后面css再加

3.下来是主页分类home-categories 很典型的列表标题，我们用dl-dt－ｄｄ来做 dt里面写列表元素的头部这一块，左边是一张图片，右边是技术两个字，可以写一个<div>技术＜／ｄｉｖ＞

ｄｔ的下面是列表的数据用ｄｄ

ｄｄ文字都是可点的链接并且有样式　ａ．ｔａｇ按ｔａｂ

中间部分就做好了。

底部加一个．ｈｏｍｅ－ｆｏｏｔｅｒ　这是两段文字，直接ｐ标签

二、新建css文件夹style，main.css表示主要部分的

1.body设置maggin:0;

font-family字体样式font-family:Arial, Helvetica, sans-serif,

2.开始构建  
添加电脑需要的字体
（1）微软雅黑，arial,苹果自带字体等等，方便后期加入。

.home-header 元素居中的 text-align: center;

（2）加背景图片，背景不重复。

（3）尺寸定义  background-size: 100%  auto;

 两个参数，宽度100%，高度自适应

.home-header>img{
，宽度65%

margin: 2rem;
}根元素的像素，没有定义就是默认1rem=16px

(4)下来一个头部只有form，不用加class .home-header form
里面的form  border-radius: 2.2rem; 圆角和行高一样就可以实现正确的圆角样式了

(5)width: 90%;
    margin: 0 auto; 宽度90% 不会太宽，边距左右0 上下居中

.home-header {  padding-bottom: 1rem;{
内部下移动

.home-header form 
{line-height: 1.5rem; r让搜索框高一点，同时保证字在垂直方向上是居中的

不用箭头，空格一下也表示字元素

(5)字体大小12px，颜色font-size: 0.9rem;color: #55CBC4;

font-weight: lighter;

 字体亮些，细些

按钮要把边框和背景都去掉

去掉输入框边框，去掉聚焦的样式

(4) 上下为0 内边距   padding: 0 1rem;左右一个rem

.home-content dl dt img{
    height: 3rem;
}设置图片的宽高

让img
和div
显示在一行flex布局

display: flex;
align-items:center;

让其flex然后中向对齐

margin-right: 1rem;

 空出右边边距

用鼠标一点发现有间距dd  .home-content dl dt dd{
margin: 0;
}可以是背景色

.home-content dl dt dd .tag{
    background: #f5f8f9;
    color: #7e8793;
}

background

padding: 0.5rem 1rem;
    display: inline-block;
设置成行内块级元素

转载于:https://www.cnblogs.com/lidepeng/p/11220220.html