CSS10 图片常用技术与对齐

最新推荐文章于 2023-11-11 10:47:48 发布

ZT黄

最新推荐文章于 2023-11-11 10:47:48 发布

阅读量838

点赞数 1

分类专栏：前端从0开始快速自学HTML/CSS/Javascript学习

本文链接：https://blog.csdn.net/weixin_44055272/article/details/89035410

版权

前端同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

从0开始快速自学HTML/CSS/Javascript学习

40 篇文章 0 订阅

订阅专栏

1 图片廊

1.1 效果

http://www.runoob.com/try/try.php?filename=trycss_image_gallery
如果实际效果不明显，参照
在这里插入图片描述

1.2 思路

1.先写html部分，一个div里面有一个有图片和文字
2.css部分先用通配符把所有浏览器默认的margin和padding都去掉
3.限制一个图片廊的宽度和高度，并且设置边框，经过时有阴影
4.设置图片宽度铺满，高度自适应。文字设置字体和大小

<body>
<div class="image_gallery">
    <div class="image">
        <a href="#1">
            <!--通过点击图片实现页面跳转-->
            <image src="images/1.jpg">图片1</image>
        </a>
        <div class="words">这里是文字描述</div>
    </div>
</div>
<div class="image_gallery">
    <div class="image">
        <a href="#2">
            <image src="images/2.jpg">图片2</image>
        </a>
        <div class="words">这里是文字描述</div>
    </div>
</div>
<div class="image_gallery">
    <div class="image">
        <a href="#3">
            <image src="images/3.jpg" >图片3</image>
        </a>
        <div class="words">这里是文字描述</div>
    </div>
</div>
<div class="image_gallery">
    <div class="image">
        <a href="#4">
            <image src="images/4.jpg">图片4</image>
        </a>
        <div class="words">这里是文字描述</div>
    </div>
</div>
</body>
</html>

1.3 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片组合技术</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div.image{
            margin: 10px;
            /*边框设置*/
            border: 5px solid #9199aa;
            /*浮动响应布局*/
            float: left;
            /*限制图片宽度和高度*/
            width: 500px;
            height: 400px;
        }
        div.image:hover{
            /*鼠标经过时显示阴影和边框变换*/
            border: 5px solid #000000;
            /*水平偏移,竖直偏移*/
            box-shadow: 10px 10px 10px #888888;
        }
        div.image img{
            /*铺满图片框*/
            width: 100%;
            height: auto;
        }
        div.words{
            /*图片描述设置*/
            padding: 10px;
            text-align: center;
        }
    </style>

</head>

2.图像透明设置

在上面的基础上之上进行图片透明度设置

2.1 效果

在这里插入图片描述

2.2 思路

1.如何加透明度？
（1）opacity 小数：0表示完全透明，1表示不透明
（2）filter:alpha(opacity=0到100的数字)：0表示完全透明，100表示不透明。

            opacity: 0.4;
            filter:alpha(opacity=40);

2.加在哪里？
正常情况下鼠标没有滑过时透明度为0.4，划过时不透明为1
在这两个选择器里设置

div.image{
            margin: 10px;
            /*边框设置*/
            border: 5px solid #9199aa;
            /*浮动响应布局*/
            float: left;
            /*限制图片宽度和高度*/
            width: 500px;
            height: 400px;
            /*最常用的是第一种方法，但是为了兼容IE8内核及更早的浏览器最好把后面的写上*/
            opacity: 0.4;
            filter:alpha(opacity=40);
        }
        div.image:hover{
            /*鼠标经过时显示阴影和边框变换*/
            border: 5px solid #000000;
            /*水平偏移,竖直偏移*/
            box-shadow: 10px 10px 10px #888888;
            opacity: 1;
            filter:alpha(opacity=100);
        }

这篇博客好像有点短，那我们再来讲一讲对齐把

3 对齐

3.1 文字对齐

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

3.2 标签对齐

ZT黄

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
CSS10 图片常用技术与对齐

1 图片廊1.1 效果http://www.runoob.com/try/try.php?filename=trycss_image_gallery如果实际效果不明显，参照1.2 思路1.先写html部分，一个div里面有一个有图片和文字2.3.4.<body><div class="image_gallery"> <div class=...
复制链接

扫一扫

专栏目录