html css学习笔记-图片操作实例

最新推荐文章于 2019-08-08 09:13:09 发布
最新推荐文章于 2019-08-08 09:13:09 发布
阅读量742 收藏
点赞数
分类专栏： html/css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PZ0605/article/details/45766883
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            /*内容居中*/
            margin: 10px auto;
            width: 70%;
            height: auto;
            background-color: darkgoldenrod;
        }
        .image{
            border: 1px solid darkgrey;
            width: auto;
            height: auto;
            /*包裹图片*/
            float: left;
            text-align: center;
            margin: 5px;;
        }
        img{
            margin: 5px;
            /*透明度*/
            opacity: 1;
        }
        .text{
            font-size:12px;
            margin-bottom: 5px;;
        }

    </style>
</head>
<body>

<div class="image">
    <a href="#" target="_self">
        <img src="http://img.xiaba.cvimage.cn/4cbc56c1a57e26873c140000.jpg" alt="a" width="150px;height:150px"/>
    </a>
    <div class="text">这是一张测试图处</div>
</div>
<div class="image">
    <a href="#" target="_self">
        <img src="http://img.xiaba.cvimage.cn/4cbc56c1a57e26873c140000.jpg" alt="a" width="150px;height:150px"/>
    </a>
    <div class="text">这是一张测试图处</div>
</div>
<div class="image">
    <a href="#" target="_self">
        <img src="http://img.xiaba.cvimage.cn/4cbc56c1a57e26873c140000.jpg" alt="a" width="150px;height:150px"/>
    </a>
    <div class="text">这是一张测试图处</div>
</div><div class="image">
    <a href="#" target="_self">
        <img src="http://img.xiaba.cvimage.cn/4cbc56c1a57e26873c140000.jpg" alt="a" width="150px;height:150px"/>
    </a>
    <div class="text">这是一张测试图处</div>
</div><div class="image">
    <a href="#" target="_self">
        <img src="http://img.xiaba.cvimage.cn/4cbc56c1a57e26873c140000.jpg" alt="a" width="150px;height:150px"/>
    </a>
    <div class="text">这是一张测试图处</div>
</div>
<div class="image">
    <a href="#" target="_self">
        <img src="http://img.xiaba.cvimage.cn/4cbc56c1a57e26873c140000.jpg" alt="a" width="150px;height:150px"/>
    </a>
    <div class="text">这是一张测试图处</div>
</div>

<div class="image">
    <a href="#" target="_self">
        <img src="http://img.xiaba.cvimage.cn/4cbc56c1a57e26873c140000.jpg" alt="a" width="150px;height:150px"/>
    </a>
    <div class="text">这是一张测试图处</div>
</div>
<div class="image">
    <a href="#" target="_self">
        <img src="http://img.xiaba.cvimage.cn/4cbc56c1a57e26873c140000.jpg" alt="a" width="150px;height:150px"/>
    </a>
    <div class="text">这是一张测试图处</div>
</div>
<div class="image">
    <a href="#" target="_self">
        <img src="http://img.xiaba.cvimage.cn/4cbc56c1a57e26873c140000.jpg" alt="a" width="150px;height:150px"/>
    </a>
    <div class="text">这是一张测试图处</div>
</div>
<div class="image">
    <a href="#" target="_self">
        <img src="http://img.xiaba.cvimage.cn/4cbc56c1a57e26873c140000.jpg" alt="a" width="150px;height:150px"/>
    </a>
    <div class="text">这是一张测试图处</div>
</div>


</body>
</html>

