技巧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++中全局变量的那些事儿

    C/C++中的变量分为全局变量.静态全局变量.局部变量和静态局部变量,在<C/C++中静态局部变量的特点与应用>中我们介绍过静态局部变量,今天我们的目标是全局变量. 单个文件中的全局变量 ...

  2. MSSQLServer基础07（事务，存储过程，分页的存储过程,触发器）

    事务 事务:保证多个操作全部成功,否则全部失败,这处机制就是事务 思考:下了个订单,但是在保存详细信息时出错了,这样可以成功吗? 数据库中的事务:代码全都成功则提交,如果有某一条语句失败则回滚,整体失 ...

  3. Retrofit2 源码解析

    原文链接:http://bxbxbai.github.io/2015/12/13/retrofit2-analysis/ 公司里最近做的项目中网络框架用的就是Retrofit,用的多了以后觉得这个框架 ...

  4. 如何手动把jar包添加进Maven本地仓库

    有以下两种情况你需要手动通过Maven命令把jar文件添加进本地仓库: 1.在中心仓库里没有你想要的jar包. 2.你自己写了一个jar包,在其他项目要用到. 补充:现在仍有很多jar包不支持Mave ...

  5. 【原创】30分钟入门 github

    很久没更新了,这篇文章重点在github的入门使用,读者可以下载github for windows shell,边看边操作,加深印象. 好了,30分钟的愉快之旅开始吧: 一.github使用的注意事 ...

  6. How to learn linux device driver

    To learn device driver development, like any other new knowledge, the bestapproach for me is to lear ...

  7. sql 存储过程 循环使用

    USE [clab] GO /****** Object: StoredProcedure [dbo].[sp_bd_getResultByEcd] Script Date: 08/06/2014 1 ...

  8. 结巴分词标注兼容_ICTCLAS2008汉语词性标注集

    计算所汉语词性标记集Version 3.0制订人:刘群 张华平 张浩计算所汉语词性标记集... 10. 说明... 11. 名词 (1个一类,7个二类,5个三类) 22. 时间词(1个一类,1个二类) ...

  9. WEBBROWSER中模拟鼠标点击(SendMessage/PostMessage)

    好久没有写文章,发一篇顶顶博客访问量.别人建议转一些比较好的代码也贴过来,但是我打算这里主要发自己原创的代码,所以么..流量该多少就多少吧... 回到主题,在webbrowser中点击某链接网上几乎都 ...

  10. Web内容管理系统 Magnolia 介绍-挖掘优良的架构（1）

    Magnolia简介: Magnolia CMS是一家瑞士公司自2003年起发布的一个基于Java的开源内容管理系统.它适合且已被使用在以下领域:电子商务(例如:COOP.Migros.Rossman ...