自学前端十四天~

最新推荐文章于 2024-07-19 15:50:46 发布
最新推荐文章于 2024-07-19 15:50:46 发布
阅读量278 收藏
点赞数
文章标签： css 前端 html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41575188/article/details/123854899
版权

有了弹性盒和怪异盒的基础，今天跟着做了一个支付宝页面的小案例。感觉很有意思。

安利一个网站iconfont-阿里巴巴矢量图标库：里面有各种我们平时要用到的小图标，免费下载就很nice！

先来看一下咱们今天要做的这个页面

 

整体分header、section和footer三部分

header

header部分是几个<i>标签，里面用src引入了在阿里巴巴矢量图标库下载的图标，看起来像图，其实是字体样式，还引入了一个<span>标签来写“账单”这个文字。将header设置一个整体的宽和高，并且设置上display: flex;使之具备弹性盒的属性，里面的行内元素就会变成块级元素。就可以设置宽和高了。设置和几个图形的宽和高，字体颜色和字体大小，并且使之居中，然后span标签就可以用flex: 1;使它占满剩下的宽度。

section

section部分又分三块：

最上面部分也需要让它成为一个弹性盒，默认水平方向排列，因为“扫一扫”这一行图标距离整个宽度有一些距离，里面的项目也是等距离排列开，所以需要设置距离环绕属性，并且使里面的项目在侧轴方向居中。然后对里面的<i>、<span>标签设置字体大小以及颜色，并且使之水平居中。

中间部分的大盒子需要flex-wrap: wrap使里面的项目折行显示，因为有边框，所以需要将里面的每个项目设置成怪异盒模型，使之即使设置了边框，也只会压缩内部宽度，不会掉下来。

最后是一样图片，直接img标签导入就可以，然后设置一下上边距。

footer

