• Demo Nec


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

    /* 模块 */
    .m-nav{position:relative;height:35px;line-height:35px;margin:0;border:solid #e7e7e7;border-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-0;overflow:hidden;margin-bottom:30px;}
    .m-bar .logo{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;580px;border-style:solid;border-color:#f40;border:2px 0;background-color:#f40;}
    .m-bar .sch .box .ipt{display:table-cell;height:30px;520px;}
    .m-bar .sch .box .btn{display:table-cell;50px; border:0;background-color:#f40;}


    /* 元件 */
    .u-arrowd{display:inline-block;0;height:0;border-color:#333 transparent;border-style:solid;border-4px 4px 0 4px;margin:0 3px;}
    .u-arrowu{display:inline-block;0;height:0;border-color:#333 transparent;border-style:solid;border-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{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{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>

  • 相关阅读:
    struts2+jpa+spring 泛型版小结
    PasswordEncoder
    父窗口 子窗口
    Powerdesigner的PDM(物理数据模型)生成数据库及逆向工程(将现有的数据库生成PDM)
    js 正则表达式
    <aop:config>
    CJDBC
    struts2取值
    mysql启动错误1067的解决
    杂碎
  • 原文地址:https://www.cnblogs.com/tingchen/p/4849214.html
Copyright © 2020-2023  润新知