search

博客列表 >仿写dedecms首页-分类页-文章页

仿写dedecms首页-分类页-文章页

葡萄枝子
葡萄枝子原创
2021年01月03日 00:10:02653浏览

仿写dedecms首页-分类页-文章页

自选一个站点进行原生仿写（至少3个页面）

1、仿写 dedecms 首页

  • 参考地址 dede首页

  • grid|flex 综合仿写布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>dede-index</title>
  8.     <link rel="stylesheet" href="static/css/dede.css">
  9. </head>
  11. <body>
  12.     <!-- 顶部工具条容纳框 -->
  13.     <div id="toptoolbar">
  14.         <!-- 顶部工具条 -->
  15.         <ul class="toolbar">
  16.             <li><a href="" title="首页"><img src="http://www.dedecms.com/topmenu/images/home.gif" alt="">官方首页</a></li>
  17.             <li><a href=""><img src="http://www.dedecms.com/topmenu/images/dede.gif" alt="">产品中心</a></li>
  18.             <li><a href=""><img src="http://www.dedecms.com/topmenu/images/service.gif" alt="">服务支持</a></li>
  19.             <li><a href=""><img src="http://www.dedecms.com/topmenu/images/bbs.gif" alt="">技术交流</a></li>
  20.             <li><a href=""><img src="http://www.dedecms.com/topmenu/images/help.gif" alt="">帮助</a></li>
  21.         </ul>
  22.     </div>
  23.     <!-- 页眉 -->
  24.     <header>
  25.         <!-- 顶部区域两列布局 -->
  26.         <div class="top">
  27.             <!-- 左侧logo -->
  28.             <h1><a href="" title="dede cms"><img src="http://www.dedecms.com/img/top_logo.jpg" alt=""></a></h1>
  29.             <!-- 右侧文字链接 -->
  30.             <div class="right">
  31.                 <strong>点击在线客服咨询</strong>
  32.                 <div class="tools"><a href="">论坛</a> | <a href="">站长工具</a> | <a href="">Github</a> | <a href="">博客</a>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.         <!-- 顶部导航3列主布局 -->
  37.         <div class="navbar">
  38.             <!-- 导航左侧边角背景图片 -->
  39.             <div class="left"></div>
  40.             <!-- 中间导航菜单 -->
  41.             <ul class="menu">
  42.                 <li class="item"><a class="active" href=""><span>首页</span></a></li>
  43.                 <li class="item"><a href="">产品</a></li>
  44.                 <li class="item"><a href="">案例中心</a></li>
  45.                 <li class="item"><a href="">技术联盟</a></li>
  46.                 <li class="item"><a href="">云主机</a></li>
  47.                 <li class="item"><a href="">模块插件</a></li>
  48.                 <li class="item"><a href="">模板</a></li>
  49.                 <li class="item"><a href="">服务</a></li>
  50.                 <li class="item"><a href="">购买</a></li>
  51.                 <li class="item"><a href="">帮助中心</a></li>
  52.                 <li class="item"><a href="">知识库</a></li>
  53.             </ul>
  54.             <!-- 导航右侧边角背景图片 -->
  55.             <div class="right"></div>
  56.         </div>
  57.     </header>
  58.     <!-- 主体 -->
  59.     <main>
  60.         <!-- 顶部两列两行布局，第二列跨两行 -->
  61.         <div class="toparea">
  62.             <div class="server"><img src="http://www.dedecms.com/images/banner.png" alt=""></div>
  63.             <div class="download">
  64.                 <a href=""></a>
  65.                 <p>版本信息：V5.7SP2正式版(2018-01-09)</p>
  66.                 <p>Nginx/IIS/Apache + PHP5/PHP7</p>
  67.                 <p>MySQL4/5 或 SQLite</p>
  68.                 <p>更新时间：2018年01月09日</p>
  69.             </div>
  70.             <div class="bulletin">公告：<a href="">织梦DedeCMS官方关于正版版本号的严正声明</a></div>
  71.         </div>
  72.         <!-- 产品特性两列行布局 -->
  73.         <div class="product">
  74.             <div class="product-title"><span>DedeCMS产品特性</span><img src="http://www.dedecms.com/img/feature_text.gif"
  75.                     alt=""></div>
  76.             <div class="product-introduce"><span>站点推荐</span><a href="">广告赞助</a></div>
  77.             <!-- 产品特性图文混排 -->
  78.             <ul class="product-detail">
  79.                 <li><a href=""><img src="http://www.dedecms.com/img/feature/biao1.png" alt=""></a>
  80.                     <p><a href="">良好的用户口碑丰富的开源经验</a></p>
  81.                 </li>
  82.                 <li><a href=""><img src="http://www.dedecms.com/img/feature/biao2.png" alt=""></a>
  83.                     <p><a href="">灵活的模块组合让网站更丰富、方便网站扩展</a></p>
  84.                 </li>
  85.                 <li><a href=""><img src="http://www.dedecms.com/img/feature/biao3.png" alt=""></a>
  86.                     <p><a href="">简单易用的模板引擎让界面想怎么换就怎么换</a></p>
  87.                 </li>
  88.                 <li><a href=""><img src="http://www.dedecms.com/img/feature/biao4.png" alt=""></a>
  89.                     <p><a href="">高效的动态静态页面部署，提高网站收录量</a></p>
  90.                 </li>
  91.                 <li><a href=""><img src="http://www.dedecms.com/img/feature/biao5.png" alt=""></a>
  92.                     <p><a href="">高效的动态静态页面部署，提高网站收录量</a></p>
  93.                 </li>
  94.                 <li><a href=""><img src="http://www.dedecms.com/img/feature/biao6.png" alt=""></a>
  95.                     <p><a href="">灵活的商业运营模式完善的会员体系，完整的支付接口</a></p>
  96.                 </li>
  97.                 <li><a href=""><img src="http://www.dedecms.com/img/feature/biao7.png" alt=""></a>
  98.                     <p><a href="">流畅专业界面设计良好的用户体验和网站亲和力</a></p>
  99.                 </li>
  100.                 <li><a href=""><img src="http://www.dedecms.com/img/feature/biao8.png" alt=""></a>
  101.                     <p><a href="">升级无忧指纹校验让你及时和官方程序同步安全无忧</a></p>
  102.                 </li>
  103.             </ul>
  104.             <!-- 右侧广告赞助 -->
  105.             <div class="product-ads"><a href=""><img
  106.                         src="http://ad.dedecms.com//files/image/2017/0405/14-11-29-1512885336.gif" alt=""></a></div>
  107.         </div>
  108.         <!-- 中部站长工具箱文字两列布局 -->
  109.         <div class="webmaster">
  110.             <div class="wtitle">站长工具箱：</div>
  111.             <ul>
  112.                 <li><a href="http://tools.dedecms.com/dedetag_maker.html" title="用于生成各个版本DedeCMS页面模板标签，方便站长建站"
  113.                         target="_blank">织梦CMS标签生成器</a></li>
  114.                 <li><a href="http://tools.dedecms.com/uploads/docs/dede_tpl/index.htm" title="DedeCMS模板制作基础内容，以及各类标签查询"
  115.                         target="_blank">DedeCMS模板手册</a></li>
  116.                 <li><a href="http://tools.dedecms.com/regex.html" title="在线正则表达式匹配、替换，另有多种常用正则表达式提供方便使用"
  117.                         target="_blank">在线正则表达式测试</a></li>
  118.                 <li><a href="http://tools.dedecms.com/html2js.html" title="可以把html内容转换成js输出，反之也可以转换回来"
  119.                         target="_blank">HTML/JS互转</a></li>
  120.                 <li><a href="http://tools.dedecms.com/word_segment.html" title="对文档内容信息进行系统分词，提取文档中的关键词"
  121.                         target="_blank">在线内容分词工具</a></li>
  122.                 <li><a href="http://tools.dedecms.com/jscsscompress.html" title="用户可以通过该工具在线压缩Javascript和CSS代码"
  123.                         target="_blank">在线JS/CSS压缩</a></li>
  124.             </ul>
  125.         </div>
  126.         <!-- 下部3列2行布局 -->
  127.         <div class="news">
  128.             <!-- 热门下载 -->
  129.             <div class="download">
  130.                 <div class="news-title"><span>热门下载</span><a href="">更多...</a></div>
  131.                 <div class="news-thumb">
  132.                     <a href=""><img src="http://www.dedecms.com/uploads/allimg/120604/22-120604133H70-L.png"></a>
  133.                     <div class="news-meta">
  134.                         <p><a href="">欧美风企业网站——英文模板</a></p>
  135.                         <p> 适用：V5.3</p>
  136.                         <p> 作者：mo5w</p>
  137.                         <p> 大小：162K</p>
  138.                     </div>
  139.                 </div>
  140.                 <ul class="news-list">
  141.                     <li><a href="">原创永恒国度（AION）黑色游戏主题无错模板</a></li>
  142.                     <li><a href="">蓝色清爽简洁文章类型模板</a></li>
  143.                     <li><a href="">非常漂亮的女性站模板</a></li>
  144.                     <li><a href="">faxueland提供，这个模板你绝对喜欢！</a></li>
  145.                     <li><a href="">绿色清晰，广告位预留育儿亲子网站模板 dede5.3</a></li>
  146.                     <li><a href="">多套精美模板组合而成，最全模板（前台+会员中心）</a></li>
  147.                     <li><a href="">适用于DEDE5.5|5.6|5.7精致复古企业站模板</a></li>
  148.                     <li><a href="">原创个性时尚风格（可做淘宝客）</a></li>
  149.                     <li><a href="">蓝色企业模板 </a></li>
  150.                     <li><a href="">最最漂亮的女性模板免费发布拉utf8+gbk</a></li>
  151.                 </ul>
  152.             </div>
  153.             <!-- 行业资讯 -->
  154.             <div class="info">
  155.                 <div class="news-title"><span>行业资讯</span><a href="">更多...</a></div>
  156.                 <ul class="news-list">
  157.                     <li><a href="">新平台 新价格 天翼云开启新纪元</a><span class="date">04-24</span></li>
  158.                     <li><a href="">硅谷预言家杜尔：Zynga起死回</a><span class="date">07-25</span></li>
  159.                     <li><a href="">谷歌今日向Nexus系列机种推最</a><span class="date">07-25</span></li>
  160.                     <li><a href="">传闪购网站Zulily已聘多家投行</a><span class="date">07-25</span></li>
  161.                     <li><a href="">谷歌Chromecast电视棒或引发电</a><span class="date">07-25</span></li>
  162.                     <li><a href="">Facebook 2013年Q2季度财报显</a><span class="date">07-25</span></li>
  163.                     <li><a href="">优酷土豆与韩国YG娱乐合作：成</a><span class="date">07-25</span></li>
  164.                     <li><a href="">iPhone用户的福利：连苹果都望</a><span class="date">07-25</span></li>
  165.                     <li><a href="">百思买网站发布谷歌Nexus 7平</a><span class="date">07-25</span></li>
  166.                     <li><a href="">苹果在华 iOS 开发者达 50 万</a><span class="date">07-25</span></li>
  167.                     <li><a href="">Facebook测试在通知栏中显示移</a><span class="date">07-25</span></li>
  168.                     <li><a href="">首部谷歌眼镜拍摄成人电影面市</a><span class="date">07-25</span></li>
  169.                     <li><a href="">揭秘史上最昂贵的一行 Javascr</a><span class="date">07-25</span></li>
  170.                     <li><a href="">三星周五发布Q2财报 智能手机</a><span class="date">07-25</span></li>
  171.                     <li><a href="">思科欲以27亿美元收购网络安全</a><span class="date">07-25</span></li>
  172.                 </ul>
  173.             </div>
  174.             <!-- 知识库 -->
  175.             <div class="knowledge">
  176.                 <div class="news-title"><span>知识库</span><a href="">更多...</a></div>
  177.                 <ul class="news-list">
  178.                     <li><a href="">PHP普遍疑难有哪些</a><span class="date">07-23</span></li>
  179.                     <li><a href="">PHP交叉编译和移植</a><span class="date">07-23</span></li>
  180.                     <li><a href="">php数据库操作类代码(增,</a><span class="date">07-23</span></li>
  181.                     <li><a href="">asp.net Linq 实现分组查</a><span class="date">07-23</span></li>
  182.                     <li><a href="">关于Oracle数据库优化的几</a><span class="date">07-23</span></li>
  183.                     <li><a href="">基于Oracle的大数据导入方</a><span class="date">07-23</span></li>
  184.                     <li><a href="">Java中获取指定日为星期几</a><span class="date">07-23</span></li>
  185.                     <li><a href="">jsp中折叠式标签的代码实</a><span class="date">07-23</span></li>
  186.                 </ul>
  187.             </div>
  188.             <!-- 常见问题 -->
  189.             <div class="question">
  190.                 <div class="news-title"><span>常见问题</span><a href="">更多...</a></div>
  191.                 <ul class="news-list">
  192.                     <li><a href="">管理员帐号密码忘记了怎么</a><span class="date">09-29</span></li>
  193.                     <li><a href="">我修改了系统模板为什么前</a><span class="date">09-29</span></li>
  194.                     <li><a href="">如何实现＂三级栏目_二级</a><span class="date">09-29</span></li>
  195.                     <li><a href="">菜单最多只显示10个,多建</a><span class="date">09-29</span></li>
  196.                     <li><a href="">导航里的＂index.html＂能</a><span class="date">09-29</span></li>
  197.                 </ul>
  198.             </div>
  199.         </div>
  200.         <!-- 友链两行布局 -->
  201.         <div class="links">
  202.             <div class="links-title"><span>企业推广</span><a href="">友情链接</a><a href="">电子商务</a></div>
  203.             <div class="links-text">
  204.                 <a href="">织梦CMS</a>
  205.                 <a href="">卓卓网络</a>
  206.                 <a href="">织梦技术论坛</a>
  207.                 <a href="">DedeCMS使用手册</a>
  208.                 <a href="">织梦客服中心</a>
  209.                 <a href="">祛痘</a>
  210.                 <a href="">爱名网</a>
  211.             </div>
  212.         </div>
  213.     </main>
  214.     <!-- 页脚 -->
  215.     <footer>
  216.         <div class="footer-logo"><img src="http://www.dedecms.com/img/buttom_logo.gif" alt="dede cms" /></div>
  217.         <div class="footer-text">
  218.             <a href="">关于我们</a>
  219.             <a href="">招贤纳士</a>
  220.             <a href="">联系我们</a>
  221.             <a href="">帮助中心</a>
  222.             <a href="">协议说明</a>
  223.             <a href="">网站地图</a>
  224.             <a href="">用户反馈</a>
  225.             <a href="">合作伙伴</a>
  226.             <a href="">捐助织梦</a>
  227.         </div>
  228.         <div class="gototop"><a href="#">返回顶部▲</a></div>
  229.         <div class="copyright">&copy; 2010 DesDev Inc. All rights reserved Powered by DedeCMS</div>
  230.     </footer>
  231. </body>
  233. </html>
  • 仿写效果图

仿写dede首页

2、仿写 dedecms 一个分类页

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>dede-categories</title>
  8.     <link rel="stylesheet" href="static/css/dede.css">
  9. </head>
  11. <body>
  12.     <!-- 顶部工具条容纳框 -->
  13.     <div id="toptoolbar">
  14.         <!-- 顶部工具条 -->
  15.         <ul class="toolbar">
  16.             <li><a href="" title="首页"><img src="http://www.dedecms.com/topmenu/images/home.gif" alt="">官方首页</a></li>
  17.             <li><a href=""><img src="http://www.dedecms.com/topmenu/images/dede.gif" alt="">产品中心</a></li>
  18.             <li><a href=""><img src="http://www.dedecms.com/topmenu/images/service.gif" alt="">服务支持</a></li>
  19.             <li><a href=""><img src="http://www.dedecms.com/topmenu/images/bbs.gif" alt="">技术交流</a></li>
  20.             <li><a href=""><img src="http://www.dedecms.com/topmenu/images/help.gif" alt="">帮助</a></li>
  21.         </ul>
  22.     </div>
  23.     <!-- 页眉 -->
  24.     <header>
  25.         <!-- 顶部区域两列布局 -->
  26.         <div class="top">
  27.             <!-- 左侧logo -->
  28.             <h1><a href="" title="dede cms"><img src="http://www.dedecms.com/img/top_logo.jpg" alt=""></a></h1>
  29.             <!-- 右侧文字链接 -->
  30.             <div class="right">
  31.                 <strong>点击在线客服咨询</strong>
  32.                 <div class="tools"><a href="">论坛</a> | <a href="">站长工具</a> | <a href="">Github</a> | <a href="">博客</a>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.         <!-- 顶部导航3列主布局 -->
  37.         <div class="navbar">
  38.             <!-- 导航左侧边角背景图片 -->
  39.             <div class="left"></div>
  40.             <!-- 中间导航菜单 -->
  41.             <ul class="menu">
  42.                 <li class="item"><a href="">首页</a></li>
  43.                 <li class="item"><a href="">产品</a></li>
  44.                 <li class="item"><a href="">案例中心</a></li>
  45.                 <li class="item"><a href="">技术联盟</a></li>
  46.                 <li class="item"><a href="">云主机</a></li>
  47.                 <li class="item"><a href="">模块插件</a></li>
  48.                 <li class="item"><a href="">模板</a></li>
  49.                 <li class="item"><a href="">服务</a></li>
  50.                 <li class="item"><a href="">购买</a></li>
  51.                 <li class="item"><a href="">帮助中心</a></li>
  52.                 <li class="item"><a class="active" href=""><span>知识库</span></a></li>
  53.             </ul>
  54.             <!-- 导航右侧边角背景图片 -->
  55.             <div class="right"></div>
  56.         </div>
  57.     </header>
  58.     <!-- 主体 -->
  59.     <main>
  60.         <!-- 面包屑导航 -->
  61.         <div class="breadcrumbs"><a href="">首页</a> &gt; <a href="">知识库</a></div>
  62.         <!-- 整体两列布局 -->
  63.         <div class="cats">
  64.             <!-- 左栏 -->
  65.             <div class="left">
  66.                 <!-- 栏目列表 -->
  67.                 <div class="otitle">栏目列表 </div>
  68.                 <div class="ocontent">
  69.                     <div class="oliterm">
  70.                         <ul>
  71.                             <li>
  72.                                 <a href=""><span>网页基础</span></a>
  73.                             </li>
  74.                             <li>
  75.                                 <a href=""><span>平面设计</span></a>
  76.                             </li>
  77.                             <li>
  78.                                 <a href=""><span>网络编程</span></a>
  79.                             </li>
  80.                             <li>
  81.                                 <a href=""><span>数据库</span></a>
  82.                             </li>
  83.                             <li>
  84.                                 <a href=""><span>服务器</span></a>
  85.                             </li>
  86.                             <li>
  87.                                 <a href=""><span>建站技巧</span></a>
  88.                             </li>
  89.                         </ul>
  90.                     </div>
  91.                 </div>
  92.                 <div class="obottom"></div>
  93.                 <!-- 热门关注 -->
  94.                 <div class="cat"><span>热门关注</span></div>
  95.                 <ul class="list">
  96.                     <li><a href="">进行加密与认证的最有用的10个Pe</a></li>
  97.                     <li><a href="">Apache+php+mysql在windows下的</a></li>
  98.                     <li><a href="">精选30个优秀的CSS技术和实例</a></li>
  99.                     <li><a href="">几段值得初学者研究的PHP代码段</a></li>
  100.                     <li><a href="">5种方法立刻写出更好的CSS代码</a></li>
  101.                     <li><a href="">数据库三范式，轻松理解</a></li>
  102.                     <li><a href="">PHP或Python调用C++实现的服务器</a></li>
  103.                     <li><a href="">img图片元素下多余空白解决方案</a></li>
  104.                     <li><a href="">设计中的平衡理论</a></li>
  105.                     <li><a href="">SQL多表连接查询（详细实例）</a></li>
  106.                 </ul>
  107.                 <!-- 织梦站长工具箱 -->
  108.                 <div class="cat"><span>织梦站长工具箱</span></div>
  109.                 <ul class="list">
  110.                     <li><a href="" style="color:blue">织梦CMS标签生成器</a></li>
  111.                     <li><a href="" style="color:red">DedeCMS模板手册</a></li>
  112.                     <li><a href="">在线正则表达式测试</a></li>
  113.                     <li><a href="">HTML/JS互转</a></li>
  114.                     <li><a href="">在线内容分词工具</a></li>
  115.                     <li><a href="" style="color:blue">在线JS/CSS压缩</a></li>
  116.                 </ul>
  117.                 <!-- 搜索框 -->
  118.                 <div class="searchbox">
  119.                     <form action="" name="searchform">
  120.                         <input name="search" type="text" class="searchtext" value="如何安装DedeCMS">
  121.                         <button type="submit" class="search-button">搜索</button>
  122.                     </form>
  123.                 </div>
  124.                 <!-- 侧栏广告区 -->
  125.                 <div class="ad ad1">ad1 侧栏广告区</div>
  126.             </div>
  127.             <!-- 右侧 -->
  128.             <div class="right">
  129.                 <!-- 顶部广告 -->
  130.                 <div class="ad ad2">ad2 顶部广告</div>
  131.                 <!-- 分类模块 -->
  132.                 <div class="module">
  133.                     <!-- grid模块begin -->
  134.                     <div class="box">
  135.                         <div class="cat"><span>网页基础</span><a href="">更多...</a></div>
  136.                         <div class="thumb"><img src="http://www.dedecms.com/images/type_img_43.gif" alt=""></div>
  137.                         <ul class="list">
  138.                             <li><a href="">php 获取今日、昨日、上周、本月的起始时间</a><span class="date">07-13</span></li>
  139.                             <li><a href="">35个最佳响应式HTML5和CSS3模板</a><span class="date">07-13</span></li>
  140.                             <li><a href="">js 效率资源损耗</a><span class="date">06-17</span></li>
  141.                             <li><a href="">JavaScript 对象</a><span class="date">06-17</span></li>
  142.                             <li><a href="">javascript与c#之间的调用</a><span class="date">05-07</span></li>
  143.                             <li><a href="">HTML5与CSS3设计模式</a><span class="date">04-16</span></li>
  144.                             <li><a href="">Javascript中最常用的61个经典技巧</a><span class="date">04-15</span></li>
  145.                             <li><a href="">HTML5 websocket实验</a><span class="date">03-12</span></li>
  146.                             <li><a href="">HTML 5 的自定义 data-* 属性和jquery的dat</a><span class="date">03-12</span></li>
  147.                             <li><a href="">HTML5离线功应用能详解</a><span class="date">03-12</span></li>
  148.                             <li><a href="">用HTML5构建高性能视差网站</a><span class="date">02-28</span></li>
  149.                             <li><a href="">用HTML5实现iPad应用无限平滑滚动</a><span class="date">02-28</span></li>
  150.                             <li><a href="">JavaScript 数组去重谈性能优化</a><span class="date">02-16</span></li>
  151.                             <li><a href="">JavaScript Source Map 详解</a><span class="date">01-29</span></li>
  152.                             <li><a href=""> javascript正则表达式</a><span class="date">01-18</span></li>
  153.                             <li><a href="">JS的Document属性和方法</a><span class="date">01-18</span></li>
  154.                             <li><a href="">Javascript 严格模式详解</a><span class="date">01-18</span></li>
  155.                             <li><a href="">javascript掌握正则表达式</a><span class="date">01-17</span></li>
  156.                         </ul>
  157.                     </div>
  158.                     <div class="box">
  159.                         <div class="cat"><span>平面设计</span><a href="">更多...</a></div>
  160.                         <div class="thumb"><img src="http://www.dedecms.com/images/type_img_48.gif" alt=""></div>
  161.                         <ul class="list">
  162.                             <li><a href="">php 获取今日、昨日、上周、本月的起始时间</a><span class="date">07-13</span></li>
  163.                             <li><a href="">35个最佳响应式HTML5和CSS3模板</a><span class="date">07-13</span></li>
  164.                             <li><a href="">js 效率资源损耗</a><span class="date">06-17</span></li>
  165.                             <li><a href="">JavaScript 对象</a><span class="date">06-17</span></li>
  166.                             <li><a href="">javascript与c#之间的调用</a><span class="date">05-07</span></li>
  167.                             <li><a href="">HTML5与CSS3设计模式</a><span class="date">04-16</span></li>
  168.                             <li><a href="">Javascript中最常用的61个经典技巧</a><span class="date">04-15</span></li>
  169.                             <li><a href="">HTML5 websocket实验</a><span class="date">03-12</span></li>
  170.                             <li><a href="">HTML 5 的自定义 data-* 属性和jquery的dat</a><span class="date">03-12</span></li>
  171.                             <li><a href="">HTML5离线功应用能详解</a><span class="date">03-12</span></li>
  172.                             <li><a href="">用HTML5构建高性能视差网站</a><span class="date">02-28</span></li>
  173.                             <li><a href="">用HTML5实现iPad应用无限平滑滚动</a><span class="date">02-28</span></li>
  174.                             <li><a href="">JavaScript 数组去重谈性能优化</a><span class="date">02-16</span></li>
  175.                             <li><a href="">JavaScript Source Map 详解</a><span class="date">01-29</span></li>
  176.                             <li><a href=""> javascript正则表达式</a><span class="date">01-18</span></li>
  177.                             <li><a href="">JS的Document属性和方法</a><span class="date">01-18</span></li>
  178.                             <li><a href="">Javascript 严格模式详解</a><span class="date">01-18</span></li>
  179.                             <li><a href="">javascript掌握正则表达式</a><span class="date">01-17</span></li>
  180.                         </ul>
  181.                     </div>
  182.                     <div class="box">
  183.                         <div class="cat"><span>网络编程</span><a href="">更多...</a></div>
  184.                         <div class="thumb"><img src="http://www.dedecms.com/images/type_img_53.gif" alt=""></div>
  185.                         <ul class="list">
  186.                             <li><a href="">php 获取今日、昨日、上周、本月的起始时间</a><span class="date">07-13</span></li>
  187.                             <li><a href="">35个最佳响应式HTML5和CSS3模板</a><span class="date">07-13</span></li>
  188.                             <li><a href="">js 效率资源损耗</a><span class="date">06-17</span></li>
  189.                             <li><a href="">JavaScript 对象</a><span class="date">06-17</span></li>
  190.                             <li><a href="">javascript与c#之间的调用</a><span class="date">05-07</span></li>
  191.                             <li><a href="">HTML5与CSS3设计模式</a><span class="date">04-16</span></li>
  192.                             <li><a href="">Javascript中最常用的61个经典技巧</a><span class="date">04-15</span></li>
  193.                             <li><a href="">HTML5 websocket实验</a><span class="date">03-12</span></li>
  194.                             <li><a href="">HTML 5 的自定义 data-* 属性和jquery的dat</a><span class="date">03-12</span></li>
  195.                             <li><a href="">HTML5离线功应用能详解</a><span class="date">03-12</span></li>
  196.                             <li><a href="">用HTML5构建高性能视差网站</a><span class="date">02-28</span></li>
  197.                             <li><a href="">用HTML5实现iPad应用无限平滑滚动</a><span class="date">02-28</span></li>
  198.                             <li><a href="">JavaScript 数组去重谈性能优化</a><span class="date">02-16</span></li>
  199.                             <li><a href="">JavaScript Source Map 详解</a><span class="date">01-29</span></li>
  200.                             <li><a href=""> javascript正则表达式</a><span class="date">01-18</span></li>
  201.                             <li><a href="">JS的Document属性和方法</a><span class="date">01-18</span></li>
  202.                             <li><a href="">Javascript 严格模式详解</a><span class="date">01-18</span></li>
  203.                             <li><a href="">javascript掌握正则表达式</a><span class="date">01-17</span></li>
  204.                         </ul>
  205.                     </div>
  206.                     <div class="box">
  207.                         <div class="cat"><span>数据库</span><a href="">更多...</a></div>
  208.                         <div class="thumb"><img src="http://www.dedecms.com/images/type_img_58.gif" alt=""></div>
  209.                         <ul class="list">
  210.                             <li><a href="">php 获取今日、昨日、上周、本月的起始时间</a><span class="date">07-13</span></li>
  211.                             <li><a href="">35个最佳响应式HTML5和CSS3模板</a><span class="date">07-13</span></li>
  212.                             <li><a href="">js 效率资源损耗</a><span class="date">06-17</span></li>
  213.                             <li><a href="">JavaScript 对象</a><span class="date">06-17</span></li>
  214.                             <li><a href="">javascript与c#之间的调用</a><span class="date">05-07</span></li>
  215.                             <li><a href="">HTML5与CSS3设计模式</a><span class="date">04-16</span></li>
  216.                             <li><a href="">Javascript中最常用的61个经典技巧</a><span class="date">04-15</span></li>
  217.                             <li><a href="">HTML5 websocket实验</a><span class="date">03-12</span></li>
  218.                             <li><a href="">HTML 5 的自定义 data-* 属性和jquery的dat</a><span class="date">03-12</span></li>
  219.                             <li><a href="">HTML5离线功应用能详解</a><span class="date">03-12</span></li>
  220.                             <li><a href="">用HTML5构建高性能视差网站</a><span class="date">02-28</span></li>
  221.                             <li><a href="">用HTML5实现iPad应用无限平滑滚动</a><span class="date">02-28</span></li>
  222.                             <li><a href="">JavaScript 数组去重谈性能优化</a><span class="date">02-16</span></li>
  223.                             <li><a href="">JavaScript Source Map 详解</a><span class="date">01-29</span></li>
  224.                             <li><a href=""> javascript正则表达式</a><span class="date">01-18</span></li>
  225.                             <li><a href="">JS的Document属性和方法</a><span class="date">01-18</span></li>
  226.                             <li><a href="">Javascript 严格模式详解</a><span class="date">01-18</span></li>
  227.                             <li><a href="">javascript掌握正则表达式</a><span class="date">01-17</span></li>
  228.                         </ul>
  229.                     </div>
  230.                     <!-- grid模块end -->
  231.                 </div>
  232.                 <!-- 底部广告 -->
  233.                 <div class="ad ad3">ad3 底部广告</div>
  234.             </div>
  235.         </div>
  236.     </main>
  237.     <!-- 页脚 -->
  238.     <footer>
  239.         <div class="footer-logo"><img src="http://www.dedecms.com/img/buttom_logo.gif" alt="dede cms" /></div>
  240.         <div class="footer-text">
  241.             <a href="">关于我们</a>
  242.             <a href="">招贤纳士</a>
  243.             <a href="">联系我们</a>
  244.             <a href="">帮助中心</a>
  245.             <a href="">协议说明</a>
  246.             <a href="">网站地图</a>
  247.             <a href="">用户反馈</a>
  248.             <a href="">合作伙伴</a>
  249.             <a href="">捐助织梦</a>
  250.         </div>
  251.         <div class="gototop"><a href="#">返回顶部▲</a></div>
  252.         <div class="copyright">&copy; 2010 DesDev Inc. All rights reserved Powered by DedeCMS</div>
  253.     </footer>
  254. </body>
  256. </html>
  • 仿写效果图

仿写dede首页

3、仿写 dedecms 一个文章页

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>dede-article</title>
  8.     <link rel="stylesheet" href="static/css/dede.css">
  9. </head>
  11. <body>
  12.     <!-- 顶部工具条容纳框 -->
  13.     <div id="toptoolbar">
  14.         <!-- 顶部工具条 -->
  15.         <ul class="toolbar">
  16.             <li><a href="" title="首页"><img src="http://www.dedecms.com/topmenu/images/home.gif" alt="">官方首页</a></li>
  17.             <li><a href=""><img src="http://www.dedecms.com/topmenu/images/dede.gif" alt="">产品中心</a></li>
  18.             <li><a href=""><img src="http://www.dedecms.com/topmenu/images/service.gif" alt="">服务支持</a></li>
  19.             <li><a href=""><img src="http://www.dedecms.com/topmenu/images/bbs.gif" alt="">技术交流</a></li>
  20.             <li><a href=""><img src="http://www.dedecms.com/topmenu/images/help.gif" alt="">帮助</a></li>
  21.         </ul>
  22.     </div>
  23.     <!-- 页眉 -->
  24.     <header>
  25.         <!-- 顶部区域两列布局 -->
  26.         <div class="top">
  27.             <!-- 左侧logo -->
  28.             <h1><a href="" title="dede cms"><img src="http://www.dedecms.com/img/top_logo.jpg" alt=""></a></h1>
  29.             <!-- 右侧文字链接 -->
  30.             <div class="right">
  31.                 <strong>点击在线客服咨询</strong>
  32.                 <div class="tools"><a href="">论坛</a> | <a href="">站长工具</a> | <a href="">Github</a> | <a href="">博客</a>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.         <!-- 顶部导航3列主布局 -->
  37.         <div class="navbar">
  38.             <!-- 导航左侧边角背景图片 -->
  39.             <div class="left"></div>
  40.             <!-- 中间导航菜单 -->
  41.             <ul class="menu">
  42.                 <li class="item"><a href="">首页</a></li>
  43.                 <li class="item"><a href="">产品</a></li>
  44.                 <li class="item"><a href="">案例中心</a></li>
  45.                 <li class="item"><a href="">技术联盟</a></li>
  46.                 <li class="item"><a href="">云主机</a></li>
  47.                 <li class="item"><a href="">模块插件</a></li>
  48.                 <li class="item"><a href="">模板</a></li>
  49.                 <li class="item"><a href="">服务</a></li>
  50.                 <li class="item"><a href="">购买</a></li>
  51.                 <li class="item"><a href="">帮助中心</a></li>
  52.                 <li class="item"><a class="active" href=""><span>知识库</span></a></li>
  53.             </ul>
  54.             <!-- 导航右侧边角背景图片 -->
  55.             <div class="right"></div>
  56.         </div>
  57.     </header>
  58.     <!-- 主体 -->
  59.     <main>
  60.         <!-- 面包屑导航 -->
  61.         <div class="breadcrumbs"><a href="">首页</a> &gt; <a href="">知识库</a> &gt; <a href="">网页基础</a> &gt; <a
  62.                 href="">HTML</a> &gt;</div>
  63.         <!-- 整体两列布局 -->
  64.         <div class="cats">
  65.             <!-- 左栏 -->
  66.             <div class="left">
  67.                 <!-- 栏目列表 -->
  68.                 <div class="otitle">栏目列表 </div>
  69.                 <div class="ocontent">
  70.                     <div class="oliterm">
  71.                         <ul>
  72.                             <li class="active">
  73.                                 <a href=""><span>DIV&CSS</span></a>
  74.                             </li>
  75.                             <li>
  76.                                 <a href=""><span>Javascript/Ajax</span></a>
  77.                             </li>
  78.                             <li>
  79.                                 <a href=""><span>Dreamweaver</span></a>
  80.                             </li>
  81.                         </ul>
  82.                     </div>
  83.                 </div>
  84.                 <div class="obottom"></div>
  85.                 <!-- 热门关注 -->
  86.                 <div class="cat"><span>热门关注</span></div>
  87.                 <ul class="list">
  88.                     <li><a href="">进行加密与认证的最有用的10个Pe</a></li>
  89.                     <li><a href="">Apache+php+mysql在windows下的</a></li>
  90.                     <li><a href="">精选30个优秀的CSS技术和实例</a></li>
  91.                     <li><a href="">几段值得初学者研究的PHP代码段</a></li>
  92.                     <li><a href="">5种方法立刻写出更好的CSS代码</a></li>
  93.                     <li><a href="">数据库三范式，轻松理解</a></li>
  94.                     <li><a href="">PHP或Python调用C++实现的服务器</a></li>
  95.                     <li><a href="">img图片元素下多余空白解决方案</a></li>
  96.                     <li><a href="">设计中的平衡理论</a></li>
  97.                     <li><a href="">SQL多表连接查询（详细实例）</a></li>
  98.                 </ul>
  99.                 <!-- 织梦站长工具箱 -->
  100.                 <div class="cat"><span>织梦站长工具箱</span></div>
  101.                 <ul class="list">
  102.                     <li><a href="" style="color:blue">织梦CMS标签生成器</a></li>
  103.                     <li><a href="" style="color:red">DedeCMS模板手册</a></li>
  104.                     <li><a href="">在线正则表达式测试</a></li>
  105.                     <li><a href="">HTML/JS互转</a></li>
  106.                     <li><a href="">在线内容分词工具</a></li>
  107.                     <li><a href="" style="color:blue">在线JS/CSS压缩</a></li>
  108.                 </ul>
  109.                 <!-- 搜索框 -->
  110.                 <div class="searchbox">
  111.                     <form action="" name="searchform">
  112.                         <input name="search" type="text" class="searchtext" value="如何安装DedeCMS">
  113.                         <button type="submit" class="search-button">搜索</button>
  114.                     </form>
  115.                 </div>
  116.                 <!-- 侧栏广告区 -->
  117.                 <div class="ad ad1">ad1 侧栏广告区</div>
  118.             </div>
  119.             <!-- 右侧 -->
  120.             <div class="right">
  121.                 <!-- 顶部广告 -->
  122.                 <div class="ad ad2">ad2 顶部广告</div>
  123.                 <!-- 文章模块 -->
  124.                 <div class="cat"><span>HTML</span></div>
  125.                 <div class="article-box">
  126.                     <h1>HTML5与CSS3设计模式</h1>
  127.                     <!-- 文章元信息 -->
  128.                     <div class="metas">来源：<span>中国IT实验室</span> 作者：<span>佚名</span> 发表于：<span>2013-04-16
  129.                             13:21</span> 点击：<span>9327</span></div>
  130.                     <!-- 内容摘要 -->
  131.                     <div class="excerpt">hello world, hello world, hello world, hello world, hello world, hello world,
  132.                         hello world.</div>
  133.                     <!-- 内容正文 -->
  134.                     <div class="content">
  135.                         <p>hello world, hello world, hello world, hello world, hello world, hello world,
  136.                             hello world.</p>
  137.                         <p>hello world, hello world, hello world, hello world, hello world, hello world,
  138.                             hello world, hello world, hello world, hello world, hello world, hello world, hello world,
  139.                             hello world.</p>
  140.                     </div>
  141.                     <!-- 心情投票 -->
  142.                     <div class="votebox">
  143.                         <div class="up vote">
  144.                             <div class="uphand">顶一下(<span class="num">112</span>)</div>
  145.                             <div class="upper"><span class="percent"><span class="per" style="width:82.40%"></span></span><span class="count">82.40%</span></div>
  146.                         </div>
  147.                         <div class="down vote">
  148.                             <div class="downhand">踩一下(<span class="num">24</span>)</div>
  149.                             <div class="downper"><span class="percent"><span class="per" style="width:17.60%"></span></span><span class="count">17.60%</span></div>
  150.                         </div>
  151.                     </div>
  152.                     <!-- 底部分割线 -->
  153.                     <div class="bottomline"></div>
  154.                     <!-- 上一篇，下一篇 -->
  155.                     <ul class="prevnext">
  156.                         <li class="prev">上一篇：<a href="">HTML5 websocket实验</a></li>
  157.                         <li class="next">下一篇：没有了</li>
  158.                     </ul>
  159.                 </div>
  160.                 <!-- 底部广告 -->
  161.                 <div class="ad ad3">ad3 底部广告</div>
  162.                 <!-- 相关文章 -->
  163.                 <div class="related cat"><span>相关文章</span></div>
  164.                 <ul class="related-list list">
  165.                     <li><a href="">HTML5 websocket实验</a><span class="date">2013-03-12 13:35:01</span></li>
  166.                     <li><a href="">HTML5离线功应用能详解</a><span class="date">2013-03-12 12:49:45</span></li>
  167.                     <li><a href="">用HTML5构建高性能视差网站</a><span class="date">2013-02-28 17:20:39</span></li>
  168.                     <li><a href="">用HTML5实现iPad应用无限平滑</a><span class="date">2013-02-28 17:18:42</span></li>
  169.                     <li><a href="">盘点：崛起中的九大 HTML5 开</a><span class="date">2012-11-29 15:54:16</span></li>
  170.                     <li><a href="">HTML5 应用 UI 设计工具： RIB</a><span class="date">2012-11-29 15:51:25</span></li>
  171.                 </ul>
  172.             </div>
  173.         </div>
  174.     </main>
  175.     <!-- 页脚 -->
  176.     <footer>
  177.         <div class="footer-logo"><img src="http://www.dedecms.com/img/buttom_logo.gif" alt="dede cms" /></div>
  178.         <div class="footer-text">
  179.             <a href="">关于我们</a>
  180.             <a href="">招贤纳士</a>
  181.             <a href="">联系我们</a>
  182.             <a href="">帮助中心</a>
  183.             <a href="">协议说明</a>
  184.             <a href="">网站地图</a>
  185.             <a href="">用户反馈</a>
  186.             <a href="">合作伙伴</a>
  187.             <a href="">捐助织梦</a>
  188.         </div>
  189.         <div class="gototop"><a href="#">返回顶部▲</a></div>
  190.         <div class="copyright">&copy; 2010 DesDev Inc. All rights reserved Powered by DedeCMS</div>
  191.     </footer>
  192. </body>
  194. </html>
  • 仿写效果图

仿写dede文章页

4. 仿写三个页面共用一个样式表

  • 引入的外部 static/css/dede.css 代码
  1. /* 初始化 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. li {
  8.     list-style: none;
  9. }
  10. a {
  11.     color: #0B65A7;
  12.     text-decoration: none;
  13. }
  14. body {
  15.     background-color: #E6EAE4;
  16.     color: #666;
  17. }
  18. /* 顶部工具条容纳框 */
  19. #toptoolbar {
  20.     width: 100%;
  21.     min-width: 960px;
  22.     background: url(http://www.dedecms.com/topmenu/images/top_bg.jpg) repeat-x;
  23. }
  24. /* 顶部工具条 */
  25. #toptoolbar > .toolbar {
  26.     max-width: 960px;
  27.     /*max-height: 45px;*/
  28.     height: 30px;
  29.     line-height: 30px;
  30.     /* 工具条居中 */
  31.     margin: 0 auto;
  32.     /* 转flex容器，工具条项目居右对齐 */
  33.     display: flex;
  34.     justify-content: flex-end;
  35.     align-items: center;
  36. }
  37. /* 项目间分割条背景图 */
  38. #toptoolbar > .toolbar > li {
  39.     font-size: 12px;
  40.     background: url(http://www.dedecms.com/topmenu/images/line1.gif) left  no-repeat;
  41.     padding: 0 8px;
  42. }
  43. /* 转flex容器，交叉轴居中a标签的图文元素 */
  44. #toptoolbar > .toolbar > li > a {
  45.     display: flex;
  46.     flex-flow: row nowrap;
  47.     align-items: center;
  48. }
  49. #toptoolbar > .toolbar > li > a > img {
  50.     margin-right: 3px;
  51. }
  53. /* 页眉 */
  54. header {
  55.     /* 主体宽度 */
  56.     width: 960px;
  57.     margin: 0 auto;
  58. }
  59. /* 顶部区域两列布局 */
  60. header > .top {
  61.     /* grid 两列两行布局，左 Logo，右文字 */
  62.     display: grid;
  63.     grid-template-columns: 682px auto;
  64. }
  65. /* 左侧logo */
  66. header > .top > h1 > a {
  67.     /* 转flex容器，行内块元素，设置宽高，交叉轴居中 */
  68.     display: flex;
  69.     width: 300px;
  70.     height: 80px;
  71.     align-items: center;
  72. }
  73. /* 右侧文字链接 */
  74. header > .top > .right {
  75.     /* 转grid容器2行 */
  76.     display: grid;
  77.     grid-template-rows: 2fr 1fr;
  78.     /* 项目在容器中，列分散对齐，行居右 */
  79.     place-content: space-around end;
  80.     /* 项目在网格单元中，列居中，行居右 */
  81.     place-items: center end;
  82. }
  83. header > .top > .right > strong {
  84.     font-size: 12px;
  85.     color: red;
  86.     margin-right: 10px;
  87. }
  88. header > .top > .right > .tools > a {
  89.     font-size: 13px;
  90.     color: #656D77;
  91.     margin-right: 10px;
  92. }
  94. /* 顶部导航3列主布局 */
  95. header > .navbar {
  96.     /* 整体grid三列布局，两边4px放边角背景图片 */
  97.     height: 45px;
  98.     display: grid;
  99.     grid-template-columns: 4px auto 4px;
  100. }
  101. /* 导航左侧边角背景图片 */
  102. header > .navbar > .left {
  103.     background: url(http://www.dedecms.com/img/nav_left.gif) left no-repeat;
  104. }
  105. /* 导航右侧边角背景图片 */
  106. header > .navbar > .right {
  107.     background: url(http://www.dedecms.com/img/nav_right.gif) right no-repeat;
  108. }
  109. /* 中间导航菜单 */
  110. header > .navbar > .menu {
  111.     /* 导航菜单数量不固定，转flex容器 */
  112.     display: flex;
  113.     /* 主轴平均对齐 */
  114.     justify-content: space-evenly;
  115.     /* 交叉轴居中 */
  116.     align-items: center;
  117.     /* 导航菜单背景水平重复 */
  118.     background: url(http://www.dedecms.com/img/menu_background.jpg) repeat-x;
  119. }
  120. /* 菜单项目 */
  121. header > .navbar > .menu > .item {
  122.     font-size: 14px;
  123.     margin-top: -8px;
  124. }
  125. /* .item:first-of-type ~ * 防止给第一个项目前添加背景分割条 */
  126. header > .navbar > .menu > .item:first-of-type ~ * {
  127.     background: url(http://www.dedecms.com/img/nav_line.gif) left no-repeat;
  128.     padding: 0 15px;
  129. }
  130. header > .navbar > .menu > .item > a {
  131.     color: white;
  132.     padding-left: 5px;
  133. }
  134. /* 当前菜单激活时 tab 背景 */
  135. header > .navbar > .menu > .item > a.active {
  136.     background: url(http://www.dedecms.com/img/menu_on_left.gif) left no-repeat;
  137.     padding: 9px 5px 17px 5px;
  138. }
  139. header > .navbar > .menu > .item > a.active > span {
  140.     background: url(http://www.dedecms.com/img/menu_on_right.gif) right no-repeat;
  141.     color: #333333;
  142.     font-weight: bold;
  143.     text-align: center;
  144.     padding: 9px 14px 17px 10px;
  145. }
  147. /* 主体 */
  148. main {
  149.     /* 主体宽度 */
  150.     width: 960px;
  151.     /* 水平居中 */
  152.     margin: 0 auto;
  153.     font-size: 12px;
  154. }
  155. /* 统一设置主体中所有子元素下边距8px */
  156. main > * {
  157.     margin-bottom: 8px;
  158. }
  160. /* 顶部两列两行布局，第二列跨两行 */
  161. main > .toparea {
  162.     /* grid 两列两行布局 */
  163.     display: grid;
  164.     grid-template-columns: 680px auto;
  165.     grid-template-rows: 210px 28px;
  166.     /* 行轨间距，列轨间距 */
  167.     gap: 0 8px;
  168. }
  169. /* 设置图片宽度不让溢出 */
  170. main > .toparea > .server > img {
  171.     width: 100%;
  172. }
  173. /* 第2列下载信息跨两行 */
  174. main > .toparea > .download {
  175.     /* 跨两行 */
  176.     grid-area: span 2;
  177.     background: url(http://www.dedecms.com/images/download_bg.png) no-repeat;
  178. }
  179. /* 下载按钮 */
  180. main > .toparea > .download > a {
  181.     background: url(http://www.dedecms.com/images/download_btn.png) left top;
  182.     width: 232px;
  183.     height: 59px;
  184.     display: block;
  185.     margin: 60px auto 25px auto;
  186. }
  187. main > .toparea > .download > p {
  188.     margin: 5px;
  189.     padding: 0 15px;
  190.     color: #333;
  191.     font-size: 12px;
  192. }
  193. /* 公告信息 */
  194. main > .toparea > .bulletin {
  195.     background-color:#FBF3E8;
  196.     color:#EC702D;
  197.     padding: 4px 20px 0px 20px;
  198.     font-size: 12px;
  199. }
  200. main > .toparea > .bulletin > a {
  201.     color:#EC702D;
  202. }
  204. /* 产品特性两列两行布局 */
  205. main > .product {
  206.     display: grid;
  207.     grid-template-columns: 680px 1fr;
  208.     grid-template-rows: 1fr 320px;
  209.     gap: 0 8px;
  210. }
  212. /* 中部站长工具箱文字两列三行布局 */
  213. main > .product > .product-title,
  214. main > .product > .product-introduce {
  215.     height: 33px;
  216.     background: url(http://www.dedecms.com/img/title_background.gif) repeat-x;
  217.     border-bottom: 1px solid #E6E6E6;
  218.     /* 转flex容器，交叉轴居中 */
  219.     display: flex;
  220.     align-items: center;
  221. }
  222. main > .product > .product-title > span:first-of-type,
  223. main > .product > .product-introduce > span:first-of-type {
  224.     font-size: 14px;
  225.     color: white;
  226.     padding: 2px 8px;
  227.     background-color: #7DB92C;
  228.     border-radius: 5px;
  229.     margin: 0 10px;
  230. }
  231. main > .product > .product-introduce > a {
  232.     background-color: white;
  233.     /* 元素自身交叉轴居下 */
  234.     align-self: flex-end;
  235.     /* tab突出选项 */
  236.     margin: 0 10px 0 auto;
  237.     padding: 2px 8px;
  238.     border-left: 1px solid #E6E6E6;
  239.     border-top: 1px solid #E6E6E6;
  240.     border-right: 1px solid #E6E6E6;
  241.     border-radius: 5px 5px 0 0;
  242. }
  243. /* 产品特性图文混排 */
  244. main > .product > .product-detail {
  245.     padding: 15px;
  246.     background-color: white;
  247.     /* 转grid容器4列两行 */
  248.     display: grid;
  249.     grid-template-columns: repeat(4, 1fr);
  250.     grid-template-rows: repeat(2, 1fr);
  251.     /* 设置行轨，列轨间距 */
  252.     gap: 15px 50px;
  253.     /* 项目居中 */
  254.     place-items: center;
  255. }
  256. main > .product > .product-detail > li {
  257.     /* 转flex容器，主轴为列方向，实现图文居中 */
  258.     display: flex;
  259.     flex-flow: column nowrap;
  260.     align-items: center;
  261. }
  262. main > .product > .product-detail > li > a {
  263.     margin-bottom: 20px;
  264. }
  265. /* 右侧广告赞助 */
  266. main > .product > .product-ads {
  267.     background-color: white;
  268. }
  269. main > .product > .product-ads > a {
  270.     margin-top: 15px;
  271.     display: block;
  272.     text-align: center;
  273. }
  274. /* 中部站长工具箱文字两列布局 */
  275. main > .webmaster {
  276.     height: 30px;
  277.     background-color: #F7F7F7;
  278.     display: grid;
  279.     grid-template-columns: 100px 1fr;
  280. }
  281. main > .webmaster > .wtitle {
  282.      text-align: center;
  283.      margin: auto 0;
  284. }
  285. main > .webmaster > ul {
  286.     background-color: white;
  287.     display: flex;
  288.     align-items: center;
  289. }
  290. main > .webmaster > ul > li {
  291.     margin-left: 20px;
  292.     list-style-type: disc;
  293. }
  295. /* 下部3列2行布局 */
  296. main > .news {
  297.     display: grid;
  298.     grid-template-columns: 372px 300px 1fr;
  299.     grid-template-rows: 200px 180px;
  300.     gap: 8px;
  301. }
  302. main > .news > .download,
  303. main > .news > .info {
  304.     /* 跨两行 */
  305.     grid-area: span 2;
  306. }
  307. /* 统一处理标题部分 */
  308. main > .news .news-title {
  309.     background: url(http://www.dedecms.com/img/title_background.gif) repeat-x;
  310.     border-bottom: 1px solid #E6E6E6;
  311.     /* 转flex容器，主轴两端对齐，交叉轴居中 */
  312.     display: flex;
  313.     justify-content: space-between;
  314.     align-items: center;
  315. }
  316. /* 模块左边类别 */
  317. main > .news .news-title > span:first-of-type {
  318.     font-size: 14px;
  319.     color: white;
  320.     padding: 2px 8px;
  321.     background-color: #7DB92C;
  322.     border-radius: 5px;
  323.     margin: 0 10px;
  324. }
  325. /* 模块右边更多链接 */
  326. main > .news .news-title > a {
  327.     margin-right: 10px;
  328. }
  329. /* 模块公共样式 */
  330. /* 模块左边缩略图 */
  331. main > .news .news-thumb {
  332.     padding: 10px 20px 0 20px;
  333. }
  334. main > .news .news-thumb {
  335.     background-color: white;
  336. }
  337. main > .news .news-thumb a {
  338.     color:#FF6600;
  339.     font-weight: bold;
  340. }
  341. main > .news .news-thumb a:hover {
  342.     text-decoration: underline;
  343. }
  344. main .news-thumb img {
  345.     width: 128px;
  346.     height: 97px;
  347. }
  348. /* 缩略图右边文字 */
  349. main > .news .news-thumb > .news-meta {
  350.     margin-left: 10px;
  351. }
  352. main > .news .news-thumb > .news-meta > p {
  353.     margin-bottom: 5px;
  354. }
  355. /* 模块文章列表 */
  356. main > .news .news-list {
  357.     padding: 10px 20px;
  358.     background-color: white;
  359.     display: flex;
  360.     flex-flow: row wrap;
  361. }
  362. main > .news .news-list > li {
  363.     background: url(http://www.dedecms.com/img/list_ico.gif) left 4px no-repeat;
  364.     padding-left: 24px;
  365.     width: 100%;
  366.     /* 转flex容器，让链接和日期两端对齐，使日期居右 */
  367.     display: flex;
  368.     justify-content: space-between;
  369. }
  370. main > .news .news-list > li > .date {
  371.     color: red;
  372. }
  373. main > .news .news-list > li > a:link,
  374. main > .news .news-list > li > a:visited {
  375.     color: #656D77;
  376. }
  377. main > .news .news-list > li > a:hover {
  378.     color: #333;
  379.     text-decoration: underline;
  380. }
  381. /* 单个模块独立处理 */
  382. /* 热门下载 */
  383. main > .news > .download {
  384.     display: grid;
  385.     grid-template-rows: 33px 100px 1fr;
  386. }
  387. main > .news > .download > .news-thumb {
  388.     display: flex;
  389. }
  390. /* 行业资讯 */
  391. main > .news > .info {
  392.     display: grid;
  393.     grid-template-rows: 33px 1fr;
  394. }
  395. /* 知识库 */
  396. main > .news > .knowledge {
  397.     display: grid;
  398.     grid-template-rows: 33px 1fr;
  399. }
  400. /* 常见问题 */
  401. main > .news > .question {
  402.     display: grid;
  403.     grid-template-rows: 33px 1fr;
  404. }
  406. /* 友链两行布局 */
  407. main > .links {
  408.     display: grid;
  409.     grid-template-rows: 33px 1fr;
  410. }
  411. main > .links > .links-title {
  412.     background: url(http://www.dedecms.com/img/title_background.gif) repeat-x;
  413.     border-bottom: 1px solid #E6E6E6;
  414.     /* 转flex容器，主轴两端对齐，交叉轴居中 */
  415.     display: flex;
  416.     align-items: center;
  417. }
  418. main > .links > .links-title > span {
  419.     font-size: 14px;
  420.     color: white;
  421.     padding: 2px 8px;
  422.     background-color: #7DB92C;
  423.     border-radius: 5px;
  424.     margin: 0 10px;
  425. }
  426. main > .links > .links-title > a {
  427.     padding: 0 10px;
  428. }
  429. main > .links > .links-text {
  430.     background-color: white;
  431.     display: flex;
  432.     align-items: center;
  433.     padding: 15px;
  434. }
  435. main > .links > .links-text > a {
  436.    margin-right: 20px;
  437. }
  439. /* 分类页部分 */
  440. /* 面包屑导航 */
  441. main > .breadcrumbs {
  442.     padding-left: 8px;
  443. }
  444. main > .breadcrumbs > a {
  445.     margin: 0 3px;
  446. }
  447. /* 整体两列布局 */
  448. main > .cats {
  449.     display: grid;
  450.     grid-template-columns: 226px 1fr;
  451.     gap: 8px;
  452. }
  453. /* 分类列表公共样式 */
  454. /* 分类标题 */
  455. main > .cats .cat {
  456.     height: 33px;
  457.     background: url(http://www.dedecms.com/img/title_background.gif) repeat-x;
  458.     border-bottom: 1px solid #E6E6E6;
  459.     /* 转flex容器，主轴两端对齐，交叉轴居中 */
  460.     display: flex;
  461.     justify-content: space-between;
  462.     align-items: center;
  463. }
  464. main > .cats .cat > span {
  465.     font-size: 14px;
  466.     color: white;
  467.     padding: 2px 8px;
  468.     background-color: #7DB92C;
  469.     border-radius: 5px;
  470.     margin: 0 10px;
  471. }
  472. main > .cats .cat > a {
  473.     margin-right: 15px;
  474. }
  475. main > .cats .list {
  476.     padding: 0 20px 10px 20px;
  477.     background-color: white;
  478.     display: flex;
  479.     flex-flow: row wrap;
  480. }
  481. /* 左侧列表 */
  482. main > .cats > .left .list {
  483.     margin-bottom: 8px;
  484. }
  485. main > .cats > .left .list > li {
  486.     list-style-type: disc;
  487.     width: 100%;
  488.     margin: 3px 0;
  489. }
  490. /* 栏目列表 */
  491. main > .cats > .left > .otitle {
  492.     background: url(http://www.dedecms.com/img/otitle_top.gif) 0 0 no-repeat;
  493.     height: 37px;
  494.     width: 226px;
  495.     font-size: 14px;
  496.     font-weight: bold;
  497.     color: #FFF;
  498.     padding: 10px 0 0 25px;
  499. }
  500. main > .cats > .left > .ocontent {
  501.     width: 226px;
  502.     background-image: url(http://www.dedecms.com/img/ocontent_bg.gif);
  503.     background-repeat: repeat-y;
  504. }
  505. main > .cats > .left > .ocontent > .oliterm {
  506.     padding-left: 15px;
  507.     width: 205px;
  508. }
  509. main > .cats > .left > .ocontent > .oliterm > ul {
  510.     padding: 8px 0;
  511. }
  512. main > .cats > .left > .ocontent > .oliterm > ul > li {
  513.     background: url(http://www.dedecms.com/img/literm_ico.gif) 22px 10px no-repeat;
  514.     padding-left: 30px;
  515.     line-height: 30px;
  516. }
  517. main > .cats > .left > .ocontent > .oliterm > ul > li > a {
  518.     margin-left: 8px;
  519. }
  520. main > .cats > .left > .ocontent > .oliterm > ul > li.active {
  521.     background: url(http://www.dedecms.com/img/oiterm_now_bg.gif) 0 0 no-repeat;
  522. }
  523. main > .cats > .left > .obottom {
  524.     background: url(http://www.dedecms.com/img/obuttom_bg.gif) 0 0 no-repeat;
  525.     width: 226px;
  526.     height: 30px;
  527.     margin-bottom: 8px;
  528. }
  529. /* 搜索框 */
  530. main > .cats > .left > .searchbox {
  531.     background-color: white;
  532.     padding: 15px;
  533.     margin-bottom: 8px;
  534. }
  535. main > .cats > .left > .searchbox > form > .searchtext {
  536.     background-color: #E6EAE4;
  537.     color: #77A7C6;
  538. }
  539. main > .cats > .left > .searchbox > form > .search-button {
  540.     background: url(http://www.dedecms.com/img/search_button.gif) no-repeat;
  541.     height: 22px;
  542.     width: 40px;
  543.     color: white;
  544.     border: none;
  545.     cursor: pointer;
  546. }
  548. /* 右侧 */
  549. main > .cats > .right > .module {
  550.     display: grid;
  551.     grid-template-columns: repeat(2, 1fr);
  552.     grid-template-rows: 1fr;
  553.     grid-auto-rows: 1fr;
  554.     gap: 8px;
  555. }
  557. /* 右侧列表 */
  558. main > .cats > .right .thumb {
  559.     padding: 10px 20px 0 20px;
  560.     background-color: white;
  561. }
  562. main > .cats > .right .thumb img {
  563.     width: 100%;
  564. }
  565. main > .cats > .right .list > li {
  566.     background: url(http://www.dedecms.com/img/list_ico.gif) left 4px no-repeat;
  567.     padding-left: 24px;
  568.     width: 100%;
  569.     /* 转flex容器，让链接和日期两端对齐，使日期居右 */
  570.     display: flex;
  571.     justify-content: space-between;
  572. }
  573. main > .cats > .right .list > li {
  574.     margin-top: 8px;
  575. }
  576. main > .cats > .right .list > li > .date {
  577.     color: red;
  578. }
  580. /* 三个广告区 */
  581. main > .cats .ad {
  582.     background-color:#F7F7F7;
  583.     padding: 30px 0;
  584.     text-align: center;
  585. }
  586. main > .cats .ad.ad1 {
  587.     padding: 80px 0;
  588. }
  589. main > .cats .ad.ad2 {
  590.     margin-bottom: 8px;
  591. }
  592. main > .cats .ad.ad3 {
  593.     margin-top: 8px;
  594. }
  596. /* 文章模块 */
  597. main > .cats > .right > .article-box {
  598.     margin-bottom: 8px;
  599.     background-color: white;
  600.     padding: 15px 20px;
  601. }
  602. /* 标题居中 */
  603. main > .cats > .right > .article-box > h1 {
  604.     text-align: center;
  605. }
  606. /* 文章元信息 */
  607. main > .cats > .right > .article-box > .metas {
  608.     text-align: center;
  609.     margin-top: 10px;
  610.     padding: 10px 0;
  611.     border-top: 1px dashed #E0E0E0;
  612. }
  613. main > .cats > .right > .article-box > .metas > span {
  614.     color: red;
  615. }
  616. /* 内容摘要 */
  617. main > .cats > .right > .article-box > .excerpt {
  618.     margin-top: 10px;
  619.     padding: 15px;
  620.     border: 1px dashed #E0E0E0;
  621. }
  622. /* 内容正文 */
  623. main > .cats > .right > .article-box > .content {
  624.     margin-top: 8px;
  625.     font-size: 14px;
  626.     color: #2A2A2A;
  627.     line-height: 25px;
  628. }
  629. main > .cats > .right > .article-box > .content > p {
  630.     text-indent: 2em;
  631. }
  632. /* 心情投票 */
  633. main > .cats > .right > .article-box > .votebox {
  634.     display: flex;
  635.     justify-content: center;
  636. }
  637. main > .cats > .right > .article-box > .votebox > .vote {
  638.     margin: 10px 2px;
  639.     width: 195px;
  640.     height: 51px;
  641.     background: url(http://www.dedecms.com/templets/images/newdigg-bg.png) no-repeat;
  642.     overflow: hidden;
  643.     cursor: pointer;
  644.     /* 投票内容区分两行grid容器 */
  645.     display: grid;
  646.     grid-template-rows: 1fr 20px;
  647.     /* 垂直居中，水平居左 */
  648.     place-items: center normal;
  649. }
  650. /* 顶一下 */
  651. main > .cats > .right > .article-box > .votebox > .up {
  652.     background-position: left top;
  653. }
  654. /* 鼠标移上去时改换背景 */
  655. main > .cats > .right > .article-box > .votebox > .up:hover {
  656.     background-position: left bottom;
  657. }
  658. /* 顶一下文字 */
  659. main > .cats > .right > .article-box > .votebox > .up > .uphand {
  660.     font-size: 14px;
  661.     font-weight: bold;
  662.     color: #C30;
  663.     padding-left: 32px;
  664. }
  665. /* 顶一下百分比 */
  666. main > .cats > .right > .article-box > .votebox > .up > .upper {
  667.     display: flex;
  668.     padding-left: 12px;
  669. }
  670. main > .cats > .right > .article-box > .votebox > .up > .upper > .percent {
  671.     width: 100px;
  672.     height: 7px;
  673.     background: #E8E8E8;
  674.     border-right: 1px solid #CCC;
  675. }
  676. main > .cats > .right > .article-box > .votebox > .up > .upper > .percent > .per {
  677.     border: 1px solid #E37F24;
  678.     background: #FFC535;
  679.     display: block;
  680.     height: 6.5px;
  681.     overflow: hidden;
  682. }
  683. main > .cats > .right > .article-box > .votebox > .up > .upper > .count {
  684.     margin: 0 0 6px 10px;
  685. }
  686. /* 踩一下 */
  687. main > .cats > .right > .article-box > .votebox > .down {
  688.     background-position: right top;
  689. }
  690. /* 鼠标移上去时改换背景 */
  691. main > .cats > .right > .article-box > .votebox > .down:hover {
  692.     background-position: right bottom;
  693. }
  694. /* 踩一下文字 */
  695. main > .cats > .right > .article-box > .votebox > .down > .downhand {
  696.     font-size: 14px;
  697.     font-weight: bold;
  698.     color: #36C;
  699.     padding-left: 32px;
  700. }
  701. /* 踩一下百分比 */
  702. main > .cats > .right > .article-box > .votebox > .down > .downper {
  703.     display: flex;
  704.     padding-left: 12px;
  705. }
  706. main > .cats > .right > .article-box > .votebox > .down > .downper > .percent {
  707.     width: 100px;
  708.     height: 7px;
  709.     background: #E8E8E8;
  710.     border-right: 1px solid #CCC;
  711. }
  712. main > .cats > .right > .article-box > .votebox > .down > .downper > .percent > .per {
  713.     border: 1px solid #689ACC;
  714.     background: #94C0E4;
  715.     display: block;
  716.     height: 6.5px;
  717.     overflow: hidden;
  718. }
  719. main > .cats > .right > .article-box > .votebox > .down > .downper > .count {
  720.     margin: 0 0 6px 10px;
  721. }
  723. /* 底部分割线 */
  724. main > .cats > .right > .article-box > .bottomline {
  725.     margin: 5px 0;
  726.     border-top: 1px dashed #E0E0E0;
  727. }
  728. /* 上一篇，下一篇 */
  729. main > .cats > .right > .article-box > .prevnext {
  730.     display: grid;
  731.     grid-template-columns: repeat(2, 1fr);
  732.     grid-template-rows: 35px;
  733.     place-items: center start;
  734. }
  736. /* 相关文章 */
  737. main > .cats > .right > .related {
  738.     margin-top: 8px;
  739. }
  740. main > .cats > .right > .related-list {
  741.     background-color: white;
  742.     /* padding: 15px 20px; */
  743.     margin-bottom: 8px;
  744.     display: grid;
  745.     grid-template-columns: repeat(2, 1fr);
  746. }
  747. main > .cats > .right > .related-list > li {
  748.     /* 调整背景箭头项目符图片 */
  749.     padding-left: 15px;
  750. }
  751. main > .cats > .right > .related-list > li > .date {
  752.     margin-right: 15px;
  753. }
  755. /* 页脚 */
  756. footer {
  757.     /* 主体宽度 */
  758.     width: 960px;
  759.     /* 水平居中 */
  760.     margin: 0 auto;
  761.     font-size: 12px;
  762.     margin-bottom: 8px;
  763. }
  765. /* 三列两行布局 */
  766. footer  {
  767.     background-color: white;
  768.     display: grid;
  769.     grid-template-columns: 1fr auto 1fr;
  770.     grid-template-rows: 3fr 2fr;
  771.     place-items: center auto;
  772.     padding: 15px;
  773. }
  774. /* 第二行跨三列 */
  775. footer > .copyright {
  776.     grid-area: auto / span 3;
  777.     margin-top: 5px;
  778. }
  779. /* 中部文字链接 */
  780. footer > .footer-text > a {
  781.     font-size: 12px;
  782.     margin-right: 10px;
  783. }
  784. /* 返回顶部 */
  785. footer > .gototop {
  786.     font-size: 14px;
  787.     text-align: right;
  788. }
  789. footer > .gototop > a {
  790.     padding: 3px 5px;
  791.     background-color: #E5E5E5;
  792.     border-radius: 5px;
  793. }
上一条：数组与对象的解构与常用的流程控制方法下一条：箭头函数、rest，sprend参数、获取dom元素、classlist与dataset对象
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多