Css常用操作——————图片

body{
    background-color: #0078b3;
}

.image{
    border: 1px solid darkgray;
    width: auto;
    height: auto;
    float: left;
    text-align: center;
    margin: 5px;
}

img{
    margin: 5px;
    opacity: 1;
}

.text{
    font-size: 12px;
    margin-bottom: 5px;
}

a:hover{
    background-color: aqua;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>

    <div class="image">
        <a href="#" target="_self">
            <img src="2.jpg" alt="背景" width="200px" height="200px">
        </a>
        <div class="text">一张背景图</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="2.jpg" alt="背景" width="200px" height="200px">
        </a>
        <div class="text">一张背景图</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="2.jpg" alt="背景" width="200px" height="200px">
        </a>
        <div class="text">一张背景图</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="2.jpg" alt="背景" width="200px" height="200px">
        </a>
        <div class="text">一张背景图</div>
    </div>
</body>
</html>

时间： 2024-10-07 12:00:42

Css常用操作——————图片的相关文章

HTML5学习笔记（十）：CSS常用操作

对齐在 CSS 中,可以使用多种属性来水平对齐元素. 水平对齐使用 margin 属性来水平对齐,可通过将左和右外边距设置为 "auto",来对齐块元素. 把左和右外边距设置为 auto,规定的是均等地分配可用的外边距.结果就是居中的元素: .center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; } 也可以简写为,这里把上下的外边距设定为0: .center { marg

CSS常用背景图片定位方法

CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱. 先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案. 整篇文章会按照如下思路: 1.无依赖的absolute定位 2.background-position扩展语法 3.background-origin定位 4.ca

Css常用操作——————分类

一.尺寸操作 height 设置元素高度 line-height 设置行高 .p1{ width: 400px; line-height: normal; } .p2{ width: 400px; line-height: 200%; } .p3{ width: 400px; line-height: 50%; } <!DOCTYPE html> <html lang="en"> <head>

css常用操作

css display: display:none:元素隐藏后,不占用布局空间 visibility:hidden:元素隐藏后,继续占用布局空间块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性: 和相邻的内联元素在同一行; 宽度(width).高度(height).内边距的top/bottom(padding-to

Css常用操作——————导航栏

一.垂直导航栏 ul{ list-style-type: none; margin: 0px; padding: 0px; } a:link,a:visited{ text-decoration: none; display: block; background-color: aqua; color: black; width: 50px; text-align: center; } a:active,a:hover{

CSS常用操作——————对齐

一.使用margin属性进行水平对齐 *{ margin: 0px; } .div{ width: 70%; height: 1000px; background-color: red; margin-left: auto; margin-right: auto; } margin:值1 值2 值1代表上下值2代表左右 *{ margin: 0px; } .div{ width: 70%; height: 1000p

CSS从大图片上截取小图标的操作_CSS精灵

1.编程思想在于: 使用background-position属性(设置背景图像的起始位置).这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始. 2.CSS基础介绍: 1.如何定位背景图像: body { background-image:url('bgimage.gif'); background-repeat:no-repeat; background-attachment:fixed; background-p

如何利用CSS代码使图片和文字在同一行显示且对齐

对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢? 对于这种现象,方法有3种: 1.通过添加css的“vertical-align:middle;”: 2.如果图片是背景图片,可以在css中设置背景图片,然后设置文字的padding属性: 3.把文字和图片分别放入不同的div中. 经过多次的测试,上面三种方法都可以让图片和文字在同

web前端【第四篇】CSS属性操作

一.文本属性 1.text-align:cnter 文本居中2.line heigth 垂直居中 :行高,和高度对应3.设置图片与文本的距离:vertical-align4.text-decoration:none 去掉超链接下划线5.要是给a标签修改颜色的时候,就定到a标签上,用继承有时候是搞不定的因为继承的级别是很低的,如果a标签设置了样式,是不会继承父亲的6.首行缩进:text-indent:30px7.font-style:oblique 或者italic....(设置字体的样式为斜体)