【笔记】摄影分享网站开发总结

代森森

于 2021-10-13 15:23:50 发布

阅读量160

点赞数 3

分类专栏：个人笔记文章标签： css html

本文链接：https://blog.csdn.net/ovocc/article/details/120740048

版权

个人笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

布局样式导入小技巧

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;
}

代森森

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
【笔记】摄影分享网站开发总结

布局样式导入小技巧1.重复使用的排版样式可以单独放入一个css文件，每次使用导入该css文档即可。比如：在该开发网站中每个网页都有相同样式的导航栏（图中黑色边框框出来的部分）若每个网站html文档中都打一遍，则有几个网站就要打几遍。这样会让人感觉很麻烦。这时候不如把导航栏样式代码提取出来，装入一个css文件里面，使用的时候导入就行。这样可以减少界面的代码量，何乐而不为。图片导航栏代码没有截取完全，仅供导入说明参考一些使用css实现的动态效果1.鼠标经过图片会在原来位置放大效果效果
复制链接

扫一扫