小白简单学习做页面

最新推荐文章于 2024-09-03 16:55:43 发布

@￥月亮

最新推荐文章于 2024-09-03 16:55:43 发布

阅读量876

点赞数 10

文章标签：学习

本文链接：https://blog.csdn.net/m0_74164855/article/details/136943911

版权

今天我们来尝试用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);

}
最后我们就做出了一个比较像的页面