/* 布局 */
.g-va{width:1160px;margin:0 auto;} /* visual area */

/* 模块 */
.m-nav{position:relative;height:35px;line-height:35px;margin:0;border:solid #e7e7e7;border-width:1px 0;background-color:#f8f8f8;}
.m-nav li,.m-nav li a,.m-nav li span{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}
.m-nav .login{padding:0 6px 0 0;color:#f40;}

.m-bar{position:relative;height:104px;border-width:0;overflow:hidden;margin-bottom:30px;}
.m-bar .logo{width:232px;height:39px;position:absolute;top:40px;left:0;background:url(../Content/Images/logo.jpg) left no-repeat;}
.m-bar .sch{position:absolute;top:40px;left:280px;}
.m-bar .sch .box{display:table;width:580px;border-style:solid;border-color:#f40;border:2px 0;background-color:#f40;}
.m-bar .sch .box .ipt{display:table-cell;height:30px;width:520px;}
.m-bar .sch .box .btn{display:table-cell;width:50px; border:0;background-color:#f40;}

/* 元件 */
.u-arrowd{display:inline-block;width:0;height:0;border-color:#333 transparent;border-style:solid;border-width:4px 4px 0 4px;margin:0 3px;}
.u-arrowu{display:inline-block;width:0;height:0;border-color:#333 transparent;border-style:solid;border-width:0 4px 4px 4px;margin:0 3px;}

.u-snip{margin-bottom:10px;}
.u-snip:hover{background-color:#f4f4f4;}
.u-snip .main{border-bottom:1px solid #e8e8e8;padding-bottom:5px;display:table;}
.u-snip .main .left{width:1000px;float:left;}
.u-snip .main .left h2{margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.u-snip .main .left p{font-size:13px;margin-bottom:5px;}
.u-snip .main .left li{display:inline-block;padding:0 5px;border-radius:2px;background-color:#9cce8a;color:#ffffff;}
.u-snip .main .right{display:table-cell;vertical-align:middle;}
.u-snip .main .right a{width:100px;height:50px;line-height:50px;display:inline-block;padding:0 10px;border-radius:4px;background-color:#f40;text-align:center;vertical-align:middle;color:#ffffff !important;}
.u-snip .main .right a:hover{color:#ffffff !important;}

<body>
<div class="m-nav">
<div class="g-va">
<div class="f-fl">
<ul>
<li>
<a class="login" href="#">亲，请登陆</a>
<a href="#">免费注册</a>
</li>
</ul>
</div>

<div class="f-fr">
<ul>
<li>
<a href="#">我的花旗</a>
<span>&emsp;|&emsp;</span>
<a href="#">帮助中心</a>
</li>
</ul>
</div>
</div>
</div>

<div class="m-bar g-va">
<a class="logo" href="#"></a>
<form class="sch">
<div class="box">
<input class="ipt" type="text" />
<button class="btn">查找</button>
</div>
</form>

@*<ul>
<li class="logo"></li>
<li>
<div style="float:right;font-size:0;letter-spacing:-0.307em;*letter-spacing:normal;*word-spacing:-1px;">
<input style="float:left;" placeholder="请输入关键字" />
<button style="border:0; float:right;" value="查找">查找</button>
</div>

</li>
<li>
<button>test</button>
</li>
</ul>*@
</div>

<div>
@RenderBody()
<hr />
<footer>
<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>

<li class="u-snip">
<div class="main g-va f-cb">
<div class="left">
<div>
<h2>2015年度花旗上海地区的员工团体体检</h2>
<p>将于10月9日至10月31日进行（其中10月9日，10月12日，13日，16日，19日，20日，21日，23日，26日，29日，30日为公司在浦东店集中日）。供应商将继续使用去年通过花旗竞标流程选择的服务商 -上海华检健康体检。 请仔细阅读以下说明及《2015体检通知》。</p>
<ul>
<li>Web</li>
<li>花旗</li>
<li>团体体检</li>
</ul>
</div>
</div>
<div class="right">
<a>进入项目</a>
</div>
</div>
</li>

Demo Nec的更多相关文章

  1. html5+css3 文章的展示demo

    index.html   页面的样式 <!DOCTYPE html><html lang="en"> <head> <title>l ...

  2. NEC 工程师规范

    工程师规范 - 开发准备 了解产品和设计 参加需求.交互.视觉会议,了解产品设计和项目成员. 了解产品面向的设备和平台. 了解产品对兼容性的要求以及是否采用响应式设计等. 了解产品要使用的技术(WEB ...

  3. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  4. 很多人很想知道怎么扫一扫二维码就能打开网站，就能添加联系人，就能链接wifi，今天说下这些格式，明天做个demo

    有些功能部分手机不能使用,网站,通讯录,wifi基本上每个手机都可以使用. 在看之前你可以扫一扫下面几个二维码先看看效果: 1.二维码生成 网址 (URL) 包含网址的 二维码生成 是大家平时最常接触 ...

  5. 在线浏览PDF之PDF.JS （附demo）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...

  6. 【微框架】Maven +SpringBoot 集成 阿里大鱼 短信接口详解与Demo

    Maven+springboot+阿里大于短信验证服务 纠结点:Maven库没有sdk,需要解决 Maven打包找不到相关类,需要解决 ps:最近好久没有写点东西了,项目太紧,今天来一篇 一.本文简介 ...

  7. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  8. Android Studio-—使用OpenCV的配置方法和demo以及开发过程中遇到的问题解决

    前提: 1.安装Android Studio(过程略) 2.官网下载OpenCV for Android 网址:http:opencv.org/downloads.html 我下载的是下图的版本 3. ...

  9. iOS之ProtocolBuffer搭建和示例demo

    这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...

随机推荐

  1. 工作总结 返回 json 后台对象中，某一个字段设为string 整个对象转换为json 返回到页面中

    JsonRequestBehavior.AllowGet作用 若要允许 GET 请求,请将 JsonRequestBehavior 设置为 AllowGet MVC 默认 Request 方式为 Po ...

  2. 转MQTT--mosquitto服务器系统内容主题

    MQTT客户端可以通过订阅位于$SYS层次下的主题来查看mosquitto服务器的状态信息.标记为Static的主题对于每一次订阅只发布一次.其它所有主题每隔sys_interval(在mosquit ...

  3. RAII手法封装相互排斥锁

    CriticalSectionWrapper是一个接口类 class CriticalSectionWrapper { public: // Factory method, constructor d ...

  4. mac 下 pycharm 快捷键

    用过快捷键立即感觉高大上了,最主要的是很方便啊!很强大 cmd b 跳转到声明处(cmd加鼠标) opt + 空格 显示符号代码 (esc退出窗口 回车进入代码) cmd []光标之前/后的位置 op ...

  5. php里面用魔术方法和匿名函数闭包函数动态的给类里面添加方法

    1.认识  __set  (在给不可访问属性赋值时,__set() 会被调用) 也就是说你再访问一个类里面没有的属性,会出发这个方法 class A{ private $aa = '11'; publ ...

  6. SSH框架整合时，如果某一个action提交请求时数据校验失败，后续请求全部失败

    © 版权声明:本文为博主原创文章,转载请注明出处 1.问题描述 SSH框架搭建好进行验证时发现,执行某个请求时,若参数校验失败,修改参数符合要求后再次请求依然失败.该请求一直报错如下: No resu ...

  7. Android加入新的视频格式－－媒体库扫描

    需求:在mediaprovider数据库中加入.mov后缀格式的视频文件 能够使用工具MediaInfo_GUI_0.7.67_Windows.3243836749.exe 查看mov文件编码格式类型 ...

  8. CGI是什么 搜索了这么多，大致看明白了保留下来。

    转自:http://blog.chinaunix.net/uid-13408389-id-2894933.html 分类: CGI是什么 CGI是CommonGatewayInterface 的简称. ...

  9. Educational Codeforces Round 27 F. Guards In The Storehouse

    F. Guards In The Storehouse time limit per test 1.5 seconds memory limit per test 512 megabytes inpu ...

  10. Linux下文件的堵塞与非堵塞对部分系统调用的影响

    1.基本概念 所谓的堵塞,即内核在对文件操作I/O系统调用时.假设条件不满足(可能须要产生I/O),则内核会将该进程挂起.非堵塞则是发现条件不满足就会马上返回. 此外须要注意的是非堵塞并非轮询.不然就 ...