学习笔记-ife2015task0001(二)

学习笔记-ife2015task0001(二)

依然极慢速地在做task0001_1。原来实践起来才会发现有很多做不出的或者是记不住的知识。所以笔记内容都是查漏补缺的知识点。

这次的主要内容是
放一张照片，然后照片的右下角有一个透明渐变的文本框。

这任务感觉就很简单…可实际上由于基础不扎实以及没有留意整体还有理解题目要求，然后就走了很多弯路。

明确要求的任务是：

1. 图片(我就默认它类似文本框)上的文字背景为白色底。至上而下透明度渐变为70%→50%(75%位置)→0%。
2. 文本框的标题14px，正文12px，内边距为上左右各10px，下面为30px。标题和正文间隔12px，正文行高150%。
3. 页面实际内容宽度为980px。(一开始没有留意，然后文本框就没在980px中…)

效果图

先来看看效果图

当浏览器宽度低于980px时

HTML代码

先贴上这部分的HTML代码

        <div class="ph-wall"></div>
		<div class="contain">
			<div class="main">
				<div class="tb">
				    <div class="t-title">抱拥这分钟</div>		
				    <div class="text-box">
					    <div class="t-main">忘记了世界这分钟/跌进了这爱的裂缝/谁在心中/怎猜得准</div>
				    </div>
			    </div>
			</div>
		</div>

图片

图片的位置就在头部的下面所以位置设为top:80px。由于我不希望图片变形而又能填满容器，所以用了background-size：cover

补充的知识：

background-size：100%—按容器比例撑满，图片变形；
background-size：cover—把背景图片放大到适合元素容器的尺寸，图片比例不变。

    .ph-wall {
    	position: absolute;
    	height: 600px;
        top: 80px;
        left: 0;
    	background-size: cover;
        background-image: url(DSC09931.jpg);
    }

实际内容

因为一开始没意识到实际内容，以为只是在头部要注意有…所以只好在下面再设一个实际内容的div，里面的.main跟头部的实际内容css代码一致。

    .contain {
    position: absolute;
    top: 80px;
    left: 0;
    height: 100%;
    }
    
    .header, .main{
    height: 100%;
    position: relative;
    float: left;
    width: 980px;
    left: 50%;
    margin-left: -490px;
    }

文本框

因为标题跟正文的设置要求不同，所以就将他们的内容分开设置。

然后正文跟标题的共同之处是内边距为上左右各10px。

    .t-title, .t-main {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    }

框

主要是渐变的透明，至上而下透明度渐变为70%→50%(75%位置)→0%。

补充知识：

1. background:linear-gradient(direction,color-stop1,color-stop2,…):用于创建一个线性渐变的 “图像”。

2. background:linear-gradient(angle,color-stop1,color-stop2,…);0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变，180deg将创建一个从上到下的渐变。

3. 用像素或百分比来设置该颜色开始渐变的位置。

放置的位置为：文本框右部紧贴实际内容框的右部，文本框的底部紧贴图片的下部

    .tb{
    	position: relative;
    	float: right;
    	height: 100px;
    	width: 300px;
    	top: 500px;
    	right: 0;
        color: white;
        opacity: 0.5;
        background: linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.5) 75%,rgba(0,0,0,0) 100%);
    }

标题

width: 100%;text-align: right;一开始看标题是靠右的所以就想然后就超出了文本框的边界了…

那是因为width: 100%;的话，标题div盒子宽度 = 文本框的width + 标题的margin-left + margin-right。所以就溢出了。

所以就设置为width:auto;(默认值)right: 0;，靠着文本框的右边。

补充知识：

width:auto; 表示宽度是可变动的，父元素的width =子元素的width+子元素border+子元素margin+子元素padding

width:100%; 子元素的宽度是继承的父元素宽度，不包括子元素设置的margin padding 和border部分

然后标题顶部的位置紧贴文本框顶部top:0;

    .t-title {
    	position: absolute;
    	top: 0;
    	right: 0;
    	margin-bottom: 12px;
    	font-size: 14px;
    }

正文

overflow: hidden;隐藏溢出元素框的内容，不过这里暂时没有需要隐藏的

text-indent: 2em;设置缩进。2em为两个相对长度单位，也就是代表着两个文字的大小

    .t-main {
    	position: absolute;
        overflow: hidden;
    	width: auto;
    	bottom: 0;
    	margin-bottom: 30px;
    	font-size: 12px;
    	line-height: 1.5;
    	text-indent: 2em;
    }

正文与标题的放置

补充知识：
只要元素满足下面任一条件即可触发** BFC **特性：

1. body 根元素
2. 浮动元素：float 除 none 以外的值
3. 绝对定位元素：position (absolute、fixed)
4. display 为 inline-block、table-cells、flex
5. overflow 除了 visible 以外的值 (hidden、auto、scroll)

因为一开始想设置正文和标题的div的position是absolute，但是这样会导致两个元素重叠，因为他们都是同一父元素的。

因此，如果想让两个absolute元素不发生遮挡，可以设置它们的TRBL值。

(这部分的CSS代码不太好，以后有空改进一下)

这篇笔记其实早就写好了，只是想起自己一开始就没有好好规划整体，单纯地从上往下一部分一部分的划分来做，导致后续很多操作都很难做或者做不出。所以最后发出来，是为了给自己一个警醒。