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 ...
随机推荐
- 正则表达式匹配 href 和text内容
string pattern = @"<a[^>]*href=(""(?<href>[^""]*)""|' ...
- 15个私有云上的 DevOps 开源工具
原文:http://www.sohu.com/a/136276885_262549 在可维护性,可靠性,效率和安全性方面,DevOps 为私有云在改进操作流程方面发挥着重要的作用.私有云是一个由许多硬 ...
- hector_localization hector_salm rplidar同时编译
1.将hector_localization包clone到src文件夹 进行功能包依赖安装 cd test_ws rosdep update rosdep install --from-paths ...
- 题目1 : Farthest Point
时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 Given a circle on a two-dimentional plane. Output the integral ...
- php使用imagick模块实现图片缩放、裁剪、压缩示例
PHP 使用Imagick模块 缩放,裁剪,压缩图片 包括gif图片 缩放 裁剪 复制代码代码如下: /** * 图片裁剪 * 裁剪规则: * 1. 高度为空或为零 按宽度缩放 高度自适 ...
- PlSql加入数据库链接
Oracle-OraDb10g_home2 -> 配置和移植工具 -> net Manager -> 本地 -> 服务命名 -> 加入(网络服务名自己命名,主机名:要 ...
- MIC中的数据传输
先看一段代码,如下 #include<stdlib.h> #include<stdio.h> #define LEN 5 int main(int argc,char** ar ...
- Spring WebSocket Support官方文档+翻译
实时更新技术能够应用在很多场景中,比如在浏览器中聊天.股票报价.状态更新.现场直播.这些需求对时间的延迟性都很敏感,但是我们可以发现他们存在这共有的共性. 标准的HTTP请求,是一次请求对应一次相应. ...
- 实战c++中的vector系列--creating vector of local structure、vector of structs initialization
之前一直没有使用过vector<struct>,如今就写一个简短的代码: #include <vector> #include <iostream> int mai ...
- ios 即时通讯 xmpp
[iPhone高级] 基于XMPP的IOS聊天客户端程序(XMPP服务器架构) http://blog.csdn.NET/kangx6/article/details/7739828 [iPhone高 ...