位置: IT常识 - 正文

手把手教你基于HTML、CSS搭建我的相册(下)(基于什么意思)

编辑:rootadmin
原力计划手把手教你基于HTML、CSS搭建我的相册(下) The sand accumulates to form a pagoda⭐ 写在前面⭐ 相册中心部分⭐ 添加照片⭐ 图片展示样式⭐ 搭建底部版权模块⭐ 写在最后⭐ 写在前面

推荐整理分享手把手教你基于HTML、CSS搭建我的相册(下)(基于什么意思),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:基于什么意思,手把手教基于TensorFlow的,什么叫基于,手把手教基于TensorFlow的,基于 的,基于gone,什么叫基于,手把手教基于TensorFlow的,内容如对您有帮助,希望把文章链接给更多的朋友!

经常有一些粉丝咨询前端该从什么开始学,那当然是我们的前端基础三件套开始学起,HTML、CSS、javaScript,前端的大部分框架的底层还是围绕着前端三件套来搭建的,相信大家能够在很多平台中去找到一些前端三件套的体系教程,借着原力计划凉哥也为大家带来前端三件套的一些内容分享,只不过这里可不是纯基础知识的输出,而是会结合一些基于前端三件套的基础知识来做一些有趣的小项目、小demo,会由简单到复杂,由静态到动态的过程来帮助大家掌握前端三件套的使用及搭配,所以这里针对的人群是前端初学者或者你还没有开始学前端想感受一些前端代码那这个专栏很适合你。

我们第一个小demo非常简单的一个个人相册的页面,布局简单,帮我们了解基础的前端代码;下面呢是我们demo的效果图,在上篇文章中我们为大家简单的讲解了HTML、CSS的概念以及我们完成了demo中的头部搭建,让我们初体验了一下HTML、CSS代码,今天呢我们就把这个demo剩下的部分完成吧!如果你没有接触过前端你可以看一下上篇文章 👉 手把手教你基于HTML、CSS搭建我的相册(上),我们接着上篇文章中的代码继续搭建;

⭐ 相册中心部分

我们能够看到这部分内容的整体我们可以看成一个大的盒子然后有一个边框,边框的四个角还是圆的,里面有六张图片,好像描述起来也是比较简单的,那下面我们就来通过代码实现一下想要的页面吧!首先我们就先来看这个大盒子,我们在上篇文章中跟大家讲解过盒子我们就可以用div,这里呢也是我们通过在body中新建一个div标签,由于我们的头部是在上面所以我们的div要写上头部div的下面;我们添加div并且通过class设置类名为main。

<body> <div class="header"> <h1>我的相册</h1> </div> <div class="main"> </div></body>

然后我们在style中为main类名的盒子设置上下面的样式,首先设置 background-color: #fff;背景颜色为白色,margin: 20px;外边距为20px,padding: 20px;内边距也是20px,border: 2px solid #333;这是设置的边框,值为线条宽度2px 实线 线条颜色为灰色;border-radius: 10px;这个属性是设置的边框为圆角弧度是10px;我们可以看一下效果;

