“21天好习惯“ 第十九期 — 19之黑马面面移动端布局(暂时完结)
2024-05-23 01:29:23
效果设计图!!!
效果设计图!!! 项目来源：黑马程序员的pink老师 点击跳转视频课程
效果设计图!!! 此项目布局采用flexible.js+rem+flex
本博客目前搭建效果(有兴趣的同学可以一起来动手)
效果设计图!!!
效果设计图!!! 项目来源：黑马程序员的pink老师 点击跳转视频课程
效果设计图!!! 此项目布局采用flexible.js+rem+flex
本博客目前搭建效果(有兴趣的同学可以一起来动手)
本次阶段暂时搭建到此 告一段落了
关于路径的问题和部分文件示意图如下：(less文件为css的预编译文件，可视为css的同分异构体)
黑马面面
- css
- index.css
- index.less(直接写css即可,less可以不用)
- normalize.css
- swiper.min.css
- icons
- img
- js
- flexible.js
- swiper.min.js
- index.html
css
index.css
body {min-width: 320px;max-width: 750px;margin: 0 auto;background-color: #f2f4f7;
}
@media screen and (min-width: 750px) {html {font-size: 37.5px !important;}
}
.header {height: 2.133333rem;border-bottom: 1px solid #EAEAEA;text-align: center;line-height: 2.133333rem;font-size: 0.933333rem;color: #1C1C1C;
}
.top {background-color: #FFF;padding-bottom: 1.2rem;
}
.nav {display: flex;flex-wrap: wrap;padding: 1.173333rem 0 1.6rem 0;
}
.nav .items {display: flex;flex-direction: column;align-items: center;width: 33.3%;
}
.nav .items img {width: 3.706666rem;height: 3.706666rem;
}
.nav .items span {font-size: 0.72rem;color: #707070;
}
.nav .items:nth-child(-n+3) {margin-bottom: 1.6rem;
}
.go {padding: 0 0.373333rem;
}
.content {width: 100%;margin: 0.266666rem 0;padding: 1.066666rem 0.533333rem;background-color: #FFF;
}
.content .conHead {display: flex;justify-content: space-between;margin-bottom: 0.906666rem;height: 1.066666rem;width: 100%;line-height: 1.066666rem;
}
.content .conHead h4 {margin: 0;font-size: 0.746666rem;color: #333333;
}
.content .conHead h4::before {content: '';display: inline-block;vertical-align: middle;margin: 0 0.533333rem 0 0;width: 1.066666rem;height: 1.066666rem;background: url("../icons/i2.png") no-repeat;background-size: 100% 100%;
}
.content .conHead .conCharge::before {background: url("../icons/i1.png") no-repeat;background-size: 100% 100%;
}
.content .conHead a {font-size: 0.586666rem;color: #999999;
}
.content .conBody {position: relative;
}
.content .conBody .swiper-container {width: 14.4rem;height: 100%;
}
.content .conBody .swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;transition: 300ms;transform: scale(0.8);opacity: 0.6;
}
.content .conBody .swiper-slide a {width: 9.013333rem;height: 10.026666rem;
}
.content .conBody .swiper-slide a img {width: 100%;height: 100%;
}
.content .conBody .swiper-slide p {margin-top: 0.64rem;width: 9.013333rem;line-height: 1.066666rem;font-size: 0.666666rem;color: #333333;
}
.content .conBody .swiper-slide-active,
.content .conBody .swiper-slide-duplicate-active {transform: scale(1);z-index: 99;opacity: 1;
}
.content .conStudy {width: 100%;margin-bottom: 1.6rem;overflow: hidden;
}
.content .conStudy .swiper {padding: 0.266666rem;width: 100%;height: 100%;
}
.content .conStudy .swiper-slide {width: 7.733333rem;height: 9.066666rem;background-color: #FFF;border-radius: 0.266667rem;box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);font-size: 0.48rem;
}
.content .conStudy .swiper-slide img {display: block;width: 100%;height: 4.56rem;object-fit: cover;
}
.content .conStudy h5 {margin: 0.8rem 0.266666rem 0.533333rem;font-size: 0.7rem;font-weight: 400;
}
.content .conStudy p {padding: 0.6rem 0.533333rem 0;color: #A5A5A5;
}
.content .conStudy p span {color: #E66339;
}
.content .swiper-button-next,
.content .swiper-button-prev {color: #427e9c;
}
.footer {position: fixed;left: 0;bottom: 0;margin: 0 auto;width: 100%;height: 2.6rem;background-color: #FFFFFF;z-index: 999;
}
.footer .ft_Navlist ul {display: flex;
}
.footer .ft_Navlist ul li {display: flex;flex-direction: column;align-items: center;padding: 0.366666rem;font-size: 0.586666rem;flex: 1;line-height: 1.173333rem;
}
.footer .ft_Navlist ul li img {height: 1.066666rem;width: 1.066666rem;
}
.footer .ft_Navlist ul li p {font-size: 0.586666rem;color: #666;
}
.footer .ft_Navlist ul li:hover {cursor: pointer;
}
.footer .ft_Navlist ul .current {background-color: #4c4c4c50;
}index.less(直接写css即可,less可以不用)
body{min-width: 320px;max-width: 750px;margin: 0 auto;background-color: #f2f4f7;
}
@media screen and (min-width: 750px) {html{font-size: 37.5px !important;}
}
.header {height: 2.133333rem;border-bottom: 1px solid #EAEAEA;text-align: center;line-height: 2.133333rem;font-size: 0.933333rem;color: #1C1C1C;
}
.top {background-color: #FFF;padding-bottom: 1.2rem;
}
.nav {display: flex;flex-wrap: wrap;padding: 1.173333rem 0 1.6rem 0;.items {display: flex;flex-direction: column;align-items: center;width: 33.3%;img {width: 3.706666rem;height: 3.706666rem;}span {font-size: 0.72rem;color: #707070;}&:nth-child(-n+3) {margin-bottom: 1.6rem;}}
}
.go{padding: 0 0.373333rem;
}
.content {width: 100%;margin: 0.266666rem 0;padding: 1.066666rem 0.533333rem;background-color: #FFF;.conHead {display: flex;justify-content: space-between;margin-bottom: 0.906666rem;height: 1.066666rem;width: 100%;line-height: 1.066666rem;h4 {margin: 0;font-size: 0.746666rem;color: #333333;&::before{content: '';display: inline-block;vertical-align: middle;margin: 0 0.533333rem 0 0;width: 1.066666rem;height: 1.066666rem;background:url("../icons/i2.png") no-repeat;background-size: 100% 100%;}}.conCharge {&::before {background:url("../icons/i1.png") no-repeat;background-size: 100% 100%;}}a {font-size:0.586666rem;color: #999999;}}.conBody {position: relative;.swiper-container {width: 14.4rem;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;transition: 300ms;transform: scale(0.8);opacity: 0.6;a {width: 9.013333rem;height: 10.026666rem;img {width: 100%;height: 100%;}} p {margin-top: 0.64rem;width: 9.013333rem;line-height: 1.066666rem;font-size: 0.666666rem;color: #333333;}}.swiper-slide-active,.swiper-slide-duplicate-active{transform: scale(1);z-index: 99;opacity: 1;}}.conStudy {width: 100%;margin-bottom: 1.6rem;overflow: hidden;.swiper {padding: 0.266666rem;width: 100%;height: 100%;}.swiper-slide {width: 7.733333rem;height: 9.066666rem;background-color: #FFF;border-radius: 0.266667rem;box-shadow:0 0 10px rgba(0, 0, 0, 0.16);font-size: 0.48rem;}.swiper-slide img {display: block;width: 100%;height: 4.56rem;object-fit: cover;}h5 {margin: 0.8rem 0.266666rem 0.533333rem;font-size: 0.7rem;font-weight: 400;}p {padding: 0.6rem 0.533333rem 0;color: #A5A5A5;span {color: #E66339 ;}}}.swiper-button-next,.swiper-button-prev {color: #427e9c;}
}
.footer {position: fixed;left: 0;bottom: 0;margin: 0 auto;width: 100%;height: 2.6rem;background-color: #FFFFFF;z-index: 999;.ft_Navlist {ul {display: flex;li {display: flex;flex-direction: column;align-items: center;padding: 0.366666rem;font-size: 0.586666rem;flex: 1;line-height: 1.173333rem;img {height: 1.066666rem;width: 1.066666rem;}p {font-size: 0.586666rem;color: #666;}&:hover {cursor: pointer;}}.current {background-color: #4c4c4c50;}}}
}normalize.css
html {line-height: 1.15;
}body {margin: 0;
}h1 {font-size: 2em;margin: 0.67em 0;
}
a {text-decoration: none;background-color: transparent;
}
ul,
li {margin: 0;padding: 0;list-style: none;
}
p {margin: 0;
}
img {display: block;width: 100%;
}
* {box-sizing: border-box;
}
swiper.min.css
( swiper详情请点击这里跳转链接:)
样式过于庞大，请自行下载解压后找到相应文件放入
icons
点击下载图标
img
点击下载图片
js
flexible.js
(function flexible(window, document) {var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px';}else {document.addEventListener('DOMContentLoaded', setBodyFontSize);}}setBodyFontSize();function setRemUnit() {var rem = docEl.clientWidth / 20;docEl.style.fontSize = rem + 'px';}setRemUnit();window.addEventListener('resize', setRemUnit);window.addEventListener('pageshow', function(e) {if(e.persister) {setRemUnit();}else {setRemUnit();}})
}) (window,document)
swiper.min.js
( swiper详情请点击这里跳转链接:)
代码过于庞大，请自行下载解压后找到相应文件放入
index.html
<!DOCTYPE html>
<html><head lang="zh-CN"><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><title></title><link rel="stylesheet" type="text/css" href="./css/normalize.css" /><link rel="stylesheet" type="text/css" href="./css/swiper.min.css" /><link rel="stylesheet" type="text/css" href="./css/index.css" /></head><body><section class="hone part"><!-- 第一节:顶部 --><section class="top"><!-- Header头部区域 --><header class="header">黑马面面</header><!-- Nav导航区域 --><nav class="nav"><a href="#" class="items"><img src="icons/icon1.png"><span>HR面试</span></a><a href="#" class="items"><img src="icons/icon2.png"><span>笔试</span></a><a href="#" class="items"><img src="icons/icon3.png"><span>技术面试</span></a><a href="#" class="items"><img src="icons/icon4.png"><span>模拟面试</span></a><a href="#" class="items"><img src="icons/icon5.png"><span>面试技巧</span></a><a href="#" class="items"><img src="icons/icon6.png"><span>薪资查询</span></a></nav><!-- go模块~ --><section class="go"><img src="./img/go.png"></section></section><!-- 第二节:主体一就业 --><section class="content"><div class="conHead"><h4>就业指导</h4><a href="#">更多>></a></div><div class="conBody"><!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><a href="#"><img src="./img/pic.png"></a><p>模拟面试考场助您一臂之力</p></div><div class="swiper-slide"><a href="#"><img src="./img/R-C%20(2).jpg"></a><p>师生面试给您最真实的考场</p></div><div class="swiper-slide"><a href="#"><img src="./img/QQ截图20211109132152.png"></a><p>多人旁听给您及时完善话机</p></div></div></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></section><!-- 第二节:主题二充电 --><section class="content"><div class="conHead"><h4 class="conCharge">充电学习</h4><a href="#">更多>></a></div><div class="conStudy"><!-- Swiper --><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="./img/pic1.png"><h5>职场面试技巧，告别沉默</h5><p><span>156</span>人学习</p></div><div class="swiper-slide"><img src="./img/QQ截图20211109132528.png"><h5>多人聆听技巧，告别失语</h5><p><span>222</span>人学习</p></div><div class="swiper-slide"><img src="./img/pic2.png"><h5>发散思维技巧，告别沉默</h5><p><span>333</span>人学习</p></div><div class="swiper-slide"><img src="./img/6954ff5e26706bb8f528e74c18a35f87.png"><h5>思维导图技巧，告别冷漠</h5><p><span>1313</span>人学习</p></div><div class="swiper-slide"><img src="./img/R-C.jpg"><h5>职场面试技巧，告别沉默</h5><p><span>26</span>人学习</p></div></div></div></div></section></section><section class="skill part"><section class="top"><!-- Header头部区域 --><header class="header">黑马面面</header><h1>尚未搭建...</h1></section></section><section class="simulation part"><section class="top"><!-- Header头部区域 --><header class="header">黑马面面</header><h1>技术板块尚未搭建...</h1></section></section><section class="my part"><section class="top"><!-- Header头部区域 --><header class="header">黑马面面</header><h1>模拟板块也没搭建...</h1></section></section><!-- 第三节:底部导航 --><footer class="footer"><div class="ft_Navlist"><ul><li class="current"><img src="./icons/home5.png"><p>首页</p></li><li><img src="./icons/net.png"><p>技术</p></li><li><img src="./icons/ms.png"><p>模拟</p></li><li><img src="./icons/user.png"><p>我的</p></li></ul></div></footer><script src="./js/flexible.js" type="text/javascript" charset="utf-8"></script><script src="./js/swiper.min.js" type="text/javascript" charset="utf-8"></script><script>var ft_Navlist = document.querySelector('.ft_Navlist');var lis = ft_Navlist.querySelectorAll('li');var parts = document.querySelectorAll('.part');for (var i = 0; i < lis.length; i++) {lis[i].setAttribute('index', i);lis[i].onclick = function() {for (let i = 0; i < lis.length; i++) {lis[i].className = '';}this.className = 'current';var index = this.getAttribute('index');for (let i = 0; i < lis.length; i++) {parts[i].style.display = 'none';}parts[index].style.display = 'block';}}(function() {var swiper = new Swiper('.swiper-container', {slidesPerView: 2,spaceBetween: 30,centeredSlides: true,loop: true,navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});})();(function() {var swiper = new Swiper(".mySwiper", {slidesPerView: 2.6,spaceBetween: 30,});})();</script></body>
</html>本项目来源：黑马程序员的pink老师 点击跳转视频课程
关于素材的下载点击跳转下载
关于路径的问题和部分文件示意图如下：(less文件为css的预编译文件，可视为css的同分异构体)
本项目来源：黑马程序员的pink老师 点击跳转视频课程
关于素材的下载点击跳转下载
如果Js引入不成功尝试将Js里边的代码放入如下的函数中window.onload = function(){//代码块放里边//因为浏览器渲染没有加载完所有DOM节点，所有JS加载会有错误 }关于底部栏切换的具体思路的代码 下期博客给出
“21天好习惯“ 第十九期 — 19之黑马面面移动端布局(暂时完结)相关推荐
- “21天好习惯“ 第十六期 — 16之黑马面面移动端布局(二)
效果设计图!!! 效果设计图!!! 项目来源:黑马程序员的pink老师 点击跳转视频课程 效果设计图!!! 此项目布局采用flexible.js+rem+flex 本博客目前搭建效果(有兴趣的同学可以 ...
- “21天好习惯“ 第十七期 — 17之黑马面面移动端布局(三)
效果设计图!!! 效果设计图!!! 项目来源:黑马程序员的pink老师 点击跳转视频课程 效果设计图!!! 此项目布局采用flexible.js+rem+flex 本博客目前搭建效果(有兴趣的同学可以 ...
- 2021计算机一级模拟29套,“智慧家”2021年第二十九期每周家庭套餐
原标题:"智慧家"2021年第二十九期每周家庭套餐 玉溪妇联 架起一座与广大姐妹们沟通的桥梁 只有家长的好好学习,才能助力孩子的健康成长,只有家长和孩子不断地学习成长,才能营造和谐 ...
- 《袁老师访谈录》第十九期-【在商言商·思享会】(第一场)“企业如何抓住新一代科技红利”...
11月21日,<袁老师访谈录>第十九期-香港科大商学院[在商言商·思享会](第一场)"企业如何抓住新一代科技红利"成功举办,现场共有近150位校友及观众到场,十大平台同 ...
- 第十九期基金定投-价值股又有起飞的迹象了
5请阅读本计划之前,仔细阅读以下内容: 1. 本计划仅供参考,市场有风险,投资需谨慎 2. 此计划的预计年限是2-3年,因此投资的钱是稳定而不用的钱 3. 请打算按此计划购买的朋友,再三考虑,是否熬得 ...
- 极乐技术周报(第十九期)
2019独角兽企业重金招聘Python工程师标准>>> 极乐技术周报(第十九期) 为什么程序员总是搞混万圣节和圣诞节? 因为... Oct 31 = Dec 25. 1.爬虫工程师如 ...
- 应用回归分析何晓群课第五版_海外第三方应用市场分析丨出海学院十九期直播课...
Enjoy出海一站式出海服务平台 点击关注"Enjoy出海"公众号 时时参与出海答疑问题 出海学院第十九期直播课 出海学院十九期直播课,由Enjoy出海CEO金翔主讲,本期主题为& ...
- 开发者论坛一周精粹(第十九期) ：【重要事件】运维人员注意啦：NetSarang的Xmanager和Xshell多种产品被植入后门...
摘要: 安全公司发现官方发布的软件版本中,nssock2.dll模块源码被植入后门.由于使用该软件的技术人员较多,存在一定的安全风险. 目前官方已经发布了xshell最高版本为 Xshell 5 Bu ...
- 数据库管理-第四十九期 Exadata的存储节点管理（20221223）
数据库管理 2022-12-23 第四十九期 Exadata的存储节点管理 1 咋个查看数据是否被缓存到闪存卡了没 2 EM13.5的Exadata监控 3 存储降级 总结 第四十九期 Exadata ...
最新文章
- traceback异常打印
- Matlab符号计算结果过长无法在屏幕中显示的问题
- HtmlParser 简介
- 为什么 scanf( )（scanf_s）函数老要输入两次才行？
- chrome 69 免安装_ElasticSearch安装elasticsearch-head插件
- 极兔正式入股百世快递
- 筛选数据库_快速研读国外专利，轻松筛选核心技术…研发人必看6大数据库实用功能盘点！...
- 八、异常、java笔记
- java打印list_java打印list中的元素
- UG与PROE哪个好用，主要看是用在哪里
- Word快捷键列表之Ctrl+
- SSL/TLS协议详解(上)：密码套件，哈希，加密，密钥交换算法
- Foxmail7.0.1.86升级有风险
- 2022届软件技术专业毕业生就业岗位分析(.Net方向)
- 4 看电影--贪心算法
- 学校计算机教室 计划总结怎么写,学校信息技术教师的工作总结范文
- 在家用电饼铛自制潮汕美食肠粉过程，想学的赶紧来看
- jenkins html插件,Jenkins插件HTML Publisher Plugin的使用
- C语言程序与设计：篮球游戏
- fmri学习笔记｜SPM 代码 循环