zoukankan      html  css  js  c++  java
  • CSS常用十大技巧

    技巧1  去掉网页超链接的下划线

    去掉网页超链接的下划线,在<head>与</head>之间相应的位置输入以下代码。

    <style type="text/css">

    <!--

     a { text-decoration:none}

     a:hover{ color:#33d; text-decoration:underline}

    -->

    </style>

    技巧2  设置浮动背景

    设置浮动背景,在<head>与</head>之间相应的位置输入以下代码。

    <style type="text/css">

    <!--

     body{ background-image: url(image/bgimg.png); background-attachment: fixed}

    -->

    </style>

    技巧3  正确对齐文本

    有时需要对一段文本的左右、上下边距(指文本至浏览器边框的距离)加以指定,以使文本正确对齐,CSS(层叠样式表)可以提供这样的功能。

    在<head>与</head>之间相应的位置输入以下代码。

    <style type="text/css">

    <!--

     .alignment{ margin-left: 68px; margin-right: 70px; margin-top: 69px; margin-bottom:71px }

    -->

    /* 可以缩写成margin: 69px 70px 71px 68px; */

    </style>

    技巧4  超链接访问过后防止hover样式出现问题

    超链接访问过后为了防止hover样式出现问题,可以在<head>与</head>之间相应的位置输入以下代码。

    <style type="text/css">

    <!--

     a:link{

       color:red

     }

     a:hover{

       color:blue

     }

     a:visited{

       color:green

     }

     a:active {

       color:orange

     }

    -->

    </style>

    技巧5  解决list-style-image无法准确定位的问题

    解决list-style-image无法准确定位的问题,在<head>与</head>之间相应的位置输入以下代码。

    <style type="text/css">

    <!--

    li {

      list-style:url("http://www.hjwen.cn/images/listnon.png");

    }

    li a {

      position:relative;

      top:-5px;

      font:12px/25px 宋体;

    }

    -->

    </style>

    解决的方法一般是用li的背景模拟,这里采用相对定位的方法也可以解决。

    技巧6  让文本垂直居中

    让文本垂直居中,在<head>与</head>之间相应的位置输入以下代码。

    <style type="text/css">

    <!--

    div {

      height:50px;

      line-height:50px;

      border:1px solid #960;

    }

    -->

    </style>

    技巧7  使一个层垂直居中浏览器

    使一个层垂直居中浏览器,在<head>与</head>之间相应的位置输入以下代码。

    <style type="text/css">

    <!--

    div {

      position:absolute;

      top:70%;

      left:50%;

      margin:-150px 0 0 -150px;

      200px;

      height:200px;

      border:1px solid #06f;

    }

    -->

    </style>

    技巧8  给部分内容加上边框

    给部分内容加边框,在<head>与</head>之间相应的位置输入以下代码。

    <style type="text/css">

    <!--

    .style1 {

      border:solid;

      border-thin0px0pxmedium;

      border-color:#09c #000 #000 #c90;

    }

    -->

    </style>

    技巧9  让div横向排列

    在<head>与</head>之间相应的位置输入以下代码。

    <style type="text/css">

    <!--

    div {

      float:left;

      200px;

      height:100px;

      border:1px solid blue

    }

    -->

    </style>

    <div>div横向排列</div>

    <div>div横向排列</div>

    <div>div横向排列</div>

    技巧10  巧妙设置滚动条颜色

    在<head>与</head>之间相应的位置输入以下代码。

    <style type="text/css">

    <!--

    html {

      scrollbar-face-color:#f6f6f6;

      scrollbar-highlight-color:#fff000;

      scrollbar-shadow-color:#e0e;

      scrollbar-arrow-color:#ccc000;

      scrollbar-track-color:#dec;

      scrollbar-darkshadow-color:#fffddd;

    }

    -->

    </style>

  • 相关阅读:
    Spring中的注解@Service @Component @Controller @Repository区别
    hibhibernate中hql中的语句where语句查询List出现空
    转-sql中的case when的用法
    转-JS子窗口创建父窗口操作父窗口
    JS子父窗口互相取值赋值详解介绍
    转-JS之Window对象
    转-JS中document对象详解
    java设计优化--装饰者模式
    Java继承中属性、方法和对象的关系
    利用Ant脚本生成war包的详细步骤
  • 原文地址:https://www.cnblogs.com/iifranky7/p/5296135.html
Copyright © 2011-2022 走看看