布局样式导入小技巧
1.重复使用的排版样式可以单独放入一个css文件,每次使用导入该css文档即可。
比如:
在该开发网站中每个网页都有相同样式的导航栏(图中黑色边框框出来的部分)
若每个网站html文档中都打一遍,则有几个网站就要打几遍。这样会让人感觉很麻烦。
这时候不如把导航栏样式代码提取出来,装入一个css文件里面,使用的时候导入就行。这样可以减少界面的代码量,何乐而不为。
图片导航栏代码没有截取完全,仅供导入说明参考
一些使用css实现的动态效果
1.鼠标经过图片会在原来位置放大效果
效果
代码
<!-- =============================图片放大效果展示块开始============================================= -->
<div class="food_top">
<h1 class="food_top_title">OUR GALLERY</h1>
<p>There are many variations of passages of Lorem lpsum available</p>
<ul class="clearfix">
<li class="big"><img src="image/gallery/gallery_01.jpg" alt=""></li>
<li><img src="image/gallery/gallery_02.jpg" alt=""></li>
<li><img src="image/gallery/gallery_03.jpg" alt=""></li>
<li><img src="image/gallery/gallery_04.jpg" alt=""></li>
<li><img src="image/gallery/gallery_05.jpg" alt=""></li>
<li><img src="image/gallery/gallery_06.jpg" alt=""></li>
<li class="big"><img src="image/gallery/gallery_07.jpg" alt=""></li>
<li><img src="image/gallery/gallery_08.jpg" alt=""></li>
<li><img src="image/gallery/gallery_09.jpg" alt=""></li>
<li><img src="image/gallery/gallery_10.jpg" alt=""></li>
</ul>
</div>
.food_top {
margin: 150px auto 50px;
width: 1240px;
height: 1630px;
}
.food_top p {
margin-bottom: 50px;
text-align: center;
color: silver;
}
.clearfix :before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.food_top ul li {
float: left;
margin: 8px 5px;
width: 400px;
height: 346px;
/* transition 属性设置元素当过渡效果 */
/*所有的属性在0.6秒之内完成改变*/
transition: all 0.6s;
}
.food_top ul .big {
display: inline-block;
width: 808px;
height: 346px;
/*所有的属性在0.6秒之内完成改变*/
transition: all 0.6s;
}
.food_top ul li:hover {
transform: scale(1.1);
/* Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。 */
/* scale(x[,y]?)值定义 2D 缩放转换。 */
/*这个是根据图片比例放大到图片的1.1倍*/
}
.food_top ul li img {
width: 100%;
height: 100%;
}
2.鼠标经过对应地址div板块显示地址位置图片
效果:
代码:
<div class="address">
<h1 class="address_title">CONTACT US</h1>
<ul>
<li>
<div>
<p class="city_name">北京</p>
<hr>
<p class="city_address">北京市海淀区建材城中路27号金隅智造工场S5栋西侧百分点办公区</p>
</div>
<img src="image/address/1.png" alt="">
</li>
<li>
<div>
<p class="city_name">上海</p>
<hr>
<p class="city_address">上海市海淀区建材城中路27号金隅智造工场S5栋西侧百分点办公区</p>
</div>
<img src="image/address/2.jpg" alt="">
</li>
<li>
<div>
<p class="city_name">天津</p>
<hr>
<p class="city_address">上海市海淀区建材城中路27号金隅智造工场S5栋西侧百分点办公区</p>
</div>
<img src="image/address/3.jpg" alt="">
</li>
<li>
<div>
<p class="city_name">四川</p>
<hr>
<p class="city_address">上海市海淀区建材城中路27号金隅智造工场S5栋西侧百分点办公区</p>
</div>
<img src="image/address/4.jpg" alt="">
</li>
<li>
<div>
<p class="city_name">重庆</p>
<hr>
<p class="city_address">上海市海淀区建材城中路27号金隅智造工场S5栋西侧百分点办公区</p>
</div>
<img src="image/address/5.jpg" alt="">
</li>
<li>
<div>
<p class="city_name">广州</p>
<hr>
<p class="city_address">上海市海淀区建材城中路27号金隅智造工场S5栋西侧百分点办公区</p>
</div>
<img src="image/address/6.png" alt="">
</li>
</ul>
</div>
.address {
margin: 150px auto 0;
width: 1205px;
height: 939px;
}
.address .address_title {
text-align: center;
color: #ff6347;
font-size: 50px;
margin-bottom: 40px;
}
.address ul li {
float: left;
position: relative;
width: 383px;
height: 352px;
margin: 0 1px 38px 10px;
border: 1px gray solid;
border-radius: 30px;
}
.address ul li div {
position: absolute;
text-align: center;
margin: 12px 14px;
width: 359px;
height: 327px;
background-color: #e2e2e2;
border: none;
border-radius: 10px;
z-index: 1;
}
.address ul li div .city_name {
margin-top: 40px;
margin-bottom: 20px;
font-size: 20px;
text-align: center;
}
.address ul li div .city_address {
display: block;
margin: 60px auto;
width: 280px;
height: 63px;
}
.address ul li img {
position: absolute;
width: 359px;
height: 327px;
margin: 12px 14px;
border-radius: 10px;
z-index: 0;
}
.address ul li div:hover {
display: none;
}
3.鼠标经过对应div板块显示边框阴影
效果:
代码:
<div class="person_box">
<h1 class="person_title">CHARACTER DISPLAY</h1>
<ul class="clearfix">
<li><img src="image/person/bride-maid-1.jpg" alt="">
<p class="p1">Bryan Berry</p>
<p class="p2">ACTRESS</p>
<p class="p3">Avatar</p>
</li>
<li>
<img src="image/person/bride-maid-2.jpg" alt="">
<p class="p1">Bryan Berry</p>
<p class="p2">ACTRESS</p>
<p class="p3">Avatar</p>
</li>
<li>
<img src="image/person/bride-maid-3.jpg" alt="">
<p class="p1">Bryan Berry</p>
<p class="p2">ACTRESS</p>
<p class="p3">Avatar</p>
</li>
<li>
<img src="image/person/groom-men-1.jpg" alt="">
<p class="p1">Bryan Berry</p>
<p class="p2">ACTRESS</p>
<p class="p3">Avatar</p>
</li>
<li>
<img src="image/person/groom-men-2.jpg" alt="">
<p class="p1">Bryan Berry</p>
<p class="p2">ACTRESS</p>
<p class="p3">Avatar</p>
</li>
<li>
<img src="image/person/groom-men-3.jpg" alt="">
<p class="p1">Bryan Berry</p>
<p class="p2">ACTRESS</p>
<p class="p3">Avatar</p>
</li>
</ul>
</div>
.person_box {
position: relative;
margin: 150px auto 0;
width: 1152px;
height: 997px;
}
.person_title {
text-align: center;
color: #ff6347;
font-size: 50px;
margin-bottom: 40px;
}
.clearfix :before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.person_box>ul>li {
float: left;
text-align: center;
margin: 10px 10px 10px 15px;
width: 352px;
height: 420px;
border: 1px rgb(187, 185, 185) solid;
}
.person_box ul li img {
margin-bottom: 15px;
width: 100%;
height: 243px;
}
.person_box ul li p {
line-height: 30px;
}
.person_box ul li .p1 {
font-size: 20px;
}
.person_box ul li .p2 {
font-size: 17px;
color: gray;
}
.person_box ul li .p3 {
font-size: 15px;
color: gray;
}
.person_box>ul>li:hover {
box-shadow: 1px 1px 2px 3px darkorange;
}