css学习笔记

Android wifi源码分析(二) Wifi关闭流程 接着上一篇,这篇说一下Wifi的关闭流程。 由上一篇可以知道,framework层提供的wifi开关接口都是**setWifiEnabled**,只是参数不同而已。*true*表示开启wifi、*false*表示关闭wifi。 阅读详情

2 盒子模型

html页面的每个标签被称为盒子,盒子都为矩形,具体分为块元素和行内元素。块元素独占一行,例如p标签、div标签等都为块元素;行内元素不独占一行,例如span标签等。盒子分为四个主要部分:内容、内边距、边框和外边距。内边距:内容与边框之间的距离。外边距:边框向外延伸到盒子边界的距离。盒子结构如下图所示:

在这里插入图片描述

3 line-height指标签内部每一行文本的高度。

4 清除浮动

为页面中的元素设置浮动效果,则会使该元素脱离页面的标准流布局,从而使块级元素不独占一行,与其他元素可能发生重叠效果。为避免这种效果,可以设置css的clear属性,使其不发生重叠,独占一行。例子如下:

<!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>

    <style>
        .fl {
            border: 1px solid blue;
            float: left;
            width: 300px;
            height: 400px;
        }

        .fr {
            border: 1px solid green;
            float: right;
            width: 300px;
            height: 300px;
        }

        .footer {
            border: 1px solid red;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="fl">fl</div>
    <div class="fr">fr</div>
    <div class="footer">
        底部
    </div>
</body>
</html>

结果如下图所示:
在这里插入图片描述
这样就避免了底部div与左右浮动div发生重叠。

5 BFC

BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。父容器的变化不会影响子容器的相对位置,仍然被父容器包裹。
触发BFC效果的设置:

  1. 绝对定位、相对定位
  2. float
  3. display: table;

6 父容器的高度塌陷

父容器不能包裹住子容器的现象
解决办法之一为在父容器设置overflow: hidden。如下:

<!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>页面布局1</title>

    <style>
        body, div {
            padding: 0px;
            margin: 0px;
        }

        div {
            border: 1px solid blue;

        }

        .head-nav {
            width: 960px;
            height: 200px;
            margin: 0px auto;
        }

        .main {
            width: 960px;
            margin: 0 auto;
            /* 防止父容器高度塌陷 */
            overflow: hidden;
        }

        .left {
            width: 300px;
            float: left;
            height: 300px;
        }

        .right {
            float: right;
            width: 656px;
            height: 300px;
        }

        .foot {
            clear: both;
            width: 960px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="head-nav">顶部</div>
    <div class="main">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
    
    <div class="foot">底部</div>
</body>
</html>

效果图如下:
两列布局

7 id选择器比类选择器速度快div

原因:标签的id属性唯一,标签的class属性不唯一。因此,浏览器会在整个html页面中搜索所有的指定class属性,而仅找到第一个id属性就停止搜索。当特别需要考虑效率时,可以考虑这个方面优化。

8 三栏布局和四栏布局

代码如下:

<!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>三栏布局</title>

    <style>
        body, div {
            padding: 0;
            margin: 0;
        }

        div {
            border: 1px solid saddlebrown;
        }

        .head {
            width: 600px;
            height: 100px;
            margin: 0 auto;
        }

        .main {
            width: 600px;
            margin: 0 auto;
            overflow: hidden;
        }

        .left {
            float: left;
            width: 150px;
        }

        .right {
            float: right;
            width: 200px;
        }

        .foot {
            width: 600px;
            height: 100px;
            margin: 0 auto;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="head">head</div>
    <div class="main">
        <div class="left">left</div>
        
        <div class="right">right</div>
        <div class="center">center</div>
    </div>
    
    <div class="foot">foot</div>
</body>
</html>

在这里插入图片描述

<!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>四栏布局</title>

    <style>
        body,
        div {
            padding: 0;
            margin: 0;
        }

        div {
            border: 1px solid saddlebrown;
        }

        .head {
            width: 600px;
            height: 100px;
            margin: 0 auto;
        }

        .main {
            width: 600px;
            margin: 0 auto;
            overflow: hidden;
        }

        .left {
            float: left;
            width: 150px;
        }

        .right {
            float: right;
            width: 200px;
        }

        .right2 {
            float: right;
            width: 100px;
        }

        .foot {
            width: 600px;
            height: 100px;
            margin: 0 auto;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="head">head</div>
    <div class="main">
        <div class="left">left</div>

        <div class="right">right</div>
        <div class="right2">right2</div>
        <div class="center">center</div>
    </div>

    <div class="foot">foot</div>
</body>

</html>

在这里插入图片描述

注意:html中父容器的各个组件中,先写浮动组件,再写最后的组件。

新补充的内容1:

9 菜单栏练习

绝对定位、相对定位、伪元素、::before等知识点

重要知识点:伪元素:::before、::after;伪类::hover;绝对定位和相对定位的概念;选择器的分类及优先级;子菜单的制作,三角形的制作等。

绝对定位:相对于父容器进行定位,对父容器依赖。它脱离了标准文档流,不占用标准文档流位置。父容器一般设置position: relative;绝对定位容器则为position: absolute。

相对定位:相对于标准文档流的原始位置进行定位。

代码:

<!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>菜单练习</title>

    <style>
        body, div, ul, li {
            padding: 0;
            margin: 0;
        }

        ul,li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #2e2e2e;
            font-size: 12px;
        }



        .nav {
            height: 35px;
            line-height: 35px;
        }

        .nav > li {
            float: left;
            padding: 0 15px;
            height: 35px;
            border-top: 1px solid transparent;
        }

        .nav > li:hover, .nav > li:hover > a {
            background-color: #edeef0;
            color: #f3d;
        }

        .nav > li:hover {
            border-top: 1px solid #f3d;
        }

        .weibo-box {
            display: none;  
            position: absolute;
            padding-left: 15px;
            margin-left: -15px;
            margin-top: 10px;
            border: 1px solid #f3d;
        }

        .weibo:hover .weibo-box {
            display: block;
        }

        .weibo-box > li:hover, .weibo-box > li:hover > a {
            background-color: #858383;
            color: #fff;
        }

        .weibo-box li {
            width: 52px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            margin-left: -15px;
        }

        .weibo-box::before {
            content: "";
            position: absolute;
            border: 8px solid red;
            border-color: transparent transparent #f3d;
            top: -17px;
        }

        .weibo-box::after {
            content: "";
            position: absolute;
            border: 8px solid red;
            border-color: transparent transparent #fff;
            top: -16px;
        }
        
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">登录</a></li>
        <li class="weibo">
            <a href="#">微博</a>
            <ul class="weibo-box">
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
        <li><a href="#">博客</a></li>
        <li><a href="#">网站导航</a></li>
    </ul>

</body>
</html>

效果图:
在这里插入图片描述
新补充的内容2:

10 过渡效果

使标签元素逐渐显示。

代码:

<!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>菜单练习</title>

    <style>
        body, div, ul, li {
            padding: 0;
            margin: 0;
        }

        ul,li {
            list-style: none;
        }

        a {
            display: block;
            text-decoration: none;
            color: #2e2e2e;
            font-size: 12px;
        }

        .nav {
            position: relative;
            height: 35px;
            line-height: 35px;
        }

        .nav > li {
            float: left;
            width: 60px;
            height: 35px;
            text-align: center;
            border-top: 1px solid transparent;
        }

        .nav > li:hover, .nav > li:hover > a {
            background-color: #858383;
            color: #fff;
            transition: 0.3s;
        }

        .nav > li:hover {
            border-top: 1px solid #f3d;
        }

        .weibo-box {
            display: none;
            position: absolute;
            padding-left: 15px;
            margin-top: 10px;
            border: 1px solid #f3d;
        }


        /*动画效果*/
        @keyframes fadeIn {
            0% {
            opacity: 0; /*初始状态 透明度为0*/
            }
            20%{
                opacity: .2;
            }
            50% {
                opacity: .5; /*中间状态 透明度为0.5*/
            }
            70%{
                opacity: .7;
            }
            100% {
                opacity: 1; /*结尾状态 透明度为1*/
            }
        }

        .weibo:hover .weibo-box {
            display: block;
            /*调用动画效果*/
            animation-name: fadeIn; /*动画名称*/
            animation-duration: 0.5s; /*动画持续时间*/
            animation-iteration-count: 1; /*动画次数*/
            animation-delay: 0s; /*延迟时间*/
            
        }

        .weibo-box > li:hover, .weibo-box > li:hover > a {
            background-color: #858383;
            color: #fff;
            transition: 0.3s;
        }

        .weibo-box li {
            width: 60px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            margin-left: -15px;
        }

        .weibo-box::before {
            content: "";
            position: absolute;
            border: 5px solid red;
            border-color: transparent transparent #f3d;
            left: 40%;
            top: -11px;
        }

        .weibo-box::after {
            content: "";
            position: absolute;
            border: 5px solid red;
            border-color: transparent transparent #fff;
            left: 40%;
            top: -10.5px;
        }
        
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">登录</a></li>
        <li class="weibo">
            <a href="#">微博</a>
            <ul class="weibo-box">
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
        <li><a href="#">博客</a></li>
        <li><a href="#">网站导航</a></li>
    </ul>

</body>
</html>

transition: 0.5s来实现逐渐显示标签

图和第九节大体一致。通过设置transition: 0.5s来实现逐渐显示标签。如果遇到display: none到display: block的逐渐显示,可以利用自定义动画的方式实现,核心代码如下:

/*动画效果*/
@keyframes fadeIn {
    0% {
    opacity: 0; /*初始状态 透明度为0*/
    }
    20%{
        opacity: .2;
    }
    50% {
        opacity: .5; /*中间状态 透明度为0.5*/
    }
    70%{
        opacity: .7;
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}

.weibo:hover .weibo-box {
    display: block;
    /*调用动画效果*/
    animation-name: fadeIn; /*动画名称*/
    animation-duration: 0.5s; /*动画持续时间*/
    animation-iteration-count: 1; /*动画次数*/
    animation-delay: 0s; /*延迟时间*/
    
}

上面代码可以让.weibo-box标签逐渐显示。

a标签充满对应的li标签

另外,如果想让a标签充满对应的li标签,则应该设置width的具体值,并将a标签和li标签的display设置为block (如果默认为block,则不必重新设置)。

10 页面布局技巧

1: 上下排列的部分正好符合标准文档流,直接使用块级元素如div标签就可以了;横向排列则使用行内元素如span标签等

2: 如果一个块中既有横向排列的元素又有纵向排列的元素,且内部元素相对于该块的相对位置不变,则可以将该块的position设置为relative或者static(static为默认值),将内部元素的position设置为absolute或者设置float为left或者right来使其脱离标准文档流,通过设置left、right、top和bottom的属性值来设置子元素相对于该块的位置。

3: 如果子元素溢出,则设置父元素的overflow的属性值为hidden

11 course个人主页面排版练习

<!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>coursera个人主页面</title>
    <style>
        body, div, img, a, button, input, p, ul, li {
            padding: 0; margin: 0;
        }

        body {
            overflow: scroll;
        }

        .nav-pos {
            position: relative;
            width: 100%;
            height: 64px;
        }

        .nav {
            position: fixed;
            height: 64px;
            line-height: 64px;
            width: 100%;
            background-color: #fff;
            border-bottom: 1px solid #e0e0e0;
            z-index: 100;
        }

        .nav-left {
            position: relative;
            float: left;
            padding-left: 24px;
            height: 65px;
            width: 245px;
        }

        .nav-left .nav-icon > img {
            position: absolute;
            top: 22px;
            left: 24px;
            height: 20px;
        }

        .nav-left .nav-explore {
            position: absolute;
            display: block;
            /* text-align: center; */
            width: 92px;
            height: 36px;
            line-height: 36px;
            left: 175px;
            top: 15px;
            padding-right: 12px;
            color: #fff;
            font-weight: bolder;
            font-size: 14px;
            border-width: 0;
            border-radius: 3px;
            background-color: #2a73cc;
            background-image: url('./images/下.svg');
            background-repeat: no-repeat;
            background-size: 21px;
            background-position: 56px 7px;
            
        }

        .nav-right {
            position: relative;
            float: right;
            width: 317px;
            height: 64px;
            line-height: 64px;
            background-color: #fff;
        }


        .nav-right a {
            position: absolute;
            display: block;
            width: 65px;
            height: 65px;
            line-height: 65px;
            margin-right: 277px;
            text-decoration: none;
            color: #1f1f1f;
            font-size: 14px;
        }

        .nav-right .vertical-line {
            position: absolute;
            display: inline-block;
            margin-top: 13px;
            margin-left: 72px;
            width: 2px;
            height: 38px;
            line-height: 38px;
            background-color: #e1e1e1;
        }

        .nav-right .name {
            position: absolute;
            width: 106px;
            height: 42px;
            line-height: 42px;
            left: 98px;
            top: 13px;
            color: #1f1f1f;
            font-size: 14px;
            
        }

        .name .head-photo {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 40px;
            background-image: url('./images/head_portrait.jpg');
            background-repeat: no-repeat;
        }

        .name .name-text {
            position: absolute;
            display: inline-block;
            width: 60px;
            height: 40px;
            line-height: 40px;
            margin-left: 6px;
            background-image: url('./images/下-right.svg');
            background-repeat: no-repeat;
            background-size: 12px;
            background-position: 48px 15px;
        }

        .search {
            position: relative;
            width: 490px;
            height: 40px;
            line-height: 40px;
            margin-left: 307px;
            margin-top: 13px;
        }

        .search .search-content {
            position: absolute;
            display: line-block;
            width: 450px;
            height: 38px;
            line-height: 38px;
            border: 1px solid #e0e0e0;
            border-radius: 2px 0 0 2px;
            text-indent: 10px;
            font-family:  "Microsoft YaHei";
            font-weight: 300;
            font-size: 16px;

        }

        .search .serach-button {
            position: absolute;
            display: block;
            width: 40px;
            height: 40px;
            line-height: 40x;
            left: 450px;
            background-color: #2a73cc;
            border: 0;
            border-radius: 0 2px 2px 0;
            background-image: url('./images/搜索.svg');
            background-repeat: no-repeat;
            background-position: 8px 11px;
            background-size: 20px;
        }

        .search input::-webkit-input-placeholder {
            color: #afb1af;
        }
        .search input::-moz-placeholder {
            color: #afb1af;
        }

        .search input:focus{ 
            outline:none;
            color: rgb(129, 125, 125);
        }

        .version, .name {
            color: #b93939;
        }


        /* 下面为"主要内容"布局 */
        .main-content {
            width: 945px;
            height: 1360px;
            margin: 41px auto;
            background-color: #fff;
        }

        .main-content .main-left {
            float: left;
            width: 213px;
            height: 348px;
            background-color: #f1f1f1;
        }

        .main-left a.main-list {
            display: block;
            width: 192px;
            height: 51px;
            line-height: 51px;
            padding-left: 20px;
            color: #1f1f1f;
        }

        .main-left a.course-list {
            display: block;
            width: 172px;
            height: 45px;
            line-height: 45px;
            padding-left: 40px;
            color: #4d4d4d;
        }

        a.main-list, a.course-list {
            text-decoration: none;
            font-size: 14px;
            border-left: 1px solid #d0d0d0;
            border-right: 1px solid #d0d0d0;
            border-bottom: 1px solid #d0d0d0;
            font-family: "Microsoft YaHei";
        }

        a.course {
            border-top: 1px solid #d0d0d0;
        }

        a.bg-color {
            background-color: #fff;
            
        }

        #last-active {
            color: #000;
        }

        a.a-hover:hover {
            background-color: #f8f7f7;
        }

        #new {
            background: url('./images/序号1.svg') no-repeat 169px 13px;
            background-size: 25px;
        }

        /* 右边布局编辑 */
        .main-right {
            float: left;
            width: 701px;
            height: 974px;
            margin-left: 31px;
            /* background-color: #000; */
        }

        .main-right .right-sign-up {
            position: relative;
            width: 701px;
            height: 238px;
            background-color: #fff;
            /* background-image: url('./images/main_right.jpg'); */
            background: url('./images/main_right.jpg') no-repeat;
        }

        @font-face{
            font-family: 'OpenSans-light'; 
            src: url('./fonts/OpenSans-Light.ttf') format('truetype')
        }
        @font-face{
            font-family: 'OpenSans'; 
            src: url('./fonts/OpenSans-Regular.ttf') format('truetype')
        }
        
        .right-sign-up .Webinar {
            top: 55px;
            left: 260px;
            text-decoration: none;
            color: #fff;
            font: normal 21px/24px OpenSans-light, Arial, sans-serif;
            font-weight: 600;
        }

        .right-sign-up a.Webinar:hover {
            text-decoration: underline;
            color: #fff;
        }

        .right-sign-up a {
            position: absolute;
            display: block;
        }
        .right-sign-up .Join-us {
            position: absolute;
            left: 172px;
            top: 91px;
            width: 357px;
            height: 45px;
            line-height: 15px;
            text-align: center;
            font-family: OpenSans;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }

        .right-sign-up .sign-up {
            top: 156px;
            left: 308px;
            width: 85px;
            height: 46px;
            line-height: 46px;
            background-color: #2073d4;
            color: #fff;
            font-size: 12px;
            text-align: center;
            text-decoration: none;
            font-family: OpenSans;
        }

        .right-sign-up .sign-up:hover {
            background-color: rgb(0, 91, 190);
         }

         .text1 {
             padding-top: 40px;
             font: 24px/30px "Microsoft YaHei";
             color: rgba(0, 0, 0, 0.55);
         }

         .text2 {
            padding-top: 9px;
            font: 12px/18px "Microsoft YaHei";
            color: rgb(82, 82, 82);
         }

         /* 第一门课程 */

         .Design-Patterns {
             /* position: relative; */
             margin-top: 17px;
             width: 699px;
             height: 154px;
             border: 1px solid #e5e5e5;
         }

         .Design-Patterns:hover {
             border: 1px solid rgb(192, 190, 190);
             transition-delay: 0.2s;
         }

         .Design-Patterns .dp-left {
            display: block;
            width: 75px;
            height: 52px;
            float: left;
            background: url('./images/SDA-Courseralogos-C2-option1.png') no-repeat -2px -13px;
            border-width: 0;

            margin-top: 50px;
            margin-left: 30px;
         }

         .Design-Patterns .dp-right {
            position: relative;
            display: block;
            width: 118px;
            height: 154px;
            float: right;

         }

         .dp-right .dp-right-dot {
             display: block;
             position: absolute;
             width: 14px;
             height: 26px;
             background: url('./images/省略号.png') no-repeat;
             background-size: 11px;
             left: 99px;
             top: 8px;
             border-width: 0;
         }

         .dp-right .dp-right-incourse {
             display: block;
             position: absolute;
             width: 88px;
             height: 34px;
             line-height: 32px;
             text-align: center;
             top: 45px;
             font-size: 12px;
             text-decoration: none;
             color: #6f6f6f;
             border: 1px solid #6f6f6f;
             font-family: "Microsoft YaHei"
         }

         .dp-right .dp-right-incourse:hover {
             background-color: #8c8c8c;
             border: 1px solid #8c8c8c;
             color: #fff;
             transition: 0.1s;
         }

         .dp-right .dp-right-getbook {
             display: block;
             position: absolute;
             width: 48px;
             height: 40px;
             top: 90px;
             left: 21px;
             font-size: 12px;
             text-decoration: none;
             color: #2972d1;
             text-align: center;
             font-family: "Microsoft YaHei"
         }

         .dp-right .dp-right-getbook:hover {
             text-decoration: underline;
         }

         .Design-Patterns .dp-link-center {
            position: relative;
            height: 154px;
            width: 447px;
            margin-left: 126px;
         }

         .Design-Patterns .dp-link-center:hover {
             cursor: pointer;
         }

         .Design-Patterns .dp-link-name {
            display: block;
            position: absolute;
            text-decoration: none;
            top: 21px;
            color: #373a3c;
            font: normal 16px/24px OpenSans;
         }

         .Design-Patterns .dp-link-univer {
            display: block;
            position: absolute;
            text-decoration: none;
            top: 53px;
            color: #373a3c;
            font: normal 16px/24px 'OpenSans';
         }

         .Design-Patterns .dp-link-time {
            display: block;
            position: absolute;
            text-decoration: none;
            top: 90px;
            color: #373a3c;
            font: normal 12px/18px 'OpenSans';
         }

         .Design-Patterns .dp-link-ranking {
             display: block;
             position: absolute;
             top: 115px;
             background: url('./images/五角星.svg') repeat-x 0 0;
             background-size: 18px;
             width: 91px;
             height: 18px;
             border-width: 0;

         }

         /* 第二门课程 */

         .Algorithms-Part-II {
             /* position: relative; */
             margin-top: 20px;
             width: 699px;
             height: 385px;
             border: 1px solid #e5e5e5;
         }

         .Algorithms-Part-II:hover {
             border: 1px solid rgb(192, 190, 190);
             transition-delay: 0.2s;
         }

         .Algorithms-Part-II .dp-left {
            display: block;
            width: 80px;
            height: 80px;
            float: left;
            background: url('./images/algs4partI-logo.jpg') no-repeat 0 0;
            border-width: 0;

            margin-top: 37px;
            margin-left: 28px;
         }

         .Algorithms-Part-II .dp-right {
            position: relative;
            display: block;
            width: 118px;
            height: 154px;
            float: right;

         }

         .dp-right .dp-right-dot {
             display: block;
             position: absolute;
             width: 14px;
             height: 26px;
             background: url('./images/省略号.png') no-repeat;
             background-size: 11px;
             left: 99px;
             top: 8px;
             border-width: 0;
         }


         .Algorithms-Part-II .dp-link-center {
            position: relative;
            height: 154px;
            width: 447px;
            margin-left: 126px;
         }

         .Algorithms-Part-II .dp-link-center:hover {
             cursor: pointer;
         }

         .Algorithms-Part-II .dp-link-name {
            display: block;
            position: absolute;
            text-decoration: none;
            top: 21px;
            color: #373a3c;
            font: normal 16px/24px OpenSans;
         }

         .Algorithms-Part-II .dp-link-univer {
            display: block;
            position: absolute;
            text-decoration: none;
            top: 53px;
            color: #373a3c;
            font: normal 16px/24px 'OpenSans';
         }

         .Algorithms-Part-II .dp-link-time {
            display: block;
            position: absolute;
            text-decoration: none;
            top: 90px;
            color: #373a3c;
            font: normal 12px/18px 'OpenSans';
         }

         .Algorithms-Part-II .dp-link-ranking {
             display: block;
             position: absolute;
             top: 115px;
             background: url('./images/五角星.svg') repeat-x 0 0;
             background-size: 18px;
             width: 91px;
             height: 18px;
             border-width: 0;

         }

         .Algorithms-Part-II .last-content {
             position: relative;
             width: 641px;
             height: 173px;
             margin: 0 auto;
             margin-top: 22px;
         }

         .last-content .last-content-top {
             width: 611px;
             height: 42px;
             background-color: #666666;
             color: #fff;
             font: bolder 12px/41px "Microsoft YaHei";
             padding-left: 30px;
             margin-top: -1px;
             
         }

         .last-content .last-content-bottom {
            width: 640px;
            height: 131px;

            border: 1px solid #e5e5e5;

         }

         .last-content .last-content-left {
             float: left;
             position: relative;
             width: 425px;
             height: 131px;
             left: 29px;         
             
         }

         .last-content-left .left1 {
             position: absolute;
             top: 29px;
             font: 14px/21px "Microsoft YaHei";
             font-weight: 700;
             color: #373a3c;
         }

         .last-content-left .left2 {
             position: absolute;
             top: 56px;
             font: 14px/21px "Microsoft YaHei";
             font-weight: 400;
             color: #373a3c;
         }

         .last-content .last-content-right {
             float: right;
             width: 136px;
             height: 34px;
             line-height: 34px;
             background-color: #2a73cc;
             text-align: center;
             margin-right: 30px;
             margin-top: 29px;
             padding-bottom: 2px;
             
         }

         .last-content .last-content-right .last-time {
             text-decoration: none;
             color: #666;
             width: 137px;
             height: 36px;
             font: bold 12.8px/16px "OpenSans";
             background-color: #2a73cc;
             color: #fff;
             
         }
         
         .last-content .last-content-right:hover, .last-content .last-content-right:hover a {
             cursor: pointer;
             background-color: rgb(0, 91, 190);
             transition: 0.3s;
         }

         div.line {
             width: 699px;
             
             border: 0.5px solid #e1e1e1;
             margin-top: 61px;
             font-weight: 400;
         }

         .lately-course {
             color: #646464;
             font: 22px/24px "Microsoft YaHei";
             margin-top: 64px;
             width: 157px;
             height: 21px;
         }

         .look-course {
             position: relative;
             width: 701px;
             height: 281px;
             margin-top: 16px;
             padding-bottom: 10px;
             border: 1px solid #e1e1e1;
         }

         .look-course .course {
             position: absolute;
             width: 201px;
             height: 170px;
             left: 26px;
             top: 40px;
         }

         .look-course-1 {
             position: absolute;
             width: 200px;
             height: 112px;
             border: 1px solid #e1e1e1;
             /* margin-top: 16px; */
             background: url('./images/large-icon.jpg') no-repeat 0 0;
             background-size: contain;
         }

         .look-course-2 {
             position: absolute;
             width: 64px;
             height: 18px;
             top: 125px;
             font: 16px/19.2px "Microsoft YaHei";
             color: #4d4d4d;
         }

         .look-course-3 {
             position: absolute;
             width: 145px;
             height: 20px;
             top: 148px;
             font: 16px/24px OpenSans, -apple-system, BlinkMacSystemFont, 
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
             color: #646464;
         }

         

         .look-course .course:hover {
             cursor: pointer;
         }

         .look-course .course:hover .look-course-1 {
             cursor: pointer;
         }

         /* 页脚 */
         .foot {
             position: relative;
             width: 980px;
             height: 410px;
             border-top: 1px solid #e1e1e1;
             /* clear: both; */
             margin: 0 auto;
             top: 50px;
             /* overflow: hidden; */
             

         }

         .foot .foot-left {
             float: left;
             position: relative;
             width: 400px;
             height: 231px;
             overflow: hidden;
         }

         .foot-left .logo{
            position: absolute;
            text-decoration: none;

            display: block;
            width: 108px;
            height: 18px;
            overflow: hidden;
            /* background-color: #000; */
            background: url('./images/gray_coursera.svg') no-repeat 0 0;
            /* 图像填充到父容器 */
            background-size: contain;
            top: 16px;
            left: 24px;
         }

         .foot-left .info {
             position: absolute;
             width: 362px;
             top: 57px;
             left: 24px;
             color: #373a3c;
             font: 16px/24px OpenSans, -apple-system, BlinkMacSystemFont, 
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
         }

         .foot-left .version {
             position: absolute;
             width: 206px;
             top: 123px;
             left: 24px;

             color: #373a3c;
             font: 400 12px/18px OpenSans, -apple-system, BlinkMacSystemFont, 
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
         }


         .foot-left .download-left {
             position: absolute;
             left: 24px;
             width: 151px;
             height: 45px;
             top: 165px;
             background: url('./images/download_on_the_app_store_badge_zh-cn.svg') no-repeat 0 0;
             background-size: contain;
         }

         .foot-left .download-right {
             position: absolute;
             left: 193px;
             width: 151px;
             height: 45px;
             top: 165px;
             background: url('./images/zh-cn_generic_rgb_wo_45.png') no-repeat 0 0;
             background-size: contain;
         }

         .foot .foot-right {
             float: left;
             position: relative;
             width: 495px;
             height: 383px;
             /* background-color: #000; */
             /* right: 63px; */
             left: 22px;
             top: 11px;
             /* overflow: hidden; */
             /* margin-bottom: 46px; */
             /* padding-top: 31px; */
         }
         .foot-right ul {
             /* display: block; */
             position: absolute;
             list-style: none;

         }

         .foot-right ul a {
             text-decoration: none;
             color: #757575;
             font: 16px/24px OpenSans, "Microsoft YaHei";
         }

         .foot-right .min-title {
             color: #1f1f1f;
             font: 14px/21px "OpenSans";
         }

         .foot-right ul li {
             padding-bottom: 12px;
         }
         
         ul.list1 {
            left: 0;
            width: 105px;
            height: 300px;
         }

         ul.list2 {
             left: 140px;
         }

         ul.list3 {
             left: 279.5px;
         }

         ul.list4 {
             left: 418.5px;
         }

         /* 响应式导航类 */
         @media screen and (max-width: 1200px){
            .search .search-content {
                /* display: none; */
                width: 350px;
            }

            .search .serach-button {
                left: 350px;
            }
        }

        @media screen and (max-width: 1050px){
            .search .search-content {
                display: none;
            }

            .search .serach-button {
                display: none;
            }

        }

        @media screen and (max-width: 960px){

            .main-content {
                width: 705px;
                height: 1700px;
            }

            /* 主要内容左边栏缩放响应式 */
            .main-left {
                float: unset;
                margin-left: auto;
                margin-right: auto;
            }
            .main-left a.main-list {
                width: 682px;
                background-color: #f1f1f1;
            }
            .main-left .no-active, .main-left .complete, .main-left #new {
                width: 682px;
                background-color: #f1f1f1;
            }
            .main-left a.course-list {
                
                width: 662px;
                
            }

            .main-right {
                float: unset;
                clear: both;
                margin-left: auto;
                margin-right: auto;
            }

            .foot {
                width: 682px;
                margin-left: auto;
                margin-right: auto;
            }


            /* .search .search-content {
                display: none;
            }

            .search .serach-button {
                display: none;
            }

            .nav-left {
                display: none;
            }

            .nav-right {
                display: none;
            }

            .nav::before {
                content: "";
                width: 200px;
                height: 65px;
                background-image: url('./images/搜索.svg');
            }

            .main-right {
                display: none;
            }

            .main-left, .main-left a.main-list, .main-left a.course-list {
                width: 960px;
                background-color: #000;
            }

            .foot {
                margin: 0 auto;
                width: 100%;
            } */

        }


    </style>
</head>
<body>
    <div class="nav-pos">
        <div class="nav">
            <div class="nav-left">
                <a class="nav-icon" href="https://www.coursera.org/"><img src="./images/下载.svg" alt=""></a>
                <button class="nav-explore">探索</button>
            </div>
        
            <div class="nav-right">
                <a href="#" class="version">企业版</a>
                <div class="vertical-line"></div>
                <div class="name">
                    <a class="name-a" href="#"><i class="head-photo"></i> <span class="name-text">龙卫兵</span></a>
                </div>
        
            </div>
        
            <div class="search">
                <input type="text" class="search-content" placeholder="您想学习什么?" />
                <button class="serach-button"></button>
            </div>
        
        
        </div>
    </div>
    

   <div class="main-content">
       <div class="main-left">
            <a class="main-list course">我的课程</a>

            <a href="#" class="course-list bg-color" id="last-active">最后激活</a>
            <a href="#" class="course-list a-hover no-active">未激活</a>
            <a href="#" class="course-list a-hover complete">已完成</a>

            <a href="#" class="main-list new" id="new">更新</a>
            <a href="#" class="main-list">成就</a>          
            <a href="#" class="main-list">建议</a>
       </div>

        <div class="main-right">
            <div class="right-sign-up">
                <a href="#" class="Webinar">Upcoming Webinar</a>
                <div class="Join-us">Join us in our next webinar for the MSc in Innovation & Entrepreneurship: 14 tips to inventing        or re-inventing your
                     business model. Date: July 24.
                </div>
                <a href="#" class="sign-up">Sign Up</a>
            </div>

            <div class="text1">最后激活</div>
            <div class="text2">课程按您最后的活动排序。</div>

            <div class="Design-Patterns">
                <a class="dp-left" href="#"></a>

                <div class="dp-right">
                    <a href="#" class="dp-right-dot"></a>
                    <a href="#" class="dp-right-incourse">进入课程</a>
                    <a href="#" class="dp-right-getbook">获得证书</a>
                </div>
                
                <div class="dp-link-center">
                    <a href="#" class="dp-link-name">Design Patterns</a>
                    <a href="#" class="dp-link-univer">University of Alberta</a>
                    <a href="#" class="dp-link-time">结束日 Aug 12</a>
                    <button class="dp-link-ranking"></button>
                </div>
                
            </div>

            <div class="Algorithms-Part-II">
                <a class="dp-left" href="#"></a>
                
                <div class="dp-right">
                    <a href="#" class="dp-right-dot"></a>
                </div>
                
                <div class="dp-link-center">
                    <a href="#" class="dp-link-name">Algorithms, Part II</a>
                    <a href="#" class="dp-link-univer">Princeton University</a>
                    <a href="#" class="dp-link-time">结束日 Aug 13</a>
                    <button class="dp-link-ranking"></button>
                </div>

                <div class="last-content">
                    <div class="last-content-top">继续</div>
                    <div class="last-content-bottom">
                        <div class="last-content-left">
                            <div class="left1">继续学习剩余内容</div>
                            <div class="left2">不要让您学到的重要内容消失!每周重置您的截止日期并完成 您的作业。</div>
                        </div>
                        <div class="last-content-right">
                            <a href="#" class="last-time">重置我的截止日期</a>
                        </div>
                    </div>
                    
                </div>
            </div>

            <div class="line"></div>

            <div class="lately-course">最近浏览的课程</div>
            <div class="look-course">
                <div class="course">
                    <div class="look-course-1"></div>
                    <div class="look-course-2">机器学习</div>
                    <div class="look-course-3">Stanford University</div>
                </div>
                
            </div>
        </div>

        
   </div>

   <div class="foot">
        <div class="foot-left">
            <a class="logo" href=""></a>
            <div class="info">Coursera 致力于普及全世界最好的教育,它与全球一流大学和机构合作提供在线课程。</div>
            <div class="version">© 2019 Coursera Inc. 保留所有权利。</div>
            <a href="#" class="download-left"></a><a href="#" class="download-right"></a>
        </div>
        <div class="foot-right">
            <ul class="list1">
                
                <li><a href="#" class="min-title">COURSERA</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="mt">MasterTrack™ 证书</a></li>
                <li><a href="#">学位</a></li>
                <li><a href="#">企业版</a></li>
                <li><a href="#">政府版</a></li>
            </ul>

            <ul class="list2">
                <li><a href="#" class="min-title">社区</a></li>
                <li><a href="#">Learners</a></li>
                <li><a href="#">Partners</a></li>
                <li><a href="#">Developers</a></li>
                <li><a href="#">Beta Testers</a></li>
                <li><a href="#">Translators</a></li>

            </ul>

            <ul class="list3">
                <li><a href="#" class="min-title">连接</a></li>
                <li><a href="#">博客</a></li>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">领英</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Instagram</a></li>
                <li><a href="#">YouTube</a></li>
                <li><a href="#">技术博客</a></li>
            </ul>

            <ul class="list4">
                <li><a href="#" class="min-title">更多</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>
   </div>
</body>
</html>

页面效果: https://longweibing.github.io/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/coursera%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5%E9%9D%A2.html

在这里插入图片描述

页面具有伸缩性

  • 如果想让页面具有伸缩性,则可以设置如下css代码:
/* 响应式导航类 */
    @media screen and (max-width: 1200px){
        .search .search-content {
            /* display: none; */
            width: 350px;
        }

        .search .serach-button {
            left: 350px;
        }
    }

    @media screen and (max-width: 1050px){
        .search .search-content {
            display: none;
        }

        .search .serach-button {
            display: none;
        }

    }

    @media screen and (max-width: 960px){

        .main-content {
            width: 705px;
            height: 1700px;
        }

        /* 主要内容左边栏缩放响应式 */
        .main-left {
            float: unset;
            margin-left: auto;
            margin-right: auto;
        }
        .main-left a.main-list {
            width: 682px;
            background-color: #f1f1f1;
        }
        .main-left .no-active, .main-left .complete, .main-left #new {
            width: 682px;
            background-color: #f1f1f1;
        }
        .main-left a.course-list {
            
            width: 662px;
            
        }

        .main-right {
            float: unset;
            clear: both;
            margin-left: auto;
            margin-right: auto;
        }

        .foot {
            width: 682px;
            margin-left: auto;
            margin-right: auto;
        }


        /* .search .search-content {
            display: none;
        }

        .search .serach-button {
            display: none;
        }

        .nav-left {
            display: none;
        }

        .nav-right {
            display: none;
        }

        .nav::before {
            content: "";
            width: 200px;
            height: 65px;
            background-image: url('./images/搜索.svg');
        }

        .main-right {
            display: none;
        }

        .main-left, .main-left a.main-list, .main-left a.course-list {
            width: 960px;
            background-color: #000;
        }

        .foot {
            margin: 0 auto;
            width: 100%;
        } */

    }

