html练手主页细节总结

java网课，涉及到了一部分前端的知识，作为纯小白，第一次要按照效果图实现代码，虽然只用到了html和css， 但也不得不表示，臣妾做不到啊。。。

效果图如图所示：

最后，在和它死磕了两三天之后，终于渣渣还是做出来了！！

几个很有意思的部分：

1. banner图遮罩层的实现：

     看了网上几个解决方案，最常用的是js，如：www.cnblogs.com/ilian/archi…

奈何，小白不懂。

so，傻子办法：

遮罩层可以看做是蒙在图片的一层div。关于遮罩层的实现方法，参考如下步骤设置：

1、首先可以对其设置背景色为半透明黑色：

background-color: #000;
opacity: 0.4;

2、再将大小设置与图片相同。

3、然后设置z-index让其显示在图片上层。

4、最后使用绝对定位使其定位在图片正上方。

<div class="banner-img">  <!-- 实现遮罩层 -->  <!-- <div class="banner-cover"> -->  <img src="images\banner3.jpg">  <!-- </div> -->  </div>

设置css样式：

.banner .banner-img{  width: 100%; height: 800px;  overflow:hidden; z-index: 10; background-color: #000000; opacity: 0.4; position: absolute;  }

2. 下划线

可以用html标签解决，加上标签。

如：www.divcss5.com/wenji/w586.…

但是，这个效果图中下划线和原字体的颜色是不同的，so，最终解决办法：

<h1>AB<span class="underline">O</span>UT</h1>

css：

.about-top h1{ font-weight: bold; margin-top: 30px; } .underline{  padding-bottom:5px; border-bottom:2px solid #07cbc9; }

3.实现图片插上黑底白字

按理来说往上加个div就行，奈何我咋调也调不出来。后来问老师最终解决办法：

 <div class="icon2">
      	<img src="images\03-01.jpg">
        <div class="des1"><p>SCIENCE LAB</p></div>
      </div>

css设置：

.gallery-middle .icon2{
    float: left;
    margin: 20px;
    background-color: #000;
    width: 30%;
}
.gallery-middle .icon2 .des1{
    padding: 20px 15px;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
}
.gallery img{
    z-index: -30;
    width: 100%;
}
.gallery .img p{
    color: white;
    z-index: 100;
    margin-top: -30px;
    text-align: left;
    padding-left: 10px;
}

4.字体加粗

主要针对的是70000和600，发现设置为bold之后，依然不够粗。

so，html大法好。

<h1><strong>70<span class="underline">0</span>00</strong></h1>

css设置：
.about-middle-right1 h1{
    font-weight:bold；
}