实践中前端的一些笔记

合集 - Python全栈（Django）(35)

1.一、计算机初识2024-02-11 2.二、数据概述2024-02-11 3.六、ip地址与子网划分2024-02-11 4.五、网络通信实现2024-02-11 5.四、字符编码2024-02-11 6.三、网络基础2024-02-11 7.十四、MySQL与Django之Model基础2024-02-11 8.十三、Django Admin2024-02-11 9.十二、Django视图函数和模版相关2024-02-11 10.十一、Django url控制系统2024-02-11 11.十、Django静态文件2024-02-11 12.九、Django环境搭建（基于anaconda环境）2024-02-11 13.八、Python开发环境管理2024-02-11 14.七、ip地址配置2024-02-11 15.二十五、JSON跨域2024-02-12 16.二十四、文件上传2024-02-11 17.二十三、Django Serializes2024-02-11 18.二十二、Django之Form组件2024-02-11 19.二十一、分页2024-02-11 20.JS笔记2024-02-11 21.二十、基于Bootstrap和FontAwesome制作页面2024-02-11 22.十九、Ajax和iFrame2024-02-11 23.十八、Django之Http2024-02-11 24.十七、Cookie和Session2024-02-11 25.十六、Django的ORM（二）2024-02-11 26.十五、Django的ORM2024-02-11

27.实践中前端的一些笔记2024-02-12

display: flex/inline-flex

使用了display: flex/inline-flex属性后，子元素横向排列
使用了display: flex 属性后，父元素不设置宽度，宽度就是100%；不会被子元素宽度撑开；
使用了display: inline-flex 属性后，父元素不设置宽度，宽度就是所有的子元素宽度之和，会被子元素宽度撑开，实现宽度自适应；

    .header {
        ...
        justify-content: center; # 使子元素居中
        display: flex; # 子元素居中的前提是display：flex，因为justify-content属性只对flex生效
    }
  # 百度：flex的作用，使子元素能够在父元素里弹性的伸缩（子元素尺寸大于父元素时）
  # 与flex的不同是，inline-flex类似于行内元素，但与行内元素不同的是，他可以设置宽度，并且子元素宽度之和大于父元素时，与flex结果相同
    .nav-bar {  #.nav-bar的div位于header的div中，然后居中
        display: inline-flex; # 设置了inline-flex,里面的行内子元素在容器高度范围内按行排列，即使子元素之间对齐方式不一样导致它们不在同一水平线排列
        height: 100%; # 高度与父容器一致
    }
    .telephone{
        display: inline-flex; # .telephone是块级元素div，需要修改为行内flex
        margin: 10px 10px 10px 50px;
        align-items: center;
    }

# 设置flex，为了justify-content：center生效，子元素居中
  <div class="content" style="display: flex; justify-content: center;margin-bottom: 20px">
      <div style="width: 1100px;">
        # 设置inline-flex，这个div就一定按指定高度，里面的元素也必须在这个高度里。宽度由内容决定。
          <div style="display: inline-flex;height: 50px;align-items: center"> #justify-content使里面水平居中，align-items垂直居中
              <span style="background-color: #b35215; width:8px; height: 60%; margin-right: 5px"></span>
              <h2 style="color: #999999; font-weight: 900; font-size: 20px;">最新公告</h2>
          </div>
        # 设置inline-flex,也是让子元素按行排列
          <div style="display: inline-flex; background-color: lightcyan;">
              {% for obj in annouces %}
                  <div id="annouce" style="margin: 0 20px 10px 20px;">
                      <h1>{{ obj.title }}</h1>
                      <p>{{ obj.summary }}</p>
                      <a href="{{ obj.target }}" style="text-decoration: none;">查看更多</a>
                  </div>
              {% endfor %}
          </div>
      </div>
  </div>

pre标签: 按内容本身格式显示

子绝父相+hover

