11.22 第六次课作业笔记

已于 2023-11-29 10:06:05 修改
阅读量58 收藏
点赞数
文章标签： 笔记 css 前端
于 2023-11-23 21:08:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/menge2333/article/details/134586191
版权

作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        

        * {

            margin: 0;
            padding: 0;
        }
    
        .nav {
            position: fixed;
            width: 1705px;
            height: 40px;
            border-bottom: 1px solid #070707;
            background-color: #000;
            border-top-left-radius: 10px;
       

        } 
        .ul1{
            margin: 0 auto;
            height: 20px;
            text-align: center;
            list-style: none;
        }
        .ul1 li {
            float: left;
            border-right: 1px solid #ccc;
            box-sizing: border-box;
            line-height: 40px;
            text-align: center;
        }
        .ul1 .last {
            border-right: none;
            float: right;
            border-right: 1px solid #ccc;
            box-sizing: border-box;
            line-height: 40px;
            text-align: center;
        }


        .ul1 li a {
 
            display: block;
            height: 40px;
            text-decoration: none;
            color: white

        }

        .ul1 li .app {

            position: relative;
        }

        .ul1 li .app .code1 {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 40px;
            border: 1px solid #ccc;
        }
        .app img{
            display: none;
        }
        .app:hover img{
            display: block;
        } 

        .box{
            position: relative;
            top: 50px;
            position: fixed;
            width: 1534.5px;
            height: 100px;
            border-bottom: 1px solid white;
            
        }
        .logo{
            position: absolute;
            top: 11px;
            width: 71px;
            height: 71px;
        }
        
        .ul2{
            position: absolute;
            left: 110px;
            right: 434px;
            margin: 0 auto;
            width: 887.5px;
            height: 100px;
            text-align: center;
            list-style: none;
        }
        .ul2 li {
            float: left;
            width: 98.6px;
            box-sizing: border-box;
            line-height: 80px;
            text-align: center;
        }
        .ul2 li a {
            display: block;
            height: 100px;
            text-decoration: none;
            color: #000;
        }

        .box1{
            position: relative;
            top: 160px;
            position: fixed;
            width: 1534.5px;
            height: 460px;
            background-color: white;
        }
        .bg{
            position: absolute;
            top: 35px;
            left: 234px;
            height: 460px;
            width: 1074.5px;
            opacity: 90%;
        }
        .ul3{
            position: absolute;
            width: 234px;
            height: 460px;
            margin: 0 auto;
            text-align: center;
            list-style: none;
            top: 25px;
        }
        .ul3 li{
            width: 234px;
            height: 65px;
            box-sizing: border-box;
            text-align: center;
            background-color: black;
            opacity: 80%;
        }
        .ul3 li a {
            display: block;
            height: 234px;
            height: 65px;
            text-decoration: none;
            color: white;
        }


        
 
   
    </style>
</head>
<body>
    <!--导航栏-->
    <div class="nav">
        <ul class="ul1">
          <li><a href="#">小米官网 </a></li>
          <li><a href="#">小米商城 </a></li>
          <li><a href="#">小米澎湃OS</a></li>
          <li><a href="#">IoT</a></li>
          <li><a href="#">云服务</a></li>
          <li><a href="#">天星数科</a></li>
          <li><a href="#">有品</a></li>
          <li><a href="#">小爱开放平台</a></li>
          <li><a href="#">资质证照</a></li>
          <li><a href="#">协议规则</a></li>
          <li><a href="#" class="app">下载app<img src="./微信图片_20231123165411.png" alt="" class="code1"></a></li>
          <li><a href="#">Select Location</a></li>
          <li class="last"><a href="#">购物车</a></li>
          <li class="last"><a href="#">消息通知</a></li>
          <li class="last"><a href="#">注册</a></li>
          <li class="last"><a href="#">登录</a></li>
        </ul>
      </div>
      <!--导航栏结束-->
      <!--logo-->
      <div class="box">
        <div class="logo"><img src="./xmi.png"></div>
        <ul class="ul2">
            <li><a href="#">Xiaomi手机</a></li>
            <li><a href="#">Redmi手机</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">平板</a></li>
            <li><a href="#">家电</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">服务中心</a></li>
            <li><a href="#">社区</a></li>
        </ul>
      </div>
      <div class="box1">
        <div class="box2">
            <div class="bg"><img src="./tup.png"></div>
            <ul class="ul3">
                <li><a href="#">手机</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">笔记本 平板</a></li>
                <li><a href="#">出行 穿戴</a></li>
                <li><a href="#">耳机 音箱</a></li>
                <li><a href="#">健康 儿童</a></li>
                <li><a href="#">生活 箱包</a></li>
                <li><a href="#">智能 路由器</a></li>
                <li><a href="#">电源 配件</a></li>
            </ul>
        </div>



