无懈可击的web设计css--样例

最新推荐文章于 2021-09-01 18:37:16 发布

养有道

最新推荐文章于 2021-09-01 18:37:16 发布

阅读量739

点赞数

分类专栏： div+css

本文链接：https://blog.csdn.net/ysydao/article/details/9136903

版权

div+css 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Untitled</title>
<style type="text/css">
    body{
       padding:0;
       margin:0;
       font-family: "宋体", Arial, Helvetica, sans-serif;
       font-size：small;
       background:#fff;
    }
    ul,ol,a,table,div,h1,h2,h3,p,h4{
       padding:0;
       margin:0;
       border:none;
    }
    ul{
       list-style:none;
    }
    img{
        padding:0;
       margin:0;
       border:0;
    }
    #wrap{
       min-width:500px;
       max-width:1440px;
       background:url(image/warpba.gif) repeat-y 70% 0;
    }
    #header{
       border-bottom: 3px solid #87B825;
       background: #B4E637 url(image/hdbg-1.gif) repeat-x top left;
    }
    #header h1{
       padding:20px;
       font-size:250%;
       color:#374C0E;
    }
    #message{
       padding:10px;
       font-size:90%;
       color:#fff;
       text-align:center;
       background:url(image/ttbg.gif) #404530 repeat-x top left;
    }
    #content{
       float:left;
       width:70%;
       font-size:95%;
       line-height:20px;
       color:#333;
    }
    #content .gutter{
       padding:25px;
       background:url(image/cbg.gif) repeat-x top left;
    }
    #content h2{
       margin: 0 0 0.3em 0;
       font-size:150%;
       font-family:"楷体";
       color:#663;
    }
    dl.feature{
       margin:15px 0;
       padding:15px;
       border-top:1px dotted #ccc;
       border-bottom:1px dotted #ccc;
    }
    dl.feature dt{
       float:left;
     }
     dl.feature dt img{
       margin:0 15px 0 0;
       padding:0 4px 4px 0;
       background:url(image/tbg.gif) no-repeat bottom right;
     }

      dl.feature dd{
         margin-left:214px;
         font-size:90%;
         line-height:1.5em;
         color:#666;
      }

    dl.feature dd h4{
        margin:0 0 0.5em 0;
        color:#693;

     }
    #sidebar .gutter{
       padding:15px;
    }
    #sidebar{
       float:right;
       width:30%;
    }
    .box{
       margin:0 0 20px 0;
       padding:0 0 12px 0;
       font-size:85%;
       line-height:1.5em;
       color:#666;
       background:#fff url(image/b5.gif) no-repeat bottom right;
    }
    .box h3 {
       padding:12px;
       font-size:140%;
       color:#693;
       background:#fff url(image/b1.gif) no-repeat top left;
    }
    .box p,.box ul{
       padding:0 12px;
    }
    .box ul li {
       padding;0 0 0 18px;
       margin:0 0 0 12px;
    }
    #footer{
       clear:both;
       background:#828377;
    }
    #footer p{
       padding:15px;
       font-size:85%;
       color:#333;
    }


    * html #footer{
       height:1%;
    }
     * html dl.feature{
       height:1%;
    }
</style>
</head>

<body>
<div id="wrap">
    <div id="header">
       <h1>盖世电脑公司</h1>
    </div>

    <p id="message">
       <strong>特价：</strong>折扣回馈老客户,尽在五一黄金周华硕促销.
    </p>

    <div id="content">
        <div class="gutter">
           <h2>公司简介</h2>
           <p>能否简单的介绍下你们目前的团队？
Tom：我们的开发团队一共由八个人组成，成员包括：软件工程师，研究人员，社区经理和项目主管。可以说，GenMyModel的成功源于它背后敏锐的团队。
GenMyModel是一个专为软件架构师和开发师设计的在线建模工具。这是第一个携带输出和代码生成功能的云端UML工具。目前，GenMyModel还在测试阶段，在我们的主页中文版免费注册后，您可以即刻体验在线建模。从2013年开始，团队就收到了大量来自用户们就关于如何提高工具性能的反馈。而团队中也有一位专门的社区经理，负责每日和大量中国用户交流如何完善GenMyModel。
            </p>
            <div>
            <dl class="feature">
                 <dt><img src="image/ren.jpg" width="175" height="180" /></dt>
                 <dd><h4> 总工：西蒙的的</h4></dd>
                 <dd>因此，hgg通过联系了GenMyModel的CTO Tom给网友们分享了新型在线UML建模工具的一些优势以及未来发展趋势的一些观点，同时也分享了他们背后敏锐的团队历时九个月研发首个beta版本的新型在线UML建模工具。
                 我们的开发团队一共由八个人组成，成员包括：软件工程师，研究人员，社区经理和项目主管。可以说，GenMyModel的成功源于它背后敏锐的团队。
GenMyModel是一个专为软件架构师和开发师设计的在线建模工具。这是第一个携带输出和代码生成功能的云端UML工具。目前，GenMyModel还在测试阶段，在我们的主页中文版免费注册后，您可以即刻体验在线建模。从2013年开始，团队就收到了大量来自用户们就关于如何提高工具性能的反馈。而团队中也有一位专门的社区经理，负责每日和大量中国用户交流如何完善GenMyModel。</dd>
                 <div style="clear: both;"></div>
            </dl>
            </div>
           <p>因此，hgg通过联系了GenMyModel的CTO Tom给网友们分享了新型在线UML建模工具的一些优势以及未来发展趋势的一些观点，同时也分享了他们背后敏锐的团队历时九个月研发首个beta版本的新型在线UML建模工具。
          </p>
          <p>需求带动着技术的发展，UML的建模工具也越来越多，但是大多数UML工具都基于Eclipse，例如大家熟悉的together、UML2、eclipseUML等等。可是开发者通常都要通过安装，部署才能使用。而GenMyModel致力于一个在线UML工具，在原本并不适合做UML开发的Web环境上成功推出了Web版UML工具。
             </p>
         </div>
    </div>
    <div id="sidebar">
     <div class="gutter">
         <div class="box">
          <h3>公司竞争力</h3>
          <p>GenMyModel在线UML建模工具背后的敏锐团队</p>
          </div>
          <div class="box">
          <h3>公司产品</h3>
          <ul>
              <li>电脑</li>
              <li>洗衣机</li>
              <li>冰箱</li>
              <li>彩电</li>
              <li>服装</li>
          </ul>
          </div>
          <div class="box">
          <h3>关于我们</h3>
          <ul>
              <li>公司历史</li>
              <li>在线招聘</li>
              <li>联系我们</li>
              <li>留言</li>
          </ul>
          </div>
      </div>
    </div>

    <div id="footer">
       <p>对于多年来梦寐以求的用于构建信息系统的建模工具</p>
    </div>
</div>