html css 有点工作但实现混乱

Question

我在 wordpress 中创建了这个页脚，它基本上可以工作，但代码很丑而且结构不合理。我对锚标签中的图像和文本有很多问题。此外，当浏览器宽度变得非常小时，元素不会正确落在页面上。电子邮件输入在绿色背景下方结束，在 wordpress 中，锚标记中的图标/文本分为两行。

如何使它工作并看起来更干净以便更易于维护？

注意：存在媒体查询是因为需要使用这种方法对 wordpress 插件进行一些逆向工程。在不同方块

周围 html 的背景颜色为白色时遇到问题

.myfooter{
  height:auto;
  background-color:white;
  padding: 0 2.87rem;
}

@media screen and (max-width: 961px) {.myfooter{
  padding:0 1.7rem;}
}

.cap{
  background-color:#538231;
}



.left input, .left label {
    display:inline-block;
    margin-left:3vw;
    width:27vw;
    font-size:1vw;
}

.left input{
  height:1vw;
}

.left label{
  color:#c2d59b;
  padding-bottom:.5vw;
}

.left{
  width:50%;
  float:left;
  background-color:#538231;
  height:5vw;
  padding-top:2vw;
  padding-bottom:5vw;
}

.myfooter h1{
  color:#b3d7f8;  /*#b6dde6;*/
  font-size:1.5vw;
  text-align:left;
  margin:0;
  margin-left:3vw;
  padding-top:2vw;
  
}

.right-div{
  width:40%;
  float:right;
  color:white;
  background-color:#538231;
  font-size:1vw;
  padding-left:10%;
  height:12vw;
  
}

.right-div div p a {
  text-decoration:none;
}

.right-div div p a:visited{
  color:white;
}

  
.last3{
  width:17vw;
  margin:0 !important;
  padding:0!important;
  background-color:#538231;
  border:solid 1px white;
  margin-bottom:1vw!important;
}

.d3 p a{
  display:block;
  height:1.9635vw;
}

.footer-icons {
  padding: .25vw;
  width: 1.25vw;
  text-align: center;
  text-decoration: none;
  margin: 0;
  margin-left:.5vw;
  float:left;
}

.footer-icons:hover {
    opacity: 0.7;
}

.footer-txt{
  padding: .5vw 0 .5vw .5vw;
  font-size:1vw;
  line-height:1;
  float:left;
}


.submit-button {
  background-color: white!important; /* Green */
  border: none!important;
  color: black!important;
  padding: .5vw .5vw!important;
  text-align: center!important;
  text-decoration: none!important;
  display: inline-block!important;
  font-size: 1vw!important;
  height:2vw!important;
  width:5vw!important;
  line-height:1vw!important;
}

#email{
  padding:.5vw;
}

<div class="myfooter">
   <div class="cap"><h1>Help create a sustainable and healthy town of Weston</h1>
   </div>
   <div class="left">
      <form name="message" method="post">
         <section>  
            <div style="float:left;">     
               <label for="email">Join our mailing list:</label>
               <input id="email" type="email"  name="email" placeholder="enter email">
               <input class="submit-button" type="submit" value="Submit">   
            </div>
         </section>
      </form>
   </div>
   <div class="right-div">
      <div class="d3">   
         <p  class="last3">
            <a href="https://www.facebook.com/groups/1960906387454685">
               <img class="footer-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/facebook-square-brands-green.png">
               <span class="footer-txt">Like us on Facebook</span>
            </a>
         </p>
      </div>
      <div class="d3">
         <p class="last3">
            <a href="https://www.instagram.com/sustainablewestonactiongroup/">
               <img class="footer-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/instagram-brands-green.png">
               <span class="footer-txt">follow us on Instagram</span>
            </a>
         </p>
      </div>
      <div class="d3">
         <p id="4" class="last3">
            <a href="https://twitter.com/Weston_SWAG">
               <img class="footer-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/twitter-square-brands-green.png">
               <span class="footer-txt">Retweet us on Twitter</span>
            </a>
         </p>
      </div>
   </div>
<div>

Answer 1

在 HTML 文件中添加适当的缩进可以大大提高可读性。尝试缩进 HTML 标签的子标签，以表明该内容是 "within" 标签。

至于你的 CSS classes，试试像 BEM 这样的东西，你可以在这里了解更多：http://getbem.com/introduction/

BEM 可用于创建 CSS class 有意义的名称，而不仅仅是一周内可以忘记的简单变量名称。将您的 class 名称更改为 BEM 后，尝试按页面上从上到下或按字母顺序对 CSS 文件中的 class 进行排序。

Answer 2

我认为如果您想让 css 看起来更干净，您应该研究 sass 或 scss 之类的东西。它为您的 css 提供了脚手架结构，因此更容易理解。它最终可能看起来像这样...

.right {
    width:40%;
    float:right;
    color:white;
    background-color:#538231;
    font-size:1vw;
    padding-left:10%;
    height:12vw;
    div {
        p {
            a {
                text-decoration:none;
                &:visited {
                    color:white;
                }
            }
        }
    }
}

Answer 3

你为什么不尝试使用 flexbox。我removed/condensed 你的代码。当然，如果你使用 SASS，你可以将所有 CSS 包装在你的 myFooter class.

中

<div class="myFooter">
  <div class="left">
    <h3>Help create a sustainable and healthy town of Weston</h3>
    <form name="message" method="post">
      <section>  
          <label for="email">Join our mailing list:</label><input id="email" type="email"  name="email" placeholder="enter email">
          <input class="submit-button" type="submit" value="Submit"> 
      </section>
    </form>
  </div>
  <div class="right">
        <a href="https://www.facebook.com/groups/1960906387454685">
          <img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/facebook-square-brands-green.png"><span class="foot-txt">Like us on Facebook</span>
        </a>

        <a href="https://www.instagram.com/sustainablewestonactiongroup/">
          <img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/instagram-brands-green.png
          "><span class="foot-txt">follow us on Instagram</span>
        </a>

        <a href="https://twitter.com/Weston_SWAG">
          <img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/twitter-square-brands-green.png"><span class="foot-txt">Retweet us on Twitter</span>
       </a>
  </div>
</div>

.myFooter{
  background: #538231;
  padding: 1.5em;
  display: flex;  
  flex-wrap: wrap;
}

.myFooter .left{
  flex: 1 1 auto;
}

.myFooter .right{
  flex: 1 1 auto;
}

.myFooter h3{
  color:#b3d7f8;
  font-size: 16px;
  padding-bottom: 20px;
}

.myFooter label{
  display: block;
  color: #c2d59b
}

.myFooter input{
  padding: 3px 10px;
}

.myFooter .right a{
  display: block;
  color: white;
  border: 1px solid white;
  width: 70%;
  margin: 5px 0px;
}

.myFooter .right img{
  width: 15px;
  height: 100%;
  margin: 5px 10px 5px 5px;
}

https://jsfiddle.net/wvc2p63y/

html css 有点工作但实现混乱

html css sort of work but messy implementation

css

wordpress

layout

custom-wordpress-pages

responsive