论坛

标题: 按钮效果 [打印本页]

作者: 爰昔 时间: 2016-12-14 17:08
标题: 按钮效果
[attach]76187[/attach]

<!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">

a:link {

text-decoration: none;
background-image: url(images/beij1.jpg);
background-repeat: repeat-x;
}
a:hover {

background-image: url(images/beij2.jpg);
background-repeat: repeat-x;
}
li {
height: 50px;
width: 120px;
float: left;
list-style-type: none;
}
a {
font-family: "微软雅黑", "华文细黑";
font-size: 18px;
color: rgba(255,255,255,1);

font-weight: bold;
margin-right: 1px;
margin-left: 1px;

}
#zyj { border-radius: 15px 0px 0px 15px;
}
#yyj {
border-radius: 0px 15px 15px 0px;
}
.font01 {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
div {
margin: 50px;
}
</style>
</head>

<body>
<div>
<ul>
<li><a id="zyj" class="font01" href="#">公司简介</a></li>
<li><a href="#" class="font01">新闻动态</a></li>
<li><a href="#" class="font01">产品介绍</a></li>
<li><a href="#" class="font01">技术支持</a></li>
<li><a id="yyj" href="#" class="font01">联系我们</a></li>
</ul>
</div>
</body>
</html>

我尝试自己做了一下按钮效果，但是按钮大小一直是和文字一样大，我试着用li和a的css样式width和height控制按钮大小都不行，最后给文字做了一个四周的padding才把按钮做大了一点，但是感觉效果不怎么好，请问老师有什么方便的办法控制按钮大小吗？

作者: 潜意式 时间: 2016-12-14 18:43
li是可以定义宽高的，它是块元素。而<a>标签则是行元素，如果要定义宽高，则需要设置属性display：block转换成块元素才行。

作者: 爰昔 时间: 2016-12-14 19:04
可是li里面有背景的只有文字那么大，改变li的大小只能改变按钮之间的距离不能改变按钮大小啊，要想控制按钮大小该怎么设置呢？

欢迎光临论坛 (http://bbs.qinxue.com/)