zoukankan      html  css  js  c++  java
  • 小demo

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>no1</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
    
    <body>
    <div class="header">
        <div class="headerr clearfix">
            <ul class="clearfix">
                <li class="headerr1"><a href="#" title="">English</a></li>
                <li class="headerr2"><a href="#" title="">中文</a></li>
            </ul>
        </div>
    </div>
    <div class="nav">
        <div class="navv">
        <a href="#"><img class="logo" src="images/logo.jpg" alt="这是一张图片" title="logo" /></a>
            <ul>
                <li class="nav1"><a id="nav1" href="#" title="">首页</a></li>
                <li><a href="#" title="">关于我们</a></li>
                <li><a href="#" title="">咨询动态</a></li>
                <li><a href="#" title="">产品服务</a></li>
                <li><a href="#" title="">案例</a></li>
                <li class="nav2"><a href="#" title="">联系我们</a></li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <a href="#" title=""><img src="images/banner.jpg" alt="这是一张图片" title="banner" /></a>
    </div>
    <div class="content1">
        <div class="content1-1">
            <a id="link" href="#">最新动态:</a>
        </div>
    </div>
    <div class="content2">
        <div class="content2-1">
            <img src="images/banner2.jpg" alt="这是这一张图片" title="" class="img" />
        </div>
        <div class="content2-2">
            <p class="p1">埃能基诺(上海)能源科技有限公司</p>
            <p class="p2">ABOUT</p>
            <p class="p3">埃能基诺(上海)能源科技有限公司是集研发、制造、市场、销售、服务于一体的综合性环境服务公司。在脱硝、脱硫、除尘领域...</p>
            <p class="p4"><a href="#"><img src="images/icon2.jpg"/>了解更多</a></p>
        </div>
    </div>
    <div class="footer">
        <div class="footer1">
            <div class="logo1">
                <a href="#"><img src="images/logob.jpg" alt="这是一张图片" title=""/></a>
            </div>
            <div class="footer1-1">
                <p>埃能基诺(上海)能源科技有限公司</p>
                <p>地址:上海市浦东新区金湘路225弄,禹州国际3期2号楼507室(201206)</p>
                <p>埃能基诺能源科技有限公司 沪ICP备15049282号</p>
                <p>友情链接:http://wwww.scandenox.dk/</p>
            </div>
        </div>
    </div>
    </body>
    </html>
    @charset "utf-8";
    /* CSS Document */
    .header{
        width:100%;
        height:30px;
        background:#4d4d4d;
        overflow:hidden;
        }
    .header .headerr{
        width:1100px;
        height:30px;
        margin:0px auto;
        }
    .header .headerr ul li{
        float:right;
        line-height:30px;
        }
    .header .headerr ul .headerr1 a{
        color:#886e58;
        font-size:12px;
        padding-left:15px;
        background:url(../images/icon3.jpg) no-repeat left center;}
    .header .headerr ul .headerr2 a{
        color:#fff;
        font-size:12px;
        padding:0px 15px;}
    .nav{
        width:100%;
        height:112px;}
    .nav .navv{
        width:1100px;
        height:112px;
        margin:0px auto;
        }
    .nav .navv .logo{
        margin-bottom:16px;}
    .nav .navv ul{
        float:right;
        margin-top:40px;}
    .nav .navv ul li{
        float:left;
        padding:0px 20px;
        background:url(../images/icon3.jpg) left center no-repeat;
        font-weight:bold;
    }
    .nav .navv #nav1{
        color:#0C0;}
    .nav .navv .nav1{
        background:none;}
    .nav .navv .nav2{
        padding-right:0px;}    
    
    .banner{
        width:1350px;
        height:599px;
        margin:0px auto;}
    
    .content1{
        width:100%;
        height:79px;
        border-bottom:#e6e6e6 1px solid;}
    .content1 .content1-1{
        width:1100px;
        height:79px;
        background:url(../images/icon.jpg) no-repeat 0px 33px;
        margin:0px auto;}
    .content1 .content1-1 #link{
        float:left;
        padding:30px 17px;}
    .content2{
        width:1100px;
        height:531px;
        margin:0px auto;}
    .content2 .content2-1{
        float:left;
        width:636px;}
    .content2 .content2-1 img{
        margin-top:53px;}
    .content2 .content2-2{
        float:right;
        width:389px;
        padding-top:150px;
        padding-left:75px;
        }
    .content2 .content2-2 .p1{
        color:#0eab4a;
        font-size:22px;
        font-weight:bold;
        }
    .content2 .content2-2 .p2{
        color:#0eab4a;
        font-size:50px;
        font-weight:bold;
        font-style:italic;
        }
    .content2 .content2-2 .p3{
        font-size:14px;
        line-height:2em;
        }
    .content2 .content2-2 p{
        padding-bottom:10px;}
    
    .footer{
        width:100%;
        height:127px;
        background:#878787;}
    .footer .footer1{
        width:1100px;
        height:127px;
        margin:0px auto;}
    .footer .footer1 .logo1{
        float:left;
        width:78px;
        margin-top:27px;
        padding-left:70px;
        padding-right:30px;
        border-right:1px #b7b7b7 solid;}
    .footer .footer1 .footer1-1{
        float:left;
        width:530px;
        margin-top:27px;
        padding-left:30px;
        padding-right:20px;
        line-height:1.3em;
        color:#fff;
        }
    html , body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    /* 重置文本格式元素 */
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
    
    /* 清除浮动 */
    .clearfix:before,.clearfix:after {
        content:"";
        display:table;
    }
    .clearfix:after {
        clear:both;
        overflow:hidden;
    }
    .clearfix {
        zoom:1; /* for ie6 & ie7 */
    }
    .clear {
        clear:both;
        display:block;
        font-size:0;
        height:0;
        line-height:0;
        overflow:hidden;
    }
  • 相关阅读:
    array_count_values源码
    php 编译安装记录
    mysql 安装的过程做个记录
    初识highcharts 库
    php 不重新编译增加新扩展的方法
    备考PMP
    Beyond Compare4破解--写reg脚本删除注册表
    SourceTree 跳过登录
    正则 (?=exp)
    springmvc--处理器的返回参数
  • 原文地址:https://www.cnblogs.com/liubeiblog/p/5335548.html
Copyright © 2011-2022 走看看