.main { background-color: #fff; margin: 20px; padding: 20px; border: 2px solid #333; border-radius: 10px;}

⭐ 添加照片

我们上面的外面的大盒子的样式已经搞定了,大家可以会觉得是不是太矮了,要不要高一些,其实这里大家设置高度也可以,因为这个网站的布局比较简单所以我选择让盒子中的内容来撑起盒子高度,所以这也是同样的一个网站在样式搭建的细节上有非常多的选择,只要自己觉得方便就行。我们可以观察一下其实我们的图片的话是一个列表,那我们为了比较好操作我们在创建一个类名为gallery的div来承载图片,另外呢我们为每个图片也装上一个类名为image的盒子来看一下;这里的img呢就是图片标签,其中src就是图片地址我们可以选择本地,这里我用的是网上的图片,大家可以随便找自己喜欢的图片放到这里,alt是文字,图片不展示的时候展示的文字。

<div class="main"> <div class="gallery"> <div class="image"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682043595-f7c4505e3099458.jpg" alt="照片1"> </div> <div class="image"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682043595-f7c4505e3099458.jpg" alt="照片2"> </div> <div class="image"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682043595-f7c4505e3099458.jpg" alt="照片3"> </div> <div class="image"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682043595-f7c4505e3099458.jpg" alt="照片4"> </div> <div class="image"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682043595-f7c4505e3099458.jpg" alt="照片5"> </div> <div class="image"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682043595-f7c4505e3099458.jpg" alt="照片6"> </div> </div></div>

⭐ 图片展示样式

我们刷新页面,显然不是我们想要的,我们要通过CSS样式来美化一下我们图片的呈现形式吧,首先呢我们的div是行内元素,特点就是每个div都独占一行,所以我们给gallery 盒子添加上flex布局,至于什么是flex布局呢?大家可以下去后自行查阅资料,网上很多讲解比较详细的文章,如果有需要大家可以私聊我为大家出一篇讲解也可以,这里我们先跟着博主来写就行,flex-wrap你可以理解为时候换行,我们通过flex设置后所有的图片都是在一行了,所以我们要让它换行,justify-content是一种对其方式我们可以理解为设置它以后我们的子元素是两端对齐;然后我们为图片的盒子设置上宽度为30%, margin-bottom距离底部20px。

.gallery { display: flex; flex-wrap: wrap; justify-content: space-between;}.image { width: 30%; margin-bottom: 20px;}手把手教你基于HTML、CSS搭建我的相册(下)(基于什么意思)

我们发现图片还是很大,这是因为我们只为图片的div设置了宽度,但是没有为图片设置,所以我们还要给图片设置样式,这里我们看到.image img其实这是我们选中类名为image下面的img标签,因为类名是可以重复的所以我们这里也是选中了所有的img,如果我们直接写img可以么?当然可以在这里,但是在实际项目中我们只写一个标签容易造成样式污染因为img标签可能非常多,我们通过类名里面的img就比较针对性,这里呢我们设置宽度为100%,高度适应即可;这就得到了我们想要的效果。

.image img { width: 100%; height: auto;}

⭐ 搭建底部版权模块

上面呢我们把中间的图片区域搞定了,就剩下我们底部的版权模块了,这个比较简单,跟我们的头部标题差不多,我们首先在我们类名为main的div下面新增一个类名叫做footer的div,然后我们在div中添加一个p标签,p标签呢是段落标签,大家也可以使用其他的div、h标签都可以的哈。

<div class="footer"> <p>版权所有 © 2023 我的相册</p></div>

当然我们还是需要定义样式,首先我们跟头部一样还是通过background-color设置背景颜色为灰色,将文字颜色设置为白色,文字对齐样式为居中,通过padding设置我们的内边距为10px;这样就完成了我们底部的样式;我们刷新看一下效果吧!

.footer { background-color: #333; color: #fff; text-align: center; padding: 10px;}

⭐ 写在最后

到这里呢我们的特别基础的相册就搭建完成了,样式也极为简单,目的其实是为了让我们的初学者或者是还没有接触过前端的活动能够通过简单的例子来帮助大家感受体验一下前端的代码结构,那也希望各位伙伴给个三联支持,我们本系列会从简单到复杂,通过一个个循序渐进的案例来帮助大家掌握前端基础三件套的同时间也能够做出一些比较有趣好玩的项目,最后呢我也想完整的代码放在下面,大家可以对照来编码;那就让我们 let’s coding!

完整代码

<html><head> <title>我的相册</title> <meta name="author" content="(作者)几何心凉" /> <meta name="description" content="网页的描述" /> <meta name="copyright" content="这里是版权信息" /> <meta name="keywords" content="网页的关键字" /> <style> /* 这里编写样式 */ body { font-family: Arial, sans-serif; margin: 0; } .header { background-color: #333; color: #fff; text-align: center; padding: 20px; } .main { background-color: #fff; margin: 20px; padding: 20px; border: 2px solid #333; border-radius: 10px; } h1 { font-size: 3em; margin: 0; } .gallery { display: flex; flex-wrap: wrap; justify-content: space-between; } .image { width: 30%; margin-bottom: 20px; } .image img { width: 100%; height: auto; } .footer { background-color: #333; color: #fff; text-align: center; padding: 10px; } </style></head><body> <div class="header"> <h1>我的相册</h1> </div> <div class="main"> <div class="gallery"> <div class="image"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682043595-f7c4505e3099458.jpg" alt="照片1"> </div> <div class="image"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682043595-f7c4505e3099458.jpg" alt="照片2"> </div> <div class="image"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682043595-f7c4505e3099458.jpg" alt="照片3"> </div> <div class="image"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682043595-f7c4505e3099458.jpg" alt="照片4"> </div> <div class="image"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682043595-f7c4505e3099458.jpg" alt="照片5"> </div> <div class="image"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682043595-f7c4505e3099458.jpg" alt="照片6"> </div> </div> </div> <div class="footer"> <p>版权所有 © 2023 我的相册</p> </div></body></html>

本期推荐

✨原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}评论,你的意见是我进步的财富!

本文链接地址:https://www.jiuchutong.com/zhishi/299478.html 转载请保留说明!

上一篇:因果推断1--基本方法介绍(个人笔记)(因果推断的常用标准)

下一篇:【vue2】axios请求与axios拦截器的使用详解(vue-axios详细介绍)

  • 一百个公众号的美食标题,不会写标题的时候就看它(公众号1005)

    一百个公众号的美食标题,不会写标题的时候就看它(公众号1005)

  • 快手极速版怎么获得金币(快手极速版怎么卡无限金币)

    快手极速版怎么获得金币(快手极速版怎么卡无限金币)

  • 华为手机进水水印几天消失(华为手机进水水印要换膜吗)

    华为手机进水水印几天消失(华为手机进水水印要换膜吗)

  • 微信号怎么注销(微信号怎么注销微信支付)

    微信号怎么注销(微信号怎么注销微信支付)

  • 华为荣耀9x长度(华为荣耀9x手机长度)

    华为荣耀9x长度(华为荣耀9x手机长度)

  • 2080配什么cpu(2080配什么cpu合适)

    2080配什么cpu(2080配什么cpu合适)

  • 小米十屏幕(小米十屏幕尺寸)

    小米十屏幕(小米十屏幕尺寸)

  • 插卡式mp3怎么充电(插卡式mp3充电时怎样算充满)

    插卡式mp3怎么充电(插卡式mp3充电时怎样算充满)

  • vivo x50 pro上市时间(vivo x50 pro发售价)

    vivo x50 pro上市时间(vivo x50 pro发售价)

  • 苹果7的耳机是什么口(苹果7的耳机是什么型号)

    苹果7的耳机是什么口(苹果7的耳机是什么型号)

  • 短信看了怎么设置未读(短信怎么设置可以看到已读)

    短信看了怎么设置未读(短信怎么设置可以看到已读)

  • 华为主屏幕时间不见了怎么办(华为主屏幕时间怎么设置)

    华为主屏幕时间不见了怎么办(华为主屏幕时间怎么设置)

  • 抖音送礼记录怎么查看(抖音送礼记录怎么查看最新)

    抖音送礼记录怎么查看(抖音送礼记录怎么查看最新)

  • 电脑QQ登录不上怎么办(电脑QQ登录不上去)

    电脑QQ登录不上怎么办(电脑QQ登录不上去)

  • 手机屏幕凸起来了怎么回事(手机屏幕凸起来了)

    手机屏幕凸起来了怎么回事(手机屏幕凸起来了)

  • 为什么qq关了设备锁还要验证码(qq明明关了设备锁怎么还开着)

    为什么qq关了设备锁还要验证码(qq明明关了设备锁怎么还开着)

  • 联通机顶盒10071错误代码(中国联通网络机顶盒)

    联通机顶盒10071错误代码(中国联通网络机顶盒)

  • 快手怎么设置商家电话(快手怎么设置商业推广任务)

    快手怎么设置商家电话(快手怎么设置商业推广任务)

  • 乐视手机解锁密码忘了如何解锁(乐视手机解锁密码忘了)

    乐视手机解锁密码忘了如何解锁(乐视手机解锁密码忘了)

  • Apple Watch Series5怎么删除应用

    Apple Watch Series5怎么删除应用

  • iphonex是四核吗(苹果x是几核的处理器)

    iphonex是四核吗(苹果x是几核的处理器)

  • 苹果认证背夹电池品牌(苹果认证的背夹电池品牌)

    苹果认证背夹电池品牌(苹果认证的背夹电池品牌)

  • ppt没保存怎么找回来(ppt没保存怎么找回来office)

    ppt没保存怎么找回来(ppt没保存怎么找回来office)

  • 如何设置小米手机时钟样式(如何设置小米手机铃声)

    如何设置小米手机时钟样式(如何设置小米手机铃声)

  • p30 pro支持5g吗(p30pro支不支持5g)

    p30 pro支持5g吗(p30pro支不支持5g)

  • word批注如何做(word中做批注)

    word批注如何做(word中做批注)

  • 电脑制表怎么操作(电脑制表怎么操作视频教学)

    电脑制表怎么操作(电脑制表怎么操作视频教学)

  • 使用SpringBoot一小时快速搭建一个简单后台管理(增删改查)(超详细教程)(springboot用法)

    使用SpringBoot一小时快速搭建一个简单后台管理(增删改查)(超详细教程)(springboot用法)

  • find2perl命令  转换找到的命令行为perl代码(find命令结果怎么导出到文本)

    find2perl命令 转换找到的命令行为perl代码(find命令结果怎么导出到文本)

  • 没有达到30万销量怎么办
  • 个人所得税起征点2023税率表
  • 购买办公用品属于会计对象吗
  • 租赁厂房对方不租怎么办
  • 外贸出口备案需准备什么资料
  • 劳务分包企业所得税25%
  • 新会计准则中资产减值论文
  • 权益法下被投资企业净资产增加
  • 商业折扣的纳税影响
  • 企业所得税特殊性税务重组
  • 车间消耗品的会计分录
  • 车的违章处理
  • 公司开给个人的发票有什么用
  • 总公司在异地和分公司交社保
  • 国税零申报怎么报
  • 吊装费用税率
  • 专票红冲后的账务处理
  • 未分配50g
  • 企业银行存款账户核算的内容有
  • 月末结转损益类科目为零对吗
  • 增值税一般纳税人申报流程
  • 企业收到工程款会计分录
  • php二维数组遍历
  • 如何安装纯净win10
  • 系统之家哪个系统比较好用
  • imac 5k屏幕参数
  • Win10 Build 19044.1320 (21H2)更新补丁KB5006738预览版发布(附更新修复内容汇总)
  • php current
  • windows11自带录屏怎么使用
  • 银行存款日记账与银行对账单之间的核对属于
  • vue 右键菜单
  • 协会收到的政府奖励会计处理
  • 微信支付扫码支付顺序
  • 完美怎么用
  • wordpress mobile themes
  • 折旧提取后资金如何处理
  • 信息技术服务所得税税负率多少
  • 填写发票票种核实怎么填
  • 金税盘减免税额
  • 小规模纳税人的增值税账务处理
  • bootstrapstandby
  • access2010宏操作大全
  • 应交增值税如何计算,如何进行会计处理
  • 小微企业的税收优惠政策2023
  • 对账小技巧
  • 出租车票做什么科目
  • 航空公司可以开发票吗
  • 劳务公司的账务处理会计分录
  • 原始凭证收集
  • 收到预收款开具发票如何入账
  • 房东减免部分房租
  • 设计服务成本和信息中心的测试成本
  • 净资产=资产-负债
  • MS-SQL Server 2005 其中三个版本的比较
  • mysql 5.7.34安装
  • win8.1使用技巧
  • win8系统升级到win 10
  • xp安装声卡驱动
  • version 2什么意思
  • win8系统如何打开摄像头
  • msng.exe是什么
  • win8屏幕分辨率显示不全
  • pkjobs.exe - pkjobs是什么进程 有什么用
  • <Unity3D>Unity3D GUI控件
  • 所见即所得出自哪里
  • angular创建项目命令
  • python中的变量赋值
  • perl脚本函数
  • cocos2d-x教程
  • shell中特殊字符的含义
  • linux中shell脚本实验总结
  • 怎么学node.js
  • 批处理中for语句的哪个参数表示目录
  • js 表格
  • thinkphp withjoin
  • 02112366电子税务局
  • 大排量车船税怎么减免
  • 发票查询结果打印怎么弄
  • 内蒙古低保信息网
  • 矿产资源税怎样征收
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设