• 【HTML+CSS】零碎知识点

    公告滚动条

    DOCTYPE html>
<html>

<head>
    <title>动态粘性导航栏title>
    <style>
        .container {
            background: #00aeec;
            overflow: hidden;
            padding: 20px 0;
        }

        .title {
            float: left;
            font-size: 20px;
            font-weight: normal;
            margin: 0;
            margin-left: 20px;
            margin-right: 20px;
            margin-top: 2px;
            padding-right: 18px;
            border-right: 2px solid #ccc;
        }

        .list {
            float: left;
            list-style: none;
            border: 1px solid ;
            padding: 0;
            height: 30px;
            overflow: hidden scroll;
            margin: 0;
            margin-left: 20px;
        }
        .list li {
            height: 30px;
            line-height: 30px;
        }
    style>
head>

<body>

    <div class="container">

        <h1 class="title">最新公告h1>


        <ul class="list">
            <li>Lorem dolore hic, cumque doloremque
                obcaecati minima.li>
            <li>Lorem alias molestias recusandae
                dignissimos? Iusto, natus.li>
            <li>Lorem vero blanditiis minima commodi eveniet
                alias expedita, error hic nam.li>
            <li>Lorem aliquid a assumenda repellat saepe
                et. Possimus.li>
        ul>

    div>
    <script>

    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66

    在这里插入图片描述

    侧边栏浮动，主区域自适应

    DOCTYPE html>
<html>

<head>
    <title>动态粘性导航栏title>
    <style>
        .clearfix::after {
            content:'';
            display: block;
            clear: both;
        }
        .container {
            background: lightblue;
            width: 90%;
            margin: 0 auto;
        }
        .aside {
            float: left;
            background: blanchedalmond;
            width: 300px;
            margin-right: 30px;
        }
        .main {
            overflow: hidden;
            background: gray;
        }
    style>
head>

<body>

    <div class="container clearfix">
        <aside class="aside">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic obcaecati atque cumque expedita nostrum saepe enim quam, voluptatibus consequatur numquam quidem dolor, molestias illum commodi perspiciatis sapiente. Necessitatibus, in nemo.aside>
        <div class="main">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem, doloremque accusamus voluptatibus cum necessitatibus iusto cupiditate blanditiis repellat, consequuntur accusantium eligendi sint provident ipsam molestiae magni a laudantium iste eaque?div>
    div>
    <script>

    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    在这里插入图片描述

    文本溢出的处理

    DOCTYPE html>
<html>

<head>
    <title>动态粘性导航栏title>
    <style>
        .single-line {
            border: 1px solid #101a36;
            width: 400px;
            height: 30px;
            line-height: 30px;
            color: #f40;
            margin: 40px 20px;
            /* 实现方式： */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .multi-line {
            border: 1px solid rgb(32, 22, 40);
            width: 400px;
            height: 90px;
            line-height: 30px;
            color: #f40;
            margin: 0 20px;
            /* 实现方式： */
            overflow: hidden;
            text-overflow: ellipsis;
            /* webkit 内核服务器特有的属性 */
            display: -webkit-box;
            /* 3 是需要开始省略（...）的行号 */
            -webkit-line-clamp: 3;
            /* 排列方式：vertical */
            -webkit-box-orient: vertical;
        }
    style>
head>

<body>

    <p class="single-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque voluptatum molestiae ducimus
        ratione quos impedit, porro optio aliquid ipsam nostrum itaque. Cum, quibusdam consequatur sequi voluptatum
        officia in temporibus exercitationem.p>
    <p class="multi-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia quos placeat quas
        incidunt dolores esse vel libero. Quibusdam in nihil et deserunt natus sed ad nesciunt voluptatibus,
        exercitationem sapiente.p>
    <script>

    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    在这里插入图片描述

  • 相关阅读:
    unity学习笔记之不通过路径通过拖拽获取lua脚本里定义的UI组件
    企业电子招投标采购系统源码之电子招投标的组成
    什么是MVC
    面试经典150题——路径总和
    webpack-theme-color-replacer动态修改Ant Design Vue主题色
    idea+SpringBoot使用过程中的问题集合
    程序的编译与链接
    VirtualBox 虚拟机内操作系统与宿主操作系统共享文件夹的方法
    uni-app项目中画布实现海报
    Redis数据库 ---- 五种数据类型常用命令汇总
  • 原文地址：https://blog.csdn.net/XiugongHao/article/details/133881440