CSS精通（菜单、表格、div、居中）

最新推荐文章于 2023-01-11 19:04:11 发布

高颖同学

最新推荐文章于 2023-01-11 19:04:11 发布

阅读量1.3k

点赞数

分类专栏： java-前端文章标签： css 菜单表格居中 div居中

本文链接：https://blog.csdn.net/qgy1994/article/details/16919457

版权

java-前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、div 居中问题

<body>

</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>

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

</tr>

<tr>

</tr>

</tr>

<tr>

<td>small</td>

</tr>

</tr>

<tr>

</tr>

</table>

</div>

<pre>

注明：

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>

高颖同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS精通（菜单、表格、div、居中）

一、div 居中问题 ----------------------方式一：用margin :auto 控制--------------------------------------------------- body{ text-align:center;margin:0px; } #me{ border:1px
复制链接

扫一扫

专栏目录