/* 布局 */
.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>

最新文章

  1. Syscall,API,ABI
  2. Python基础算法综合:加减乘除四则运算方法
  3. jquery的css详解(一)
  4. 【整理】--【KERNEL】内核定时器
  5. javascript --- 事件冒泡与事件捕获
  6. SDWebImage原理及使用
  7. K3中添加的一条新数据,其在数据库中的位置
  8. java 导出Excel 大数据量,自己经验总结!(二)
  9. http://www.iis.net/downloads/microsoft/url-rewrite
  10. CSS3 垂直居中 左右居中
  11. js中style.display=&quot;&quot;无效的解决方法
  12. QoS 测量 (目标,方法,协议)
  13. Perl Symbolic Reference
  14. Mysql 库、表、字段 字符集
  15. Eclipse rap 富客户端开发总结(11) : rcp/rap与spring ibatis集成
  16. Idea导入多个maven项目到同一目录下
  17. php扩展打开不起作用的原因, php数字显示2147483647的原因
  18. centos 防火墙的操作
  19. innoDB锁小结
  20. [转]Intellij IDEA快捷键

热门文章

  1. 如何快速复制BAT级的DevOps工具链
  2. 开源项目UIL(UNIVERSAL-IMAGE-LOADER)
  3. SpringBoot使用Thymeleaf模板
  4. EasyUI datagrid border处理,加边框,去边框,都能够
  5. hibernate实现多变联合查询
  6. CAN协议学习(二)MCAN控制器介绍
  7. Hotel poj 3667
  8. excel表格系列
  9. sql exist 优化查询时间
  10. Xampp 环境问题集合