css小实例

最新推荐文章于 2024-08-15 23:19:32 发布

牧屿秭归

最新推荐文章于 2024-08-15 23:19:32 发布

阅读量281

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Zero_ying/article/details/95079764

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

界面运行效果如下所示：

界面代码如下：

由于系统会为某些元素设置默认的margin值或者padding值，所以先要清除所有元素的margin和padding值。即：*{margin 0； padding 0；}；此外还要将<li>标签中的list-style设为none。对于box1，只给了高度height的值是因为对于浏览器来说，不写宽度就默认从浏览器的最左边到最右边。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
ul li {
	list-style: none;
}
.box1 {
	height: 60px;
	background: #000;
}

父元素的高度可以由子元素撑起来；margin: 0 auto;使块元素在父元素或浏览器中居中；为了使<ul>列表中所有的元素在一行中显示，可以设置float:left属性，需要注意的是当子元素都浮动起来，父元素会发生高度塌陷，解决方法是在父元素中设置overflow: hidden;属性。

.box1 ul {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}
.box1 ul li {
	float: left;
	border-right: 1px #eee solid;
}

由于a 是行内元素，所以需要display:block;否则设置的宽高都是无效的

.box1 ul li a {
	display: block;
	width: 119px;
	height: 60px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	line-height: 60px;
}

从图中可以看到，每个<li>标签中的内容之间有一条白色的线，可以通过设置每个<li>标签的右边框获得。需要注意的是边框占1px的宽度所以需要将每个<li>标签的宽度减1。如果每一个<li>标签都设置右边框的话那么最后一个<li>标签也有边框，但是我们在图片中看到最后一个标签是没有的。可以将最后一个<li>标签定义一个class，取名为last，设置border-right: none;

.box1 ul li.last {
	border-right: none;
}
</style>
</head>

<body>
<div class="box1">
  <ul>
    <li><a href="#">信息查询</a></li>
    <li><a href="#">课表查询</a></li>
    <li><a href="#">教务系统</a></li>
    <li><a href="#">支付平台</a></li>
    <li><a href="#">成绩查询</a></li>
    <li><a href="#">院系部门</a></li>
    <li><a href="#">教师信息</a></li>
    <li><a href="#">报名系统</a></li>
  </ul>
</div>
</body>
</html>