footer部分设置了四个div，因为图标和内容是竖直排列的，所以需要将弹性盒的主轴修改成竖直方向。然后设置在主轴和侧轴上居中。footer部分需要将剩余高度占满，所以用到  flex: 1;属性，最后对应设置图标、字体的颜色和大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0
        }
        .box{
            width: 955px;
            height: 1420px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }
        /* header设置 */
        header{
            height: 124px;
            background-color: #242a3a;
            display: flex;
        }
        .box header i{
            width: 118px;
            height: 124px;
            line-height: 124px;
            text-align: center;
            font-size: 48px;
            color: white;
        }
        header span{
            color: white;
            font-size: 40px;
            flex: 1;
            height: 124px;
            line-height: 124px;
        }
        /* section设置 */
        section .main{
            display: flex;
            height: 278px;
            background-color: #242a3a;
            justify-content:space-around;
            align-items:center;
        }
        section .main div{
            width: 120px;
            height: 168px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main div i{
            font-size: 110px;
            text-align: center;
            color: white;
        }
        .main div span{
            font-size: 32px;
            text-align: center;
            color: white;
        }
        .list{
            display: flex;
            flex-wrap: wrap;
        }
        .list div{
            width: 25%;
            height: 208px;
            border: 1px solid gray;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .list div i{
           height: 77px;
           font-size: 55px;
        }
        .list div span{
            height: 61px;
            font-size: 30px;
        }
        .pic{
            margin-top: 25px;
        }
        /* footer设置 */
        footer{
            height: 128px;
            background-color: gray;
            display: flex;
            
        }
        footer div{
            flex: 1;
            box-sizing: border-box;
            flex-direction: column;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #acadaf;
            background-color: white;
        }
        footer div:hover{
            color: #06a9ee;
        }
        footer div i{
            height: 66px;
            font-size: 58px;

        }
        footer div span{
            height: 36px;
            font-size: 28px;
        }

    </style>
</head>
<body>
    <div class="box">
        <header>
            <i class="iconfont icon-zixun"></i>
            <span>账单</span>
            <i class="iconfont icon-wode"></i>
            <i class="iconfont icon-fangdajing"></i>
            <i class="iconfont icon-jia"></i>
        </header>
        <section>
            <div class="main">
                <div class="">
                    <i class="iconfont icon-zanting3"></i>
                    <span>扫一扫</span>
                </div>
                <div class="">
                    <i class="iconfont icon-zhifu-01"></i>
                    <span>支付</span>
                </div>
                <div class="">
                    <i class="iconfont icon-zixun"></i>
                    <span>账单</span>
                </div>
                <div class="">
                    <i class="iconfont icon-qiaquan"></i>
                    <span>卡券<span>
                </div>  
            </div>
            <div class="list">
                <div>
                    <i class="iconfont icon-feiji"></i>
                    <span>信用卡还贷</span>
                </div>
                <div>
                    <i class="iconfont icon-feiji"></i>
                    <span>信用卡还贷</span>
                </div>
                <div>
                    <i class="iconfont icon-feiji"></i>
                    <span>信用卡还贷</span>
                </div>
                <div>
                    <i class="iconfont icon-feiji"></i>
                    <span>信用卡还贷</span>
                </div>
                <div>
                    <i class="iconfont icon-feiji"></i>
                    <span>信用卡还贷</span>
                </div>
                <div>
                    <i class="iconfont icon-feiji"></i>
                    <span>信用卡还贷</span>
                </div>
                <div>
                    <i class="iconfont icon-feiji"></i>
                    <span>信用卡还贷</span>
                </div>
                <div>
                    <i class="iconfont icon-feiji"></i>
                    <span>信用卡还贷</span>
                </div>
                <div>
                    <i class="iconfont icon-feiji"></i>
                    <span>信用卡还贷</span>
                </div>
                <div>
                    <i class="iconfont icon-feiji"></i>
                    <span>信用卡还贷</span>
                </div>
                <div>
                    <i class="iconfont icon-feiji"></i>
                    <span>信用卡还贷</span>
                </div>
                <div>
                    <i class="iconfont icon-feiji"></i>
                    <span>信用卡还贷</span>
                </div>
            </div>
            <div class="pic">
                <img src="./img/1.png">
            </div>
        </section>
        <footer>
            <div>
                <i class="iconfont icon-zhifubao"></i>
                <span>支付宝</span>
            </div>
            <div>
                <i class="iconfont icon-zhifubao"></i>
                <span>支付宝</span>
            </div>
            <div>
                <i class="iconfont icon-zhifubao"></i>
                <span>支付宝</span>
            </div>
            <div>
                <i class="iconfont icon-zhifubao"></i>
                <span>支付宝</span>
            </div>
        </footer>

    </div>
</body>
</html>

 

 

 

弹走鱼尾纹~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自学前端第十二天~
学无止境
03-28 480
还是css3的一些新增的内容。接上次没有学完的伪类选择器，以及一些阴影和圆角的设置。 结构伪类选择器 用来在设置了相同标签时方便选择区分。 <style> /* 选中第一个孩子 */ li:first-child{ background-color: yellow; } /* 选中最后一个孩子 */ li:last-child{ background-color
DAY 14 | 自学前端第十四天
pangpangcm的博客
04-27 112
今天学移动端开发flex布局。
DAY 11 | 自学前端第十一天
pangpangcm的博客
04-12 843
PC端品优购项目。
自学前端第十天 : CSS怪异盒子模型
weixin_47592060的博客
05-04 2422
一.怪异盒子模型 怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换 select { box-sizing: border-box; /* 怪异盒子模型 */ box-sizing: content-box; /* 标准盒子模型 */ } 怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度 二.标准盒子和怪异盒子: 1.标准模型下 宽度计算方式
自学前端第十一天 :CSS盒子背景
weixin_47592060的博客
05-04 914
复习关于盒子模型相关知识点补充说明(细节决定成败) 高度样式设置auto 图片标签 给设置具体宽度后 可以给高度设置为 auto(自动) 值让其实现等比例自动计算 同行宽度问题 一行内如果多个元素 站位宽度(margin+border+padding+width) 相加大于 容器宽度 无法完整放入的元素会被挤下一行展示 比如:一张图片 + 一段文字一起变为块元素,如果一段文字不设置宽度则默认继承父级body100%整行,就不可能和图片一起显示在一行中.(因此只能给p设置固定的宽度,除了图片外父级还剩多
自学前端第二十二天:perspective视觉
weixin_47592060的博客
04-29 1200
CSS之perspective详解 语法(实际开发都是给perspective: 1000px; perspective: number | none; 1.简单来说，就是设置这个属性后，那么，就可以模拟出像我们人看电脑上的显示的元素一样。比如说， perspective：800px 意思就是，我在离屏幕800px 的地方观看这个元素。(这个属性，要设置在父元素上面)好了 2.最后补充一点，这个perspective 属性呢，要放在父级身上,然后还有一个属性perspective-origin，这个属
DAY 7 | 自学前端第七天
pangpangcm的博客
04-03 861
今天做个网站首页~
自学前端第十八天:CSS精准定位position
weixin_47592060的博客
04-30 1289
超级重点:CSS精准定位(position) 一. ①CSS定位基本概念:如果说, float浮动关键在一个 “浮起来” 字上面， 那么 我们的position定位关键在于一个 “精准位” 上。 ②CSS定位目的上，如果说，浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的"任意坐标"位置上去。 ③CSS定位本质上: 不仅能像float浮动一样,可以脱离文档流束缚的情况下将元素放在你想放置的位置,还可以帮助你快速精准,。就跟高德地图精确的定位系统一样，
分享一个自学前端的4年工作总结（三十而立，拒绝躺平）
前端达人
03-13 347
中部不知名二本毕业，半路转前端，2018 年 9 月入坑，如今整四年，目前就职于一家中型公司为什么走编程这条路？其实是没有选择， 有时没有选择，就是最好的选择这一路走来，笑过痛过，开心过也失望过，拥有过，也失去过壮志未酬很早就给自己定下了目标：两年月薪 20k+，三年进大厂（目标 top5 的互联网公司）第一个目标很快就实现，第二个目标却陷入了屡败屡战的死循环中大厂绝缘体大厂面了近 10 次，都...
buyigua1~初级前端自学
07-18
buyigua1~初级前端自学
自学java第四天.java
09-02
自学java第四天.java
前端自学不建议大家下载
08-23
在前端开发领域，自学是一种常见的学习方式，但标题“前端自学不建议大家下载”似乎给出了一个反常的建议。这可能意味着作者认为前端学习过程中的某些挑战或资源可能不适合自学新手。不过，从描述中没有获取到具体...
前端自学全套
06-15
精心收藏 上百本经典前端电子书 总有基本合适你的 节省大家时间
前端小白自学线路，超详细
05-31
前端自学线路，超详细
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 719
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
最新！CSSCI（2023-2024）期刊目录公布！
最新发布
2301_76900678的博客
07-19 190
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1307
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 1911
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
自学前端需要掌握哪些内容
06-08
学习前端需要掌握以下内容： 1. HTML和CSS基础：学习前端需要掌握HTML和CSS的基础知识和语法，包括网页结构、样式布局、选择器、盒模型等。 2. JavaScript基础：学习前端需要掌握JavaScript的基础知识和语法，包括变量、数据类型、运算符、条件语句、循环语句、函数等。 3. DOM和BOM：学习前端需要了解DOM和BOM的概念和使用，可以帮助你操作HTML文档和浏览器窗口。 4. jQuery：学习前端需要了解jQuery的基础知识和使用，可以帮助你快速地操作DOM和实现一些常见的UI效果。 5. 响应式设计：学习前端需要了解响应式设计的概念和原理，可以帮助你实现适应不同设备和屏幕尺寸的网页布局。 6. 前端框架和库：学习前端需要了解一些常用的前端框架和库，例如Vue、React、Angular、Bootstrap等，可以帮助你快速地开发Web应用和提高开发效率。 7. 版本管理：学习前端需要了解版本管理的概念和使用，例如Git和GitHub，可以帮助你进行代码管理和协作开发。 8. 性能优化：学习前端需要了解如何进行性能优化，包括使用CDN、压缩和合并文件、减少HTTP请求等。 掌握以上内容可以让你深入了解前端开发的基础和应用，实现高效、现代化的Web应用开发，提高代码质量和开发效率，并且可以帮助你应对Web开发中的复杂性和变化性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值