如何使用Dreamweaver设计网站的demo原型
时间：2023-06-02 16:16:41 来源： 人气：
Dreamweaver怎么设计网站系统的demo？Dreamweaver设计网站的时候，我们会用网站原型和客户讨论需求，客户方便易懂，可以达到事半功倍的效果，想要客户方便易懂，那该如何制作网站的demo呢？下面我们就来看看详细的教程。
1、下载安装Dreamweaver
下载Dreamweavercs6，本文提供软件下载，下载安装即可。
2、打开Dreamweaver开始做原型
打开Dreamweaver之后，有一个窗口，可以快速选择之前编辑过的文件，也可以新建不同类型的文件。如果不想下次进来再出现这样的窗口，可以勾选左下方的“不在显示”。做网站的原型我们用的一般是HTML搭配css和JavaScript文件做。所以下面我们先新建一个HTML页面。
3、新建HTML页面
Dreamweaver新建的HTML页面已经有了
<body>这些基本的标签，我们可以在这个基础上编辑，要引入的css文件和JavaScript文件放到<head>标签中。</p>
<p> </p>
<p><img alt="如何使用Dreamweaver设计网站的demo原型(图2)" src="https://img.xitongtiandi.net/d/file/wenzhang/soft/2019-11-22/5fd0ec3dfadc38a232d64bd12abeb296.jpg" class="aligncenter"></p>
<p> </p>
<p>4、联想</p>
<p>Dreamweaver会自动联想标签，属性或关键字等，所以只需要输入前几个单词，就会自动弹出选择下拉框。方便编程人员快速编码。</p>
<p> </p>
<p><img alt="如何使用Dreamweaver设计网站的demo原型(图3)" src="https://img.xitongtiandi.net/d/file/wenzhang/soft/2019-11-22/f44f40a454f78e7fc4560c6685e50c50.jpg" class="aligncenter"></p>
<p> </p>
<p>5、Dreamweaver的几种视图一</p>
<p>Dreamweaver有四种视图，分别是“代码”，“拆分”，“设计”和“实时视图”，掌握好这几种视图的切换，可加速编码效率。</p>
<p>第一种视图：代码</p>
<p>就是纯代码，打开文件默认的就是“代码”视图。这里就不截图展示了。</p>
<p>第二种视图：拆分</p>
<p>就是左边代码，右边页面效果的视图，编辑左边的源代码，右边的效果图跟着实时变化。</p>
<p> </p>
<p> <img alt="如何使用Dreamweaver设计网站的demo原型(图4)" src="https://img.xitongtiandi.net/d/file/wenzhang/soft/2019-11-22/8a6eeb9c9820694e2e324761dc980842.jpg" class="aligncenter"></p>
<p> </p>
<p>第三种视图：设计</p>
<p>展示的是页面效果图，但是这个页面中的标签块是可以拖动的，拖动到合适的位置可以保存，这种方法设计网页，简单方便。</p>
<p>第四种视图：实时视图</p>
<p>展示的就是页面效果图。</p>
<p> </p>
<p><img alt="如何使用Dreamweaver设计网站的demo原型(图5)" src="https://img.xitongtiandi.net/d/file/wenzhang/soft/2019-11-22/fe2b61ac7ce98972b754229378a8e9d6.jpg" class="aligncenter"></p>
<p> </p>
<p>6、文件树</p>
<p>写一个网站原型，有很多文件，这么多文件怎么管理呢？</p>
<p>点击右侧面板中的文件面板，弹出文件树窗口。在这里可以管理网站demo使用的文件。</p>
<p>例如：我例子中的文件树，common文件夹放要使用的插件，css和JavaScript文件，以及图片等资源。login文件夹放登录相关的html文件，register文件夹放注册相关的html文件，根目录中的success.html,error.html文件都是系统中使用频繁的文件。</p>
<p> </p>
<p><img alt="如何使用Dreamweaver设计网站的demo原型(图6)" src="https://img.xitongtiandi.net/d/file/wenzhang/soft/2019-11-22/5b791a47d06f238ee9eedc48fe61f4e8.jpg" class="aligncenter"></p>
<p> </p>
<p>7、预览</p>
<p>demo写的差不多了，可以点击菜单中的预览按钮，先预览一下。Dreamweaver提供了360，IE，谷歌，火狐等浏览器可供预览。</p>
<p> </p>
<p><img alt="如何使用Dreamweaver设计网站的demo原型(图7)" src="https://img.xitongtiandi.net/d/file/wenzhang/soft/2019-11-22/2739ae95bcfea60f4a3a7722da1d2f32.jpg" class="aligncenter"></p>
<p> </p>
<p>8、保存</p>
<p>写好的页面一定要保存，最好是一边写一遍保存，</p>
<p>点击菜单中的“文件”——》选择“保存”，或者按快捷键ctrl+s保存。</p>
<p> </p>
<p><img alt="如何使用Dreamweaver设计网站的demo原型(图8)" src="https://img.xitongtiandi.net/d/file/wenzhang/soft/2019-11-22/af2b19ca5da744b4fa6203dd0852de21.jpg" class="aligncenter"></p>
<p> </p>
<p>以上就是小编和大家分享的关于如何使用Dreamweaver设计网站的demo原型的具体解决方法，感兴趣用户可以跟着以上步骤试一试，希望以上教程可以帮到大家，关注系统天地精彩资讯教程不间断。</p></p>
</div>
<div class="fix">
<div class="m-art-tag fl"> <span class="tag">作者</span> <a target="_blank" class="link"> <i class="l"></i><span class="txt"> </span> </a> </div>
</div>
<div class="">
<ul class="m-news-opt fix">
<li class="opt-item"> <a href='/article/softjc/48726.html' title='Dreamweaver CS3的复选框使用方法'> 上一篇：Dreamweaver CS3的复选框使用方法 </a> </li>
<li class="opt-item ta-r"> <a href='/article/softjc/48728.html' title='在MindMaster中时间线怎么画？'> 下一篇：在MindMaster中时间线怎么画？ </a> </li>
</ul>
</div>
<div class="m-art-about">
<div class="g-title fix">
<h2 class="title-txt">相关推荐</h2>
</div>
<ul class="g-dot-list m-about-recom ovh">
<li class="item"> <i></i> <a href="/article/softjc/319227.html" title="potplayer怎么调用独立显卡看电影| potplayer调用独立显卡看电影的方法" class="link">potplayer怎么调用独立显卡看电影| potplayer调用独立显卡看电影的方法</a> </li>
<li class="item"> <i></i> <a href="/article/softjc/319226.html" title="potplayer怎么自定义快捷键| potplayer自定义快捷键的方法" class="link">potplayer怎么自定义快捷键| potplayer自定义快捷键的方法</a> </li>
<li class="item"> <i></i> <a href="/article/softjc/319225.html" title="potplayer怎么设置立体声| potplayer设置立体声的方法" class="link">potplayer怎么设置立体声| potplayer设置立体声的方法</a> </li>
<li class="item"> <i></i> <a href="/article/softjc/319224.html" title="potplayer怎么打开视频| potplayer打开视频的方法" class="link">potplayer怎么打开视频| potplayer打开视频的方法</a> </li>
<li class="item"> <i></i> <a href="/article/softjc/319223.html" title="potplayer怎么倍速播放| potplayer倍速播放视频的方法" class="link">potplayer怎么倍速播放| potplayer倍速播放视频的方法</a> </li>
<li class="item"> <i></i> <a href="/article/softjc/319222.html" title="potplayer怎么截取视频片段| potplayer截取视频片段的方法" class="link">potplayer怎么截取视频片段| potplayer截取视频片段的方法</a> </li>
<li class="item"> <i></i> <a href="/article/softjc/319221.html" title="potplayer怎么使用高品质平滑滤镜| potplayer使用高品质平滑滤镜的方法" class="link">potplayer怎么使用高品质平滑滤镜| potplayer使用高品质平滑滤镜的方法</a> </li>
<li class="item"> <i></i> <a href="/article/softjc/319220.html" title="potplayer怎么逐帧截图| potplayer逐帧截图的方法" class="link">potplayer怎么逐帧截图| potplayer逐帧截图的方法</a> </li>
<li class="item"> <i></i> <a href="/article/softjc/319219.html" title="PotPlayer怎么挂载字幕| PotPlayer挂载字幕的方法" class="link">PotPlayer怎么挂载字幕| PotPlayer挂载字幕的方法</a> </li>
<li class="item"> <i></i> <a href="/article/softjc/319218.html" title="potplayer怎么打开链接| potplayer打开链接的方法" class="link">potplayer怎么打开链接| potplayer打开链接的方法</a> </li>
</ul>
<div class="c-img-title multi fix"> <a href="/article/softjc/317553.html" title="待办事项app大全-待办事项app哪个好" class="t-item"> <img src="http://img3.downza.cn/zt/202307/182106-64ae7e9207f5a.jpg" alt="待办事项app大全-待办事项app哪个好" class="t-img" width="180" height="120" >
<p class="txt">待办事项app大全-待办事项app哪个好</p>
</a> <a href="/article/softjc/317552.html" title="网络电视大全-网络电视哪个好" class="t-item"> <img src="http://img3.downza.cn/zt/202308/140002-64ed896271e55.jpg" alt="网络电视大全-网络电视哪个好" class="t-img" width="180" height="120" >
<p class="txt">网络电视大全-网络电视哪个好</p>
</a> <a href="/article/softjc/317551.html" title="建筑工游戏大全-建筑工游戏哪个好" class="t-item"> <img src="http://img3.downza.cn/zt/202308/142505-64d482c117ed6.jpg" alt="建筑工游戏大全-建筑工游戏哪个好" class="t-img" width="180" height="120" >
<p class="txt">建筑工游戏大全-建筑工游戏哪个好</p>
</a> <a href="/article/softjc/317550.html" title="数控仿真软件大全-数控仿真软件哪个好" class="t-item"> <img src="http://img3.downza.cn/zt/202307/141303-64b8d06f9ff56.jpg" alt="数控仿真软件大全-数控仿真软件哪个好" class="t-img" width="180" height="120" >
<p class="txt">数控仿真软件大全-数控仿真软件哪个好</p>
</a> </div>
</div>
</div>
<div class="m-side-col col-r-w">
<div class="g-title fix">
<h2 class="title-txt">教程资讯</h2>
</div>
<div class="tag-list fix"> <a href='/article/xtjc.html' class='tag-link '>系统教程</a> <a href='/article/winxp.html' class='tag-link '>WinXp教程</a> <a href='/article/win7448.html' class='tag-link '>Win7教程</a> <a href='/article/win8627.html' class='tag-link '>Win8教程</a> <a href='/article/win10324.html' class='tag-link '>Win10教程</a> <a href='/article/linux.html' class='tag-link '>Linux教程</a> <a href='/article/win11jc.html' class='tag-link '>Win11教程</a> <a href='/article/diannao.html' class='tag-link '>电脑教程</a> <a href='/article/gamejc.html' class='tag-link '>游戏教程</a> <a href='/article/softjc.html' class='tag-link cur'>软件教程</a> </div>
<div class="g-title fix">
<h2 class="title-txt">软件教程排行</h2>
</div>
<div class="m-rank mb40">
<ul>
<li class="rank-item"> <a href="/article/softjc/45572.html" title="Autocad 2014 注册机破解教程（Autocad 2014激活步骤）" class="item-name ellipsis"> <span class="g-sort-num no1">1</span> Autocad 2014 注册机破解教程（Autocad 2014激活步骤） </a> </li>
<li class="rank-item"> <a href="/article/softjc/44223.html" title="MathType v7.1.2安装破解激活图文详细教程" class="item-name ellipsis"> <span class="g-sort-num no2">2</span> MathType v7.1.2安装破解激活图文详细教程 </a> </li>
<li class="rank-item"> <a href="/article/softjc/48260.html" title="Office 365 如何永久激活？Office 365 永久激活教程" class="item-name ellipsis"> <span class="g-sort-num no3">3</span> Office 365 如何永久激活？Office 365 永久激活教程 </a> </li>
<li class="rank-item"> <a href="/article/softjc/45111.html" title="CAD2018注册机激活码(CAD2018 64位 使用方法)" class="item-name ellipsis"> <span class="g-sort-num no4">4</span> CAD2018注册机激活码(CAD2018 64位 使用方法) </a> </li>
<li class="rank-item"> <a href="/article/softjc/43979.html" title="六款模拟器告诉你哪款模拟器最好用" class="item-name ellipsis"> <span class="g-sort-num no5">5</span> 六款模拟器告诉你哪款模拟器最好用 </a> </li>
<li class="rank-item"> <a href="/article/softjc/45015.html" title="photoshop 7.0 绿色版下载安装及激活教程（附序列号）" class="item-name ellipsis"> <span class="g-sort-num no6">6</span> photoshop 7.0 绿色版下载安装及激活教程（附序列号） </a> </li>
<li class="rank-item"> <a href="/article/softjc/309361.html" title="拼多多如何看总共消费多少钱" class="item-name ellipsis"> <span class="g-sort-num no7">7</span> 拼多多如何看总共消费多少钱 </a> </li>
<li class="rank-item"> <a href="/article/softjc/313330.html" title="抖音删除的聊天记录怎么恢复？怎么恢复抖音的聊天记录？" class="item-name ellipsis"> <span class="g-sort-num no8">8</span> 抖音删除的聊天记录怎么恢复？怎么恢复抖音的聊天记录？ </a> </li>
<li class="rank-item"> <a href="/article/softjc/310281.html" title="电脑小技巧—360安全卫士卸载不掉怎么办？教你如何卸载" class="item-name ellipsis"> <span class="g-sort-num no9">9</span> 电脑小技巧—360安全卫士卸载不掉怎么办？教你如何卸载 </a> </li>
<li class="rank-item"> <a href="/article/softjc/48213.html" title="SecureCRT注册码2019最新分享（附SecureCRT激活教程）" class="item-name ellipsis"> <span class="g-sort-num no10">10</span> SecureCRT注册码2019最新分享（附SecureCRT激活教程） </a> </li>
</ul>
</div>
<div class="AD_360_300 mb40" id="list_system_ad1"></div>
<div class="g-title fix">
<h2 class="title-txt">系统教程</h2>
</div>
<div class="m-rank mb40">
<ul>
<li class="rank-item"> <a href="/article/xtjc/316468.html" title="如何查看电脑型号及配置 电脑型号及配置查看方法" class="item-name ellipsis"> <span class="g-sort-num no1">1</span> 如何查看电脑型号及配置 电脑型号及配置查看方法 </a> </li>
<li class="rank-item"> <a href="/article/xtjc/316467.html" title="电脑cpu性能怎么看 电脑cpu性能查看方法" class="item-name ellipsis"> <span class="g-sort-num no2">2</span> 电脑cpu性能怎么看 电脑cpu性能查看方法 </a> </li>
<li class="rank-item"> <a href="/article/xtjc/316466.html" title="硬盘是什么意思 硬盘的意思是什么介绍" class="item-name ellipsis"> <span class="g-sort-num no3">3</span> 硬盘是什么意思 硬盘的意思是什么介绍 </a> </li>
<li class="rank-item"> <a href="/article/xtjc/316465.html" title="驱动安装失败是什么原因 驱动安装失败原因有哪些" class="item-name ellipsis"> <span class="g-sort-num no4">4</span> 驱动安装失败是什么原因 驱动安装失败原因有哪些 </a> </li>
<li class="rank-item"> <a href="/article/xtjc/316464.html" title="电脑cpu温度过高怎么解决 电脑cpu温度过高怎么办" class="item-name ellipsis"> <span class="g-sort-num no5">5</span> 电脑cpu温度过高怎么解决 电脑cpu温度过高怎么办 </a> </li>
<li class="rank-item"> <a href="/article/xtjc/312594.html" title="把手教你如何让旧电脑系统重生 Windows系统重做实操教学" class="item-name ellipsis"> <span class="g-sort-num no6">6</span> 把手教你如何让旧电脑系统重生 Windows系统重做实操教学 </a> </li>
<li class="rank-item"> <a href="/article/xtjc/311140.html" title="石大师一键重装系统教程" class="item-name ellipsis"> <span class="g-sort-num no7">7</span> 石大师一键重装系统教程 </a> </li>
<li class="rank-item"> <a href="/article/xtjc/311139.html" title="一键重装工具重装Win10系统教学" class="item-name ellipsis"> <span class="g-sort-num no8">8</span> 一键重装工具重装Win10系统教学 </a> </li>
<li class="rank-item"> <a href="/article/xtjc/311138.html" title="虚拟光驱安装电脑系统教程" class="item-name ellipsis"> <span class="g-sort-num no9">9</span> 虚拟光驱安装电脑系统教程 </a> </li>
<li class="rank-item"> <a href="/article/xtjc/311137.html" title="安装Win7系统提示此文件的版本与正在运行的windows版本不兼容怎么办" class="item-name ellipsis"> <span class="g-sort-num no10">10</span> 安装Win7系统提示此文件的版本与正在运行的windows版本不兼容怎么办 </a> </li>
</ul>
</div>
<div class="g-title fix">
<h2 class="title-txt">系统主题</h2>
</div>
<div class="m-rank u-dashed mb40">
<ul>
<li class="rank-item"> <a href="/download/Win10zhuti/308936.html" title="Windows 10《战争机器5》主题" class="item-name ellipsis"> <span class="g-sort-num no1">1</span> Windows 10《战争机器5》主题 </a> </li>
<li class="rank-item"> <a href="/download/xpzhuti/272.html" title="加速世界 黑雪姬XP主题" class="item-name ellipsis"> <span class="g-sort-num no2">2</span> 加速世界 黑雪姬XP主题 </a> </li>
<li class="rank-item"> <a href="/download/xpzhuti/110.html" title="邻家女孩林允儿win7主题" class="item-name ellipsis"> <span class="g-sort-num no3">3</span> 邻家女孩林允儿win7主题 </a> </li>
<li class="rank-item"> <a href="/download/Win8zhuti/289.html" title="魔笛MAGI 摩尔迦娜XP主题+Win7主题" class="item-name ellipsis"> <span class="g-sort-num no4">4</span> 魔笛MAGI 摩尔迦娜XP主题+Win7主题 </a> </li>
<li class="rank-item"> <a href="/download/win7zhuti/191.html" title="的是是非非方法改个" class="item-name ellipsis"> <span class="g-sort-num no5">5</span> 的是是非非方法改个 </a> </li>
<li class="rank-item"> <a href="/download/xpzhuti/113.html" title="雪中的女孩win7唯美桌面" class="item-name ellipsis"> <span class="g-sort-num no6">6</span> 雪中的女孩win7唯美桌面 </a> </li>
<li class="rank-item"> <a href="/download/win7zhuti/193.html" title="魔笛MAGI 摩尔迦娜XP主题+Win7主题" class="item-name ellipsis"> <span class="g-sort-num no7">7</span> 魔笛MAGI 摩尔迦娜XP主题+Win7主题 </a> </li>
<li class="rank-item"> <a href="/download/Win10zhuti/195.html" title="是否SD敢达飞和房管局" class="item-name ellipsis"> <span class="g-sort-num no8">8</span> 是否SD敢达飞和房管局 </a> </li>
<li class="rank-item"> <a href="/download/Win10zhuti/196.html" title="放水电费挂号费激活工具" class="item-name ellipsis"> <span class="g-sort-num no9">9</span> 放水电费挂号费激活工具 </a> </li>
<li class="rank-item"> <a href="/download/Win8zhuti/205.html" title="萝莉镜音铃COS美女唯美主题" class="item-name ellipsis"> <span class="g-sort-num no10">10</span> 萝莉镜音铃COS美女唯美主题 </a> </li>
</ul>
</div>
<!--装机必备-->
<div class="m-side-zjbb">
<div class="g-title fix">
<h2 class="title-txt">装机软件</h2>
</div>
<ul class="zjbb-list mb20 fix">
<li class="list-item"><a href="/download/bdcj/314134.html" title=" DirectX9.0c 官方安装版" target="_blank"> <img class="item-img" src="/uploads/allimg/20240227/1-24022G5412K94.png" alt=" DirectX9.0c 官方安装版" width="80" height="80">
<p class="item-title"> DirectX9.0c 官方安装版</p>
</a></li>
<li class="list-item"><a href="/download/work/314133.html" title="office2011免费版 完整版" target="_blank"> <img class="item-img" src="/uploads/allimg/20240227/1-24022G535162P.jpg" alt="office2011免费版 完整版" width="80" height="80">
<p class="item-title">office2011免费版 完整版</p>
</a></li>
<li class="list-item"><a href="/download/drivers/314132.html" title="USB万能驱动最新版 v3.0" target="_blank"> <img class="item-img" src="/uploads/allimg/20240227/1-24022G52U9C8.png" alt="USB万能驱动最新版 v3.0" width="80" height="80">
<p class="item-title">USB万能驱动最新版 v3.0</p>
</a></li>
<li class="list-item"><a href="/download/work/312600.html" title="新中大财务管理系统V6.1 单机中文版" target="_blank"> <img class="item-img" src="/uploads/allimg/20240203/1-240203143PJ07.png" alt="新中大财务管理系统V6.1 单机中文版" width="80" height="80">
<p class="item-title">新中大财务管理系统V6.1 单机中文版</p>
</a></li>
<li class="list-item"><a href="/download/bdcj/312597.html" title="Registry Mechanic(注册表修复工具)v10.5中文破解版" target="_blank"> <img class="item-img" src="/uploads/allimg/20240203/1-240203113301510.png" alt="Registry Mechanic(注册表修复工具)v10.5中文破解版" width="80" height="80">
<p class="item-title">Registry Mechanic(注册表修复工具)v10.5中文破解版</p>
</a></li>
<li class="list-item"><a href="/download/yasuojieya/312596.html" title="顶尖数据恢复软件绿色破解版v6.30" target="_blank"> <img class="item-img" src="/uploads/allimg/20240202/1-2402021S15U34.png" alt="顶尖数据恢复软件绿色破解版v6.30" width="80" height="80">
<p class="item-title">顶尖数据恢复软件绿色破解版v6.30</p>
</a></li>
<li class="list-item"><a href="/download/yasuojieya/312526.html" title="WinRAR中文版v6.10.0.0 电脑版" target="_blank"> <img class="item-img" src="/uploads/allimg/20240203/1-240203142Qc52.png" alt="WinRAR中文版v6.10.0.0 电脑版" width="80" height="80">
<p class="item-title">WinRAR中文版v6.10.0.0 电脑版</p>
</a></li>
<li class="list-item"><a href="/download/drivers/310915.html" title="佳能IP1180打印机驱动" target="_blank"> <img class="item-img" src="/uploads/allimg/20231228/1-23122Q5460K22.png" alt="佳能IP1180打印机驱动" width="80" height="80">
<p class="item-title">佳能IP1180打印机驱动</p>
</a></li>
<li class="list-item"><a href="/download/drivers/310391.html" title="U盘设备工具箱 v3.0" target="_blank"> <img class="item-img" src="/uploads/allimg/20231210/1-231210231S4M3.png" alt="U盘设备工具箱 v3.0" width="80" height="80">
<p class="item-title">U盘设备工具箱 v3.0</p>
</a></li>
</ul>
</div>
<!--装机必备-->
</div>
</div>
<!-- / 教程内容页 -->
</div>
</div>
<!-- 页尾 -->
<!-- sidebar -->
<div class="m-sidebar">
<div class="go-top J_gotop"><i class="ico"></i></div>
</div>
<!-- / sidebar -->
<!-- 页尾 -->
<div class="footer" id="dedem">
<div class="wrap auto fix">
<div class="footer-link mb15"> <a href="https://www.hnxfcj.cn" class="link-item" rel="nofollow">网站首页</a>|
<a href='/single/benzhanjianjie.html' class="link-item" >本站简介</a>|
<a href='/single/lianxifangshi.html' class="link-item" >联系方式</a>|
<a href='/single/guanggaotoufang.html' class="link-item" >广告投放</a>|
<a href='/single/banquanshenming.html' class="link-item" >版权申明</a>|
<a href='/single/wangzhanhezuo.html' class="link-item" >网站合作</a>|
<a href="https://www.hnxfcj.cn/sitemap.xml" target="_blank" class="link-item" rel="nofollow">网站地图</a> </div>
</div>
<p class="mb15"><b>本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！</b> </p>
<p style="margin-bottom: 11px;"><b>如侵犯到您的权益,请及时通知我们,我们会及时处理，对热搜下载有任何投诉或建议，请与管理员联系. 购买程序联系：qq</b> </p>
<p></p>
<div style="margin:0 auto;">
<p ></p>CopyRight 2020-2022 热搜下载站 Inc.All Rights Reserved. </p>
<p>备案号：<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">粤ICP备2023040079号-3</a></p>
</div>
<p></p>
</div>
<!-- / 页尾 -->
<script src="/template/pc/skin/js/jquery-1.7.2.min.js"></script>
<script src="/template/pc/skin/js/lazyload.js"></script>
<script src="/template/pc/skin/js/jquery.superslide.2.1.1.js"></script>
<script src="/template/pc/skin/js/main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".search-option").toggle(function(){
$(this).next(".select").slideDown();
},function(){
$(this).next(".select").slideUp();
});
$(".select dd").click(function(){
$a=$(this).html();
if($a=='XP系统'){
$("#typeid").val('1');
$(".search-option").html($a+'<i><em></em><span></span></i>');
}
else if($a=='Win7系统'){
$("#typeid").val('2');
$(".search-option").html($a+'<i><em></em><span></span></i>');
}
else if($a=='Win8系统'){
$("#typeid").val('2');
$(".search-option").html($a+'<i><em></em><span></span></i>');
}
else if($a=='Win10系统'){
$("#typeid").val('38');
$(".search-option").html($a+'<i><em></em><span></span></i>');
}
else if($a=='装机软件'){
$("#typeid").val('5');
$(".search-option").html($a+'<i><em></em><span></span></i>');
}
else if($a=='主题下载'){
$("#typeid").val('4');
$(".search-option").html($a+'<i><em></em><span></span></i>');
}
else if($a=='教程资讯'){
$("#typeid").val('6');
$(".search-option").html($a+'<i><em></em><span></span></i>');
}
$(".select").slideUp();
});
});
</script>
<!-- 应用插件标签 start -->
<style>
.tpgzgg {width: 100%;height: 100%;}
.tpgzgg .wp {width: 1200px;}
.tpgzgg .studytextpanebox {margin: 0.25%;float: left;width: 19.5%;}
.tpgzgg .cl {zoom: 1;}
.clear {clear: both;}
.tpgzgg .studytextpanebox img{width: 100%;}
</style>
<div class="tpgzgg" style="margin: 5px auto;">
<div class="wp cl" id="masonry" style="margin: 5px auto;">
</div>
</div>
<div class="clear"></div>
<!-- 应用插件标签 end -->
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':');
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
} else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script");
s.parentNode.insertBefore(bp, s);
})();
</script>
<script>
/*统计*/
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?085551d2c19c6c980ebb2f727fda86bc";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>