text-decoration | 易学教程

如何用CSS制作横向菜单?

阅读更多关于如何用CSS制作横向菜单?

原文地址： http://www.w3cn.org/article/tips/2005/105.html 介绍很详细的尽管在我的网站和文章里都有提到CSS制作菜单的方法，但很多初学者还是不太清楚如何实现，以及实现原理，我想专门写一篇详细教程会对大家比较有帮助。我们先来看一个菜单的例子，最终效果是: 首页产品介绍服务介绍技术支持立刻购买联系我们然后我们来详细讲解步骤第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的结构。代码是： <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a></li> <li><a href="4">技术支持</a></li> <li><a href="5">立刻购买</a></li> <li><a href="6">联系我们</a></li> </ul> 效果是：首页产品介绍服务介绍技术支持立刻购买联系我们第二步：隐藏li的默认样式因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成： <div class="test"> <ul> <li><a href="1">首页</a><

用CSS制作横向菜单

阅读更多关于用CSS制作横向菜单

尽管在我的网站和文章里都有提到CSS制作菜单的方法，但很多初学者还是不太清楚如何实现，以及实现原理，我想专门写一篇详细教程会对大家比较有帮助。我们先来看一个菜单的例子，最终效果是: 首页产品介绍服务介绍技术支持立刻购买联系我们然后我们来详细讲解步骤第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的结构。代码是： <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a></li> <li><a href="4">技术支持</a></li> <li><a href="5">立刻购买</a></li> <li><a href="6">联系我们</a></li> </ul> 效果是：首页产品介绍服务介绍技术支持立刻购买联系我们第二步：隐藏li的默认样式因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成： <div class="test"> <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a><

CSS样式之文字属性

阅读更多关于 CSS样式之文字属性

字体属性文本属性呢，自我认为就是写文档的一些格式属性，例如：字体颜色，字体加粗，字体大小，字体类型等，而且我们在输出测试用例报告的时候也可以用到这些属性，对测试报告进行优化。 <html> <head lang="en"> <meta charset="UTF-8"> <title>字体属性</title> <style> .box{ /*字体颜色*/ color: red; /*字体加粗*/ font-weight:bold ; /*font-weight: normal;*/ /*font-weight: 700;*/ /*font-weight: bolder;*/ /*font-weight: lighter;*/ /*字体大小*/ font-size: 20px; /*字体类型*/ font-style: italic; /*字体*/ font-family: 幼圆,楷体,微软雅黑; } h1{ /*font-weight: normal;*/ } </style> </head> <body> <div class="box">小测试</div> <h1>一号标题</h1> </body> </html> text属性 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title

美化网页元素

阅读更多关于美化网页元素

美化网页元素 1.span 标签重点要突出的字，使用span套起来 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > Title </ title > < style > #title1 { font-size : 50px ; } </ style > </ head > < body > 欢迎学习 < span id = " title1 " > Java </ span > </ body > </ html > 2.字体样式  < style > body { font-family : "Arial Black" , 楷体 ; color : #a13d30 ; } h1 { font-size : 50px ; } .p1 { font-weight : bolder ; } </ style > 3.文本样式 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > Title </

字体样式

阅读更多关于字体样式

字体样式 1.字体命名语法： font-family : <family-name> 说明：设置文字名称，可以使用多个名称，或者使用逗号分隔，浏览器则按照先后顺序依次使用可用字体。例： p { font-family:‘楷体'，'黑体', 'Arial’ } 2. font-size(字体大小) 语法: font-size ： <length> | <percentage> 注：如果用百分比作为单位，则是基于父元素字体的大小例： p { font-size:14px;} 3. font-weight(字体加粗) 语法： font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 例： p { font-weight:bold;} 4. font-style(字体斜体) font-style : normal | italic | oblique 例： p { font-style: normal; } p { font-style: italic; } p { font-style: oblique; } 5. font(字体样式缩写) font : font-style || font-variant || font-weight

CSS 字体样式

阅读更多关于 CSS 字体样式

