技巧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. 黑马程序员--C#中属性和字段(变量)的区别

    ---------------------- ASP.Net+Android+IOS开发..Net培训.期待与您交流! ---------------------- 属性为类提供了一种很有用的封装数据 ...

  2. mac 下周期调度命令或脚本

    crontab 是在linux服务器上部署定时任务的方法 0 5 * * * /usr/bin/python /data/www/tools/mysql_backup.py cmd之前有5个项目要填, ...

  3. PHP中的多态

    多态的概念一般是强类型语言来谈的,因为强类型语言它必须要声明参数类型,比如一个手电筒对象的打开方法其参数申明了只能是蓝光,就不能传其他光.但可以用父类渲染的方式使其多态,比如声明一个光的父类,让其它颜 ...

  4. 【nginx运维基础(5)】Nginx的location攻略

    概述 location 有"定位"的意思, 根据Uri来进行不同的定位. 在虚拟主机的配置中,是必不可少的,location可以把网站的不同部分,定位到不同的处理方式上.伪静态,反 ...

  5. iOS开发--计时器-NSTimer与CADisplayLink

    如果程序要让某个方法重复执行,可以借助定时器来完成.CADisplayLink是一个能让我们以和屏幕刷新率相同的频率将内容画到屏幕上的定时器,NSTimer的精确度低了点,比如NSTimer的触发时间 ...

  6. java：异常处理

    异常:编译正常,但运行出错,会中断正常指令流 RuntimeException:运行时异常 分为:uncheck exception.和check exception(除了RuntimeExcepti ...

  7. 深度神经网络入门教程Deep Neural Networks: A Getting Started Tutorial

    Deep Neural Networks are the more computationally powerful cousins to regular neural networks. Learn ...

  8. smartcomb:用php实现的web模块拼合器

    smartcomb是一个用php实现的web模块拼合器,相对于其他的代码拼合工具,如下特性: 可以拼合任意类型的文件,不限于js文件. 集中并声明依赖,自动分析依赖拼合,按需加载. 支持多种配置切换 ...

  9. Linux kmalloc/kfree 源码解读

    kmalloc/kfree用于划分和回收内核空间低区内存的方法.改组方法没有直接通过伙伴系统进行内存的划分,通过slab算法进行分配的.同时也为每个CPU提供一个阵列缓存,用于提高分配效率.下面对改组 ...

  10. How to Determine the Version of Oracle XML Publisher for Oracle E-Business Suite 11i and Release 12 (Doc ID 362496.1)

    Modified: 29-Mar-2014 Type: HOWTO In this DocumentGoal   Solution   1. Based upon an output file gen ...