Demo Nec
/* 布局 */
.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> | </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>© @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的更多相关文章
- html5+css3 文章的展示demo
index.html 页面的样式 <!DOCTYPE html><html lang="en"> <head> <title>l ...
- NEC 工程师规范
工程师规范 - 开发准备 了解产品和设计 参加需求.交互.视觉会议,了解产品设计和项目成员. 了解产品面向的设备和平台. 了解产品对兼容性的要求以及是否采用响应式设计等. 了解产品要使用的技术(WEB ...
- 通过一个demo了解Redux
TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...
- 很多人很想知道怎么扫一扫二维码就能打开网站，就能添加联系人，就能链接wifi，今天说下这些格式，明天做个demo
有些功能部分手机不能使用,网站,通讯录,wifi基本上每个手机都可以使用. 在看之前你可以扫一扫下面几个二维码先看看效果: 1.二维码生成 网址 (URL) 包含网址的 二维码生成 是大家平时最常接触 ...
- 在线浏览PDF之PDF.JS （附demo）
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...
- 【微框架】Maven +SpringBoot 集成 阿里大鱼 短信接口详解与Demo
Maven+springboot+阿里大于短信验证服务 纠结点:Maven库没有sdk,需要解决 Maven打包找不到相关类,需要解决 ps:最近好久没有写点东西了,项目太紧,今天来一篇 一.本文简介 ...
- vue双向数据绑定原理探究(附demo)
昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...
- Android Studio-—使用OpenCV的配置方法和demo以及开发过程中遇到的问题解决
前提: 1.安装Android Studio(过程略) 2.官网下载OpenCV for Android 网址:http:opencv.org/downloads.html 我下载的是下图的版本 3. ...
- iOS之ProtocolBuffer搭建和示例demo
这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...
随机推荐
- MvcPager源代码—PagerOptions.cs
public class PagerOptions { public PagerOptions() { AutoHide = true; ...
- Effective JavaScript Item 10 避免使用with
本系列作为Effective JavaScript的读书笔记. Item 9:避免使用withkeyword 重点: 设计withkeyword本来是为了让代码变简洁,可是却起到了相反的效果.比方: ...
- zabbix自动发现监控远程端口
zabbix监控远程服务器端口,simple checks是zabbix用来监控无agent的主机 脚本和模板地址: https://github.com/mikeluwen/tcpmonitor
- Mongodb 的学习
传送门: # 官方网站 及 下载地址 https://www.mongodb.com/download-center/enterprise/releases # 之前简单学习的笔记http://www ...
- 【Hadoop基础教程】4、Hadoop之完全分布式环境搭建
上一篇blog我们完成了Hadoop伪分布式环境的搭建,伪分布式模式也叫单节点集群模式, NameNode.SecondaryNameNode.DataNode.JobTracker.TaskTrac ...
- EularProject 39：给周长推断构成直角三角形个数
华电北风吹 天津大学认知计算与应用重点实验室 完毕日期:2015/7/30 Integer right triangles Problem 39 If p is the perimeter of a ...
- DataUml Design 教程1-初识
DataUml Design 是面向开发人员使用的一个永久免费的软件,提高软件的开发效率和代码的规范度.它主要包括三大功能,数据模型.代码生成和UML建模,数据模型功能类似于PowerDesi ...
- 使用MongoDB 记录业务日志
最近公司有个需求,要对业务日志进行记录并根据日志排查问题,以前都是使用log4net之类的日志组件来记录到文件,这种方式已经不能满足业务的需要,因为日志文件会很大,即使进行分割后,查找也是很不方便,何 ...
- erlang 爬虫——爬取网页图片
说起爬虫,大家第一印象就是想到了python来做爬虫.其实,服务端语言好些都可以来实现这个东东. 在我们日常上网浏览网页的时候,经常会看到一些好看的图片,我们就希望把这些图片保存下载,或者用户用来做桌 ...
- Memcached 常用的方法
Memcache常用方法 Memcache::add — 添加一个值,如果已经存在,则返回false Memcache::addServer — 添加一个可供使用的服务器地址 Memcache::cl ...