前端工作日记day1

今天入职第一天，正式开始我的程序媛生涯

早上简单弄下手续，重新配了一下公司电脑的vscode，发现电脑的前任主人没有清楚cookies，留下了印象笔记的默认登录，而且他的好些账号密码还写在上面了……………………然后发现技术团队里好几个还没毕业的小学弟（老了…………）中午吃饭终于吃到了久违的食堂的味道，感觉还挺不错的。

大佬交代了一个页面，看了一下感觉挺简单……但是真正开始写还是写了好一会。

————————————————————————————————————————————————————

1. 分析布局

头部一个nav的tab栏（可以用bootstrap也可以js原生写，翔逼推荐了swiper改写的tab（因为他说丝丝顺滑手感好……））

下面是ul>li的结构，父盒子用flex布局，左边图片定宽，右边父盒子flex布局，flex:1占据剩余位置。

2. 实现细节

2.0 css统一样式

@charset "utf-8";/*统一样式*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,lengend,button,input,textarea,th,td {margin:0;padding:0;font-family:PingFangSC,Helvetica;}
a {text-decoration:none;color: #000}
a:hover {text-decoration:underline;}
ul,ol {list-style:none;}
a,img,input,div {-webkit-tap-highlight-color:rgba(255,255,255,0);}
.hidden {display:none !important;}
.bold{font-weight: 600}
@media screen and (min-width:1024px){html{font-size:20px;}}/* PC */
@media screen and (max-width:800px){html{font-size:18px;}} /* 普通平板 */
@media screen and (max-width:414px){html{font-size:17px;}} /* 苹果6P7P8P */
@media screen and (max-width:375px){html{font-size:15px;}} /* 苹果678 */
@media screen and (max-width:360px){html{font-size:14px;}} /* 三星S5 */
@media screen and (max-width:320px){html{font-size:12px;}} /* 苹果5 */
/*禁止ios微信端长按出现*/
* {-webkit-touch-callout:none;-moz-touch-callout:none;-ms-touch-callout:none;touch-callout:none;
}

2.1 rem的使用：rem是自适应字体大小单位，跟em不一样，rem会根据html设置的字号大小匹配，1rem=1根字号大小。

2.2 flex布局

display:flex，只写这个布局，作用类似float:left。因为默认的direction：row

flex布局里让子元素居中的写法，如果想让div居中就在父元素里加这个布局，如果只是想让div里的文字居中也可以这么写，作用类似textalign:center，height=line-height：

display:flex;
align-items:center;
justify-content:center.

2.3 多余文字显示省略号隐藏

  display: -webkit-box;word-break: break-all;text-overflow: ellipsis;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;

2.4 稍微研究了下swriper的用法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css"><style>#swiper1 {width: 100px;height: 100px;background: #66ccff;}#swiper2 {width: 200px;height: 200px;background: #66ccff;}#swiper3 {width: 300px;height: 300px;background: #66ccff;}</style>
</head><body><span>1 基础滑动</span><div class="swiper-container" id="swiper1"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div></div><span>2 按钮切换</span><div class="swiper-container" id="swiper2"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div><span>3 进度条</span><div class="swiper-container" id="swiper3"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><div class="swiper-pagination swiper-pagination-progressbar"><span class="swiper-pagination-progressbar-fill" style="transform: translate3d(0px, 0px, 0px) scaleX(0.3) scaleY(1); transition-duration: 300ms;"></span></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script><script>        var mySwiper1 = new Swiper('#swiper1', {direction: 'horizontal',loop: true,freeMode: true,})var mySwiper2 = new Swiper("#swiper2", {direction: 'horizontal',loop: true,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},})var mySwiper3 = new Swiper('#swiper3', {watchSlidesProgress: true,watchSlidesVisibility: true,})mySwiper3.progress;mySwiper3.slides[2].progress;</script>
</body></html>

前端工作日记day1相关推荐

我的web前端工作日记1------web前端经验
转载请注明出处:https://blog.csdn.net/dreamer_sen/article/details/82143519 在公司干坐了一天,觉得应该找点事做.所以,就有了记录自己前端工作的 ...
我的web前端工作日记11------在腾讯外包的这一年
说在前面的话本文只是大概说一下自己在腾讯做了一年前端外包的收获和一些心得感悟,希望自己能客观的描述,能给一些后来者参考取舍,看是否值得去腾讯做外包.写的没啥逻辑,都是想到啥就写啥,所以大家将就着看看 ...
前端自学日记-day5
前端自学日记 day5 内容总结:学习了代码快速编写方法和一些小工具,CSS复合选择器,CSS元素显示模式,CSS背景. 1.学习进度更新 2.具体内容 2.1 Emmet简介作用:使用缩写tab输 ...
web前端开发日记------入职腾讯外包
入职了腾讯的外包了面试前还是准备了几天,在网上刷刷基础题,具体面试的时候,只有一次的技术面,具体的面试题可以看我另一篇文章 web前端腾讯外包面试记录入职的第一天,上午在外包公司办理入职,下午就到 ...
前端自学日记-day2
前端自学日记 day2 内容总结:html其他标签的扩展学习. 1. 学习进度更新 2. 具体内容常用标签 (注:day1中常用标签为其中一部分,这里总结一下文章书写相关标签) 标题.段落和换行标签 ...
微软雅黑console_【工作日记03】使用console输出网站logo彩蛋
工作日记是笔者记录在日常工作中对负责的前端项目和任务的总结和提炼,在工作中寻乐趣,在代码中找灵魂,输出工作中有价值有意思的沉淀,分享知识,娱乐自己.wx:wxid_wdjyyo939vja22 相信大 ...
前端实习日记——前端开发环境配置清单
前端实习日记--前端开发环境配置清单实习日记篇说明: 作为前端小菜鸟,初入职场实习,希望将所感所获简单总结,分享给同样处于新手期的小伙伴们,和大家共同成长~ 实习第一步:配环境! 实习第一天,自然是 ...
整理前端工作中的可复用代码（二）：拓展spark-md5，支持计算网络文件md5
这里是<整理前端开发中的可复用代码>中的第二篇,最初此系列文章的标题不是这个,但觉得标题要准确.明白一些,便做了修改.这里的经验都来自作者的工作实践,入了前端坑的摸爬滚打. 背景在工作中 ...
前端工作面试问题（下）
续 "前端工作面试问题(上)" JS相关问题: 解释下事件代理. 在传统的事件处理中,你按照需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能 ...

前端工作日记day1

前端工作日记day1相关推荐

最新文章

热门文章