</body>
</html>

笔记

弹性盒子

<style>
        .banner{
            /*给最近的元素位置添加display:flex*/
            display: flex;/*排成一行（主轴）默认从左到右*/
            flex-direction: row-reverse;/*改变方向*/
            flex-direction: column;/*改变主轴方向 从上至下*/
            flex-direction: column-reverse;/*从下至上*/
           /* flex-direction(设置主轴方向)*/

            /*允许弹性盒子的子项进行换行*/
            flex-wrap: wrap;
            justify-content:center;/*水平居中*/
            justify-content: space-around;/*把剩余的空间平均分给每个元素*/
            justify-content: space-between;/*两边元素贴边，剩余平分*/、
            justify-content:end;
            justify-content:flex-end;/*结尾*/
            /*交叉轴上元素的对齐方式*/
            /*align-items:center;
              align-content:space-between贴边
              align-content:space-around 平均分配
              */
            
        }

            
      
        .left{
            width: 100px;
            height: 100px;
            background-color: blue;

        }
        .right{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
        /*align-self:flex-start;只改变自己的对齐方式
          order:-2 排列顺序
        flex-grow:1;占盒子比例
        flex-shrink:0;不被压缩 
        flex:1;*/

    </style>
</head>
<body>
    <div class="banner">
        <div class="left"></div>
        <div class="right"></div>
    </div>

    
    
</body>
</html>

/*给最近的元素位置添加display:flex*/

            display: flex;/*排成一行（主轴）默认从左到右*/

            flex-direction: row-reverse;/*改变方向*/

            flex-direction: column;/*改变主轴方向 从上至下*/

            flex-direction: column-reverse;/*从下至上*/

           /* flex-direction(设置主轴方向)*/

/*允许弹性盒子的子项进行换行*/

            flex-wrap: wrap;

            justify-content:center;/*水平居中*/

            justify-content: space-around;/*把剩余的空间平均分给每个元素*/

            justify-content: space-between;/*两边元素贴边，剩余平分*/、

            justify-content:end;

            justify-content:flex-end;/*结尾*/

            /*交叉轴上元素的对齐方式*/

            /*align-items:center;

              align-content:space-between贴边

              align-content:space-around 平均分配

              */

补充

 <style>
        div{
            width: 300px;
            height: 300px;
            background-color: aqua;
            padding: 100px;
            border: 10px solid red;
            box-sizing: border-box;/*不改变盒子大小*/
        }

    </style>

box-sizing:border-box;/*不改变盒子大小*/

模板布局方式

<style>
        /*模板*/
        .content{
            display: grid;
            grid-template-columns:repeat(4,1fr) ;
            grid-auto-rows: minmax(100px,auto);
            max-width: 960px;
            margin: 0 auto;
            gap: 10px;
            grid-template-areas: 
            "header header header header"
            "nav . main main"
            "aside . main main"
            "section section section section"
            "section section section section"
            "footer footer footer footer"
            ;
        }
        .content>*{
            background-color: aquamarine;
            padding: 30px;
        }
        header{
            grid-area: header;
        }
        main{
            grid-area: main;
        }
        section{
            grid-area:section;
        }
        aside{
            grid-area: aside;
        }
        nav{
            grid-area:nav;
        }
        footer{
            grid-area:footer
        }
    </style>
</head>
<body>
    <div class="content">
        <header>header</header>
        <main>main</main>
        <section>section</section>
        <aside>aside</aside>
        <nav>nav</nav>
        <footer>footer</footer>

    </div>
    
</body>
</html>

grid布局

<style>
        .banner{
            display: grid;
            /*grid-template-columns:1fr 1fr 1fr 1fr;*/
            grid-template-columns: repeat(3,1fr);
           /* row-gap: 20px;
            column-gap: 20px;*/
            width: 800px;
            height: 800px;
            background-color: antiquewhite;
        }
        .box1{
            grid-row: 1/3;
            grid-column: 1/3;
        }

    </style>
</head>
<body>
    <div class="banner">
        <div class="item box1" style="background-color: blue;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: blueviolet;">3</div>
        <div class="item" style="background-color: cadetblue;">4</div>
        <div class="item" style="background-color:cornflowerblue;">5</div>
        <div class="item" style="background-color:chocolate;">6</div>
    </div>
    
</body>
</html>

menge2333
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第一次安卓作业笔记：一个星座查询app
qq_17019229的博客
05-30 6398
任务要求： 写一个星座查询，进去后先是一个欢迎界面，再之后选择完日期，显示星座图标。 一、布局欢迎界面 xml文件activity_main为欢迎界面，在B站天哥布局的视频教程基础上。我选用了线性布局LinearLayout。 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/re
软件设计师选择题笔记（完善中）
weixin_63103871的博客
01-16 1502
证书主要考察知识的广度，也就是说大部分都是记背的东西，主要涉及计算机网络、计算机组成原理、计算机操作系统、数据结构、软件工程、数据库等多个课程的学习。
11.22-27周报
weixin_63471903的博客
11-28 455
本周为学习Python的第二周，上一周讲解了一些常见的基本用法，这周主要讲单元测试pytest以及selenium，appium，Charles，讲解appium的时候做了一些测试项目，测试APP的计算器使用功能，Charles为接口测试，测试了Windows端悟空crm网页，淘宝京东网页的承载量，以及APP端的兼职脉测试等等 自动化测试不同于第一周的基础内容讲解，代码更加复杂多变，理解起来需要花费更多的时间以及较好的理解力和吸收力，虽然老师说过学自动化不需要强求，但是还是要保持能看懂的能力，知道每一行代码
基于eNSP的IPv4加IPv6的企业/校园网络规划设计(综合实验/大作业)
热门推荐
m0_46179473的博客
04-28 7万+
该topo网络中用到的技术有vlan划分、eth-trunk捆绑、MSTP、VRRP、、DHCP中继、OSPF、BFD故障检测、端口安全及隔离、无线WLAN、PPPoE、IS-IS、BGP、MPLS V*N、DHCPsnooping、NQA、NATserver地址映射、NAT(地址池、easyIP两种转换)、telnet、ACL、IPsec V*N、路由引入、默认路由、FW的安全策略规划、ISISv6、OSPFv3、DHCPv6、6to4隧道、BGP4+等。该实验非常具有代表性
shell高级编程笔记(第十一章 内部命令与内建)
panbuhei
07-13 380
第十一章 内部命令与内建 内建命令指的就是包含在Bash工具集中的命令。这主要是考虑到执行效率的问题(内建命令将比外部命令执行的更快，外部命令通常需要fork出一个单独的进程来执行)。另外一部分原因是特定的内建命令需要直接存取shell内核部分。 当一个命令或者是shell本身需要初始化(或创建)一个新的子进程来执行一个任务的时候，这种行为被称为forking。这个新产生的进程被叫做子进程，并且这个进程是从父进程中分离出来的。当子进程执行它的任务时，同时父进程也在运行 注意：当父进程取得子进程的PID的时候
Oracle数据库笔记(自用)
weixin_46427348的博客
03-14 1233
Oracle数据库
Linux<小白>详细笔记
weixin_34190136的博客
06-03 1153
目录 应放置的内容 /bin 系统有很多放置执行文件的目录，但是/bin目录比较特殊。/bin放置的是在单用户维护模式下还能够被操作的命令。在/bin下面的命令可以被root与一般用户使用。 /boot 这个目录主要放置开机会使用到的文件，包括Linux内核文件以及开机菜单与开机所需配置文件等。 /dev 在Linux系统上，任何设备与结构设备都是以文件的形式存在于这个目...
《构建之法，邹欣》阅读笔记
inter_peng的专栏
11-02 1102
前言： 从2018年10月30日开始，阅读由微软工程师邹欣老师撰写的《构建之法》一书，全书共435页，每天阅读15页，在一个月（30天）完成。每天阅读完成后，需要思考当日的阅读要点和一些思考。 真正让自己感受到积累的效果和伟大！ 每日打卡阅读和写作： 10月30日打卡： 阅读页码： 1～15页 阅读概要： 今天阅读了《构建之法》的前15页。这一节是整个软件工程的概论，邹欣老师从大家众所周知的一个命...
精通Web Analytics 2.0 （13） 第十一章：变身分析忍者的指导原则
a45691316的博客
04-05 499
精通Web Analytics 2.0 （13） 第十一章：变身分析忍者的指导原则 精通Web Analytics 2.0: 用户中心科学与在线统计艺术 第十一章：变身分析忍者的指导原则 　　这个激动人心的一章，分析了几乎所有工作的各个方面。 　　目标...
11.22作业1
08-08
11.22作业1
11.22素材.zip
11-29
11.22素材.zip
11.22综合复习.py
11-29
11.22综合复习.py
710695794454870Futbin_v11.22.apk
01-23
710695794454870Futbin_v11.22.apk
FreeFileSync_11.22_macOS.zip
07-18
FreeFileSync 是一个免费的、开源的文件夹比较和同步软件。支持Windows、Linux、Mac OS X，它也适用于64位操作系统。 程序安装默认可选择一个标准的安装程序或作为一个便携式应用程序。 采用一个干净、简单、直观的...
Linux学习笔记（二）
weixin_42515203的博客
05-28 336
Linux的学习笔记
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 516
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
强化学习——学习笔记
qq_52302919的博客
05-27 1384
强化学习问题通常可以建模为一个马尔可夫决策过程，包括以下几个要素：1、状态集合 (State Set)：S；2、动作集合 (Action Set)：A；Ps′∣saPs′∣sa，描述在状态s下执行动作a后转移到状态s′s^′s′的概率；Rsas′Rsas′，描述在状态s 下执行动作a并转移到状态s′后获得的奖励。πa∣sπ (a∣s)πa∣s，描述智能体在状态s下选择动作a 的概率。
Python图形界面(GUI)Tkinter笔记（十四）：Entry与Button的碰撞（1）
肥辉的学习笔记
05-29 221
用功能按钮(Button)、单行文本输入框(Entry)、文本框内容读取(get)实现一个极简易的加法运算，及与其他控件的交互，提高体验，主要体现其人机交互的意义。因为Entry()文本输入框没有限制输入内容属性的参数，它是把所有的输入都视作它特有的一个类属性，所以用get()方法读取出来是一个字符串而这字符串可包括字母或其它符号。因此我们必须对其进行判断后再计算，若直接计算可能会出现不可预料的错误。这里用了try...except..进行了简单的错误判断处理。
Connection refused: no further information: /10.7.11.22:6379什么意思
11-14
"Connection refused: no further information: /10.7.11.22:6379"这个错误信息表示连接被拒绝，但是没有更多的信息可以提供。其中"/10.7.11.22:6379"是指连接的IP地址和端口号。这个错误通常出现在尝试连接一个未运行或未正确配置的服务时。可能的原因包括： - 服务未启动或已停止运行。 - 防火墙或网络配置阻止了连接。 - 服务配置错误或不正确。 为了解决这个问题，你可以尝试以下几个步骤： 1. 确认服务已经启动并正在运行。 2. 检查防火墙或网络配置是否允许连接。 3. 检查服务配置是否正确，并确保它正在监听正确的IP地址和端口号。 4. 如果你正在连接到远程服务器，请确保你已经正确地配置了连接参数，例如IP地址、端口号、用户名和密码等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值