387day(背景，边框复习,新浪导航栏实例)

CSS样式与新浪导航栏设计

最新推荐文章于 2024-07-07 17:05:32 发布

orangecloudy

最新推荐文章于 2024-07-07 17:05:32 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/orangecloudy/article/details/83352624

本文详细介绍了如何使用CSS进行背景与边框的设置，包括颜色透明度、边框样式的调整，并通过实例展示了新浪导航栏的设计过程，涵盖了高度、内边距、文字装饰等属性的应用。

《2018年10月24日》【连续387天】

标题：背景，边框复习,新浪导航栏实例；

内容：

div {
	height: 100px;
	width: 100px;
	background: rgba(0,0,0,0.6);
	/*red green blue alpha 0~1*/
	border: 1px dashed red;
	/*solid dotted*/
}

table ,td {
	border-collapse: collapse;
	/*合并相邻边框*/
}

实例练习：

<div class="nav">
		<a href="#">设为首页
		</a>
		<a href="#">手机新浪网
		</a>
		<a href="#">移动客户端
		</a>
</div>

.nav {
	height: 50px;
	border-top: 3px solid #FF8500;
	border-bottom: 1px solid #EDEEF0;
	background-color: #FCFCFC;
}

.nav a {
	height: 50px;
	line-height: 50px;
	display: inline-block;
	color: #4c4c4c;
	text-decoration: none;
	padding-left: 18px;
	padding-right: 18px;
	font-size: 14px;

}

.nav a:hover {
	background-color: #edeef0;
	color: #ff8400
}