html+css+bootstrap网页布局学习Day3

今日完成效果：
头部、logo、导航栏内容的添加。

此处应该使用js来实现，暂用css的hover。

红框内容的实现，它是一个div，父级为核心产品的div。
把它 定位为绝对定位 position：absolute；display:none;
当鼠标悬浮在父级上则显示

三角形的是采用iconfun 中的元素完成，有类似边框效果是使用了阴影。

text-shadow: 1px -1px #CCCCCC ,  -1px -1px #CCCCCC;

每一个课程为一个div，

<div id="box_content">
								<div>
									<div>更新</div>
									<a href="">
										<img src="img/1.png" />
									</a>
								</div>
								<div>JavaWeb项目实战全程实录#学完你就可以自己用Java做</div>
								<div>
									<p>
										<span>java</span>
										<span>实战</span>
										<span class="icon-ren iconfont"></span>
										<span>3242</span>
										<span>
											<i class="icon-xingxuanzhong iconfont"></i>
											<i class="icon-xingxuanzhong iconfont"></i>
											<i class="icon-xingxuanzhong iconfont"></i>
											<i class="icon-xingxuanzhong iconfont"></i>
											<i class="icon-xingxuanzhong iconfont"></i>
										</span>
									</p>
									<p>
										<span>12/03</span>
										<span>限时免费</span>
									</p>
								</div>
							</div>

css

#box_content>div:first-child{
	position: relative;
}
#box_content>div:first-child>div{
	border: #ffffff 2px solid;
	position: absolute;
	background-color: #008000;
	border-radius: 15px;
	color: white;
	padding: 2px 5px;
	left: -8px;
	top: 10px;
}
#box_content>div:nth-child(2){
	font-size: 20px;
	/*只显示两行，剩余的文字省略号*/
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 20px;
}
#box_content>div:nth-child(2):hover{
	color: #A52A2A;
}
#box_content>div:first-child>a>img{
	width: 205px;
}
#box_content>div:nth-child(3)>p{
	padding: 5px 0px 5px 5px;
	color: #9d9d9d;
	font-size: 10px;
	font-weight: lighter;
}
#box_content>div:nth-child(3)>p:nth-child(1)>span:nth-child(1){
	background-color: #0055FF;
	color: white;
	padding: 5px 5px;
	border-radius: 5px;
}
#box_content>div:nth-child(3)>p:nth-child(1)>span:nth-child(5)>i{
	color: #d48d00;
	font-size: 8px;
}
#box_content>div:nth-child(3)>p:nth-child(2)>span:nth-child(1){
	float: left;
	margin-top: 5px;
}
#box_content>div:nth-child(3)>p:nth-child(2)>span:nth-child(2){
	padding: 5px 10px;
	background-color: #FFAA7F;
	border-radius: 10px;
	/* margin-left: 80px; */
	float: right;
	color: white;
}