CSS滑动门圆角

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS滑动门圆角</title>

<style type="text/css">

.huadong{ width:500px; border:1px solid #ccc;  line-height:50px; padding-top:20px;}

.huadong .title{ width:100px; padding-left:16px; background:url(images/huadong.png) no-repeat 0 0; }

.huadong .hd{ padding-right:16px; background:#fff url(images/huadong.png) no-repeat 100% 0; font-size:14px; color:#333;}

</style>

</head>

<body>

<div>

<div>

<div>

<h2>title</h2>

</div>

</div>

<div></div>

</div>

</body>

</html>

CSS滑动门圆角

时间： 2024-10-09 08:46:16

CSS滑动门圆角的相关文章

css滑动门制作圆角按钮

之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式. 效果展示:http://runjs.cn/detail/evk8nkc8 先上传要用的两张图片吧.              btnBg.png                                                      bg.png <!doctype html>

CSS——滑动门

在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利用的是字体的宽度,在加上padding进行调整. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="te

一款经典简洁的CSS滑动门代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

css滑动门技术

双重滑动门效果还是比较常用的,其实很好理解: 两个门就好比两个块级的元素重合所形成的效果,看一段代码如下: #Mydoor ul li a:hover{ color:#fff; //设置背景 黑色 background: url(hover.gif); //设置背景 图片,图片周边应为透明,这样才能把背景衬托出来 } 可以看到左侧变化如下 /* *将连接a下的内容变为块级:给右边一个宽度 */ #Mydoor ul li a b{ display:block; //设置为块元素 padding:

11.4 “5图形”二维滑动门经典圆角框

11.3节介绍的不固定宽度的圆角框制作方法只适用于单色的圆角框,对于带有复杂边框的圆角框就不适用了. 另外,还需要考虑一个问题,用11.3节介绍的方法制作的圆角框,尽管可以适应不同宽度,但是它里面的正文段落也承担了设置圆角框布局的任务.也就是说,圆角框中的正文并不是独立的,正文内容不能自由地设置样式.这对于通用型的网页来说,局限性很大:例如,如果较为复杂的页面,每个圆角框用于放置不同的栏目,希望达到的目标应该是可以在每个圆角框中放置任何内容,并且可以对这些内容设置样式,还能保证圆角框本身显示正确

一款CSS+JS+DIV制作的蓝色风格tab滑动门

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>一款CSS+JS+DIV制作的蓝色风格ta

[CSS]三层嵌套的滑动门

原理: 最外层放水平平铺的背景,第二层放左边,第三层放右边,注意这个做法背景图不能透明 结构: <div class="module-title"> <span class="left"> <span class="right"></span> </span> </div> 样式: .module-title {    height:33px;    background:

【前端】css自适应宽度滑动门菜单

html     css    width  自适应 什么是CSS自适应宽度滑动门菜单? CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽,就拿下边的实例来说,是按4个字的宽度来设计的,如果其中一项为5个字或更多,就放不下了.那么我们就需要让它的宽度可以随着内容的增减而变化,这就是css自适应宽度菜单.         自适应宽度按钮的效果是怎样的呢? 那么,自适应宽度按钮,是怎么实现的呢? 要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,分别在a上和span上设置背景,一

CSS如何实现滑动门效果

CSS如何实现滑动门效果:所谓的滑动门和tab选项卡其实是一个意思,下面就通过实例介绍一下如何实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <meta name="key