前端学习-第一阶段-day14

于 2020-12-04 08:39:55 发布
阅读量58 收藏
点赞数
分类专栏： 前端学习日记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34723035/article/details/110621677
版权

练习

利用弹性盒实现布局
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/task02.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2241292_w8kw6tl1she.css">
    <style>

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="title">
            <span class="font-yellow">头号爆品</span>
            <span>少儿</span>
            <span>文学</span>
            <span>经管</span>
            <span>社科</span>
            <span class="margin-none">教育</span>
            <div class="icon-left"><i class="iconfont icon-arrow-up"></i></div>
            <div class="icon-right"><i class="iconfont icon-xuanzegequyoujianjiao"></i></div>
        </div>
        <div class="body">
            <div class="item">
                <a href="">
                    <div class="pic">
                        <img src="./img/book1.jpg.webp" alt="">
                        <div class="pic-font">自营每满100减50</div>
                    </div>
                    <p class="pic-title">
                        麦家：解密&nbsp;(&nbsp;新版&nbsp;)
                    </p>
                    <span class="price">&yen;58</span>
                    <div class="shop-car">
                        <i class="iconfont icon-icon-yxj-cart"></i>
                    </div>
                </a>
                
            </div>
            <div class="item">
                <a href="">
                    <div class="pic">
                        <img src="./img/book1.jpg.webp" alt="">
                        <div class="pic-font">自营每满100减50</div>
                    </div>
                    <p class="pic-title">
                        麦家：解密&nbsp;(&nbsp;新版&nbsp;)
                    </p>
                    <span class="price">&yen;58</span>
                    <div class="shop-car">
                        <i class="iconfont icon-icon-yxj-cart"></i>
                    </div>
                </a>
                
            </div>
            <div class="item">
                <a href="">
                    <div class="pic">
                        <img src="./img/book1.jpg.webp" alt="">
                        <div class="pic-font">自营每满100减50</div>
                    </div>
                    <p class="pic-title">
                        麦家：解密&nbsp;(&nbsp;新版&nbsp;)
                    </p>
                    <span class="price">&yen;58</span>
                    <div class="shop-car">
                        <i class="iconfont icon-icon-yxj-cart"></i>
                    </div>
                </a>
                
            </div>
            <div class="item">
                <a href="">
                    <div class="pic">
                        <img src="./img/book1.jpg.webp" alt="">
                        <div class="pic-font">自营每满100减50</div>
                    </div>
                    <p class="pic-title">
                        麦家：解密&nbsp;(&nbsp;新版&nbsp;)
                    </p>
                    <span class="price">&yen;58</span>
                    <div class="shop-car">
                        <i class="iconfont icon-icon-yxj-cart"></i>
                    </div>
                </a>
                
            </div>
            <div class="item">
                <a href="">
                    <div class="pic">
                        <img src="./img/book1.jpg.webp" alt="">
                        <div class="pic-font">自营每满100减50</div>
                    </div>
                    <p class="pic-title">
                        麦家：解密&nbsp;(&nbsp;新版&nbsp;)
                    </p>
                    <span class="price">&yen;58</span>
                    <div class="shop-car">
                        <i class="iconfont icon-icon-yxj-cart"></i>
                    </div>
                </a>
                
            </div>
            <div class="item">
                <a href="">
                    <div class="pic">
                        <img src="./img/book1.jpg.webp" alt="">
                        <div class="pic-font">自营每满100减50</div>
                    </div>
                    <p class="pic-title">
                        麦家：解密&nbsp;(&nbsp;新版&nbsp;)
                    </p>
                    <span class="price">&yen;58</span>
                    <div class="shop-car">
                        <i class="iconfont icon-icon-yxj-cart"></i>
                    </div>
                </a>
                
            </div>
            <div class="item">
                <a href="">
                    <div class="pic">
                        <img src="./img/book1.jpg.webp" alt="">
                        <div class="pic-font">自营每满100减50</div>
                    </div>
                    <p class="pic-title">
                        麦家：解密&nbsp;(&nbsp;新版&nbsp;)
                    </p>
                    <span class="price">&yen;58</span>
                    <div class="shop-car">
                        <i class="iconfont icon-icon-yxj-cart"></i>
                    </div>
                </a>
                
            </div>
            <div class="item">
                <a href="">
                    <div class="pic">
                        <img src="./img/book1.jpg.webp" alt="">
                        <div class="pic-font">自营每满100减50</div>
                    </div>
                    <p class="pic-title">
                        麦家：解密&nbsp;(&nbsp;新版&nbsp;)
                    </p>
                    <span class="price">&yen;58</span>
                    <div class="shop-car">
                        <i class="iconfont icon-icon-yxj-cart"></i>
                    </div>
                </a>
                
            </div>
            <div class="item">
                <a href="">
                    <div class="pic">
                        <img src="./img/book1.jpg.webp" alt="">
                        <div class="pic-font">自营每满100减50</div>
                    </div>
                    <p class="pic-title">
                        麦家：解密&nbsp;(&nbsp;新版&nbsp;)
                    </p>
                    <span class="price">&yen;58</span>
                    <div class="shop-car">
                        <i class="iconfont icon-icon-yxj-cart"></i>
                    </div>
                </a>
                
            </div>
            <div class="item">
                <a href="">
                    <div class="pic">
                        <img src="./img/book1.jpg.webp" alt="">
                        <div class="pic-font">自营每满100减50</div>
                    </div>
                    <p class="pic-title">
                        麦家：解密&nbsp;(&nbsp;新版&nbsp;)
                    </p>
                    <span class="price">&yen;58</span>
                    <div class="shop-car">
                        <i class="iconfont icon-icon-yxj-cart"></i>
                    </div>
                </a>
                
            </div>
        </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>
