AIAXC资源网是全网免费网络资源分享平台

  • 首页
  • HTML
  • CSS响应式九宫格布局效果-HTML代码教学素材

CSS响应式九宫格布局效果-HTML代码教学素材

AIAXC 2018-12-1 14:35 HTML

效果图如下:

20181201143458.png

代码如下:

<ul class="mainmenu">
    <li><a><b><img src="http://www.sucainiu.com/themes/images/demo/500x500-1.png"></b><span>关于我们</span></a></li>
    <li><a><b><img src="http://www.sucainiu.com/themes/images/demo/500x500-2.png"></b><span>新闻中心</span></a></li>
    <li><a><b><img src="http://www.sucainiu.com/themes/images/demo/500x500-3.png"></b><span>产品展示</span></a></li>
    <li><a><b><img src="http://www.sucainiu.com/themes/images/demo/500x500-4.png"></b><span>成功案例</span></a></li>
    <li><a><b><img src="http://www.sucainiu.com/themes/images/demo/500x500-5.png"></b><span>下载中心</span></a></li>
    <li><a><b><img src="http://www.sucainiu.com/themes/images/demo/500x500-6.png"></b><span>团队介绍</span></a></li>
    <li><a><b><img src="http://www.sucainiu.com/themes/images/demo/500x500-7.png"></b><span>人才招聘</span></a></li>
    <li><a><b><img src="http://www.sucainiu.com/themes/images/demo/500x500-8.png"></b><span>联系我们</span></a></li>
    <li><a><b><img src="http://www.sucainiu.com/themes/images/demo/500x500-9.png"></b><span>在线留言</span></a></li>
</ul>
<style>
html,body {
	color:#222;
	font-family:Microsoft YaHei,Helvitica,Verdana,Tohoma,Arial,san-serif;
	margin:0;
	padding:0;
	text-decoration:none;
}
img {
	border:0;
}
ul {
	list-style:none outside none;
	margin:0;
	padding:0;
}
body {
	background-color:#eee;
}
body .mainmenu:after {
	clear:both;
	content:" ";
	display:block;
}
body .mainmenu li {
	float:left;
	margin-left:2.5%;
	margin-top:2.5%;
	width:30%;
	border-radius:3px;
	overflow:hidden;
}
body .mainmenu li a {
	display:block;
	color:#FFF;
	text-align:center
}
body .mainmenu li a b {
	display:block;
	height:80px;
}
body .mainmenu li a img {
	margin:15px auto 15px;
	width:50px;
	height:50px;
}
body .mainmenu li a span {
	display:block;
	height:30px;
	line-height:30px;
	background-color:#FFF;
	color:#999;
	font-size:14px;
}
body .mainmenu li:nth-child(8n+1) {
	background-color:#36A1DB
}
body .mainmenu li:nth-child(8n+2) {
	background-color:#678ce1
}
body .mainmenu li:nth-child(8n+3) {
	background-color:#8c67df
}
body .mainmenu li:nth-child(8n+4) {
	background-color:#84d018
}
body .mainmenu li:nth-child(8n+5) {
	background-color:#14c760
}
body .mainmenu li:nth-child(8n+6) {
	background-color:#f3b613
}
body .mainmenu li:nth-child(8n+7) {
	background-color:#ff8a4a
}
body .mainmenu li:nth-child(8n+8) {
	background-color:#fc5366
}
</style>

AIAXC资源网-版权声明

1  除非特别注明,文章均为【AIAXC在线网】转载时请注明来源

百度已收录[点击提交]

2  本文标题:【CSS响应式九宫格布局效果-HTML代码教学素材】
3  本文衔接:https://www.aiaxc.cn/post-1842.html  
温馨提示评论广告骗子居多,切勿私下进行交易,近期多人被骗拉黑!

发表评论:

尊敬的用户您好,请登录帐号后再来发布评论吧!