即当屏幕小于指定宽度时,标签样式该如何显示

html引入css的三种方式

  • html引入css有三种方式。第一种内嵌样式,直接在标签中设置style属性值;第二种内联样式,在head标签中引入<style></style>;第三种使外联样式,即在head标签中引入link标签。即三种方式为:
    1. 内嵌样式:style属性值。
    2. 内联样式:<style></style>。
    3. 外联样式:link标签。

有错误之处,欢迎指正!如有帮助,请点个赞吧!

矢量网络分析仪(矢网)组成和原理简介 一、概述 矢量网络分析仪是一种常见的射频测量仪器,主要用来测量高频器件、电路及系统的性能参数,如线性参数、非线性参数、变频参数等。 1.1 分类 矢量网络分析仪一般以频率来划分,截止频率越高,价格也越贵; 根据测试端口的数量可分为:双端口、 3 端口、 4 端口、 6 端口; 常见的厂家有:美国的安捷伦( Agilent)、德国的罗德与施瓦茨( R&S) , 国内的有南京普纳和中电 41 所。 1.2 常用功能 常用的测试器件有:功分器、合路器、滤波器、衰减器、天线、电缆、放大器、混频器、双工器、耦 阅读详情

相关推荐

单片机技术入门与实战:从零基础到项目开发