# 让鼠标移动.scenerys_box时显示图片.scenerys_img2
.scenerys_img1 {
        position: absolute;  #子绝父相
        top: 0;
        left: 0;
    }
  .scenerys_img2 {
      position: absolute; #子绝父相
      top: 0;
      left: 0;
      display: none;
  }
  .scenerys_box{
      position: relative; #子绝父相
  }
  .scenerys_box:hover .scenerys_img2{
      display: block;  # hover的时候显示
  }

transition动画

.teacher-other-list>div {
    display: inline-block; #水平排列
    font-size: 0;  {# 使div高度多出的4px去掉 #}
    margin-right: 61px;
    position: relative; #子绝父相
    overflow: hidden;  {# 这样下面的cover 一开始在外面就不显示 #}
}
.teacher-other-list>div:hover .teacher-other-cover{
    margin-top: 0; #hover的时候，取消margin，使cover显示出来
}
.teacher-other-cover>div {
    margin-top: 20px;
}
.teacher-other-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-color: #202020;
    opacity: 0.5; #半透明
    margin-top: 100%; #使一开始的时候在下面，被hidden
    transition: margin-top 0.5s; #设置动画
    color: white;
    text-align: center; {# strong标签是行内元素没有align属性，需要设置父级的text-align来居中 #}
    padding-top: 40px;
}

半透明

颜色的半透明：background: rgba(0, 0, 0, 0.5);
元素的半透明： opacity：0.5

背景图片

.nav-bar>.telephone-a { #a标签
    background: url("/static/imgs/slogan2.png") no-repeat; #设置背景图片
    background-position: left center; #设置背景图片位置
    font-size: larger;
    vertical-align: top;  {# 设置了大字体后，又把父div撑高了，这里设置这个解决。与logo img一样 #}
    float: right;   {# 因为浮动了，发现vertical-align属性不再需要，这里保留，供日后参考 #}
}
.nav-bar>.logo-a:hover {
    background-color: transparent; #其它a标签hover高亮，这里单独让这个a标签不高亮
}
.nav-bar>.logo-a>img {
    position: relative; # 为了能够调整顶部间隙
    top: 2px;
    height: 46px; #设置图片高度height
    vertical-align: top;  {# 让其它a标签与它的顶部对齐，否则，它与其它a标签水平不对齐，撑高了父div。在a标签那里设置也可以 #}
}							#top：使元素及其后代元素的顶部与整行的顶部对齐

vertical-align

关于vertical-align：https://blog.csdn.net/gua222/article/details/106460113 。文字与img的基线位置是不一样的。
另：同一文章：图片或者表单等行内块元素，它的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

居中

margin: 0 auto; # 在标准流中居中的方法

.nav-bar>a {
            text-decoration: none;
            display: inline-block;
            height: 50px;
            line-height: 50px;  {# line-height = height 文字居中 #}
        }

行内元素没有align属性，需要设置父级的text-align来居中

text-align

  <div style="justify-content: center; display: flex">
    #text-align: center使里面的行内元素居中
      <div style="width: 1000px;text-align: center;font-size: 14px;margin-top: 5px">
          <hr> # 分割线
          <div style="margin-top: 10px">
            ...
          </div>
          <div style="margin-top: 10px;">
              ...
          </div>
      </div>
  </div>

瀑布流

.w { #瀑布流容器
    width: 1200px;
    margin: 80px auto;
}
.item {
    width: 33.33%; #分三列，所以是33.33%
    float: left; #因为是div，浮动让它们水平并排
}

<div class="w" id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<script src="/static/plugins/bxslider/js/jquery-1.12.4.js"></script> #引入jQuery
<script>
  #页面加载完，立刻执行
    $(function () {
        var obj = new ScrollImg(); #创建对象
        obj.fetchData(); #加载数据
        obj.scrollEvent() #监听滚动事件
    });
    function ScrollImg() {
        this.NID = 0; # 定义实例变量NID，记录要请求数据的初始ID
        this.LASTPISITION = 2; #记录上一次排到哪个item
        this.fetchData = function () {
            var that = this;
            $.ajax({
                url: '/get_students/',
                type: 'GET',
                data: {nid: that.NID},#让后台根据nid来查询一定量的数据回来
                dataType: 'JSON', #因为后台发送json数据过来
                success: function (arg) {
                    var data = arg.data; # 拿到的是一系列的数据，列表
                    $.each(data, function (index, student) { #遍历列表，对每个数据做处理
                        var eqv = (index + that.LASTPISITION + 1) % 3;# +上一次位置+1，为了求得这次应该从哪个item开始放置新div
                        if (index + 1 == data.length) { #处理到最后一个
                            that.LASTPISITION = eqv; #记录这次item位置
                            that.NID = student.id #记录最后一个数据的id，下次数据从这个id开始获取
                        }
                        var item = $('#container').children().eq(eqv); #.eq 按索引eqv获取子元素
                        var div = document.createElement('div'); #创建div
                        div.style.margin = '0 20px 30px 20px'; #设置上下左右间距
                        div.style.border = '0.5px solid #dddddd';#设置边框
                        item.append(div);#添加div到item
                        var tag1 = document.createElement('img'); #创建img
                        tag1.style.width = '100%'; #宽度与容器一致
                        tag1.src = student.img_url; #设置图片
                        div.append(tag1); #添加img到div
                        var p1 = document.createElement('p');
                        p1.innerText = student.name;
                        p1.style.fontSize = '20px';
                        p1.style.fontFamily = 'Arial';
                        p1.style.color = '#333333';
                        p1.style.margin = '8px 10px'; #与容器边界的距离
                        div.append(p1);
                        var p2 = document.createElement('p');
                        p2.innerText = '公司：' + student.company + '\r\n薪资：' + student.salary + '/月';
                        p2.style.fontSize = '12px';
                        p2.style.fontFamily = 'Arial';
                        p2.style.color = '#666666';
                        p2.style.margin = '8px 10px';
                        p2.style.lineHeight = '20px'; #使行与行有间距
                        div.append(p2);
                        var p3 = document.createElement('p');
                        p3.innerText = student.gratitude;
                        p3.style.fontSize = '14px';
                        p3.style.fontFamily = 'Arial';
                        p3.style.color = '#666666';
                        p3.style.margin = '8px 10px 20px 10px'; #与容器边界的距离
                        div.append(p3);
                    })
                }
            })
        };
     this.scrollEvent = function () {
        var that = this; #谁调用，this就是谁。这个先把this记录下来，是因为上面是ScrollImg对象调用。这样下面就可以调用fecthData方法。
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop(); #获得页面顶部向上滚了多少
            var winHeight = $(window).height(); #获得浏览器高度
            var docHeight = $(document).height(); #获得页面总高度
            if (scrollTop + winHeight == docHeight) { # 浏览器高度+顶部滚动的高度=页面总高度，说明滚到底了。
                that.fetchData();
            }
        })
      };
    }
</script>

Django后台接口

def get_students(request):
    nid = request.GET.get('nid')
    lid = int(nid) + 4  #现有id加4等于最后一个数据的id，id__gt=nid, id__lte=lid每次加查询4个数据
    # .select_related("detail") 优化了数据库查询，链表查询。这里只需进行一次查询就可以了。
    students = models.student_info.objects.filter(id__gt=nid, id__lte=lid).select_related("detail").all()
    stu_list = [{'name': obj.name, 'img_url':obj.img_url(), 'company':obj.company, 'salary':obj.salary, 'gratitude':obj.detail.gratitude, 'id':obj.id} for obj in students]
    return JsonResponse({'status':True, 'data':stu_list})

页面内嵌视频

优酷：点击分享按钮有通用代码，复制过来使用
<iframe height=498 width=510 src='https://player.youku.com/embed/XNjAwNTk3OTU1Mg==' frameborder=0 'allowfullscreen'></iframe>

分割线的设置方法

<hr align="left" width="100%" size="1" color=#e0e0e0>

菜单展开、折叠

<ul class="nav nav-sidebar">
  <li class="active">
    <a href="javaScript:void(0);" onclick="toggle(this);">博客管理</a>
    <ul class="nav sidebar-items">
    <li><a class="active" href="/backends/articles/">文章管理<span class="sr-only">(current)</span></a></li>
            <li><a href="#">标签管理</a></li>
            <li><a href="#">分类管理</a></li>
            <li><a href="#">个人信息</a></li>
    </ul>
  </li>
    <li class="active">
        <a href="javaScript:void(0);" onclick="toggle(this);">报障管理</a>
        <ul class="nav sidebar-items">
            <li><a href="/backends/troubles/">报障列表</a></li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
            <li><a href="">More navigation</a></li>
        </ul>
    </li>
    <li class="active">
        <a href="javaScript:void(0);" onclick="toggle(this);">权限管理</a>
        <ul class="nav sidebar-items">
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
        </ul>
    </li>
</ul>

<script>
    function toggle(ths) { #ths是a标签
        childs = Array.from($(ths).parent().parent().children());#a标签的父级（li）的父级（ul）的所有子元素（li）
        childs.forEach(function (ele) { #ele是li，第一层菜单
            ulele = ele.lastElementChild; #（第一层菜单）li的最后一个子元素是ul，包含子菜单
            if (ele == ths.parentNode){ #如果是自己的父级li，则展开
                ulele.removeAttribute('hidden');
            } else { # 其它菜单，则隐藏其子菜单，即折叠
                ulele.setAttribute('hidden',true);
            }
        });
    }
</script>

js获取父级同级子级标签

https://www.cnblogs.com/zhangyezi/p/13228970.html

nextAll().forEach is not function
https://blog.csdn.net/weixin_42190521/article/details/116306258
lis = Array.from($(ths).parent().nextAll());
lis.forEach(function (ele) {
  console.log(ele);
})

childNodes 和 children 有什么区别？
https://zhuanlan.zhihu.com/p/497721144

lis = Array.from($(ths).parent().nextAll());
lis.forEach(function (ele) {
  console.log(ele);
  console.log(ele.children);
  console.log(ele.children[1]);
  console.log(ele.lastElementChild);

})

html元素hidden属性

if (list.length){
  document.getElementById("comment_list_title").removeAttribute("hidden")
}else{
  document.getElementById("comment_list_title").setAttribute("hidden",'')
}
hidden属性只要设置就隐藏，不管什么值。

posted @ 2024-02-12 17:00 Bruce_JRZ 阅读(8) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 三十一、动态Form

· 十二、Django视图函数和模版相关

· CSS笔记

· HTML+CSS

· 前端知识点

阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库

公告

昵称： Bruce_JRZ
园龄： 9年7个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

2024年2月(54)

Bruce

实践中前端的一些笔记

display: flex/inline-flex

pre标签: 按内容本身格式显示

子绝父相+hover

transition动画

半透明

背景图片

vertical-align

居中

text-align

瀑布流

页面内嵌视频

分割线的设置方法

菜单展开、折叠

js获取父级同级子级标签

html元素hidden属性

公告

搜索

常用链接

我的标签

合集

随笔分类

随笔档案

阅读排行榜

Bruce

实践中前端的一些笔记

display: flex/inline-flex

pre标签: 按内容本身格式显示

子绝父相+hover

transition动画

半透明

背景图片

vertical-align

居中

text-align

瀑布流

页面内嵌视频

分割线的设置方法

菜单展开、折叠

js获取父级 同级 子级标签

html元素hidden属性

公告

搜索

常用链接

我的标签

合集

随笔分类

随笔档案

阅读排行榜

js获取父级同级子级标签