今天我们来尝试用HTML和CSS做一个页面,我模仿的是BOSS直聘的招聘页面。
这是我做的效果:
这个是原版页面:
现在开始我的思路:
首先我将这个页面分成了两个部分,最上面的黑色部分和下面的绿色部分。我们先做黑色部分,(在图中的数据不是很精确,只是很简单的测量)。
第一部分:黑色背景
-
①用CSS做一个黑色的框:
-
.recruit {
height: 44px;
width: 1856px;
background-color: rgb(32, 35, 41);
position: relative;
}
-
在<body>中建立一个<p>标签
-
<div class="recruit">
<p fc>BOSS直聘</p>
</div>
-
第二部分:绿色背景
-
-
用CSS做一个背景框:
.theme {
position: absolute;
background-color: rgb(18, 173, 169);
width: 1856px;
height: 627px;
}
用<p>标签书写文本内容,这里面给<p>的内容加了样式,调整了大小、粗细、字体颜色。和<p>标签的高度。
<div class="theme">
<div class="titler">
<p style="font-size: xxx-large;font-weight: bolder;color: aliceblue;height: 20px;">海量优质人才,在线约面</p>
<p stitle>找工作,上BOSS直聘直接谈</p>
</div>
CSS:这里设置的<p stitle>的文本样式。
p[stitle] {
color: aliceblue;
padding-left: 25%;
font-size: larger;
font-weight: 400;
}
这个.titler是给标题调整位置的。
.titler {
width: 530px;
padding-left: 455px;
}
-
给背景插入图片。
<body>插入图片:
<div class="banner">
<img src="img\banner.png" width="694px" height="448px">
</div>
在CSS设计位置:
.banner {
position: absolute;
top: 120px;
padding-left: 330px;
}
- 第三部分:表单
-
这里面我总共分了七个部分。
-
①用CSS先设置一个白色的背景板:
.bform {
width: 412px;
height: 500px;
background-color: white;
position: absolute;
top: 50px;
bottom: 1000px;
left: 1112px;
right: 600px;
}
②在表单中写标题
<div class="bform">
<p>
<h1>一键注册BOSS直聘</h1>
<center>首次验证通过即注册BOSS直聘账户</center>
</p>
用CSS给标题调整颜色和位置
h1 {
text-align: center;
color: rgb(0, 194, 179);
margin: 0000;
}
.bform center {
color: rgb(153, 153, 153);
}
③第三部分:
<body>
-
<div class="work">
<a class="work1">我要招人</a>
<a class="work2">我要找工作</a>
</div><br />
CSS:
.work>a {
display: inline-block;
border: 2px solid rgb(227, 231, 237);
width: 150px;
height: 30px;
text-align: center;
line-height: 30px;
}
.work1 {
margin-left: 40px;
}
.work2 {
margin-left: 20px;
}
④第四部分:
这里运用的是表单中的<select>、<option>和<input>属性。(br的作用是换行)
<div class="tel">
<select style="width: 90px;border: 2px solid rgb(227, 231, 237) ;">
<option>+86</option>
<option>中国大陆</option>
<option>非中国大陆手机号</option>
</select>
<input type="text" placeholder="手机号" style="width: 250px;border: 2px solid rgb(227, 231, 237);">
</div><br />
CSS给这部分做一个边框:
.tel {
display: flex;
margin: auto;
width: 340px;
height: 43px;
}
④按钮验证
-
<Body>中添加文字
<div class="btn">
<p>点击按钮进行验证</p>
</div><br />
CSS中添加样式:
.btn {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(251, 251, 251);
width: 340px;
height: 43px;
border: 1px solid rgb(204, 204, 204);
margin-left: 35px;
}
⑤短信验证码
<body>中添加样式
<div class="info">
<input type="text" placeholder="短信验证码">
<a>发送验证码</a>
</div><br />
CSS中添加样式
.info {
width: 340px;
height: 43px;
border: 2px solid rgb(227, 231, 237);
margin-left: 35px;
}
.info input {
width: 250px;
height: 40px;
border: 1px solid rgb(227, 231, 237);
}
.info>a {
display: inline-block;
font-size: small;
color: rgb(93, 213, 200);
text-decoration: none;
}
⑥注册
<body>
<div class="regi">
<p>注册</p>
</div><br />
-
CSS中添加样式
-
.regi {
display: flex;
align-items: center;
justify-content: center;
width: 340px;
height: 43px;
background-color: rgb(93, 213, 200);
color: aliceblue;
margin-left: 35px;
}
-
⑦信息
<body>
<div class="log">
<input type="radio"><label>已阅读并同意BOSS直聘<a>《用户协议》</a>
<a>《隐私政策》</a>,允许BOSS直聘系统统一管理本人账号信息</label>
<div class="in">
<p>
<center>已有帐号<a>直接登录</a></center>
</p>
</div>
</div>
</div>
CSS
.log {
margin-left: 50px;
width: 295px;
color: rgb(159, 163, 179);
font-size: small;
}
.log a {
text-decoration: none;
color: rgb(93, 213, 200);
}
-
最后我们就做出了一个比较像的页面