单片机(MCU)作为嵌入式系统的核心组件,集成了CPU、内存和各种接口电路,广泛应用于智能家居、工业控制和汽车电子等领域。其工作原理基于实时控制和低功耗设计,通过定时器、中断系统和通信接口等功能模块实现各种控制任务。在物联网和智能硬件快速发展的背景下,掌握单片机开发技术成为电子工程师的重要技能。本文以STM32和PIC系列为例,详细解析单片机的基本概念、功能模块和选型指南,并分享从入门到项目实战的系统学习方法,帮助开发者在3-6个月内快速掌握这一关键技术。

weixin_35753291的博客 652

【Vue3】李南江老师讲解--个人笔记(一)

太喜欢李南江老师了,自带二倍速的语速还可以讲的明明白白又有一个有趣的灵魂i了i了 【vue笔记】 框架和库的区别: 框架:是一整套的完整的解决方案,换框架的话,需要重构整个项目;库:也就是使用是插件,修改需要使用的插件就可以,可以实现无缝切换。 vue的核心概念: 1,通过数据驱动界面更新,不操作Dom来更新页面;2,组件化开发,可以将网页拆分成一个个的组件来编写 let vm = new Vue({ router, store, el: '#app', render: (h

zuo0407的博客 638

28-基于STM32单片机的便携式健康监测系统设计与实现(程序+原理图+元件清单)

本文详细介绍了基于STM32单片机的便携式健康监测系统设计与实现,该系统集成MAX30102光电传感器和MSP20压力传感器,实时监测心率、血氧和血压等关键生理指标。通过STM32F103C8T6主控芯片和HC-05蓝牙模块,实现数据采集、处理及无线传输,具有便携性高、操作简便等特点,适用于家庭健康监护和户外运动场景。

weixin_29191669的博客 420

JQuery(李江南)

文章目录jQuery使用jQueryjQuery字典简单样例1.jQuery核心2.jQuery工具、选择器3.jQuery选择器4.属性5.CSS6.事件7.效果8.文档处理9.ajaxcookiehash jQuery jQuery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。 它封装JavaScript常用的功能代码,提供一种简便的J

LuckyGuyy的博客 1624

用Cursor+Node.js零代码搭建健康数据仪表盘:从数据录入到可视化全流程

本文详细介绍了如何利用Cursor AI编程助手和Node.js,无需手动编写代码,即可构建个人健康数据仪表盘的全流程。通过自然语言指令,实现从数据录入、存储到动态图表可视化的完整系统,展示了AI驱动开发在降低技术门槛、提升开发效率方面的强大能力。

gitlab7runner的博客 700

ISA-95(S95)标准详解

ISA-95是制造业系统集成的“通用语言”,通过分层模型和信息流规范,打通企业计划层与设备控制层,成为实现数字化工厂的核心标准之一。其与ISA-88的协同应用,可进一步优化生产执行与资源管理的效率。标准,旨在解决企业商业系统(如ERP)与工业控制系统(如MES、SCADA)之间的集成问题。

「东哥说MES」 专注于MES制造执行系统,为你拆解核心架构、功能模块及与ERP/PLC的集成逻辑。提供从入门到精通的系列干货、精选行业报告与实用工具,构建你的数字化知识体系,关注我,用实战经验照亮你的数字化之路。 3737

HTML5笔记+案例

HTML 一 . html简介 1.HTML是什么? HTML:hyper text makrup language超文本标记(标签)语言由各种标签组成,用来制作网页,告诉浏览器该如何显示页面 2.作用 制作网页,控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 通过链接来检查信息 使用表单获取用户数据,实现交互 3.版本 W3C:world wide web consortium万维网联盟,制定Web技术相关标准和规范的组织,HTML就是由W3C制定的标准 两个版本:HTML 4.0.1、

sumuqi的博客 3467

MATLAB AppDesigner 中TextArea保留原有信息并换行显示提示信息

App Designer 中的文本区域TextArea组件,一般可以用来作为matlab app设计中的信息显示。 app.TextArea.Value = 'Hello Matlab'; Value可以是字符向量、字符向量元胞数组、字符串数组或一维分类数组。这样直接给TextArea赋值,每次赋值都会消除先前的信息,然后显示新的信息。如果想要在app实现保留原有信息、多行信息的输出,在MathWorks官方帮助中心给出了一种方法: cellArrayText{1} = sprintf('%s\n

我是麻瓜喔的博客 1万+

CSS Sprite的应用

什么是CSS Sprite ? 不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON,栏目背景啊,图片按钮啊等都有会有规则的合并一张背景图,然后用background-position来实现背景图片的定位,他们为什么要花费一些时间来合并这些CSS背景图片呢,CSS中用一张背景图做页面的技术到底有什么优势呢?  

younger_z的专栏 706

1分钟了解LangChain是什么?

是一个基于大型语言模型(LLM)开发应用程序的框架, 它旨在简化语言模型应用的开发流程,特别是在构建对话系统和其他基于语言的AI解决方案时.目标是将复杂的语言模型技术转化为可通过简单API调用实现的功能,从而使开发者能够更加专注于创造性的解决方案设计。高效地解决了开发大语言模型应用的痛点问题。Langchain 最主要的特色是可以将 LLM 应用研发过程中的交互 Prompt、LLM 模型调用、语言模型与环境互动的自适应等方式融为一体。

gorgor在码农 2630

解锁 Bootloader 不再难!HyperOS澎湃系统小米与红米手机通用

必要时,可以在工具右上角安装驱动模块,手动安装驱动。解决方法:确保手机升级到最新稳定版,登录同一个小米账号,并在。新机型解锁时需要等待一段时间,通常为 7 天。如果账号安全评分较低,解锁等待时间会更长。如果解锁失败提示权限不足,说明账号存在安全问题。出现这个错误时,通常是因为网络不稳定。如果解锁次数已满,需要等到下个月。解锁后,手机会重启,首次开机会稍微慢一些,等耐心等待即可。按钮,开始解锁过程,注意:解锁会清除手机内所有数据。7次,开启开发者选项。,右键解压到指定文件夹。,使用小米账号登录。

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用,接口、架构、性能全搞定。 7223

网页设计技巧总结:CSS制作网页中的三角

网页制作Webjx文章简介:三角形我们经常用在列表、下拉提示、面包屑导航的位置,给用户以导向的引导作用,比如,在有下拉列表的地方,我们可以用向下的箭头,在列表的时候,我们能告诉用户每个列表项和下一个列表项的关系,当在面包屑导航中,能让用户了解他现在所处的栏目或者频道。我们有哪些 http://www.alixixi.com/web/a/201103146856...

weixin_30904593的博客 437

Test-Time Adaptation Induces Stronger Accuracy and Agreement-on-the-Line

TTA不管是否提高了OOD的泛化性都增强了线性的趋势,TTA的初始目的是为了增强OOD的表现,一个人可能会觉得TTA使得ACL更强的原因是他消除了ID和OOD之间的差距,因此所有模型间ID vs OOD的准确率接近于y=x这条线,但是实际上这个解释不能够反映我们的经验发现,因为虽然TTA将分布之间的偏移简化为一种放缩的分布,但是这个放缩的因子幅值可能很大,也就是α<<1但是r>>1,这就会导致很偏离y=x这条线,而且理论分析也是,虽然ID和OOD的差距很大,但是线性关系还在。

m0_62673638的博客 148

CSS学习笔记

CSS)指的是层叠样式表,可以同时控制多张网页的布局,外部样式表存储在 CSS 文件中,即实现一张HTML页面可切换多个样式。CSS 用于定义网页的样式,包括针对不同设备和屏幕尺寸的设计和布局。CSS 从 HTML 页面中删除了样式格式!样式定义通常保存在外部 .css 文件中。通过使用外部样式表文件,更改一个文件即可更改整个网站的外观!

ts1296797634的博客 2101

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

Day1 CSS学习笔记

Day1 CSS学习笔记 附带分享链接 https://share.mubu.com/doc/5qGgkibvvg0

Chillax_LXL的博客 554

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

CSS学习笔记目录

CSS学习笔记之基础教程(一) CSS学习笔记之基础教程(二) CSS学习笔记之中级教程(一) CSS学习笔记之中级教程(二) CSS学习笔记之中级教程(三) CSS学习笔记之高级教程(一) CSS学习笔记之高级教程(二) CSS学习笔记之高级教程(三) CSS学习笔记之高级教程(四)

wz_1992的博客 711

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

CSS3的学习笔记

css3的学习笔记

2301_80073794的博客 2429

HTML+CSS+JS学习笔记

HTML+CSS+JS学习笔记 学习笔记pdf文档下载

Ambitio_N的博客 296

CSS | 学习笔记

​本文是本人的css学习笔记,基于黑马程序员《从0到1学前端-HTML+CSS+移动web》课程和学校开设的前端开发课程。 我在文中添加了很多代码,是因为我感觉“纸上得来终觉浅”,代码就是要自己打出来才能了解得更透彻。 *发现css太多了所以分了几篇写,还有一些在难产中*

仅代表个人见解,有不足请指出 1196

CSS基础个人学习笔记

CSS,即层叠样式表是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言)文档的呈现方式。学习 CSS,需要在基本掌握 HTML 的前提下进行,本人的笔记也建立在运用 HTML 实现一些显示功能的基础上。

Sentra233的博客 856

CSS3学习笔记

border-box。

2401_88410373的博客 1082

前端学习笔记2:CSS

CSS基础知识介绍

m0_52289398的博客 2227
上一篇: Git-分布式文件版本管理工具
下一篇: Centos7安装和配置记录
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值