文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >客户端的网站代码

问客户端的网站代码
EN

Code Review用户
提问于 2016-07-02 02:00:36
回答 2查看 82关注 0票数 1

这是给我的一个客户的:恩布里奇气体。我不得不将2 .psd文件转换成html和CSS。这个客户端是我自己的第一个真正的客户端，我希望尽可能地改进我的代码。我喜欢反馈我的风格，命名约定等来改进代码。

如果您希望看到完整的项目文件/文件夹，并使用图像和其他方式运行它，这里是指向该项目的GitHub链接。

注意:当然，图像不是代码片段的一部分。这意味着下拉列表不起作用。我评论了一幅图像，并将其放入灰色。此外，底部的一幅图像将不会显示。

对于片段，您必须向右滚动以查看内容：

代码语言：javascript
复制
body {
  padding: 0px;
  margin: 0px;
}
input[type=checkbox] {
  cursor: pointer;
}
.main_content {
  width: 480px;
  padding-left: 618px;
  padding-right: 620px;
}
.top_info {
  width: 477px;
  height: 105px;
  padding-bottom: 20px;
}
.top_info h2 {
  padding: 0px;
  margin: 0px;
  margin-top: 25px;
  margin-bottom: 13px;
  font: 700 13px / 18px Arial;
}
.top_info p {
  margin: 0 0 10px;
  font: 400 13px / 18px Arial;
}
.form {
  width: 479px;
  height: 329px;
  /*background: url(images/Layer-7.png);*/
  background: #bbb;
}
.form_header {
  background: url(images/Layer-11.png);
  background-repeat: no-repeat;
  height: 43px;
  width: 479px;
}
.form_header h2 {
  font: 700 17px / 19px Arial;
  color: #ffb81c;
  padding: 13px 35px 15px 35px;
}
.checkbox {
  font: 400 12px / 19px Arial;
  width: auto;
  color: #f7f7f7;
  padding-top: 11px;
  padding-left: 9px;
}
.left_content {
  float: left;
  width: 255px;
  font: 400 15px / 19px Arial;
  height: 175px;
  color: #f7f7f7;
}
.left_content ul {
  margin: 0px;
  padding-left: 28px;
}
.left_content li {
  padding-left: 3px;
}
.right_content {
  float: right;
  width: 189px;
  height: 175px;
  padding-left: 14px;
  padding-right: 19px;
}
.right_content input {
  width: 189px;
  height: 24px;
  margin-bottom: 6px;
}
.select {
  background: url(images/MergedLayers.png) no-repeat right #f7f7f7;
  overflow: hidden;
  width: 189px;
  height: 24px;
  margin-bottom: 6px;
  border: 0 none;
}
.select select {
  width: 189px;
  height: 24px;
  margin-bottom: 6px;
  background: transparent;
  border: 0 none;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.right_content input[type=submit] {
  width: 189px;
  height: 36px;
  background: url(images/Layer-8-copy-3.png);
  border: 0 none;
  font: 700 16.35px / 14.43px Arial;
  padding-top: 11px;
  padding-bottom: 10px;
  padding-left: 7px;
  padding-right: 5px;
  color: #f7f7f7;
  cursor: pointer;
}
.right_content p {
  font: 400 12.95px / 16px Arial;
  color: #f7f7f7;
  padding: 0px;
  padding-top: 5px;
  margin: 0px;
  text-align: center;
}
.form_footer p {
  clear: both;
  font: 700 17px / 20px Arial;
  color: #f7f7f7;
  text-align: center;
  padding-left: 29px;
  padding-right: 31px;
  padding-bottom: 22px;
  padding-top: 10px;
}
.bottom_info h2 {
  margin: 0px;
  padding-top: 24px;
  padding-left: 9px;
  color: #02436b;
  font: 700 15px / 16px Arial;
}
.bottom_image {
  background: url(images/stock-photo-64105997-generic-hospital-building.png);
  height: 211px;
  width: 157px;
  float: left;
  margin: 0;
  padding: 0;
  margin-top: 19px;
  margin-left: 9px;
}
.bottom_right {
  width: 285px;
  float: right;
  height: 198px;
}
.bottom_info p {
  color: #252424;
  font: 700 13px / 16px Arial;
  padding: 0px;
  margin: 0px;
  padding-top: 19px;
}
.bottom_info ul {
  color: #252424;
  font: 400 13px / 16px Arial;
  padding: 0px;
  padding-left: 15px;
  padding-top: 5px;
  margin: 0px;
}
.bottom_info li {
  padding-bottom: 5PX;
  ;
}
代码语言：javascript
复制
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="css/main.css" />
</head>

<body>
  <div class="main_content">

    <div class="top_info">
      <h2>Incentives for every building, every budget</h2>
      <p>Looking for energy saving solutions for your commercial building? You've come to the right place. Whether retrofitting or building new, we offer free services and financial incentives for buildings and budgets of every size. We'll guide the process
        from start to finish, making it easy to reduce energy consumption and improve your bottom line.</p>
    </div>
    <!-- end top_info -->

    <div class="form">

      <div class="form_header">
        <h2>Earn up to 50% of your project cost! Find out how.</h2>
      </div>

      <form action="#" method="get" class="checkbox">
        <input type="checkbox" name="communicate">Check here to allow us to communicate with you
      </form>

      <div class="left_content">
        <ul>
          <li>Energy Solutions Consultant (ESC) will speak with you directly and help you access your energy efficiency needs.</li>
          <li>Fixed and custom incentives to upgrade boilers, water and heating systems, make-up air and ventilation systems, building controls, and more</li>
        </ul>
      </div>

      <div class="right_content">
        <form action="#" method="get">
          <input type="text" placeholder="First and Last Name">
          <input type="text" placeholder="Email Address">
          <div class="select">
            <select name="sector" id="sector">
              <option value="sector">Sector</option>
            </select>
          </div>
          <input type="submit" name="submit" value="Download Case Study">
        </form>
        <p>Your information is safe with us.</p>
      </div>

      <div class="form_footer">
        <p>Contact your Energy Solutions Consultant today at 1-855-659-0549 or energyservices@enbridge.com</p>
      </div>

    </div>
    <!-- end form -->

    <div class="bottom_info">
      <h2>Need a reason to take part in the Commercial Energy Solutions program?</h2>

      <div class="bottom_image"></div>

      <div class="bottom_right">
        <p>Top gains include:</p>
        <ul>
          <li>Retrofit incentives for installing energy-efficient equipment and systems in older buildings</li>
          <li>Rebates for installing energy-efficient showerheads in multi-residential buildings</li>
          <li>Incentives for installing an ozone laundry systems on commercial washing machines</li>
          <li>Rebates for renting or purchasing high-efficiency and condensing boilers</li>
          <li>Free support and energy saving expertise from one of our Energy Solutions Consultants</li>
        </ul>
      </div>

    </div>
    <!-- end bottom_info -->

  </div>
  <!-- end main_content -->
</body>

</html>
html
css
EN

回答 2

Code Review用户

回答已采纳

发布于 2016-07-02 09:55:52

如果没有明确的理由来说明为什么要将页面设计为480 be宽，那么我将不再使用它。它使它看起来像一个传单，你可以打印出来。一切都很拥挤，感觉就像一个弹出式广告。

在您的代码中，您正在执行此操作，我假定这将是main_content div的中心：

代码语言：javascript
复制
.main_content {
  width: 480px;
  padding-left: 618px;
  padding-right: 620px;
}

而在现实中，它并不是中心。您可以这样做，以正确地居中：

代码语言：javascript
复制
.main_content {
  width: 480px;
  margin: 0 auto; 
}

(顶部和底部=0，左和右= auto)

当div有一个绝对宽度时，您可以在两边使用"auto“来给它们相同的间距。

另外，当你用像素设置宽度、垫片和边距时，页面在更小或更大的分辨率屏幕上看起来可能很不一样。

浏览网页，寻找一些灵感。窃取一些想法，然后用你自己的扭曲来实现它们。

票数 4
EN

Code Review用户

发布于 2016-07-12 12:30:13

代码语言：javascript
复制
input[type=checkbox] {
  cursor: pointer;
}

需要这个吗？

代码语言：javascript
复制
background: url(images/Layer-11.png);
background-repeat: no-repeat;

和

代码语言：javascript
复制
  padding-top: 11px;
  padding-bottom: 10px;
  padding-left: 7px;
  padding-right: 5px;

另外还有一些可以写成速记。

当数量为0 (0px)时，不需要指定单位。

它也在你的私营部门，所以也许超出范围，但程序是寡妇。寡妇应始终避免在固定宽度的设计。

票数 0
EN
页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://codereview.stackexchange.com/questions/133676

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档