11.24学习笔记

298 阅读2分钟

一、前端自适应

- Bootstrap框架学习
  • bootstrap 是简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
  • 网站和应用能在 Bootstrap 的帮助下通过同一份源码快速、有效地适配手机、平板和 PC 设备。提高开发的效率。
  • 通过媒体查询实现自适应。

二、基本代码

1.栅格系统的使用。

//使用bootstrap 要引入bootstrap,去官网查看就可以了。
//现在只是初步学习,学会使用bootstrap布局,

 <!-- container是固定容器,  -->
  <div class="container">
        <div class="row">
           <!-- 
            1. col-lg-3表示在大屏幕时(宽度>1200px时),一个div在整个屏幕宽度的3份
            2.col-md-4 表示在中屏幕时(992=<width<1200),一个div占4份,下面“4”会换行
            3. col-sm-6  768=<width<992(sm)        col-xs-12  A<768 (xs)  
 
        -->
            <div class="col-lg-3 col-md-4  col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4  col-sm-6  col-xs-12"">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6  col-xs-12"">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6  col-xs-12"">4</div>
        </div>
<!-- 如果孩子的份数相加等于12,则孩子可以占满整个container的宽度 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
<!-- 小于12份,则占不满整个container,大于会多出列,另起一行显示 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
    </div>

2.栅格系统嵌套

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 我们列嵌套最好加1个行 row 这样我们可以取消父元素的padding值,而且自动和父元素一样高 -->
               <!-- 可以在已划分的div中嵌套使用 -->
                <div class="row">
                    <div class="col-md-4">a</div>
                    <div class="col-md-8">b</div>
                </div>

            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>

3.列偏移

        <div class="row">
            <div class="col-md-3">左侧</div>
            <!-- 份数加起来小于12份,  可使用col-md-offset-6,使他向右偏移6份,使两边各有一个盒子 -->
            <div class="col-md-3 col-md-offset-6">右侧</div>
        </div>

        <div class="row">
           <!-- 使一个盒子占在中间 -->
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>
    </div>

4.列排序

<!-- 左右两边相互交换位置 -->
    <div class="container">
        <div class="row">
            <!-- col-md-push-8向右侧推8个盒子 -->
            <div class="col-md-4 col-md-push-8">左侧</div>
            <!-- col-md-pull-8向左侧推84个盒子 -->
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>

5.响应式

        <div class="row">
            <div class="col-xs-3">1
                <!--  visible-lg 表示在大屏幕时才会显示,其他屏幕不显示-->
                <span class="visible-lg">我会显示哦</span>
            </div>
            <div class="col-xs-3">2</div>
            <!-- hidden-md hidden-xs  在超小屏幕隐藏-->
            <div class="col-xs-3 hidden-md hidden-xs">变换</div>
            <div class="col-xs-3">4</div>
        </div>

    </div>

ps: 案例,就不放了。

三、学习线性代数

  1. 矩阵求逆的几种方法
  • a:根据定理进行初等行变换
  • b:利用公式A的逆=A的行列式分之A*(指A的伴随矩阵)
  • c:利用初等变换
  1. 求矩阵的秩,化为行阶梯形矩阵。矩阵的初等变换不改变矩阵的秩。

四、python爬虫学习

爬了一个动漫网站的图片,直接看代码吧。

"""
Created on Wed Nov 24 10:42:56 2021

@author: bin
"""
import re
import requests

from bs4 import BeautifulSoup

url="https://www.yhdmp.live/list/?region=%E4%B8%AD%E5%9B%BD&pagesize=24&pageindex=0"

resp = requests.get(url)
# print(resp)

html=resp.text
# print(html)
soup = BeautifulSoup(html,"lxml")#list类型

content_all = soup.find_all(class_="lpic")
# print(content_all)

for item in content_all:
    imgContent = item.find_all(name ="img")
    # 获取alt
    # print(imgContent)
    #利用soup获得img这个标签,
    trs=soup.findAll("img")
    length=len(trs)
    for i in range(length):
    #获得alt里面的name
        imgName = trs[i].attrs["alt"]
        #获取数据链接
        imgUrl = trs[i].attrs["src"]
        if "https:" in imgUrl:
            res = requests.get(imgUrl)
        else:
            res = requests.get("https:"+imgUrl)
        response = res.content 
        #print(response)
        
        # 3.数据保存
        fileUrl = "./images/{0}.jpg".format(imgName)
        with open(fileUrl,"wb") as f:
            f.write(response)
print("over!")
resp.close()

备注:个人的学习笔记,记录学习的经历。