css 样式，怎样控制下划线长度 30

<html><head><metacharset="utf-8"><title>外婆家私房菜:账户管理</title><styletype="text/css">#tit... <html>
<head>
<meta charset="utf-8">
<title>外婆家私房菜:账户管理</title>
<style type="text/css">
#title {
margin: 0px;
width: 100%;
height: 45px;
background-color: #d9d9d9;
}
#text {
margin: 0px;
line-height: 40px;
font-size: 22px;
font-weight: 700;
font-family: Microsoft YaHei, Arial;
color: #444;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}
body {
margin: 0px;
}
.row {
border-bottom: 3px solid #999999 ;
height: 20px;
}
input[type=checkbox ] {
transform: scale(1.5);
-webkit-transform: scale(1.5);
}

</style>

</head>

<body>
<div id="title">
<center><span id="text">外婆家私房菜:账户管理</span></center>
</div>
<table width="100%" border="0" cellpadding="10" cellspacing="0" id="table">
<tr class="row">
<th width="20%" align="left" valign="middle" class="row"><form>
<input type="checkbox" name="ol">
</form>
</th>
<th width="30%" align="left" class="row">序号</th>
<th width="20%" align="left" class="row">帐号名</th>
<th width="30%" align="left" class="row">类型</th>
</tr>

</table>
</body>
</html> 展开

 我来答

4个回答

#热议# 应届生在签三方时要注意什么？

天生丶无双
2019-02-26 · TA获得超过165个赞

知道答主

回答量：4

采纳率：0%

帮助的人：3280

我也去答题访问个人页

关注

展开全部

其实可以写个div，给div的下边框加上线条，控制div的长度就可以了

.token {
    width: 300px;
    border-bottom: 1px solid black;
}
<div class="token">外婆家私房菜:账户管理</div>

已赞过 已踩过<

评论收起

百度网友e3ce692
2014-08-17 · TA获得超过156个赞

知道小有建树答主

回答量：215

采纳率：100%

帮助的人：192万

我也去答题访问个人页

关注

展开全部

加div，把有下划线的那几个字放在<div class=“有下划线的样式”>这里</div>，

本回答被网友采纳

已赞过已踩过<

你对这个回答的评价是？
评论收起

百度网友e7c814e
2018-06-07

知道答主

回答量：3

采纳率：0%

帮助的人：2466

我也去答题访问个人页

关注

引用du瓶邪的回答：
　　静态下划线
　　a#example4a {
text-decoration: none;
background: url(’/pic/20069/200696144112132.gif’) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 10px
}
　　浮动花朵效果下划线
　　a#example4b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 10px;
}
　　a#example4b:hover {
background: url(’/pic/20069/200696144112132.gif’) repeat-x 100% 100%;
}
　　静态箭头下划线
　　a#example1a {
text-decoration: none;
background: url(’/pic/20069/200696144112997.gif’) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 5px
}
　
　　浮动动画箭头下划线（这里箭头会出现滚动，不过这一滚动图片的效果只在部分浏览器中看得到）
　　a#example2b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 5px;
}
　　a#example2b:hover {
background: url(’/pic/20069/200696144113188.gif’) repeat-x 100% 100%;
}

实现链接的虚线下划线效果
a {
color:#3399FF;
font-weight:Normal;
text-decoration:none;
}
　　a:hover {
color:#4499EE;
text-decoration:none;
border-bottom: 1px #0099CC dotted
}
　　a{}控制连接的效果 a:hover{}控制鼠标移上去的效果。

展开全部

你说的啥子东西！

已赞过 已踩过<

评论收起

du瓶邪
推荐于2016-09-10 · TA获得超过2.4万个赞

知道大有可为答主

回答量：1.7万

采纳率：100%

帮助的人：2984万

我也去答题访问个人页

关注

展开全部

　　静态下划线
　　a#example4a {
text-decoration: none;
background: url(’/pic/20069/200696144112132.gif’) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 10px
}
　　浮动花朵效果下划线
　　a#example4b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 10px;
}
　　a#example4b:hover {
background: url(’/pic/20069/200696144112132.gif’) repeat-x 100% 100%;
}
　　静态箭头下划线
　　a#example1a {
text-decoration: none;
background: url(’/pic/20069/200696144112997.gif’) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 5px
}
　
　　浮动动画箭头下划线（这里箭头会出现滚动，不过这一滚动图片的效果只在部分浏览器中看得到）
　　a#example2b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 5px;
}
　　a#example2b:hover {
background: url(’/pic/20069/200696144113188.gif’) repeat-x 100% 100%;
}

实现链接的虚线下划线效果
a {
color:#3399FF;
font-weight:Normal;
text-decoration:none;
}
　　a:hover {
color:#4499EE;
text-decoration:none;
border-bottom: 1px #0099CC dotted
}
　　a{}控制连接的效果 a:hover{}控制鼠标移上去的效果。

已赞过 已踩过<

评论收起

2条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

css 样式，怎样控制下划线长度 30

其他类似问题

为你推荐：