首页 > 分享 > 宠物秀简洁大气html5响应式模板

宠物秀简洁大气html5响应式模板

萌宠菠菠乐园
2024-10-29 15:51

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="css/amazeui.min.css"> <link rel="stylesheet" href="css/petshow.css?6"> <link rel="stylesheet" href="css/animate.min.css"> <script src="js/jquery.min.js"></script> <script src="js/amazeui.min.js"></script> <script src="js/amazeui.lazyload.min.js"></script> </head> <body> <header class="am-topbar am-topbar-inverse"> <div class="amz-container"> <h1 class="am-topbar-brand"> <a href="#" class="am-topbar-logo"> <img src="img/logo.png?1" alt=""> </a> </h1> <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse-5'}"> <span class="am-sr-only"> 导航切换 </span> <span class="am-icon-bars"> </span> </button> <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse-5"> <ul class="am-nav am-nav-pills am-topbar-nav"> <li class="am-active"> <a href="#"> 首页 </a> </li> <li class="am-dropdown" data-am-dropdown=""> <a class="am-dropdown-toggle" data-am-dropdown-toggle="" href="javascript:;"> 发现萌宠 <span class="am-icon-caret-down"> </span> </a> <ul class="am-dropdown-content"> <li> <a href="#"> 编辑推荐 </a> </li> <li> <a href="#"> 人气排行 </a> </li> <li> <a href="#"> 最新发布 </a> </li> <li> <a href="#"> 语音涂鸦 </a> </li> </ul> </li> <li> <a href="#"> 萌宠趣闻 </a> </li> <li> <a href="#"> 萌宠专题 </a> </li> <li class="am-dropdown" data-am-dropdown=""> <a class="am-dropdown-toggle" data-am-dropdown-toggle="" href="javascript:;"> 萌宠服务 <span class="am-icon-caret-down"> </span> </a> <ul class="am-dropdown-content"> <li> <a href="#"> 宠物医院 </a> </li> <li> <a href="#"> 宠物美容 </a> </li> <li> <a href="#"> 宠物店铺 </a> </li> <li> <a href="#"> 更多服务 </a> </li> </ul> </li> </ul> </div> </div> </header> <div data-am-widget="tabs" class="am-tabs am-tabs-d2 am_news_tab"> <ul class="am-tabs-nav am-cf am_cf"> <li class="am-active"> <a href="[data-tab-panel-0]">全部</a> </li> <li class=""> <a href="[data-tab-panel-1]">新鲜事</a> </li> <li class=""> <a href="[data-tab-panel-2]">涨知识</a> </li> </ul> <div class="am-tabs-bd"> <div data-tab-panel-0 class="am-tab-panel am-active"> <div class="am-list-news-bd am_news_list_all"> <ul class="am-list">  <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left am_list_li"> <div class="am-u-sm-3 am-list-thumb am_list_thumb"> <a href="###" class=""> <img src="img/c.png" class="am_news_list_img" alt="我很囧，你保重....晒晒旅行中的那些囧！" /> </a> </div> <div class=" am-u-sm-9 am-list-main am_list_main"> <h3 class="am-list-item-hd am_list_title"> <a href="###" class="">你知道怎么辨别优秀的秋田犬幼犬吗？</a> </h3> <div class="am_list_author"><a href="javascript:void(0)"><span class="am_list_author_ico" style="background-image: url(img/tx.jpg);"></span><span class="name">Okaeri</span></a><span class="am_news_time"> • <time class="timeago" title="2015-08-13 08:02:40 +0800" datetime="2015-08-13 08:02:40 +0800"> 2 小时前</time></span></div> <div class="am-list-item-text am_list_item_text ">秋田犬是非常受欢迎的犬种之一，但是在饲养过程中可能会遇到一些难题。也许其他方面自己的爱犬都能配合，就是喂食的时候它表现出狗护食的欲望，让你无法接近。</div> </div> </li> <li class="am-g am-list-item-desced am_list_li"> <div class=" am-list-main"> <h3 class="am-list-item-hd am_list_title am_list_title_s"> <a href="###" class="">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a> </h3> <div class="am_list_author"><a href="javascript:void(0)"><span class="am_list_author_ico" style="background-image: url(img/tx.jpg);"></span><span class="name">Okaeri</span></a><span class="am_news_time"> • <time class="timeago" title="2015-08-13 08:02:40 +0800" datetime="2015-08-13 08:02:40 +0800"> 2 小时前</time></span></div> <div class="am-list-item-text am_list_item_text">还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。成功参与活动！* 听他们刚才说，上传照片的次</div> </div> </li> <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left am_list_li"> <div class="am-u-sm-3 am-list-thumb am_list_thumb"> <a href="###" class=""> <img src="img/y.png" class="am_news_list_img" alt="我很囧，你保重....晒晒旅行中的那些囧！" /> </a> </div> <div class=" am-u-sm-9 am-list-main am_list_main"> <h3 class="am-list-item-hd am_list_title"> <a href="###" class="">众包解决方案物流平台“我快到”：最后3公里的外卖配送应该外包出去</a> </h3> <div class="am_list_author">