我的博客平面设计

问题：不管页面怎么变化时~约束图片的大小始终占页面总宽度的某个百分比~假设以32%为例

解决：

1、给图片加一个父元素~设置父元素的宽度占整个屏幕的32%~

2、将图片宽度设为100%（这一步很重要~只有加上这句~图片才会被约束在父元素中~）

 

html代码：

<section class="gray-section">
        <div class="article-preview">
            <div class="image-section">
                <img src="imgs/pic01.jpg" alt="图片1"/>
            </div>
            <div class="text-section">
                <h2>有一个标题</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quo ratione rem, rerum ullam.
                </p>
            </div>
        </div>
    </section>

 

css代码：（采用less编写）

.gray-section {
  .image-section {
    width: 32%;
    img {
      width: 100%;
    }
  }
}

 

问题：div内所有的元素都浮动后~这个作为父元素的div的高度变为0了~

原因：div是块级元素~在不设置高度的情况下其高度是由子元素内容撑起来的~当所有的子元素都浮动后~父级div的高度就为0了

解决：对父级div做清除浮动的操纵~具体代码如下：

html代码：

<div class="article-preview">
            <div class="image-section">
                <img src="imgs/image1.jpg" alt="图片1"/>
            </div>
            <div class="text-section">
                <h2>有一个标题</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quo ratione rem, rerum ullam.
                </p>
            </div>
        </div>

 

css代码：（采用less编写）

.article-preview {
    > div {//子元素全部浮动了
      float: left;
    }
    &:after {
      content: '';
      display: block;
      clear: both;
    }
  }

 

问题：图片有间隙（如下如图所示）

解决：如果不是margin和padding的原因~那可能就是由于字体大小不同导致行高的问题~解决方式为在直接父元素上重置字体大小为0~之后对子元素的字体再按需要设置大小

html代码：

<div class="article-preview">
            <div class="image-section">
                <img src="imgs/image1.jpg" alt="图片1"/>
            </div>
            <div class="text-section">
                <h2>有一个标题</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quo ratione rem, rerum ullam.
                </p>
            </div>
        </div>

 

css代码：

.article-preview {
    font-size: 0;//-------------------字体大小重置为0
    > div {//子元素全部浮动了
      float: left;
    }
    &:after {
      content: '';
      display: block;
      clear: both;
    }

    .text-section {
      width: 45%;
      position: relative;
      top: 68px;
      left: 50px;
      h2 {
        margin-bottom: 20px;
        font-size: 20px;//-------------------重置后再设置字体大小
      }

      p {
        width: 100%;
        font-size: 18px;//-------------------重置后再设置字体大小
        letter-spacing: 1px;
      }
    }
  }

 

问题：让导航条固定到顶端

html代码：

<nav>
    <div class="logo"><a href="#">刘小X</a></div>
         <div class="menu">
              <a href="javascript:void(0);">
                  <hr/>
                  <hr/>
                  <hr/>
              </a> 
          <div id="myHover"></div>
    </div>
</nav>

 

css代码：

.newNav {
  background:rgba(100,100,100,0.7);
  width:100%;
  position:fixed;
  height:@navHeight;
  top:0;
  z-index:1000;
}

 

如果想页面滑动到看不到导航条时才出现导航条固定在顶端的效果~则要用js实时处理滚动事件~当发现滚动长度大于顶端导航条高度时就添加写好的newNav类到nav标签

js代码：

$(window).scroll(function() {
    if(document.body.scrollTop > 50){
        $("nav").addClass("newNav");
    }
    else {
        $("nav").removeClass("newNav");
    }
});