一、div 居中问题
<body>
<div id="me"></div>
</div>
----------------------
方式一 :用margin :auto 控制
---------------------------------------------------
body{text-align:center;margin:0px;}#me{border:1px solid red;margin:0 auto;height:200px;width:600px;}
-----------------------
方式二 :用绝度位置控制
-------------------------------------------------------
#me{
border:1px solid red;
height:200px;
width:600px;
margin-left:50%;
left:-300px;
position:absolute;
top:0px;
}
二、菜单栏是每个网站都会有的,以下是效果图。用的是 ul 中的li 具体代码如下所示:
透明些的:
-------------1.横着菜单栏----------------------------------
<html> | |
<head> | |
<title> New Document </title> | |
<style> | |
ul#menu { | |
list-style:none; | |
height:24px; | |
width:850px; | |
border:1px dashed gray; | |
margin-left:50%; | |
position:absolute; | |
left:-400px; | |
padding:5px 10px; | |
background-color:#99ff66; | |
border-radius:15px; | |
} | |
ul#menu li{ | |
float:left; | |
margin-left:50px; | |
text-align:center; | |
display:inline; | |
border:0px dotted gray; | |
padding-top:2px; | |
} | |
ul#menu li a{ | |
border-radius:21px; | |
padding:0.2em 0.8em; | |
text-decoration:none; | |
font-size:14px; | |
background-color:#ccff99; | |
font-family:serif; | |
color:black; | |
} | |
ul#menu li a:hover{ | |
text-decoration:underline; | |
color:#006600; | |
font-weight:bold; | |
background-color:#99cc33; | |
font-variant:small-caps; | |
} | |
</style> | |
</head> | |
<body> | |
<ul id="menu"> | |
<li><a href="#">aa</a></li> | |
<li><a href="#">bb</a></li> | |
<li><a href="#">cc</a></li> | |
<li><a href="#">dd</a></li> | |
<li><a href="#">ee</a></li> | |
<li><a href="#">ff</a></li> | |
<li><a href="#">gg</a></li> | |
<li><a href="#">hh</a></li> | |
<li><a href="#">jj</a></li> | |
</ul> | |
</body> | |
</html> |
---------------2、 竖直菜单栏--------------------------
<html> | |
<head> | |
<title> 竖直菜单 </title> | |
<style> | |
#vmenu{ | |
border:1px solid green; | |
width:200px; | |
border-radius:15px; | |
padding-top:15px; | |
background-color:#F7F7F7; | |
} | |
#vmenu ul{ | |
list-style:none; | |
} | |
#vmenu span{ | |
border:1px dotted gray; | |
padding-left:60px; | |
padding-right:70px; | |
margin-left:15px; | |
border:1px dotted green; | |
border-radius:22px; | |
background-color:#F2FDDB; | |
} | |
#vmenu ul li{ | |
margin-top:5px; | |
position:relative; | |
text-align:center; | |
width:120px; | |
border:1px dotted #9BDF70; | |
background-color:#ffffff; | |
border-radius:20px; | |
} | |
#vmenu ul li a{ | |
text-decoration:none; | |
color:black; | |
font-size:14px; | |
font-family:serif; | |
} | |
#vmenu ul li a:hover{ | |
text-decoration:underline; | |
font-weight:bold; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="vmenu"> | |
<span >主题1</span> | |
<ul > | |
<li><a href="#">11</a></li> | |
<li><a href="#">12</a></li> | |
<li><a href="#">13</a></li> | |
<li><a href="#">14</a></li> | |
</ul> | |
<span >主题2</span> | |
<ul> | |
<li><a href="#">21</a></li> | |
<li><a href="#">22</a></li> | |
<li><a href="#">23</a></li> | |
<li><a href="#">24</a></li> | |
</ul> | |
<span >主题3</span> | |
<ul> | |
<li><a href="#">31</a></li> | |
<li><a href="#">32</a></li> | |
<li><a href="#">33</a></li> | |
<li><a href="#">34</a></li> | |
</ul> | |
</div> | |
</body> | |
</html> | |
----------------这是竖直菜单栏效果--------------------------------- | |
三、 表格的使用技巧
效果如图:
要制作一个漂亮一点的表格,你需要知道以下设置技巧。
代码如下:
<html>
<head>
<title> table</title>
<style>
#tableInfo{ /*表格外的div*/
border:1px solid blue;
padding:2px;
height:auto;
width:400px;
border-radius:13px;
margin-left:220px;
}
#info tr td{ /*给表格的列加边框*/
border:1px dotted #429fff;
}
#info{ /*表格的属性*/
width:400px;
height:auto;
border:1px solid #429fff;
text-align:center;
}
/*表格的第一行设置背景颜色*/
#info tr:nth-of-type(1) {
background-color:#96C2F1;
}
/*tr中 class 不是bg的加背景颜色*/
#info tr:not(.bg){
background-color:#EEF3F7;
}
/*按钮的相关样式*/
#doIt{
text-align:center;
}
#doIt input{
border-radius:15px;
color:green;
background-color:#F0FBEB;
font-family:serif;
}
#doIt input:hover{
background-color:#E3E197;
color:red;
}
</style>
</head>
<body>
<div id="tableInfo">
<table cellspacing=0 cellpadding=0 id="info">
<caption style="text-align:center;height:20px;text-shadow:5px 2px 6px gray; opacity:0.50;letter-spacing:10px;">学生信息列表<span style="float:right;padding-left:5px" id="hideMe">∨</span></caption>
<tr class="bg">
<td>全<input type="checkbox" name="chooseAll">选</td>
<td>学号</td>
<td>姓名</td>
<td>班级</td>
<td>成绩</td>
</tr>
<tr class="bg">
<td><input type="checkbox" name="checkMe" value="1"></td>
<td>10</td>
<td>lily</td>
<td>S62</td>
<td>99</td>
</tr>
<tr>
<td><input type="checkbox" name="checkMe" value="2"></td>
<td>11</td>
<td>lucy</td>
<td>S72</td>
<td>94</td>
</tr>
<tr class="bg">
<td><input type="checkbox" name="checkMe" value="3"></td>
<td>21</td>
<td>gary</td>
<td>S63</td>
<td>93</td>
</tr>
<tr>
<td><input type="checkbox" name="checkMe" value="4"></td>
<td>31</td>
<td>small</td>
<td>S54</td>
<td>94</td>
</tr>
<tr class="bg">
<td><input type="checkbox" name="checkMe" value="5"></td>
<td>41</td>
<td>jimy</td>
<td>S42</td>
<td>88</td>
</tr>
<tr>
<td><input type="checkbox" name="checkMe" value="6"></td>
<td>51</td>
<td>jack</td>
<td>S52</td>
<td>89</td>
</tr>
</table>
<div id="doIt">
<input type="button" value="添加" >
<input type="button" value="删除">
<input type="button" value="修改" >
</div>
</div>
<pre>
<font color=black size=4>
注明:
text-shadow:设置阴影
letter-spacing:设置字体直接的间隔
opacity:设置透明度
#info tr:nth-of-type(1): 设置的是引用id=info 的表格的 第一行的的样式
#info tr:not(.bg):设置表格的没有引用class=bg 的行 的样式
cellpadding=0 是设置表格的单元格的内间距。
cellspacing=0 是设置单元格和单元格之间的距离。
</font>
</pre>
</body>
</html>