CSS——灯箱广告

最新推荐文章于 2020-09-29 12:35:59 发布

Zjaun

最新推荐文章于 2020-09-29 12:35:59 发布

阅读量479

点赞数

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

本文链接：https://blog.csdn.net/Zjaun/article/details/87166081

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

将css样式编写在另一个文件再引入，更加便于修改以及增加代码的观赏性

在头部中引入需要的css样式文件

<link href="one.css" type=text/css rel=stylesheet>

具体css样式

/*灯箱外框样式*/
.pic_box{
	border:solid 6px #bbb;
	position:relative;
	float:left;
	}
.pic_box img{
	width:500px;
	border:solid 1px #fff;
	}
/*导航框样式*/
.nav{
	background:#999;
	border:1px solid #ccc;
	padding:4px 12px;
	float:left;
	opacity:0.6;
	position:absolute;
	bottom:6px;
	right:12px;
	}
/*导航按钮样式*/
.nav a{
	float:left;
	display:block;
	height:20px;
	line-height:20px;
	width:20px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	text-align:center;
	background:#f36;
	color:green;
	margin-right:5px;
	text-decoration:none;
	}
.nav a:hover{
	background:green;
	color:#fff;
	}

在主体中编写代码

<body>
	<div class="pic_box">
		<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1550025854&di=bcfaf634ff5ee6371286834bf0d308c3&src=http://img15.3lian.com/2015/f2/57/d/93.jpg" />
		<div class="nav">
			<a href="#1" class="links item first" title="w3cplus" target="_blank" id="first">1</a>
			<a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a>
			<a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a>
			<a href="#4" class="links item" target="_blank" lang="zh-tw">4</a>
			<a href="#5" class="links item" title="zh-cn">5</a>
			<a href="#6" class="links item" title="website link" lang="zh">6</a>
			<a href="#7" class="links item" title="open the website" lang="cn">7</a>
			<a href="#8" class="links item" title="close the website" lang="en-zh">8</a>
			<a href="#9" class="links item" title="https://www.baidu.com">9</a>
			<a href="#10" class="links item last" id="last">10</a>
		</div>
	</div>		
</body>

在这里插入图片描述
鼠标滑过改变样式

Zjaun

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS——灯箱广告

将css样式编写在另一个文件再引入，更加便于修改以及增加代码的观赏性在头部中引入需要的css样式文件&amp;lt;link href=&quot;one.css&quot; type=text/css rel=stylesheet&amp;gt;具体css样式/*灯箱外框样式*/.pic_box{ border:solid 6px #bbb; position:relative; float:left; }....
复制链接

扫一扫