技巧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;

　　width:200px;

　　height:200px;

　　border:1px solid #06f;

}

-->

</style>

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

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

<style type="text/css">

<!--

.style1 {

　　border:solid;

　　border-width:thin0px0pxmedium;

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

}

-->

</style>

技巧9  让div横向排列

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

<style type="text/css">

<!--

div {

　　float:left;

　　width: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>

CSS常用十大技巧的更多相关文章

  1. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  2. 十大技巧快速提升原生APP开发性能

    移动应用市场用户争夺战日益激烈,原来做APP拼想法拼创意拼是否抓住用户痛点.现在,精细化用户体验成为了一个APP能否留存用户的关键问题,一旦用户觉得体验不畅,马上就有竞品APP后补,如何开发高性能的移 ...

  3. 让PHP开发者事半功倍的十大技巧

    如果你使用一面大镜子作为冲浪板会发生什么?或许你会在较短的时间内征服海浪,但是你肯定从内心深处明白,这不是冲浪的正确选择.同样的道理也适用于PHP编程,尽管这样的类比听起来有一些古怪.我们经常听到有人 ...

  4. xshell十大技巧

    xshell是我用过的最好用的ssh客户端工具,没有之一.这个软件完全免费,简单易用,可以满足通过ssh管理linux vps所有需要,唯一遗憾的是没有官方中文版. 警告:不要下载所谓的汉化版,可能有 ...

  5. jQuery Mobile高手必备的十大技巧和代码片段

    与任何新技术一样,常常难就难在如何开始入手. 有鉴于此,我们整理出了与jQuery Mobile库有关的我认为最便利的一些技巧.方法和代码片段. 由于本文不是旨在全面介绍使用jQuery Mobile ...

  6. 设计移动App的十大技巧

    编写一款Android或iOS应用也许很容易,但是若想设计的成功却不是一件简单的事,用户界面对于一款移动应用的成功是至关重要的.也许你会说,为何界面那么糙的Flappy Bird可以大红大紫,可那毕竟 ...

  7. 十大技巧优化Android App性能

    无论锤子还是茄子手机的不断冒出,Android系统的手机市场占有率目前来说还是最大的,因此基于Android开发的App数量也是很庞大的. 那么,如何能开发出更高性能的Android App?相信是软 ...

  8. 优化Android App性能？十大技巧必知！

    无论锤子还是茄子手机的不断冒出,Android系统的手机市场占有率目前来说还是最大的,因此基于Android开发的App数量也是很庞大的.那么,如何能开发出更高性能的Android App?相信是软件 ...

  9. MySQL优化十大技巧

    转自:https://m.2cto.com/database/201701/557910.html MYSQL优化主要分为以下四大方面: 设计:存储引擎,字段类型,范式与逆范式 功能:索引,缓存,分区 ...

随机推荐

  1. DML、DDL、DCL区别

    1.DML:数据操纵语言.执行完需要提交,有回滚. select.insert.update.delete.call explain plan :Oracle RDBMS执行每一条SQL语句,都必须经 ...

  2. 李洪强iOS开发之OC[012] -类的声明实现小结

    // //  main.m //  11 - 内容总结 // //  Created by vic fan on 16/7/9. //  Copyright © 2016年 李洪强. All righ ...

  3. leetcode 4 : Median of Two Sorted Arrays 找出两个数组的中位数

    题目: There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the ...

  4. hdu 3863 No Gambling

    #include<stdio.h> int main() { int n; ) { printf("I bet on Oregon Maple~\n"); } ; } ...

  5. C#实现的ReplaceFirst和ReplaceLast

    原文:C#实现的ReplaceFirst和ReplaceLast ReplaceFirst: public static string ReplaceFirst(string input, strin ...

  6. 使用 Async 和 Await 的异步编程

    来自:http://msdn.microsoft.com/library/vstudio/hh191443   异步对可能起阻止作用的活动(例如,应用程序访问 Web 时)至关重要. 对 Web 资源 ...

  7. C# progressbar 用法

    http://blog.chinaunix.net/uid-9236609-id-3069624.html progressBar1.Maximum = 100;//设置最大长度值          ...

  8. .NET 框架 (转载)

    转载:http://www.tracefact.net/CLR-and-Framework/DotNet-Framework.aspx .NET框架 三年前写的<.NET之美>的第六章,现 ...

  9. ubuntu下安装Ming的教程

    Ming是一个操纵swf(flash movice)的C库,支持php. ruby. python等语言. 重要提示: 在安装Ming之前,应该准备好你的系统,特别是Linux/Unix系统,如果你对 ...

  10. Java中JNI的使用详解第二篇:JNIEnv类型和jobject类型的解释

    上一篇说的是一个简单的应用,说明JNI是怎么工作的,这一篇主要来说一下,那个本地方法sayHello的参数的说明,以及其中方法的使用 首先来看一下C++中的sayHello方法的实现: JNIEXPO ...