九宫格——用html+css制作一个网页

自用（仅供参考，如有错误欢迎指出）

要求：

1.通过html和css制作一个可以根据页面缩放进行变化的九宫格。

2.并且可以通过手机浏览器访问。

过程：

1.网页制作

先不管通过网页访问这一项，先写一个本地的网页。

首先要把九宫格的形状做出来。九宫格就像魔方的一个面，所以我先做一个大的div，然后把它分成三个行，然后每个行再分成三个小块。

于是我在body中先写了这样一个结构:

<div><div></div><div></div><div></div>
</div>

假设每个小正方形的边长为50px，颜色为橙色（#ff7700）。
先不设置排列方式，将每一行分为三个小正方形。

        <div><div><div class="little-square"></div><div class="little-square"></div><div class="little-square"></div></div><div><div class="little-square"></div><div class="little-square"></div><div class="little-square"></div></div><div><div class="little-square"></div><div class="little-square"></div><div class="little-square"></div></div></div>

有点粗暴，也还没有设置边距，所以他现在是一个长条状，他们粘在了一起：

给小方块的class加上外边距属性：

下面要改变一下小方块的排列方式，行和行是竖直排列，每一行中的小方块是水平排列，所以创建row类，并添加到每一行之上。

.row{display:flex;}

刷新后可以看到呈如下排列，已经大概符合形状了。

设置小正方形的样式使其美观。

        .little-square {margin: 6px;background-color: #ff7700;width: 50px;height: 50px;border-radius: 15%;}

最终小正方形变成下图样式。

有时候会不小心把百分比搞错，颜色有可能看不到，无法判断出现了什么情况。所以我在小方格里面添加了数字，这样就能够保证色块不见了的时候我也可以判断出当前的排列情况，便于修改。

查阅资料后，我得知，完成自适应不能够把各个值写死。也就是不能给他们一个具体值，例如：把小方块的边长设置为50px。

        .row {width:50%;margin-left:auto;margin-right:auto;display: flex;}.little-square {padding-bottom:30%;margin-left:1.5%;margin-bottom:1.5%;position:relative;background-color: #ff7700;width:30%;height:0;border-radius: 15%;}

插曲：

        .test{width:50px;height:50px;background-color: rgb(231, 35, 35);}

建一个属性为如上所述的div，则会出现一个正方形。
如果把width删除掉，则会出现一个条。

如果把height删除掉，则什么都没有

但是在这种情况下，我在div里面添加了数字1，会出现1占据的那一小块。

这一小块就只有这么宽，输入多个1，甚至是超出范围的1，红色区域都不会变化，因为width是有固定值的。

九宫格——用html+css制作一个网页相关推荐

用HTML和CSS制作一个网页
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
【完整代码】用HTML/CSS制作一个美观的个人简介网页
[完整代码]用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页--学习周记1 HELLO!大家好,由于<用HTML/CSS制作一个美观 ...
【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
HTML5 + CSS制作一个网络照片墙
使用HTML5 + CSS制作一个照片墙是不难的,在大学里可以当作业交了,这是效果: 这个是有动画的,具体的效果在这个网站的home页,Welcome的源码参考了用html做一个漂亮的网站,个人网页, ...
在html中怎么制作友情链接,如何制作一个网页链接，用描文本、友情链接交易方式教你如何制作？...
如何制作一个网页链接,用描文本.友情链接交易方式教你如何制作?作为seo优化人员如何运用外界链接开展百度搜索引擎提升?下面和小编一起看看! 1.锚点链接链接应该是有关的优先,百度搜索引擎提升锚点链接 ...
HTML+CSS制作一个动画
HTML+CSS制作一个动画效果图如下: HTML部分结构如下: <!DOCTYPE html> <html lang="zh-Hans"><hea ...
使用html和css制作一个小米商城页面
使用html和css制作一个小米商城页面创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 10/01 14:32 * / `<html>&l ...
记录html+css制作一个上下跳动效果的动画
需求想用html+css制作一个上下跳动效果的动画,然后记录一下代码,方便今后使用. 实例代码 <!DOCTYPE html > <html><head>< ...
用HTML+css制作一个动态的天气图标
前言本文讲解用HTML+css制作一个动态的天气图标,如果觉得对你有帮助请关注小编,你的支持就是我更新的动力! 成品展示: 本程序是一个动态的一.HTML部分 <!DOCTYPE html& ...

九宫格——用html+css制作一个网页

要求：

过程：

1.网页制作

插曲：

九宫格——用html+css制作一个网页相关推荐

最新文章

热门文章