绿叶清风
关注
专栏目录
史上最经典的HTML+CSS笔记.rar
04-24
该笔记为markdown编写,下载后强力建议使用markdown阅读器阅读
html css js网页制作实例-model-for-network-id开发笔记
06-21
在这个“html css js网页制作实例-model-for-network-id开发笔记”中，我们将深入探讨这三个技术如何协同工作，特别是如何应用到网络ID的识别与处理。 HTML是网页的骨架，通过一系列标签来定义内容的结构，如`...
html+css的一些笔记
lxssong0的博客
08-28 680
绝对路径：是从盘符开始的路径 相对路径：是从当前路径开始的路径（..表示父目录，上级目录） CSS定位：静态定位，绝对定位，相对定位，固定定位 绝对定位是相对于最近已定位的祖先元素，元素框从文档流完全删除 它可以像图层一样单独做一层，第几层可以通过z-index 来设置 相对定位是相对于正常排列的位置进行偏移，脱离文档流，但仍占据空间 固定定位是元素的位置相对于浏览器窗口是固定位置 ...
web开发-html和css开发实例-学习笔记三
xuesnowce的博客
03-25 592
网页开发实例：div+css实现 例： html> html lang="en"> head> meta charset="UTF-8"> title>titltitle> head> link rel="stylesheet" href="fonts/latofonts.css"/> style> body{ padding: 0; margin: 0; } d
HTML, CSS学习笔记（完整版）
u011925500的专栏
10-02 7382
第一章 div布局 前几课内容 .htm是早期的后缀，因为那时只能支持长度为3的后缀，因此html与htm是一样的。 shtml是服务器先处理然后再交给浏览器处理   #HTML小知识#之#XHTML与HTML的区别#XHTML是更严谨更纯净的 HTML 版本。XHTML目标是取代HTML。更详细的介绍 XHTML 教程 http://t.cn/h94BV   #HTML小知识#
HTML学习笔记
gabby____的博客
08-07 448
一、HTML 1、标题大小与字体大小的关系 1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。 2、HTML 水平线 &lt;hr&gt; 标签在 HTML 页面中创建水平线。 3、 &lt;b&gt;加粗文本&lt;/b&gt;&lt;br&gt; &lt;strong&gt;加粗文本&lt;/strong&gt;&lt;br&gt; &l
html css js全套学习笔记＋举例
04-16
通过笔记和实例的实践，你可以逐步理解并掌握这些概念，从而从零开始建立起前端开发的能力。 在实际应用中，前端开发者通常会将HTML、CSS和JavaScript结合使用，构建功能丰富且美观的网页。例如，可以使用HTML创建...
html css js网页制作实例processing-开发笔记p
最新发布
06-21
在"html css js网页制作实例processing-开发笔记p"这个主题中，我们将深入探讨这三个关键领域的基本概念、实践技巧以及如何将它们整合到网页开发过程中。 首先，HTML（HyperText Markup Language）是网页内容的基础...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
HTML学习笔记10-HTML图像
doulihang的博客
08-08 223
一、HTML图像 图像使用<img>标签定义，该标签为空标签，只有开始标签，没有结束标签。该标签生成的元素只有属性没有内容。实现显示图片的两种方式 1.1.显示本地的图片，图片1.jpg和该html文档在同一目录。具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta char...
DIV+CSS学习笔记总结篇
weixin_34380781的博客
09-04 1893
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标： ...
html5 css3实现GIF图
hugejihu9的专栏
12-05 1774
文章来自：源码在线https://www.shengli.me/h5/372.html  
HTML学习笔记03--图片格式
Bee_Darker的博客
07-12 293
1.JPEG（JPG）格式 JPEG图片支持的颜色较多，图片可以压缩，但是不支持透明； 一般使用JPEG来保存颜色丰富的图片； 2.GIF格式 GIF图片支持的颜色少，只支持简单的透明，支持动态图； 图片颜色单一或动态图时使用gif格式； 3.PNG格式 PNG支持的颜色多，并且支持复杂的透明，不支持动态图； 可以用来显示颜色复杂的透明图片； 4.图片使用原则 效果不一致，使用...
html学习笔记--常见图片格式区别
tongle_deng的专栏
12-04 1477
网页图像的格式： 1.gif格式 : 支持256种颜色，支持文件背景透明，支持动画 ；一般文件小下载快 2.jpg格式 : 数百万种以上的颜色，不支持文件透明，不支持动画效果，但图像颜色品质高（精度高），一般用于数码相片。位图（由一个一个像素像素点组成）；一般文件大、下载快 3.png格式：fireworks软件的源文件格式，支持文件背景透明  png8: 导出文件选png8,透明就可以了
HTML+CSS简单实例（一）
m0_37655876的博客
08-02 1万+
HTML+CSS简单实例（一） 本实例参考https://blog.csdn.net/u010871058/article/details/78511848 目的：实现简单欧莱雅网站。 代码内容： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm...
HTML&CSS精选笔记_CSS入门
:)一位靓仔偶然路过的博客
07-18 4392
CSS入门 CSS核心基础 CSS样式规则 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} CSS代码结构中的特点 CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
HTML学习思维导图
junyixin
10-06 2260
http://www.zixue.it/data/attachment/forum/201401/21/235003luj5trkebkd2udk5.jpeg
html 当前页面点击链接跳转到当前页面页面的某个位置
热门推荐
我的专栏
08-10 2万+
通过 href="#id"的方式可以直接跳转到该页面的某个位置，直接上代码： div1 div2 div3 div4 div5 1 2 3 4 5
HTML与CSS学习笔记：基础与常见标签解析
是一份个人整理的HTML与CSS学习笔记，共计120页，内容清晰，包括效果截图和代码示例，非常适合HTML和CSS初学者作为参考。” HTML（HyperText Markup Language）是一种标记语言，常用于创建网页。CSS（Cascading ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值