网页的制作思路

最新推荐文章于 2024-05-12 20:57:40 发布

KBkongbaiKB

最新推荐文章于 2024-05-12 20:57:40 发布

阅读量1k

点赞数 10

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/KBkongbaiKB/article/details/136155824

经过前几章的学习，现在我们大概了解了html几个基本的知识，现在让我们来运用前几章的知识来做一个基本的网页。

首先，在制作之前，我们要有这样一个思想：一个完整的网页是由一块一块拼接起来的。

以下面的网页为基础：

在上面的网页中，通过“一个完整的网页是由一块一块拼接起来”的思想，我们可以将这个网页分为几个部分，分别为：

现在，我们先对其中的第三部分进行讲解。

第三部分代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.jx {

background: reb(245, 245, 245);

padding: 30px 0 40px;

}

.jx .content {

width: 1170px;

margin: 0 auto;

}

.jx .content .title,

.body .body_left .title,

.body .body_center .title,

.body .body_right .title {

display: flex;

justify-content: space-between;

border-bottom: 1px solid rgb(221, 221, 221);

}

.jx .content .title h1,

.body .body_left .title h1,

.body .body_center .title h1,

.body .body_right .title h1 {

border-bottom: 2px solid rgb(195, 63 48);

padding-bottom: 15px;

font-size: 18px;

font-weight: 500;

}

.jx .content .title a,

.body .body_center .title a,

.body .body_right .title a {

color: rgb(153, 153, 153);

font-size: 15px;

text-decoration: none;

}

.jx .content .title a:hover {

color: rgb(195, 63, 48);

}

.jx .content .main {

display: flex;

justify-content: space-between;

margin-top: 30px;

}

.jx .content .main .item {

width: 24%;

background: #fff;

position: relative;

}

.jx .content .main .item img {

width: 100%;

height: 200px;

object-fit: cover;

}

.jx .content .main .item h3 {

font-size: 16px;

font-weight: 500;

color: rgb(195, 63, 48);

padding: 0 10px;

margin-top: 10px;

}

.jx .content .main .item p {

color: rgb(121, 120, 120);

font-size: 14px;

padding: 5px 10px;

line-height: 25px;

}

.jx .content .main .item .span {

background: rgb(229, 145, 135);

color: #fff;

position: absolute;

left: 0;

top: 0;

font-size: 14px;

padding: 5px 2px;

}

</style>

</head>

<body>

</div>

<h3>军训小贴士——管理篇</h3>

<p>军训是必修课，占2学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学门需积极参加，端正态度。全程训练</p>

</div>

<h3>军训小贴士——管理篇</h3>

<p>军训是必修课，占2学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学门需积极参加，端正态度。全程训练</p>

</div>

<h3>军训小贴士——管理篇</h3>

<p>军训是必修课，占2学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学门需积极参加，端正态度。全程训练</p>

</div>

<h3>军训小贴士——管理篇</h3>

<p>军训是必修课，占2学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学门需积极参加，端正态度。全程训练</p>

</div>

</body>

</html>

首先，我们先找到网页的具体内容：

<body>

</div>

<h3>军训小贴士——管理篇</h3>

<p>军训是必修课，占2学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学门需积极参加，端正态度。全程训练</p>

</div>

<h3>军训小贴士——管理篇</h3>

<p>军训是必修课，占2学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学门需积极参加，端正态度。全程训练</p>

</div>

<h3>军训小贴士——管理篇</h3>

<p>军训是必修课，占2学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学门需积极参加，端正态度。全程训练</p>

</div>

<h3>军训小贴士——管理篇</h3>

<p>军训是必修课，占2学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学门需积极参加，端正态度。全程训练</p>

</div>

</body>

在第三部分中，我们也可以对其进行拆分，拆分结果如下：

我们要了解，每一个框架的内容都要由一个标签（即一个盒子）来装里面的内容，所以我们可以知道一下要点：

<div class="content"></div>这个标签（或者说盒子）所代表的是上面图中的第一个框架。

<div class="title"></div>这个标签（或者说盒子）所代表的是上面图中的第二个框架。

<div class="main"></div>这个标签（或者说盒子）所代表的是上面图中的第三个框架。

<div class="item"></div>这个标签（或者说盒子）所代表的是上面图中的第四个框架。

经过拆分后，我们来对第四个框架进行编写。

在第四个框架中，我们又可以对其拆分：

对此，我们将这个框架的代码单独拿出来：

<h3>军训小贴士——管理篇</h3>

<p>军训是必修课，占2学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学门需积极参加，端正态度。全程训练</p>

</div>

通过上面的代码，我们是不是很清楚的就能明白它所要表达的意思：

<span></span>这个标签（即盒子）代表的是上面图所示的框架一，它的内容为“2023.08.19”。

<img src="1.jpg" alt="">这个标签（即盒子）代表的是上面图所示的框架二，它的内容为一张图片。

<h3></h3>这个标签（即盒子）代表的是上面图所示的框架三，它的内容为“军训小贴士——管理篇”。

<p></p>这个标签（即盒子）代表的是上面图所示的框架三，它的内容为“军训是必修课，占2学分，军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学门需积极参加，端正态度。全程训练”。

这个时候就有人问了，“哎呀<h3></h3>是什么意思啊，<p></p>是什么意思啊？”，这个如果你想知道它具体的含义，自己去查，你现在只要知道它是一个标签（即盒子）以及它的布局方式就行。

好了，通过以上讲解，我想大家通过以此内推的方法应该可以了解了一个网页的基本构成了，现在我们就要通过css来对齐进行修饰了。那么怎么修饰呢，请看下期分解。