基于Metronic的Bootstrap开发框架经验总结（11）--页面菜单的几种呈现方式 - 伍华聪 - 博客园
随笔 - 510, 文章 - 20, 评论 - 7361, 引用 - 20
在常规的后台管理系统或者前端界面中，一般都有一个导航菜单提供给用户，方便选择所需的内容。基于Metronic的Bootstrap开发框架，是整合了Metroinc样式，以及Boostrap组件模块的内容，因此菜单的效果自然也是和Bootstrap一脉相承的。基于经常使用的几种菜单样式，本文进行了相关的介绍和展示。
1、菜单展示的三种方式
菜单的展示可以做成各种各样的效果，本文只是针对性的介绍其中的三种，两种左侧竖放的菜单，一种是水平横放的菜单。
菜单收缩后界面如下所示。
水平样式的菜单如下所示：
2、几种布局的组织方式
由于这几种布局方式，它们的框架布局页面（也就是Layout页面）内容有所不同，一般情况下我们可以把它分别定义为一种Layout页面，这样在实际使用的时候包含它即可。
我根据上面几种样式，分别定义了几个不同的Layout页面，如下所示
一般情况下，我们生成一个视图页面，会提示我们选择不同的视图布局页面的，确认之后会在页面顶部应用对应的Layout页面。
如果我们需要动态指定页面的布局内容，可以在上面使用一个变量来处理，如下代码所示。
Layout = ConfigData.ViewLayoutFile;// "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "角色信息";
实际上，我们一般的页面布局确定好后，就相对比较少变更的，所以为了不打破这个生成页面的布局内容，我们可以把前面处理好的Layout1/2/3等这些复制到Layout页面里面进行处理即可。
不过页面里面还是需要根据不同布局页面，指定不同的资源的。
我们添加样式的资源如下所示。
//开始全局必需样式引用
css_metronic.Include("~/Content/metronic/assets/global/plugins/font-awesome/css/font-awesome.min.css",
"~/Content/metronic/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",
"~/Content/metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css",
"~/Content/metronic/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
..........................
//主题全局样式
"~/Content/metronic/assets/global/css/components-rounded.css",
"~/Content/metronic/assets/global/css/plugins.min.css",
//主题布局样式
"~/Content/metronic/assets/layouts/" + Layout + "/css/layout.css",
"~/Content/metronic/assets/layouts/" + Layout + "/css/themes/default.min.css",
"~/Content/metronic/assets/layouts/" + Layout + "/css/custom.min.css"
上面红色的Layout是我们根据不同布局页面获得的一个变量，从而能够使得不同布局页面的样式和脚本顺利引入的。
/// &summary&
/// 系统定义的一些常用变量
/// &/summary&
public class ConfigData
/// &summary&
/// Web开发框架所属的系统类型定义
/// &/summary&
public const string SystemType = "WareMis";
/// &summary&
/// 配置视图的样式布局
/// &/summary&
public static LayoutType Layout = LayoutType.Layout2;
/// &summary&
/// 布局样式枚举
/// &/summary&
public enum LayoutType
3、菜单的动态生成
为了实现菜单动态的生成，我们需要了解这几种方式的菜单结构，然后我们根据它们的特点进行数据结构的生成即可。
第一第二种布局方式的菜单结构数据是一样的，它们的内容如下所示。
&ul class="page-sidebar-menu page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200"&
&li class="nav-item start" id="1"&
&a href="/Home/index?tid=1" class="nav-link nav-toggle"&
&i class="icon-home"&&/i&
&span class="title"&首页&/span&
&span class="selected"&&/span&
&span class="arrow open"&&/span&
@Html.Raw(@ViewBag.MenuString)
我们可以通过后台生成：@Html.Raw(@ViewBag.MenuString)
然后输出的界面里即可。
我们来看看前两种菜单的结构，简单的结构如下所示
&li class="nav-item start" id="1"&
&a href="/Home/index?tid=1" class="nav-link nav-toggle"&
&i class="icon-home"&&/i&
&span class="title"&首页&/span&
&span class="selected"&&/span&
&span class="arrow open"&&/span&
如果有子菜单的，那么两级菜单的结构如下所示。
&li class="nav-item " id="3"&
&a href="javascript:;" class="nav-link nav-toggle"&
&i class="icon-rocket"&&/i&
&span class="title"&客户管理&/span&
&span class="arrow"&&/span&
&ul class="sub-menu"&
&li class="nav-item " id="31"&
&a href="second?tid=3&sid=31"&
&i class="glyphicon glyphicon-th-list"&&/i&
&span class="title"&客户管理&/span&
&li class="nav-item
" id="32"&
&a href="second?tid=3&sid=32"&
&i class="icon-basket"&&/i&
&span class="badge badge-roundless badge-danger"&new&/span&
&span class="title"&客户联系人&/span&
如果是三级菜单的结构，如下所示：
&li class="nav-item active open" id="2"&
&a href="javascript:;" class="nav-link nav-toggle"&
&i class="icon-basket"&&/i&
&span class="title"&行业动态&/span&
&span class="selected"&&/span&
&span class="arrow open"&&/span&
&ul class="sub-menu"&
&li class="nav-item
active open" id="21"&
&a href="javascript:;" class="nav-link nav-toggle"&
&i class="icon-home"&&/i&
&span class="title"&行业动态&/span&
&span class="arrow"&&/span&
&span class="selected"&&/span&
&ul class="sub-menu"&
&li class="nav-item
active open" id="211"&
&a href="second?tid=2&sid=21&ssid=211"&
&i class="icon-home"&&/i&
&span class="badge badge-danger"&4&/span&
&span class="title"&政策法规&/span&
&li class="nav-item " id="212"&
&a href="second?tid=2&sid=21&ssid=212"&
&i class="icon-basket"&&/i&
&span class="badge badge-warning"&4&/span&
&span class="title"&通知公告&/span&
根据这些内容，我们在后台动态输出菜单结构即可。
例如我们在基类控制器里面，通过判断视图的处理，实现菜单内容的输出。
/// &summary&
/// 重载视图展示界面，方便放置一些常规的ViewBag变量。
/// 如果放在OnActionExecuting，则会导致任何请求都会执行一次，从而导致多次执行，降低响应效率
/// &/summary&
protected override ViewResult View(string viewName, string masterName, object model)
//登录信息统一设置
if (CurrentUser != null)
ViewBag.FullName = CurrentUser.FullN
ViewBag.Name = CurrentUser.N
//ViewBag.MenuString = GetMenuString();
ViewBag.MenuString = GetMenuStringCache(); //使用缓存，隔一段时间更新
return base.View(viewName, masterName, model);
为了提高菜单的响应处理，避免多次递归耗时，我们可以把生成好的菜单内容，放到缓存里面，通过键值实现处理。
/// &summary&
/// 使用分布式缓存实现菜单数据的缓存处理
/// &/summary&
/// &returns&&/returns&
public string GetMenuStringCache()
string itemValue = MemoryCacheHelper.GetCacheItem&string&("GetMenuStringCache_" + CurrentUser.ID , delegate()
return GetMenuString();
null, DateTime.Now.AddMinutes(5) //5分钟以后过期，重新获取
return itemV
而对于水平方向的菜单处理，和前面两者有所不同。
如二级菜单数据展示如下所示。
&li class="menu-dropdown classic-menu-dropdown "&
&a href="index.html" class="nav-link
&i class="icon-bar-chart"&&/i& Default
&span class="arrow"&&/span&
&li class="menu-dropdown classic-menu-dropdown active"&
&a href="javascript:;" class="nav-link nav-toggle "&
&i class="icon-basket"&&/i& Dashboard
&span class="arrow"&&/span&
&ul class="dropdown-menu pull-left"&
&li class=" active"&
&a href="index.html" class="nav-link
&i class="icon-bar-chart"&&/i&Dashboard
&span class="arrow"&&/span&
三级菜单展示的数据如下所示。
&li class="menu-dropdown classic-menu-dropdown "&
&a href="javascript:;" class="nav-link nav-toggle "&
&i class="icon-briefcase"&&/i& Pages
&span class="arrow"&&/span&
&ul class="dropdown-menu pull-left"&
&li class="dropdown-submenu "&
&a href="javascript:;" class="nav-link nav-toggle "&
&i class="icon-basket"&&/i& eCommerce
&span class="arrow"&&/span&
&ul class="dropdown-menu"&
&li class=" "&
&a href="ecommerce_index.html" class="nav-link "&
&i class="icon-home"&&/i& Dashboard
&li class=" "&
&a href="ecommerce_orders.html" class="nav-link "&
&i class="icon-basket"&&/i& Orders
&li class="dropdown-submenu"&
&a href="javascript:;" class="nav-link nav-toggle"&
&i class="icon-notebook"&&/i& Login
&span class="arrow"&&/span&
&ul class="dropdown-menu pull-left"&
&li class=""&
&a href="page_user_login_1.html" class="nav-link " target="_blank"& Login Page 1 &/a&
&li class=""&
&a href="page_user_login_2.html" class="nav-link " target="_blank"& Login Page 2 &/a&
我们所需要做的就是把我们数据库里面的菜单数据，动态构建这种递进式的数据结构即可。
如果感兴趣Bootstrap开发框架系列，可以参考学习下面的文章，感谢您的阅读。bootstrap框架搭建页面 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 22时,
1.使用bootstrap框架2.演示地址：http://demo-for-show-b875b.coding.io/museum.html
代码片段(4)
museum.html&~&16KB&&&&
&!DOCTYPE html&
&html lang="zh-cn"&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&现代浏览器博物馆&/title&
&link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"&
&!--[if lt IE 9]&
&script src="js/html5shiv.js"&&/script&
&script src="js/respond.min.js"&&/script&
&![endif]--&
padding-top: 50
padding-bottom: 40
color: #5a5a5a;
/* 轮播广告 */
.carousel {
height: 500
margin-bottom: 60
.carousel .item {
height: 500
background-color: #000;
.carousel .item img {
width: 100%;
.carousel-caption {
z-index: 10;
.carousel-caption p {
margin-bottom: 20
font-size: 20
line-height: 1.8;
/* 简介 */
.summary {
padding-right: 15
padding-left: 15
.summary .col-md-4 {
margin-bottom: 20
text-align:
/* 特性 */
.feature-divider {
margin: 40px 0;
.feature {
padding: 30px 0;
.feature-heading {
font-size: 50
color: #2a6496;
.feature-heading .text-muted {
font-size: 28
/* 响应式布局 */
@media (max-width: 768px) {
.summary {
padding-right: 3
padding-left: 3
.carousel {
height: 300
margin-bottom: 30
.carousel .item {
height: 300
.carousel img {
min-height: 300
.carousel-caption p {
font-size: 16
line-height: 1.4;
.feature-heading {
font-size: 34
.feature-heading .text-muted {
font-size: 22
@media (min-width: 992px) {
.feature-heading {
margin-top: 120
&!-- 顶部导航 --&
&div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav"&
&div class="container"&
&div class="navbar-header"&
&button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&
&span class="sr-only"&切换导航&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&a class="navbar-brand" href="#"&现代浏览器博物馆&/a&
&div class="navbar-collapse collapse"&
&ul class="nav navbar-nav"&
&li class="active"&&a href="#ad-carousel"&综述&/a&&/li&
&li&&a href="#summary-container"&简述&/a&&/li&
&li class="dropdown"&
&a href="#" class="dropdown-toggle" data-toggle="dropdown"&特点 &span class="caret"&&/span&&/a&
&ul class="dropdown-menu" role="menu"&
&li&&a href="#feature-tab" data-tab="tab-chrome"&Chrome&/a&&/li&
&li&&a href="#feature-tab" data-tab="tab-firefox"&Firefox&/a&&/li&
&li&&a href="#feature-tab" data-tab="tab-safari"&Safari&/a&&/li&
&li&&a href="#feature-tab" data-tab="tab-opera"&Opera&/a&&/li&
&li&&a href="#feature-tab" data-tab="tab-ie"&IE&/a&&/li&
&li&&a href="#" data-toggle="modal" data-target="#about-modal"&关于&/a&&/li&
&!-- 广告轮播 --&
&div id="ad-carousel" class="carousel slide" data-ride="carousel"&
&ol class="carousel-indicators"&
&li data-target="#ad-carousel" data-slide-to="0" class="active"&&/li&
&li data-target="#ad-carousel" data-slide-to="1"&&/li&
&li data-target="#ad-carousel" data-slide-to="2"&&/li&
&li data-target="#ad-carousel" data-slide-to="3"&&/li&
&li data-target="#ad-carousel" data-slide-to="4"&&/li&
&div class="carousel-inner"&
&div class="item active"&
&img src="images/chrome-big.jpg" alt="1 slide"&
&div class="container"&
&div class="carousel-caption"&
&h1&Chrome&/h1&
&p&Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。&/p&
&p&&a class="btn btn-lg btn-primary" href="/intl/zh-CN/chrome/browser/"
role="button" target="_blank"&点我下载&/a&&/p&
&div class="item"&
&img src="images/firefox-big.jpg" alt="2 slide"&
&div class="container"&
&div class="carousel-caption"&
&h1&Firefox&/h1&
&p&Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。&/p&
&p&&a class="btn btn-lg btn-primary" href=".cn/download/" target="_blank"
role="button"&点我下载&/a&&/p&
&div class="item"&
&img src="images/safari-big.jpg" alt="3 slide"&
&div class="container"&
&div class="carousel-caption"&
&h1&Safari&/h1&
&p&Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。&/p&
&p&&a class="btn btn-lg btn-primary" href="/cn/safari/" target="_blank"
role="button"&点我下载&/a&&/p&
&div class="item"&
&img src="images/opera-big.jpg" alt="4 slide"&
&div class="container"&
&div class="carousel-caption"&
&h1&Opera&/h1&
&p&Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。&/p&
&p&&a class="btn btn-lg btn-primary" href="/zh-cn" target="_blank"
role="button"&点我下载&/a&&/p&
&div class="item"&
&img src="images/ie-big.jpg" alt="5 slide"&
&div class="container"&
&div class="carousel-caption"&
&h1&IE&/h1&
&p&Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。&/p&
&p&&a class="btn btn-lg btn-primary" href="/" target="_blank"
role="button"&点我下载&/a&&/p&
&a class="left carousel-control" href="#ad-carousel" data-slide="prev"&&span
class="glyphicon glyphicon-chevron-left"&&/span&&/a&
&a class="right carousel-control" href="#ad-carousel" data-slide="next"&&span
class="glyphicon glyphicon-chevron-right"&&/span&&/a&
&!-- 主要内容 --&
&div class="container summary"&
&!-- 简介 --&
&div class="row" id="summary-container"&
&div class="col-md-4"&
&img class="img-circle" src="images/chrome-logo-small.jpg" alt="chrome"&
&h2&Chrome&/h2&
&p&Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。&/p&
&p&&a class="btn btn-default" href="#" role="button"&点我下载&/a&&/p&
&div class="col-md-4"&
&img class="img-circle" src="images/firefox-logo-small.jpg" alt="firefox"&
&h2&Firefox&/h2&
&p&Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。&/p&
&p&&a class="btn btn-default" href="#" role="button"&点我下载&/a&&/p&
&div class="col-md-4"&
&img class="img-circle" src="images/safari-logo-small.jpg" alt="safari"&
&h2&Safari&/h2&
&p&Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。&/p&
&p&&a class="btn btn-default" href="#" role="button"&点我下载&/a&&/p&
&!-- 特性 --&
&hr class="feature-divider"&
&ul class="nav nav-tabs" role="tablist" id="feature-tab"&
&li class="active"&&a href="#tab-chrome" role="tab" data-toggle="tab"&Chrome&/a&&/li&
&li&&a href="#tab-firefox" role="tab" data-toggle="tab"&Firefox&/a&&/li&
&li&&a href="#tab-safari" role="tab" data-toggle="tab"&Safari&/a&&/li&
&li&&a href="#tab-opera" role="tab" data-toggle="tab"&Opera&/a&&/li&
&li&&a href="#tab-ie" role="tab" data-toggle="tab"&IE&/a&&/li&
&div class="tab-content"&
&div class="tab-pane active" id="tab-chrome"&
&div class="row feature"&
&div class="col-md-7"&
&h2 class="feature-heading"&Google Chrome &span
class="text-muted"&使用最广的浏览器&/span&&/h2&
&p class="lead"&Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。&/p&
&div class="col-md-5"&
&img class="feature-image img-responsive" src="images/chrome-logo.jpg"
alt="Chrome"&
&div class="tab-pane" id="tab-firefox"&
&div class="row feature"&
&div class="col-md-5"&
&img class="feature-image img-responsive" src="images/firefox-logo.jpg"
alt="Firefox"&
&div class="col-md-7"&
&h2 class="feature-heading"&Mozilla Firefox &span class="text-muted"&美丽的狐狸&/span&
&p class="lead"&Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，
使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。&/p&
&div class="tab-pane" id="tab-safari"&
&div class="row feature"&
&div class="col-md-7"&
&h2 class="feature-heading"&Safari &span class="text-muted"&Mac用户首选&/span&&/h2&
&p class="lead"&Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
Safari在日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。&/p&
&div class="col-md-5"&
&img class="feature-image img-responsive" src="images/safari-logo.jpg"
alt="Safari"&
&div class="tab-pane" id="tab-opera"&
&div class="row feature"&
&div class="col-md-5"&
&img class="feature-image img-responsive" src="images/opera-logo.jpg"
alt="Opera"&
&div class="col-md-7"&
&h2 class="feature-heading"&Opera &span class="text-muted"&小众但易用&/span&
&p class="lead"&Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。
是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.&/p&
&div class="tab-pane" id="tab-ie"&
&div class="row feature"&
&div class="col-md-7"&
&h2 class="feature-heading"&IE &span class="text-muted"&你懂的&/span&&/h2&
&p class="lead"&Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet
Explorer(7，8，9，10版本)，
简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。&/p&
&div class="col-md-5"&
&img class="feature-image img-responsive" src="images/ie-logo.jpg"
&!-- 关于 --&
&div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="modal-label"
aria-hidden="true"&
&div class="modal-dialog"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal"&&span
aria-hidden="true"&&&/span&&span class="sr-only"&关闭&/span&&/button&
&h4 class="modal-title" id="modal-label"&关于&/h4&
&div class="modal-body"&
&p&慕课网隶属于北京慕课科技中心(有限合伙)，是一家从事互联网免费教学的网络教育公司。秉承“开拓、创新、公平、分享”的精神，
将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。&/p&
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&了解了&/button&
&p class="pull-right"&&a href="#top"&回到顶部&/a&&/p&
&p&& 2015 现代浏览器博物馆 &/p&
&script src="js/jquery-2.1.4.min.js"&&/script&
&script src="js/bootstrap.min.js"&&/script&
$(function () {
$('#ad-carousel').carousel();
$('#menu-nav .navbar-collapse a').click(function (e) {
var href = $(this).attr('href');
var tabId = $(this).attr('data-tab');
if ('#' !== href) {
e.preventDefault();
$(document).scrollTop($(href).offset().top - 70);
if (tabId) {
$('#feature-tab a[href=#' + tabId + ']').tab('show');
bootstrap.min.css&~&98KB&&&&
jquery-2.1.4.min.js&~&82KB&&&&
bootstrap.min.js&~&36KB&&&&
开源中国-程序员在线工具：
相关的代码(227)
要是哪几在张图片也放出来更好了
2楼：沃特oy 发表于
3楼：迷彩风情 发表于
挺好看的！
4楼：笔阁 发表于
不错，我写的bootstrap资料，大家可以看看，
5楼：Lly丶 发表于
引用来自“沃特法克”的评论顶楼上！234234
6楼：Elbiz 发表于
no picture you say JB!
7楼：Alex思想者 发表于
引用来自“笔阁”的评论不错，我写的bootstrap资料，大家可以看看，
注册才能看啊
8楼：youbaiOSC 发表于
这代码有视频啊！
9楼：ubuntuvim 发表于
推荐一个有图有源码的：
10楼：笔阁 发表于
引用来自“红卫兵”的评论引用来自“笔阁”的评论不错，我写的bootstrap资料，大家可以看看，
注册才能看啊第三方注册也可以。
11楼：guhai2004 发表于
12楼：周浩杰 发表于
为什么要直接拿官方的例子出来呢?
13楼：landauchos 发表于
要bootstrap 4的例子！！！！！！
14楼：游客 发表于
15楼：Wilsion 发表于
引用来自“笔阁”的评论引用来自“红卫兵”的评论引用来自“笔阁”的评论不错，我写的bootstrap资料，大家可以看看，
注册才能看啊第三方注册也可以。</ .别人都不用注册。
16楼：指尖Coding 发表于
慕课网视频的代码，肯定不是原创。2014年就有了。去慕课网作品搜索 创业公司。
开源从代码分享开始
learnMore的其它代码Bootstrap框架，编写html注册页面就是这么简单
Bootstrap，是目前最受欢迎的Web前端框架。Bootstrap 是基于 HTML5、CSS3、JavaScript开发的，兼容大部分jQuery插件，简洁灵活，使得 Web 开发更加方便快捷
Bootstrap 小编下面教大家用少量的html代码，实现一个效果还不多的注册页面 首先引入相应的js和css文件 然后在页面body或者自定义的div里面加入form表单，添加相对应的class属性就好了下面看下效果是不是很简单，当然Bootstrap还有很多的元素和jquery插件。以后的文章和视频中，小编也会不定时更新的。
人类一次次升空火箭在探索太空的领域迈开了步伐，看似光鲜亮丽的航天工程，背后也并不是我们想象的满载着欢声笑语。
&来源：科学薛定谔的狗
充电宝又叫移动电源，提到他我们再熟悉不过了，最早出现在2001年的CES展览上，那时只是在CES沙摊馆的一地摊似的展览位上...
&来源：木木说事儿
前两天，丹麦大使馆发布的《生蚝长满海岸，丹麦人却一点也高兴不起来》文章，上了热搜。文章中提到生蚝入侵丹麦，对海岸的生态环境造成了极大破坏。
&来源：搜狐
去年就有传闻说微软要联合高通推出搭载windows系统的手机，当时说骁龙820已经完成测试，但是完整的生态系统要在骁龙835上面使用。
&来源：科学技术宅
4月28日，中国联通为了响应国家的号召，对联通的资费进行进一步的降费，其中包括国际通话降费、国际流量降费、千兆宽带降费等等。
&来源：每日黑科技
4月28日外芯房讯在2017年汉诺威工业博览会上，最吸引人应该是欧姆龙展台上的乒乓球机器人教练。
&来源：外芯房
一款手机的性价比究竟高不高，除了直接对比配置与售价之外，还有就是颜值，这款手机就是努比亚无边框旗舰手机Z11，外观上令人冷艳...
&来源：品位科技
支付宝是马云在互联网中最出色的产品，不但让天猫淘宝广为人知，里面各种出色的功能也改变了所有人的生活态度和生活习惯。
&来源：梵星财经说
在从事维修电工工作中，在和天南海北的各路同行进行技术交流中，相互取长补短。总结出以下维修绝招，同时希望大家也能积极留言分享一下自己的绝招...
&来源：电力工程技术
1. 点燃锂 2. 磁铁从铜铸管中通过。 3. 当浓硫酸加入对硝基苯 4. 冰岛的瀑布产生的彩虹 5. 白细胞追杀细菌 ...
&来源：刘侍郎}