1.css样式小技巧

HTML怎样设定使背景图片不随页面滚动而滚动

background-attachment:fixed;

2.实现li a 超过长度内容出现省略号…

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

3.使用 line-height 垂直居中

line-height:24px;

4.清除容器浮动

#main {    overflow:hidden;}

5.不让链接折行

a {    white-space:nowrap;}

6. 使块元素水平居中

margin:0 auto;

其实就是 margin-left: auto;margin-right: auto;

7.删除链接上的虚线框

a:active, a:focus {outline:none;}

8.position属性四大可选值用法

Position属性有四个可选值,它们分别是:static、absolute、fixed、relative。

position:static 无定位:该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它。

position:absolute 绝对定位

position:fixed 相对于窗口的固定定位

position:relative 相对于元素的对象定位

9. 首字下沉

伪对象:first-letter配合font-size、float可以制作首字下沉效果。

10、竖排文字

writing-mode属性有两个值lr-tb和tb-rl,前者是默认的左-右、上-下,后者是上-下、右-左。

11、首行缩进

可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。可以这么写: p{ text-indent:2em;/*em是相对单位,2em即现在一个字大小的两倍*/ }如果font-size是12px的话,那么text-indent:2em则缩进24px。

css样式小技巧的更多相关文章

  1. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  2. 第八十四节,css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  3. CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  4. css 样式小窍门

    css 样式小窍门 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

    最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...

  6. 一些常用的html/CSS效果---小技巧

    我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...

  7. html/css/js小技巧实例

    一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...

  8. 【温故知新】——CSS黑魔法小技巧可以少些不必要的js

    前言:这篇文章是转载[前端开发博客]的一篇技术文章,并非本人所写.只是个人觉得很实用,所以分享给大家.原文链接:github.com 1.利用 CSS 的 content 属性 attr 抓取资料需求 ...

  9. css样式小框架

    1.如div{...}会给所有的<div></div>增加样式. 2.名前井号“#”:对应html中的标签的id属性,写法为#name.如#p1{...}会给<p id= ...

随机推荐

  1. delphi 合并两个 Wav 文件流的函数

    合并两个 Wav 文件的函数 实例一 unit Unit1; interface usesWindows, Messages, SysUtils, Variants, Classes, Graphic ...

  2. RabbitMQ的应用场景以及基本原理介绍(转)

    本文转自https://blog.csdn.net/whoamiyang/article/details/54954780 1.背景 RabbitMQ是一个由erlang开发的AMQP(Advanve ...

  3. 查询并发程序是否启动跟踪功能-trc文件对数据库性能有影响

    /* Formatted on 2018/3/14 23:38:51 (QP5 v5.256.13226.35538) */ SELECT icon_name , row_id , user_conc ...

  4. Android使用代码模拟HOME键的功能

    Intent intent= new Intent(Intent.ACTION_MAIN); intent.addCategory(Intent.CATEGORY_HOME); intent.addF ...

  5. FrameLayout和handle实现霓虹灯效果

    这个程序的主要思想就是在一个FrameLayout中定义多个TextView,分别设置不同的背景色.因为帧布局的特性,所以这些控件都是叠加起来的.然后,通过定时器循环给handler发送消息,改变控件 ...

  6. Java获取当前时间30天之前的时间

    //方法一 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); String maxDateStr = " ...

  7. GraphX中Pregel单源点最短路径(转)

    原文链接:GraphX中Pregel单源点最短路径 GraphX中的单源点最短路径例子,使用的是类Pregel的方式. 核心部分是三个函数: 1.节点处理消息的函数  vprog: (VertexId ...

  8. 秒懂,Java 注解 (Annotation)你可以这样学

    转自: https://blog.csdn.net/briblue/article/details/73824058 文章开头先引入一处图片. 这处图片引自老罗的博客.为了避免不必要的麻烦,首先声明我 ...

  9. [leetcode]Search in Rotated Sorted Array II @ Python

    原题地址:https://oj.leetcode.com/problems/search-in-rotated-sorted-array-ii/ 题意: Follow up for "Sea ...

  10. Binary Tree Level Order Traversal II leetcode java

    题目: Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from ...