（3）CSS小例子（工具栏）（终）

最新推荐文章于 2022-01-17 07:00:00 发布

书文的学习记录本

最新推荐文章于 2022-01-17 07:00:00 发布

阅读量438

点赞数

分类专栏：前后端学习文章标签： css

本文链接：https://blog.csdn.net/qq_43935969/article/details/104405053

版权

前后端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

制作一个类似的工具栏

制作效果如下：

附上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		
		ul{
			list-style-type: none;/*去掉前面的小圆点*/
		}
		a{
			background-color: cornflowerblue;/*设置背景颜色*/
			float:left;/*设置横着排列*/
			text-decoration: none;/*去掉链接的下划线*/
			border: 1px solid whitesmoke;/*设置外边框*/
			padding: 20px 50px;
			font-size: 20px;/*设置字体大小*/
				color: whitesmoke;/*设置字体颜色*/
			font-family:"楷体";/*设置字体*/
		}
		a:hover{
			background: aquamarine;
		}
	</style>
	<body>
		<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>
	</body>
</html>

书文的学习记录本

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（3）CSS小例子（工具栏）（终）

制作一个类似的工具栏制作效果如下：附上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> ...
复制链接

扫一扫