Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿写dedecms首页-分类页-文章页
Blogger Information
Blog 70
fans 1
comment 0
visits 53062
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿写dedecms首页-分类页-文章页
葡萄枝子
Original
656 people have browsed it

仿写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. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：dedecms这货还在呀
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post