Bright的咖啡馆

前言：

这两天进行了一个实践，写了一个小小的案例，现在就来进行讲解一下

内容

因为放视频太麻烦了，只能放一个小截图了

这就是其大概内容，我只是将最近所学的全部进行了一次实践锻炼那样…

接着那就看看怎么实现的吧

框架

粗略一看，其中包含的有

总框架container
顶部header
导航条nav
主要内容main中包含着一个aside和content
这里我将aside命名为list
其中包含text-list和img-list
底部footer

对于css部分采用的是外联式引用，果然对于太多的内容还是用外联式再好不过了
算是比较平常的一个结构，拿来练练手
各个区域之间的范围一定要设计好…
具体怎么做这个框架的可以去看之前的css布局与定位中的浮动定位

header头部

效果：
插入一个外景图片并在其上添加4个小图标
方法：
利用层定位
将header区域设置为relative相关定位
小图标部分区域设置为absolute绝对定位、
紧接着将小图标调节到需要的位置即可
注意：
1、font-size: 0px; 取消小图标之间的间隙
2、图标的大小如果不是一开始就那么小的话需要应用嵌套声明进行设计图片的大小
代码：

css部分：
#header {
height :500px;
margin-bottom: 5px;
margin: 0 auto;
text-align: center;
position :relative ;
}
#bright img {
height: 500px;
text-align: center;
}
#icon-list {
position: absolute; /子层定位/
top :50px;
left :30px;
width: 130px;
height: 30px;
font-size: 0px;
/background-color : black ;/
}
#icon-list img{
width :30px;
height :30px;
}

html部分：
<div id="header">        
            <div id="bright">
                <p><img src=" images/1.jpg" /></p>
            </div>            
            <div id="icon-list">
                <img src="images/5.jpg" />
                <img src="images/6.jpg" />
                <img src="images/7.jpg" />
                <img src="images/8.jpg" />
            </div>
        </div>

nav导航条部分

注意：
font: 18px/30px; /30px为行高/
同时还要设置字符间距

list部分

text-list

这部分由于我做的比较简单
所以想具体了解直接去之前内容前段第二周中的表格标记了解即可

img-list

效果：
相框中放着一幅图片，当鼠标悬停时适当放大，有稍微倾斜——分左右，圆角边框，每几行一幅图片
方法：
相框色设计我是直接照搬的
悬停放大 倾斜 圆角边框都是之前的应用了，
既然图片分左右倾斜，那么就设计两个类似的选择器即可
每几行一幅图片比较复杂，要用到清除浮动，这个在接下来的content中再说
收获：

相框色：
padding: 10px;
background-color: #eee;
border: 1px solid #BFBFBF;
box-shadow: 2px 2px 4px #aaa;

代码：

html部分：
<div id="img-list">
                    <div class="rotate-left"><img src=" images/a.jpg" /></div>
                    <div class="rotate-right"><img src=" images/b.jpg" /></div>
                    <div class="rotate-left"><img src=" images/c.jpg" /></div>
                    <div class="rotate-right"><img src=" images/3.jpg" /></div>
                </div>

#img-list {
margin: 0 auto;
text-align: center;
}
#img-list img {
width:100px;
height: 100px;
border-radius: 15px;
transform: rotate(15deg);
clear: both;
padding: 10px;
background-color: #eee;
border: 1px solid #BFBFBF;
box-shadow: 2px 2px 4px #aaa;
font-size :0;
}
#img-list img:hover{
transform :scale(1.2);
}
.rotate-left {
transform: rotate(15deg);
margin: 40px auto;
}
.rotate-right {
transform: rotate(-40deg);
}

content部分

html部分代码为：
<div class="content">
 <div class=" subcon">
                    <img src="images/2.jpg" />
                    <div class=" subtext">
                        <h2>拿铁Caffè Latte</h2>
                        <p>拿铁咖啡是意大利浓缩咖啡(Espresso)与牛奶的经典混合，意大利人也很喜欢把拿铁作为早餐的饮料。意大利人早晨的厨房里，照得到阳光的炉子上通常会同时煮着咖啡和牛奶。喝拿铁的意大利人，与其说他们喜欢意大利浓缩咖啡，不如说他们喜欢牛奶，也只有Espresso才能给普普通通的牛奶带来让人难以忘怀的味道。</p>
                                            
	</div>

css代码为：

.subcon {
margin: 10px auto;
clear :both ;
}

要在每一个咖啡进行一次换行的操作，既然是区域的换行，我们应该采用clear属性进行操作。

加油！