前端工作日记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>


阅读更多
个人分类: 前端基础
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