• 响应式九宫格


    <!DOCTYPE html>

    <html>

    <head>

    <title>html5响应式九宫格</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

    <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <meta name="format-detection" content="telephone=no" />

    <meta charset="utf-8" />

    <style type="text/css">

    htmlbody color:#222font-family:Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serifmargin:0padding: 0text-decoration: none} img border:0} ul list-style: none outside nonemargin:0padding: 0}

    body background-color:#eee}

    body .mainmenu:after clear: bothcontent: " "display: block} body .mainmenu lifloat:leftmargin-left: 2.5%margin-top: 2.5%width: 30%border-radius:3pxoverflow:hidden} body .mainmenu li adisplay:blockcolor:#FFFtext-align:center }

    body .mainmenu li a bdisplay:blockheight:80px}body.mainmenuliaimgmargin:15px auto 15pxwidth:50pxheight:50px}body.mainmenuliaspandisplay:blockheight:30pxline-height:30px;background-color:#FFFcolor:#999font-size:14px}

    body.mainmenuli:nth-child(8n+1){background-color:#36A1DBbody.mainmenuli:nth-child(8n+2){background-color:#678ce1body.mainmenuli:nth-child(8n+3){background-color:#8c67dfbody.mainmenuli:nth-child(8n+4){background-color:#84d018}

    body.mainmenuli:nth-child(8n+5){background-color:#14c760body.mainmenuli:nth-child(8n+6){background-color:#f3b613body.mainmenuli:nth-child(8n+7){background-color:#ff8a4abody.mainmenuli:nth-child(8n+8){background-color:#fc5366}

    </style>

    </head>

    <body<ulclass="mainmenu"<li><ahref="/"<b><imgsrc="images/tb01.png"/> </b><span>关于我们</span></a></li<li><ahref="/"<b><imgsrc="images/tb02.png"/> </b><span>新闻中心</span></a></li<li><ahref="/"<b>

    <imgsrc="images/tb03.png"/> </b><span>产品展示</span></a></li<li><ahref="/"<b><imgsrc="images/tb04.png"/> </b><span>成功案例</span></a></li<li><ahref="/"<b><imgsrc="images/tb05.png"/> </b><span>下载中心</span></a></li>

    <li><ahref="/"<b><imgsrc="images/tb06.png"/> </b><span>团队介绍</span></a></li<li><ahref="/"<b><imgsrc="images/tb06.png"/> </b><span>人才招聘</span></a></li>

    <li><ahref="/"<b><imgsrc="images/tb07.png"/> </b><span>联系我们</span></a></li<li><ahref="/"<b><imgsrc="images/tb08.png"/> </b><span>在线留言</span></a></li</ul

    </body>

    </html>

  • 相关阅读:
    云开发数据库 Firebase Firestore 零基础入门视频实战教程(7 个视频)
    在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
    2021 年写 JavaScript 代码的 17 个优化技巧
    Redis 学习笔记系列文章之 Redis 的安装与配置 (一)
    selenium webdriver 删除元素
    FFT板子
    pytest一:运行几个简单的测试用例终端显示的信息
    JS 日期取年月日
    将博客搬至CSDN
    c语言编译器
  • 原文地址:https://www.cnblogs.com/zxadndm/p/11839784.html
Copyright © 2020-2023  润新知