gpt4 book ai didi

asp.net - 修改 CSS 文件以适合我的 asp.net 页面

转载 作者:行者123 更新时间:2023-11-28 12:25:28 26 4
gpt4 key购买 nike

我在搜索如何在不使用图像的情况下创建选项卡时找到了一个 CSS 文件。我遇到了CSS Tabs 2.0

这符合我的目的。
但是,现在我需要对其进行自定义以适合我的 asp.net 页面,但我似乎无处可去。
CSS 文件使用 <ul和一个 <li
我正在使用带有 <tr> 的表格和 <td>

这是示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Tabs | unraveled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- CSS Tabs is licensed under Creative Commons Attribution 3.0 - http://creativecommons.org/licenses/by/3.0/ -->

<style type="text/css">

/* begin css tabs */

ul#tabnav { /* general settings */
text-align: left; /* set to left, right or center */
margin: 1em 0 1em 0; /* set margins as desired */
font: bold 11px verdana, arial, sans-serif; /* set font as desired */
border-bottom: 1px solid #6c6; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */
}

ul#tabnav li { /* do not change */
display: inline;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

ul#tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #6c6; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #cfc; /* set unselected tab background color as desired */
color: #666; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
}

ul#tabnav a:hover { /* settings for hover effect */
background: #fff; /* set desired hover color */
}

/* end css tabs */

</style>
</head>

<body id="tab1">

<p><a href="/publications/css_tabs/">&#8592; Introduction</a></p>

<h1>CSS Tabs 2.0</h1>

<ul id="tabnav">
<li class="tab1"><a href="index.html">Tab One</a></li>
<li class="tab2"><a href="index2.html">Tab Two</a></li>
<li class="tab3"><a href="index3.html">Tab Three</a></li>
<li class="tab4"><a href="index4.html">Tab Four</a></li>

</ul>

<p>CSS Tabs is licensed under <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a>.</p>

<p>Joshua Kaufman, <a href="/">unraveled</a><br />
28 January, 2007</p>

<a href="css_tabs_v1.html">Looking for CSS Tabs 1.0?</a>
</body>
</html>

这是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

/* begin css tabs */

ul#tabnav { /* general settings */
text-align: left; /* set to left, right or center */
margin: 1em 0 1em 0; /* set margins as desired */
font: bold 11px verdana, arial, sans-serif; /* set font as desired */
border-bottom: 1px solid #6c6; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */
}

ul#tabnav li { /* do not change */
display: inline;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #cc6666; /* set background color to match above border color */
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

ul#tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #6c6; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #ffffff; /* set unselected tab background color as desired */
color: #666; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
}

ul#tabnav a:hover { /* settings for hover effect */
background: #cc6600; /* set desired hover color */
}

/* end css tabs */

</style>
</head>


<table cellspacing="0" cellpadding="0" border="0" ID="Table1">
<tr>
<td width="15"></td>
<td valign="bottom">
<%--Generate Home Tab--%>
<table cellspacing="0" cellpadding="10" border="0" ID="Table0">
<tr>
<td></td>
<td><div align="center" class="tab1"><a href="index.aspx">Home</a></div></td>
<td></td>
</tr>
</table>
</td>
<td width="3"></td>
<td>
<%--Generate CRM Tab--%>
<table cellspacing="0" cellpadding="0" border="0" ID="Table1">
<tr>
<td></td>
<td><div align="center" id="Contact"><a href="Contact.aspx" class="Tab2" id="tabnav" title="Contact">Contact</a></div></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>

如果有人帮助我在代码中使用选项卡,我将不胜感激。

最佳答案

如果您使用 jQuery UI 选项卡,这些工作已经为您完成:

http://jqueryui.com/demos/tabs/

关于asp.net - 修改 CSS 文件以适合我的 asp.net 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7155514/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com