前端工作日记day1

最新推荐文章于 2022-10-17 10:59:56 发布

Skylar_z

最新推荐文章于 2022-10-17 10:59:56 发布

阅读量3.1k

点赞数 2

分类专栏：前端基础

本文链接：https://blog.csdn.net/sirlll/article/details/80344242

版权

前端基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

早上简单弄下手续，重新配了一下公司电脑的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>

Skylar_z

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
前端工作日记day1

今天入职第一天，正式开始我的程序媛生涯早上简单弄下手续，重新配了一下公司电脑的vscode，发现电脑的前任主人没有清楚cookies，留下了印象笔记的默认登录，而且他的好些账号密码还写在上面了……………………然后发现技术团队里好几个还没毕业的小学弟（老了…………）中午吃饭终于吃到了久违的食堂的味道，感觉还挺不错的。大佬交代了一个页面，看了一下感觉挺简单……但是真正开始写还是写了好一会。——————...
复制链接

扫一扫