1. font-family 设置名称，控制使用何种字体 CSS: p{ font-family:"微软雅黑"; } HTML： <p>hello world</p> 演示结果： hello world 2. font-size 控制字体大小尺寸 CSS： p{ font-size:18px; } HTML: <p>hello world</p> 演示结果：　　 hello world 3. font-weight 控制字体加粗　　取值：100,200,300,400,500,600,700,800,900，bold，bolder。 CSS: p{ font-weight:bold } HTML: <p>hello world</p> 演示结果：　　 hello world 4. font-style : 控制字体倾斜　　取值：normal、italic、oblique CSS: p{ font-style:italic/oblique } HTML: <p>hello world</p> 演示结果：　　hello world 5. color 控制字体颜色　　取值：colorname、rgba()、十六进制 CSS： p{ color:gray; } p{ color：rgba(255,255,255,0); } p{ color:#ccc; } HTML: <p

CSS笔记(二)

阅读更多关于 CSS笔记(二)

文本文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐. 当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸） h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} 文本修饰 text-decoration 属性用来设置或删除文本的装饰。从设计的角度看 text-decoration属性主要是用来删除链接的下划线： <style> a {text-decoration:none;} </style> 文本缩进文本缩进属性是用来指定文本的第一行的缩进。实例 p {text-indent:50px;} color 设置文本颜色 direction 设置文本方向。 letter-spacing 设置字符间距 line-height 设置行高 text-align 对齐元素中的文本 text-decoration 向文本添加修饰 text-indent 缩进元素中文本的首行 text-shadow 设置文本阴影 text-transform 控制元素中的字母 unicode-bidi 设置或返回文本是否被重写 vertical-align 设置元素的垂直对齐 white-space

ul li menu

阅读更多关于 ul li menu

第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的结构。代码是： <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a></li> <li><a href="4">技术支持</a></li> <li><a href="5">立刻购买</a></li> <li><a href="6">联系我们</a></li> </ul> 第二步：隐藏li的默认样式因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成： <div class="test"> <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a></li> <li><a href="4">技术支持</a></li> <li><a href="5">立刻购买</a></li> <li><a href="6">联系我们</a></li> </ul> </div> CSS定义为： .test ul{list-style:none;} 说明：“.test ul

去掉超链接下划线三个简单的实例

阅读更多关于去掉超链接下划线三个简单的实例

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 去掉超链接的下划线，需要用样式表CSS来控制，如果你暂时不想深入了解CSS的概念，下面将举三个简单的实例来说明如何控制超链接的下划线。用记事本打开网页源代码(也可以先用IE打开网页，然后点击IE菜单栏的"查看→源文件")，然后弹出记事本窗口。找到<head>和</head>这两句，样式表语句就加在它们中间。如下： <html> <head> <style>a{TEXT-DECORATION:none}</style> </head><body> 一、仅仅在head与head中间加入<style>a{ TEXT-DECORATION:none }</style> 这一句就去掉超链接下划线了，这是个最简单的例子，你试着这样做就会成功的。二、上面的例子只是告诉你如何一次性去掉超链接下划线，如果你的网页当中有的超链接需要下划线，有的不需要，该怎么办呢？首先你要构思好，你的网页中的超链接大部分是有下划线的，还是没下划线的？如果大部分超链接不要下划线，就可以加入 <style> a{ TEXT-DECORATION:none }</style>这一句，然后在少数要下划线的超链接里使用这个方法，它就有下划线了： <a href=****><u>文字</a>。 ·如果大部分超链接都要下划线，就可以不要加入前面提到的这句

css 规则中两个类连在一起

阅读更多关于 css 规则中两个类连在一起

css 规则中两个类连在一起是什么意思？原文地址：http://www.cxybl.com/html/wyzz/CSS/20120601/27374.html 有一段HTML代码： <a class="glyphicons white no-js cogwheel" href="#" target="_blank"><i></i></a> 对应有CSS style: .glyphicons.white i:before { color: #fff; } .glyphicons.white:hover i:before { color: #b6ff00; } 那么出现的效果是：一个图标，齿轮是白的当鼠标移到齿轮时，齿轮变黄绿：解释一下这段CSS代码给自己听 /*当有元素同时包含 "glyphicons" 和 "white" class，并且拥有子元素<i>的时候，在<i>前面设置颜色为白色的style*/ .glyphicons.white i:before { color: #fff; } /*当有元素同时包含 "glyphicons" 和 "white" class，并且拥有子元素<i>的时候，当鼠标悬停其上，则在<i>前面设置颜色为#b6ff00(黄绿)的style*/ .glyphicons.white:hover i:before { color: #b6ff00;

订阅 text-decoration