不用图像文件的圆角解决--跳起按钮制作（html）

不用图像文件的圆角解决方法

<!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-Type" content="text/html; charset=utf-8" />
<title>不用图像文件的圆角解决方法</title>
<style type="text/css">
ul{
    height:26px;
    margin:0;
    padding:10px;
    list-style-type:none;
    background:#ddd;
}

.item{
    float:left;
    width:100px;
    margin:0 -1px 0 0;
    padding 0;
    font: 14px Arial;
    font-weight:bold;
    }

.item p{
    padding:0 0 2px 0;
    margin:0px;
    text-align:center;
    background:#cc6;
    border:solid 1px  #000;
    border-top-width:0;
}

.item div{
    height:1px;
    overflow:hidden;
    background:#cc6;
    border-left:solid 1px  #000;
    border-right:solid 1px  #000;
}

.item .pad{
    height:10px;
    border:0;
    background:transparent;
}

.item .row1{
    margin:0 5px;
    background:#000;
}

.item  .row2{
    margin:0 3px;
    border:0 2px;
}

.item .row3{
    margin:0 2px;
}
.item .row4{
    margin:0 1px;
    height:2px;
}

.item a , .item a:visted{
    display:block;
    color:#000;
    text-decoration:none;
}

.item a:hover{
    background:transparent;
}

.item a:hover p{
    background:#884;
    color:#fff;
    padding-bottom:12px;
}

.item a:hover .pad{
    height:0px;
}

.item a:hover .row2,
.item a:hover .row3 ,
.item a:hover .row4{
    background:#884;
}

</style>
</head>

<body>
<ul>
    <li class="item"><a href="#">
      <div class="pad"></div>
      <div class="row1"></div> <div class="row2"></div>
      <div class="row3"></div> <div class="row4"></div>
      <p>Home</p>
    </a>
    </li>
    <li class="item"><a href="#">
      <div class="pad"></div>
      <div class="row1"></div> <div class="row2"></div>
      <div class="row3"></div> <div class="row4"></div>
      <p>Contact Us</p>
    </a>
    </li>
    <li class="item"><a href="#">
      <div class="pad"></div>
      <div class="row1"></div> <div class="row2"></div>
      <div class="row3"></div> <div class="row4"></div>
      <p>Web Dev</p>
    </a>
    </li>
    <li class="item"><a href="#">
      <div class="pad"></div>
      <div class="row1"></div> <div class="row2"></div>
      <div class="row3"></div> <div class="row4"></div>
      <p>Map</p>
    </a>
    </li>
</ul>
</body>

</html>

  • Home

  •  

    Contact Us

  •  

    Web Dev

  •  

    Map

时间： 2024-11-09 23:27:12

不用图像文件的圆角解决--跳起按钮制作（html）的相关文章

超漂亮的CSS3按钮制作教程分享

要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 利用CSS3属性制作按钮,我们只需要用到Gradient属性,不用使用任何图片素材和JavaScript代码,仅仅通过CSS就能制作出好看的渐变按钮.按钮的大小可以通过CSS属性就能轻松的修改,而且它可以使用html的很多标签来制作,比如div,button,span,a,input[‘submit’]等等.下列案例就是通过CSS3制作的按

圆角边框以及阴影制作卡片式图片 - 学习笔记

圆角边框以及阴影制作卡片式图片 圆角边框 border-radius 卡片使用阴影 box-shadow 利用阴影给图片底部创造一个长方形 内部的元素会直接覆盖整个阴影 HTML 部分 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>卡片式图片&l

纯CSS3彩色边线3D立体按钮制作教程

今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示效果,而且我们把制作教程也分享出来,首先来看看效果图: 我们也可以在这里看到这些按钮的DEMO演示. 接下来就来分享一下制作教程以及源代码,按钮的源代码主要由HTML和CSS两部分代码组成,先来看看HTML代码: <button class="blue"> <div class="wrapper"

如何不用border-radius 写圆角边框

html代码:<div class="items"> <--上面的圆角边框--> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b

收藏按钮制作方法

收藏按钮制作方法: 1 使用togglebutton 2 制定selector_like.xml 注意togglebutton对应的是state_checked属性 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:stat

iOS之分别使用代码和storyboard、xib为控件设置圆角（以按钮为例）

首先我们看一下代码是如何给按钮设置圆角的: 我们再来看看如何在storyboard或xib中给按钮设置圆角: 1.在storyboard或xib中添加按钮后,设置标题和背景色,做好约束: 2.点击 Show the identity inspector 按钮:按钮位置如下图所示: 3.然后在User Defined Runtime Attributes 栏为按钮添加layer.cornerRadius属性,类型为Number,根据需求设置一个Value值.如下图所示: 4.到这里基本完成了对按钮

解决Inno Setup制作安装包无法创建桌面快捷方式的问题

转自:http://yedward.net/?id=104 昨天想把个java程序做成exe安装软件,然后就去下载了Inno Setup这个软件安装包制作软件,Inno Setup这个软件确实非常好用,但是由于我下载的中文汉化版,根据向导一步步来就是不创建桌面快捷方式,折腾了很久,终于找到了解决方法. 下面是我使用Inno Setup打包软件后自动生成的一段代码: 1 2 3 [Tasks] Name: "desktopicon"; Description: "{cm:Cre

Windows Phone 8.1 Path按钮制作分享

前言 经常在博客园看大家的文章,由于本人文笔太烂,没写过博客和小伙伴们分享过,昨天看到安卓同事做的那个按钮比较不错,就想着也做个.现在把过程写出来,请大家不吝赐教(第一次发博客不会排版...)大家凑合看吧 开始 一般要做动画之前,习惯用blend先做个动画,因为blend做动画很快,可以方便的看到动画的效果,待动画调试差不多的时,用vs打开 (一个展开的动画和一个收回的动画,其实设置下Storyboard的AutoReverse属性可以自动执行收回的动画但是过程没办法控制,只能写两个动画分开)

sharp圆角不同时的处理方式(上圆角),解决Different corner sizes are not supported in Path.addRoundRect

写一个对话框,UI要求实现这个背景,使用sharp实现,顶部背景上面有圆角,下面没有圆角,so easy!,新建sharp文件 将corners上面的设置为8dp,下面设置为0,结果报错:Different corner sizes are not supported in Path.addRoundRect, 解决方法:采用layer-list实现,就是两张图片叠加覆盖掉下面的圆角 <?xml version="1.0" encoding="utf-8"?&