学习笔记——CSS中的一些公有样式

蔚落 2022-11-21 09:41 162阅读 0赞

--------------------

> 在CSS中，我们可能会多次重复用到一些样式，我们会将这些样式放在单独的文件夹中，使用时引用即可。这样就大大的提高了代码的复用性，减少了重复代码的出现。

**1.复位样式：**

/* 复位 */
    * {
        margin: 0;
        padding: 0;
    }
    
    /* 去除小黑点 */
    ul {
        list-style: none;
    }
    
    /* 去除下划线 */
    a {
        text-decoration: none;
    }

**2.共有样式：**

// 页面最上面的导航栏
    .tonglan {
        width: 100%;
        min-width: 1200px;
    }
    
    .w {
        width: 1200px;
        margin: 0 auto;    /* 块级元素水平居中 */     
    }
    
    /* 单行文本省略 */
    .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 多行文本省略  有兼容性 */
    .rows-ellipsis {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* 清除浮动 */
    .clearfix::after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        clear: both;
    }

>  还可以根据自己的需要动态的向共有样式中添加一些样式，例如添加页面的页头和页脚。

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS基础——CSS字体样式属性【学习笔记】

CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font

淩亂°似流年/ 2022年12月22日 11:30/ 0 赞/ 217 阅读

相关 CSS基础——CSS样式的引入和规则【学习笔记】

1.引入CSS样式表（书写位置）行内式（内联样式）内部样式表（内嵌样式表）外部样式表（外链式）（1）行内式（内联样式）概念：称

客官°小女子只卖身不卖艺/ 2022年12月22日 09:13/ 0 赞/ 114 阅读

相关学习笔记——CSS中的一些公有样式

-------------------- > 在CSS中，我们可能会多次重复用到一些样式，我们会将这些样式放在单独的文件夹中，使用时引用即可。这样就大大的提高了代码的复用性，

蔚落/ 2022年11月21日 09:41/ 0 赞/ 163 阅读

相关 css一些样式小结

.ellipsis{ word-break: keep-all; white-space: nowrap; overfl

叁歲伎倆/ 2022年09月22日 13:53/ 0 赞/ 193 阅读

相关【CSS】学习笔记1 使用CSS样式表

<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用CSS样式表

小灰灰/ 2022年09月03日 15:26/ 0 赞/ 158 阅读

相关关于css的一些学习笔记

好久不写博客，翻了下自己写的东西。时间过的是真的快，希望自己还是坚持写下去，把一些以前模糊的东西，做一下新的更新，以及一些复习。我也会将最近自己看的书做一个总结。（类似《精通c

「爱情、让人受尽委屈。」/ 2022年07月15日 04:28/ 0 赞/ 159 阅读

相关 CSS样式修改的一些技巧

感觉自己对页面太差了，很多小问题不了解。是时候加强一下这方面，把最近一个小需求，总结一下，自己也欠了好多学习博客补一下。另外这个博客是来自于自己平时学习的总结和看法，基本是原创

超、凢脫俗/ 2022年07月14日 14:53/ 0 赞/ 168 阅读

相关一些有用的CSS样式

/\ 1. 垂直对齐容器中的元素 \/ .verticalcenter\{ position: relative; top: 50%;

阳光穿透心脏的1/2处/ 2022年05月22日 07:51/ 0 赞/ 224 阅读

相关一些css笔记

css3动画 /这是一个动画，从上面（top:0）移动到下面（top:364px）/ .animTitle{ font-size:6

「爱情、让人受尽委屈。」/ 2022年04月24日 15:36/ 0 赞/ 177 阅读

相关 Bootstrap学习笔记（二）全局CSS样式

学习的是Bootstrap3 1、jQuery与Bootstrap区别 jQuery是一个JS框架； jQueryUI是一个HTML组件库； Twitter Bo

本是古典何须时尚/ 2022年04月13日 14:26/ 0 赞/ 278 阅读