欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

HTML基础必学列表

Html应该注意的细节学习

html技巧
1.
防止盒子透出的解决办法
    overflow
hiddenfloat不为nonedisplayinline-block
    position
不为static&relative
   
给父类加一个border-top1px solid transparernt

2.
内联块的vertical-align是基于父元素的中线位置
在一个div内有一个span一个input则不对齐
input设置vertical-aligntop;则对齐;

3.button
高度设置的是总高度border默认2px
如果height设置45px;则内容高度为41pxborder一共4px
如果要总高度都为45px
那么input高度hight设置43px border 1px solid gray
button
则设置height设置45px

4.
内容超出覆盖div底边框
.text-line{
     height: 0.5em;text-align: center;
     border-bottom: 1px solid red;}
.text-line>a{margin:0 10px;padding:0 10px;
     background-color: white;}

5.
如何在文字之间加一个丨例如 :登录丨注册
原理给注册一个border-left:1px solid gary;padding-left:1em;
div>span{border-left:2px solid grey;
         padding-left: 1em; margin-left: -16px;}
<div>
    <span>
注册</span>
</div>

6.
如何加一个小三角形
原理只有border并且所需要的border显示颜色
    position: absolute;
    content:"";top: 50%;right: -1em;
    border:5px solid transparent;
    border-top-color: red;

7.
二级导航
要用到定位

8.2D
转换
   
默认情况下所有元素都是以自己的中心点作为参考
来旋转的,我们可以通过形变中心点属性来修改它的
参考点 transform-origin:具体像素/百分比
      
第一个参数:水平方向
      
第二个参数:垂直方向
       transform-origin:0px 0px
;左上角为中心点
     transform-origin
left top;左上角


9.
翻转菜单
.two_nav{position:absolute;
    width: 6em;left: -10px;}
.two_nav>li{background-color: black;
    transform: rotateY(180deg);
    transition: all 0.5s;
    opacity: 0;}
.triangle:hover .two_nav>li{
    transform:none;
    opacity: 1;}
.triangle:hover .two_nav>li:nth-child(1){
    transition-delay: 200ms;}
.triangle:hover .two_nav>li:nth-child(2){
    transition-delay: 300ms;}
.triangle:hover .two_nav>li:nth-child(3){
    transition-delay: 400ms}
.triangle:hover .two_nav>li:nth-child(4){
    transition-delay: 500ms;}
.triangle .two_nav>li:nth-child(4){
    transition-delay: 200ms;}
.triangle .two_nav>li:nth-child(3){
    transition-delay: 300ms;}
.triangle .two_nav>li:nth-child(2){
    transition-delay: 400ms;}
.triangle .two_nav>li:nth-child(1){
    transition-delay: 500ms;}

<span class="triangle">
    <a href="#">
游戏中心</a>
    <ul class="two_nav">
        <li>
直播</li>
        <li>
拜年祭</li>
        <li>
游戏中心</li>
        <li>
玩家中心</li>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h19168.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-03-11 09:35 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。