今天入职第一天,正式开始我的程序媛生涯
早上简单弄下手续,重新配了一下公司电脑的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>