/* 布局 */
.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. SlidingMenu+Fragment实现当前最流行的侧滑

    1 http://www.krislq.com/2013/03/android_case_slidingmenu_fragment/ 2 https://github.com/jfeinstein10 ...

  2. 无法调试存储过程，无法启动T-SQL调试

    用本机管理员或者具有SYSADMIN角色的帐号登录,不要用.,用实例名来连接

  3. c#关于路径的总结(转) 虚拟路径波浪号~和斜杠/的区别

    c#关于路径的总结(转)   来源:http://www.cnblogs.com/yugongmengjiutian/articles/5521165.html 前一段时间写代码时经常遇到获取路径问题 ...

  4. Struts2学习之拦截器

    © 版权声明:本文为博主原创文章,转载请注明出处 拦截器: - Struts2大多数核心功能都是通过拦截器实现的,每个拦截器完成某项功能 - 拦截器方法在Action执行之前或之后执行 工作原理: - ...

  5. 开发中可能会用到的几个小tip----QT, pycharm, android, 等

    QT: 如果是在windows下开发的话,添加外部库,外部包含头文件路径的时候,要注意用相对路径,或者在项目上右键添加外部库的路径或者头文件路径,否则,会卡在这里开始怀疑人生... 如果是在linux ...

  6. js-音乐播放器，播放|暂停|滑块的功能

    音乐播放器,播放|暂停|滑块的功能 document.addEventListener('DOMContentLoaded', function loaded(event) { var audio = ...

  7. swift - 全屏pop手势

    UINavigationController系统自带有侧滑手势,但是这个手势第一点只能边缘侧滑才可以有效,第二点当手动隐藏系统的导航时,这个手势就不能生效了 为了能到达到全屏pop的效果这里有2中解决 ...

  8. CAP理论学习

    CAP理论是对分布式系统的3个特性所下的一个定性的结论,可用于指导分布式系统的设计. CAP理论断言任何基于网络的数据共享系统,最多只能满足数据一致性.可用性.分区容忍性三要素中的两个要素. 在英语中 ...

  9. es6 初始化样式加载到head中

    Demo1:function loadCss(css) { css.forEach((path)=>{ console.log($('<link/>', { rel: 'styles ...

  10. 【Python + Mysql】之用pymysql库连接Mysql数据库并进行增删改查操作

    用pip下载pymysql并引用 具体请参考文章: <Python之MySQL数据库增删改查操作> <python3.6 使用 pymysql 连接 Mysql 数据库及 简单的增删 ...