【ZHYP004】子涵优品开发日志
2024-05-17 11:28:35
footer部分
footer这里出现了一点问题，也给自己一个提醒，在遇到一些复杂的布局时，先别着急着写结构，先分析一下它的布局是什么样的，还需要画一下它的结构图，通过结构图来写HTML结构，同一层级的用同一个颜色的边框，方便我们进行编码：
footer部分HTML结构
逐步拆分
从上图来看，这里的布局总体可以分为上下两部分，如果使用flex布局，那么就可以先写两个块元素，将这两个块元素填充颜色，将flex-direction设置为column，看会不会达到我们想要的效果：
页脚总体布局
HTML部分源码
<footer><div id="footer-top">这是页脚顶部</div><div id="footer-down">这是页脚底部</div></footer>
CSS部分源码
footer {height: 362px;width: 1343px;display: flex;flex-direction: column;flex-wrap: wrap;font-size: 30px;color: red;
}#footer-top {width: 1343px;height: 225px;background-color: rgb(103, 103, 250);
}#footer-down {width: 1343px;height: 137px;background-color: rgb(121, 255, 121);
}
页脚总布局效果
其实还想详细的拆分呢，但是好像大致是相同的如果水平和垂直都居中，就使用以下代码
display: flex;
justify-content: center;
align-items: center;
页脚部分源码
页脚HTML源码
<footer><div id="footer-top-out"><div id="footer-top-in"><div><h4>购物指南</h4><ul><li class="footer-li">购物流程</li><li class="footer-li">会员介绍</li><li class="footer-li">生活旅行/团购</li><li class="footer-li">常见问题</li><li class="footer-li">购物指南</li></ul></div><div><h4>配送方式</h4><ul><li class="footer-li">上门自提</li><li class="footer-li">211限时达</li><li class="footer-li">配送服务查询</li><li class="footer-li">配送费收取标准</li><li class="footer-li">海外配送</li></ul></div><div><h4>支付方式</h4><ul><li class="footer-li">货到付款</li><li class="footer-li">在线支付</li><li class="footer-li">分期付款</li><li class="footer-li">邮局汇款</li><li class="footer-li">公司转账</li></ul></div><div><h4>售后服务</h4><ul><li class="footer-li">售后政策</li><li class="footer-li">价格保护</li><li class="footer-li">退款说明</li><li class="footer-li">返修/退换货</li><li class="footer-li">取消订单</li></ul></div><div><h4>特色服务</h4><ul><li class="footer-li">夺宝岛</li><li class="footer-li">DIY装机</li><li class="footer-li">延保服务</li><li class="footer-li">子涵优品Z卡</li><li class="footer-li">子涵优品通信</li></ul></div><div><h4>帮助中心</h4><img id="wechat" src="./wechat.jpg"></div></div></div><div id="footer-down"><div id="fd-top"><div id="footer-link"><ul><li class="footer-li">关于我们</li><li class="footer-li">|</li><li class="footer-li"> 联系我们 </li><li class="footer-li">|</li><li class="footer-li"> 联系客服 </li><li class="footer-li">|</li><li class="footer-li"> 商家入驻 </li><li class="footer-li">|</li><li class="footer-li"> 营销中心 </li><li class="footer-li">|</li><li class="footer-li"> 友情链接 </li><li class="footer-li">|</li><li class="footer-li"> 销售联盟 </li><li class="footer-li">|</li><li class="footer-li"> 子涵社区 </li><li class="footer-li">|</li><li class="footer-li"> 风险监测 </li><li class="footer-li">|</li><li class="footer-li"> 隐私政策 </li></ul></div><div id="footer-address">地址：广州市白云区同泰路麒麟山庄对面磨刀坑停车场</div></div><div id="footer-registration">粤ICP备2021148361号</div></div></footer>
页脚CSS源码
footer {height: 362px;width: 1343px;display: flex;flex-direction: column;flex-wrap: wrap;background-color: #EAEAEA;
}h4 {line-height: 30px;
}.footer-li {font-size: 12px;text-align: left;line-height: 18px;
}#footer-top-out {width: 1343px;height: 225px;display: flex;justify-content: center;align-items: center;
}#footer-top-in {width: 1170px;height: 184px;display: flex;justify-content: space-around;
}#footer-top-in>div {width: 180px;
}#wechat {width: 123px;height: 146px;
}#footer-down {width: 1343px;height: 137px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;
}#fd-top {width: 1170px;height: 70px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}#footer-link {width: 900px;height: 45px;
}#footer-link > ul {display: flex;justify-content: center;align-items: center;flex-direction: row;
}#footer-link > ul > li {padding: 5px;justify-content: space-between;
}#footer-address {width: 750px;height: 35px;font-size: 12px;text-align: center;padding-bottom: 20px;
}#footer-registration {width: 1170px;height: 57px;font-size: 12px;text-align: center;padding-top: 10px;
}a:hover {color: rgb(130, 130, 255);
}#wechat:hover {opacity: 0.9;
}
页脚布局效果
页脚布局效果
总结
记得页面的样式的时候分析一下结构
如果我们只是设置为弹性盒子，也就是
display: flex;，那么其实主轴的方向是默认为水平方向；但是如果我们在某个容器中设置主轴的方向是垂直，那么这个只是对该容器起作用。
flex-direction的使用
实验源码
<!DOCTYPE html>
<html lang="zh">
<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>对弹性盒子的实验</title><style>#box1 > ul {display: flex;flex-direction: column;}#box1 > ul > li {width: 50px;height: 50px;list-style: none;background-color: red;margin: 5px;}#box2 > ul {display: flex;}#box2 > ul > li {width: 50px;height: 50px;margin: 5px;list-style: none;background-color: blue;}#box3 > ul {display: flex;}#box3 > ul > li {width: 50px;height: 50px;margin: 5px;list-style: none;background-color: green;}</style>
</head>
<body><div id="box1"><ul><li>1</li><li>2</li><li>3</li></ul></div><div id="box2"><ul><li>4</li><li>5</li><li>6</li></ul></div><div id="box3"><ul><li>7</li><li>8</li><li>9</li></ul></div>
</body>
</html>
实验效果图
[flex-direction的实验效果](
【ZHYP004】子涵优品开发日志相关推荐
- 【ZHYP002】子涵优品开发日志
项目目录分析 输出项目文件根目录 先进入项目目录文件夹,在控制命令行窗口输出项目目录: Microsoft Windows [版本 6.1.7601] 版权所有 (c) 2009 Microsoft ...
- 【ZHYP005】子涵优品开发日志
标题栏的标题和icon修改 熟练使用Photoshop软件PS一张logo图片和icon图片: 主体部分的实现 主体部分总布局的拆分 通过观察,我们可以看到,这一部分是单独存在的: 排行榜部分布局拆分 ...
- 哔哩哔哩-尚优品项目开发记录
尚优品开发项目记录,本次记录仅当作个人总结 使用的编辑器为Vscode 版本为vue2 目前使用到的技术栈有 vue-router.vuex.axios element-ui 首先创建一个Vue2项目 ...
- 京东案例开发之居家优品
京东切分三框布局: 效果: 代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF ...
- 瀚升优品app翰林优商系统开发功能介绍
最近新开发了一套(瀚升优品app)翰林优商系统,其主要功能有商城系统,会员系统,任务系统,支付系统,积分管理系统,在线咨询系统等等. 瀚升优品app特点: 1.精选美服在线特约手机购物软件,实时更新各 ...
- 优品汇系统开发机制介绍
优品汇系统通过通过消费增值模式,促进商品流通,打造中g最大的供应链.作为对政策的回应,绿点刺激实体经济.前期通过科学合理的业务体系,将大部分利润分配给客户和朋友,从而快速创造人气和粉丝数据.中期将逐步 ...
- ue4 无限地图_RPG游戏开发日志13：无限地图的实现
写在前面 本项目同步上传于coding上,国内读者可以通过在coding下载项目. 也欢迎你加入我的UE4学习交流QQ群:872537977.如果你喜欢我写的文章,也希望你点赞.收藏.转发.谢谢! 如 ...
- 【干货下载】聚美优品、中商惠民、倍全，如何让数据驱动“新零售”落地？...
本文提炼自神策数据创始人 & CEO 桑文锋在第五届中国全渠道峰会上发表的主题为<大数据驱动线上线下场景融合>的演讲.PPT 干货获取请点击文末"阅读原文". ...
- PyFlink 在聚美优品的应用实践
精选30+云产品,助力企业轻松上云!>>> 大家好,我是来自聚美优品刷宝大数据部门的吴攀刚,本文将跟大家分享 PyFlink 在刷宝的应用,包括:背景介绍.架构演进.技术选型以及一个 ...
最新文章
- (C++)1029 旧键盘
- SnowFlake唯一ID生成器
- 【数字信号处理】线性常系数差分方程 ( “ 线性常系数差分方程 “ 与 “ 线性时不变系统 “ 关联 | 根据 “ 线性常系数差分方程 “ 与 “ 边界条件 “ 确定系统是否是 线性时不变系统方法 )
- Zynq器件的时钟系统
- CodeForces - 1517D Explorer Space(dp)
- BST(Binary Search Tree 二叉查找树模版)
- 朵朵糖故事机器人怎么更新_“故事贩卖机”专栏创始人温酒的新作，奇幻世界的暖心物语很治愈...
- Chrome、Firefox 浏览器常用设置及操作
- python 生成wifi密码字典_python生成密码字典的方法
- 【Qt学习之路】我的Qt历程
- 深入理解JVM-字节码
- Foxmail中Exchange设置账户总是提示密码错误
- 推荐 7 个 yyds 的开源项目
- 【技巧分享】【数据分析】数据分析模型
- Python文字转换语音，让你的文字会「说话」，抠脚大汉秒变撒娇萌妹
- 遥感影像目标检测：从CNN（Faster-RCNN）到Transformer（DETR）
- 基金从业考试各科目难度特点？
- solidworks导出obj模型和mtl材质
- android小米手机拍照功能,拍照参数设置界面_小米 M1（MIUI）_手机Android频道-中关村在线...
- Python爬虫+数据分析，2019年你想看的A股牛市都在这里了！