CSS样式 让表格边框变细 再给定一个边框颜色。

CSS样式 让表格边框变细 再给定一个边框颜色。,第1张

我喜欢用CSS+DIV, 代码整洁易修改,易控制,而且代码可以跟HTML标签分离,放到一个独立的文件夹中,可以被多个页面同时引用。CSS代码:<style type="text/css">

{

margin:0px;

padding:0px;

font-size:18px;

}

#user{

height: 20px;

width: 150px;

}

#pwd {

height: 20px;

width: 150px;

margin-left: 17px;

}

#cont {

height: auto;

width: 300px;

background-color:#feccff;

margin:50px auto;

}

form{

display:block;

padding:5px;

border: 1px solid #090;

}

center input{

font-size:16px;

}

</style> HTML代码:<div class="cont" id="cont">

<form action="" method="post">

用户名:<input id="user" name="user" type="text" value="" />

密码:<input id="pwd" name="pwd" type="password" />

<center> <input name="" type="submit" value="提交" /> <input name="" type="reset" value="重置" /></center>

</form>

</div>

建议先学习下CSS基础

问题很简单,在你要控制的元素最外一层元素增加 ID=XXX

并且写内部所有元素样式前都加上 #XXX,这样就被局部化了

如:

<div id=abc><ul><li></li></ul></div>

#abc{这里控制 DIV}

#abc ul{这里控制 ul}

#abc li{这里控制 li}

并不影响ABC以外 的元素,但是ABC会继承父类会全局的样式

您好!以下是最典型的细线表格,具备最基本的设置。供参考:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>表格CSS设置</title>

<style>

#tb1 {

    border-collapse: collapse; / 折叠边框产生细线表格/

    border: 2px solid black;   / 外框粗线、内部细线表格,表格线为黑色 /

}

#tb2 {

    border-collapse: collapse; / 折叠边框产生细线表格/

    border: 1px solid red;     / 细线表格,表格线为红色 /

}

</style>

</head>

<body>

<br>

<table id="tb1" width="379" height="87" border="1" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td width="123" height="34">&nbsp;</td>

      <td width="122">&nbsp;</td>

      <td width="126">&nbsp;</td>

    </tr>

    <tr>

      <td height="25">&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

    </tr>

    <tr>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

    </tr>

  </tbody>

</table>

<br>

<table id="tb2" width="379" height="89" border="1" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td width="123" height="36">&nbsp;</td>

      <td width="122">&nbsp;</td>

      <td width="126">&nbsp;</td>

    </tr>

    <tr>

      <td height="25">&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

    </tr>

    <tr>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

    </tr>

  </tbody>

</table>

</body>

</html>

显示结果:

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11668956.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存