澜痕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第一阶段以后会持续更新到第一阶段结束.rar
01-31
在"第一阶段day1"和"day2"中，通常day1可能重点介绍了计算机基础和一种编程语言的入门，而day2可能进一步深入到数据结构或算法的初步学习，或者引入了数据库和前端开发的基础知识。这种分阶段的学习方式有助于逐步...
Day-23:第 23 天
06-25
在JavaScript编程语言的世界里，每一天的学习都是一个崭新的旅程，特别是在深入探究技术的第23天。在这个阶段，我们可能已经掌握了基础语法，现在是时候更深入地了解JavaScript的高级特性，以及如何在实际项目中应用...
前端学习-第一阶段-day11
qq_34723035的博客
11-30 125
今日练习 练习图片 练习代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="styleshee
前端学习-第一阶段-day02
qq_34723035的博客
11-17 159
前端学习-第一阶段-day02 一.学习内容 1.超链接的使用： csdn首页 <a href="https://www.csdn.net/">csdn首页</a> 2.锚点的使用(快速跳转页面到锚点设置位置) 要配合id的使用,引用id前要加#键 <a href="#box">点我跳转到box</a> <div id="box"></div> 3.列表系列 有无序列表 （可用ul>li*n快捷设置多行） <ul typ
前端学习-第一阶段-day13
qq_34723035的博客
12-04 68
练习图片 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
前端学习-第一阶段-day04
qq_34723035的博客
11-19 109
第四天练习 第一个练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{
前端学习-第一阶段-day03
qq_34723035的博客
11-18 404
前端学习-第一阶段-day03 今天练习做的太晚了，懒得整理笔记了，把我做的4个练习图片和代码发一下吧。 第一个 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
前端学习-第一阶段-day12
qq_34723035的博客
12-02 87
##今日练习 ##代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet"
前端学习-第一阶段-day05
qq_34723035的博客
11-23 193
这是我第一周周末的练习，先发下我做出来的 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中国地方铁路（伪）</title> <style
前端学习-第一阶段-day01
qq_34723035的博客
11-16 715
前端学习-第一阶段-day01 学习内容 一、文本相关的标记 1.例如标题h1到h6 <h1></h1> 2.段落 <p></p> 3.图片标记 <img src=" " alt=" " title="" width="" height=""> 绝对路径和相对路径 alt: 当图片加载失败的文本提示 title:鼠标悬停时的文本提示 width:宽度 等比例缩放 3:2 height:高度 二、了解了一下修饰文字相关的标记 1.
前端学习-第一阶段day07-day10
qq_34723035的博客
11-29 212
1.练习 基本上除了需要JS才能实现的模块其他全部完成 2.代码 首页代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>首页</title> <li
day12_javaweb_javascript_day12-xml_energy7fo_
10-03
【标题】"day12_javaweb_javascript_day12-xml_energy7fo_" 提供的资源包主要涵盖了JavaWeb开发中的JavaScript和XML技术，是作者个人学习过程中的一个阶段性的总结，虽然标注为“day2”，但可以推测整个系列应该包含...
Day-7:工作第 7 天
07-01
"Day-7:工作第 7 天"这个标题可能代表一个学习或工作计划的第七天，重点是深入理解和应用JavaScript。描述中的“工作第 7 天”暗示我们可能在这一阶段已经对JavaScript的基础有所了解，现在正进入更深入的学习或项目...
宜立方商场文档 day01-至-day14（全）.zip
01-29
在项目的第一天，通常会进行需求收集和分析，明确商城的功能定位、目标用户、核心业务流程。这包括用户注册登录、商品浏览、购物车管理、订单处理、支付系统等基本功能，以及可能的个性化推荐、促销策略、售后服务...
数据分析的核心技能和方法
07-19
数据分析的核心技能和方法
毕业设计javajsp人寿保险销售网站(ssh)-qkrp源码含文档工具包
07-19
毕业设计javajsp人寿保险销售网站(ssh)-qkrp源码含文档工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 平湖人寿保险公司保险销售网站分为用户和管理员两个部分 前台部分（用户界面）： 1、资讯浏览功能： （1）新闻资讯浏览 （2）新闻资讯查询 （3）公司简介 （4）通知公告 2、用户登录注册功能： （1）注册 （2）登录 3、用户管理功能 （1）个人信息管理 （2）订单管理 4、保险购买功能： （1）保险产品浏览 （2）保险产品查询 （3）保险产品购买 后台管理（管理员界面） 1、管理员登录功能： 管理员在管理员登录界面输入用户名和密码，即可登录管理员的界面。 2、资讯管理功能： （1）新闻资讯管理 （2）公司简介管理 （3）通知公告管理 3、保险产品管理： （1）保险产品信息管理 （2）保险产品查询 4、会员管理： （1）会员删除 （2）会员级别管理 5、统计管理： （1）保险产品销售量统计 （2）有效会员数量统计 包含：源码、数据库脚本、论文、环境工具包、相同框架项目的安装教程
毕业设计javajsp公共课考试系统(ssh)-qlkrp源码工具包
最新发布
07-19
毕业设计javajsp公共课考试系统(ssh)-qlkrp源码工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 题库 试卷信息管理 阅卷 统计功能 包含：源码、数据库脚本、环境工具包、相同框架项目的安装教程（在说明文档中）
揭秘黑箱：YOLO预测结果的可解释性探究
07-19
YOLO（You Only Look Once）是一种流行的实时对象检测系统，最初由 Joseph Redmon 等人在 2015 年提出。它的核心思想是将对象检测任务视为一个回归问题，直接从图像像素到边界框坐标和类别概率的映射。YOLO 以其快速和高效而闻名，特别适合需要实时处理的应用场景。 以下是 YOLO 的一些关键特点： 1. **单次检测**：YOLO 模型在单次前向传播中同时预测多个对象的边界框和类别概率，不需要多次扫描图像。 2. **速度快**：YOLO 非常快速，能够在视频帧率下进行实时检测，适合移动设备和嵌入式系统。 3. **端到端训练**：YOLO 模型可以从原始图像直接训练到最终的检测结果，无需复杂的后处理步骤。 4. **易于集成**：YOLO 模型结构简单，易于与其他视觉任务（如图像分割、关键点检测等）结合使用。 5. **多尺度预测**：YOLO 可以通过多尺度预测来检测不同大小的对象，提高了检测的准确性。 YOLO 已经发展出多个版本，包括 YOLOv1、YOLOv2（也称为 YOLO9000）、YOLOv3、YOLOv4 和 YOLOv5 等。
day--和--day区别
04-18
1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将变为4，并且表达式的结果为5。这个操作符通常用于循环或迭代中，用于递减...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值