html+css小技巧大用处

原创 2016年08月30日 13:56:40

1.用css border写下拉小三角:

<span class="sanjiao"></span>

.sanjiao{
    width:0;height:0;
    border-top:4px solid #ccc;
    border-right:2px solid transparent;
    border-left:2px solid transparent;}
  

2.图片设置右下边框,最外边框用外盒子边框

<div class="box">
    <ul>
        <li><a href="#" class="s_bor"></a></li>
        <li><a href="#" class="s_bor"></a></li>
        <li><a href="#" class="s_bor"></a></li>
        <li><a href="#" class="s_bor"></a></li>
    </ul>
  </div>

.box{width:500px;height:600px;overflow:hidden;}
  ul  {width:510px;height:610px;  }
.s_bor{display:block;border-right:10px solid green;border-bottom:10px solid green;

box设width,height为最终看到的宽高给设置border,把ul边上出来的一块设置隐藏,overflow:hidden;ul设置的宽高刚好多出s_bor的边框宽度。


3.4个条件同时存在,才有一行文本后面有省略号的效果:

a{widht:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-spacing:nowrap;
}

4.高度塌陷

块级元素(如盒子)如果没有设置高度,并在盒子内其他元素上用了float属性,就会发生高度塌陷,要在块级元素(父级)上设置overflow:hidden属性将盒子撑起来就解决了塌陷问题。


5.若三个盒子并排显示在一行病、并且两两之间有margin,讲margin或者padding设置在中间盒子上。

6.margin元素具有上下重合左右叠加的特点。

7.display的几个属性:

inline:加宽高无效,加padding border margin 竖直方向只有显示效果不占空间。

block:width height padding margin border都可设置

inline-block:可以设置宽高,多个可占一行,但是每个之间有一定的margin.只有inline-block属性可以设置vertical-algin属性。

inline:浮动后可以变成块级元素

8.同行元素要加浮动,就都要加浮动。

9.让导航居中,ul设置宽(否则他的宽默认为父级元素的宽)后设置margin:0 auto; a 标签中的内容垂直居中,a转成块级元素设置行高line-height;水平居中给li设text-align

版权声明:本文为博主原创文章,未经博主允许不得转载。本文主要为编者读书笔记,在文章里面很多话是掺杂了编者自己的见解,如果有哪里出现错误或者用词不严谨,请友善留言,编者会及时去更改。

相关文章推荐

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

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

Firebug折腾记_(2)HTML&CSS定位及调试小技巧

题外话传统的开发我们是在编辑器操作代码保存,再到浏览器预览查看效果的; 而如今的firebug和chrome的内置调试器就不需要了..可以直接实时编辑且看到效果; 在调试中对代码的操作不会保存到本...
  • bomess
  • bomess
  • 2015-08-21 12:16
  • 1857

css,html,js/jQuery开发小技巧汇总-更新中~

1.怎样给超链取消下划线 A {text-decoration: NONE} 2.FF下使用background-image给body和div加背景图片 body直...

HTML+CSS基础篇——小技巧集合

1、清除两个input之间空隙 a、设置两个input的父div的font-size=0 b、两个input都 float:left 浮动起来,然后设置父div宽度width,最后设置...

网页代码小技术大用处

  • 2009-07-30 18:00
  • 11KB
  • 下载

Windows文件系统漏洞-小漏洞--大用处

1.Windows中很有用的文件替换命令,绕过文件保护 用来替换文件的replace,连正在使用的文件也能替换。非常无敌。  比如:在C:\下建一个目录,c:\aaa  然后复制一首mp3到c:...
  • s98
  • s98
  • 2011-12-22 12:53
  • 407

Java大用处——Integer类常用的方法举例

Integer类在包Java.lang下面,包含了很多方法,我就写了一些常用的方法: package test20170223; import java.util.*; public class T...
  • sum_TW
  • sum_TW
  • 2017-02-26 23:00
  • 2301

WINDOWS小漏洞大用处

1.Windows中很有用的文件替换命令,绕过文件保护 用来替换文件的replace,连正在使用的文件也能替换。非常无敌。 比如:在C:\下建一个目录,c:\aaa 然后复制一首mp3到c:...

Java大用处——动态数组的实现

数组大家平常都用,数组虽然有优点但是最让我不爽的就是它的定长。 有人会说,那就用链表啊,链表插入,删除是方便,但是遍历速度慢。 所以,我就想写一个动态的数组。 原理是这样的,当你想增加数组大小时,我们...
  • sum_TW
  • sum_TW
  • 2017-02-25 23:30
  • 3336
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)