提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等。不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果。这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:

        精通CSS+DIV网页样式与布局--初探CSS

       精通CSS+DIV网页样式与布局--CSS文字效果

        精通CSS+DIV网页样式与布局--CSS段落效果


       上篇博客,小编主要讲解了有关段落的知识,这次来讲图片的效果,我们看是如何控制图片显示的效果。首先,我们来看一张图:

接下来,小编顺着上述图示的脉络对各个知识点进行一一讲解,在实战中更好的掌握:

图片效果

图片边框

首先,我们来看一段例子的代码和运行效果:

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>边框</title>
<style>
<!--
img.test1{
    border-style:dotted;    /* 点画线 */
    border-color:#FF9900;   /* 边框颜色 */
    border-width:5px;       /* 边框粗细 */
}
img.test2{
    border-style:dashed;    /* 虚线 */
    border-color:blue;      /* 边框颜色 */
    border-width:2px;       /* 边框粗细 *
}
-->
</style>
   </head>
<body>
    <img src="banana.jpg" class="test1">
    <img src="banana.jpg" class="test2">
</body>
</html>  </span></span>

效果如下所示:

分析一下上面的代码,border-style:控制线条的样式(是点画线还是虚线);border-color:很显然就是控制颜色了;border-width:控制边框的粗细程度。同时,border控制边框的时候,不但可以采用代码里边那样的方式,同时我们可以把所有的代码合成一句,我们可以这么写,代码和运行效果如下所示:

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>边框</title>
<style>
<!--
img.test1{
    border-style:dotted;    /* 点画线 */
    border-color:#FF9900;   /* 边框颜色 */
    border-width:5px;       /* 边框粗细 */
}
img.test2{
    border:dashed 2px blue;
}  

-->
</style>
   </head>
<body>
    <img src="banana.jpg" class="test1">
    <img src="banana.jpg" class="test2">
</body>
</html>  </span></span>

这样就变的很简洁了,我们看看效果:

border还有一个比较强大的功能就是能单独修改某一条边框,比如我们这样写代码,会有怎样的显示效果nie:

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>边框</title>
<style>
<!--
img.test1{
    border-style:dotted;    /* 点画线 */
    border-color:#FF9900;   /* 边框颜色 */
    border-width:5px;       /* 边框粗细 */
}
img.test2{
    border-left:dashed 2px blue;
    border-right:dotted 2px red;
}  

-->
</style>
   </head>
<body>
    <img src="banana.jpg" class="test1">
    <img src="banana.jpg" class="test2">
</body>
</html>  </span></span>

显示效果如下:

编这样更方便我们的设计,接着,我们一起来看一下图片的缩放,例子代码和运行效果如下所示:

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>图片缩放</title>
<style>
<!--
img.test1{
	width:50%;		/* 相对宽度 */
}
-->
</style>
   </head>
<body>
	<img src="pear.jpg" class="test1">
</body>
</html></span></span>

分析一下上面的代码,代码中的百分之五十表示目前这个图片的宽度相对于他的父元素body的宽度为百分之五十,也就是说她为整个浏览器的宽度的一半。她可以保证不同的浏览器不会因为她的变化而使得整个网页发生变化,她永远保持着跟浏览器一个相对的宽度。图片效果如下所示:

图片缩放

图片对齐方式

  横向对齐

横向对齐和纵向对齐两方面,我们先看横向对齐:我们采用了text-align来实现这个效果,看看代码和显示效果:

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>水平对齐</title>
   </head>
<body>
<table width="100%" border="1">
	<tr><td style="text-align:left;"><img src="building.jpg"></td></tr>
	<tr><td style="text-align:center;"><img src="building.jpg"></td></tr>
	<tr><td style="text-align:right;"><img src="building.jpg"></td></tr>
</table>
</body>
</html></span></span>

效果如下:

纵向对齐不像横向对齐那样,纵向对齐数值很多,我们把这些值进行了一一对比,我们看那代码:

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>竖直对齐</title>
<style type="text/css">
<!--
p{ font-size:15px; }
img{ border: 1px solid #000055; }
-->
</style>
   </head>
<body>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:baseline;">方式:baseline<img src="miki.jpg" style="vertical-align:baseline;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:bottom;">方式:bottom<img src="miki.jpg" style="vertical-align:bottom;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:middle;">方式:middle<img src="miki.jpg" style="vertical-align:middle;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:sub;">方式:sub<img src="miki.jpg" style="vertical-align:sub;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:super;">方式:super<img src="miki.jpg" style="vertical-align:super;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:text-bottom;">方式:text-bottom<img src="miki.jpg" style="vertical-align:text-bottom;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:text-top;">方式:text-top<img src="miki.jpg" style="vertical-align:text-top;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:top">方式:top<img src="miki.jpg" style="vertical-align:top">方式</p>
</body>
</html></span></span>

运行效果如下:

图文混排

文字环绕:我们从代码出发:

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>图文混排</title>
<style type="text/css">
<!--
body{
	background-color:bb0102;	/* 页面背景颜色 */
	margin:0px;
	padding:0px;
}
img{
	float:left;					/* 文字环绕图片 */
	/*margin-right:50px;			/* 右侧距离 */
	/*margin-bottom:25px;			/* 下端距离 */
}
p{
	color:#FFFF00;				/* 文字颜色 */
	margin:0px;
	padding-top:10px;
	padding-left:5px;
	padding-right:5px;
}
span{
	float:left;					/* 首字放大 */
	font-size:85px;
	font-family:黑体;
	margin:0px;
	padding-right:5px;
}
-->
</style>
   </head>
<body>
	<img src="chunjie.jpg" border="0">
	<p><span>元</span>旦,中国节日,即世界多数国家通称的“新年”,是公历新一年开始的第一天。“元旦”一词最早出现于《晋书》。中国古代曾以腊月、十月等的月首为元旦,汉武帝始为农历1月1日,并延用。中华民国始为公历1月1日,1949年中华人民共和国成立时得以明确,同时确定农历1月1日为“春节”,因此元旦在中国也被称为“新历年”、“阳历年”(相对应地,春节称为“旧历年”、“阴历年”等)。“元旦”一词系中国“土产” 已经沿用4000多年。</p>

</body>
</html></span></span>

效果如下:

我们采用了首字放大的效果,图文混排的显示效果,图片和文字进行了很好的混排,这个跟word的图文混排的显示是一样的。我们再回到看代码,我们看的出来,文字环绕图片采用的效果与首字放大是一样的,都采用了float:left。其实相当于将文字看成一张图片或者是将图片看成文字,同样采用首字下沉。

小编寄语:该博文,小编主要简单的总结了一下CSS中图片设置的效果,总共分为三个大块,包括图片样式,图片对齐,图文混排,其中图片样式包括图片的边框效果和图片的缩放效果,border-style:控制线条的样式(是点画线还是虚线);border-color:很显然就是控制颜色了;border-width:控制边框的粗细程度,以及图片的横向对齐和纵向对齐,还有图文混排,这些小的细节方面的知识,还需要我们在代码中加以实践,方能更好的掌握这些知识,BS学习,未完待续......

精通CSS+DIV网页样式与布局--图片效果的更多相关文章

  1. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  2. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  3. 精通CSS+DIV网页样式与布局--制作实用菜单

    在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...

  4. 精通CSS+DIV网页样式与布局--页面和浏览器元素

    在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...

  5. 精通CSS+DIV网页样式与布局--页面背景

    上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...

  6. 精通CSS+DIV网页样式与布局--设置表单和表格

    表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...

  7. 精通CSS+DIV网页样式与布局--CSS段落效果

    在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...

  8. 精通CSS+DIV网页样式与布局--滤镜的使用

    在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来 ...

  9. 精通CSS+DIV网页样式与布局--CSS文字效果

    上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...

随机推荐

  1. h5的localStorage和sessionStorage

    今天做了个首页的弹窗,要求是打开时显示弹窗,然后点击关闭按钮时弹窗关闭,然后点击不再显示,之后再刷新就不会有弹窗,总结一下需求. 1.弹窗显示隐藏 这个很容易,我们可以用display:none和di ...

  2. # electron-vue 尝试做个网易云音乐

    当跑起来electron第一刻 我发现这个浏览器头是不是有点丑 是不是可以隐藏起来呢,答案当然是可以的 src/main/index.js mainWindow = new BrowserWindow ...

  3. Java HttpClient伪造请求之简易封装满足HTTP以及HTTPS请求

    HttpClient简介 HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 jav ...

  4. 如何恢复Initial commit之前的源文件

    在github新建了一个空的库,然后到本地文件夹下,git init了一下,将remote和本地的关联起来了,然后git pull了一下,本地的项目源码全没了,用以下命令可以帮你恢复 git refl ...

  5. 粗糙的es6 -> es5转换正则集

    (r'() => {}','function () {return {}}'), # (r'\{\.\.\.(.+?)\}','Object.assign({}, \\1)') , # (r'( ...

  6. Objective-C语法概述

    Objective-C语法概述 简称OC 面向对象的C语言 完全兼容C语言 可以在OC里面混入C/C++代码 可以开发IOS和Mac OS X平台应用 语法预览 关键字 基本上都是以@开头(为了与C语 ...

  7. Android设置竖屏

    Android设置竖屏(禁止旋转屏) 清单文件,Activity下添加属性 android:screenOrientation="portrait" 如下 <?xml ver ...

  8. Android Studio突然不显示logcat日志

    参考文章:http://blog.csdn.net/victor_e_n_01185/article/details/52818809 有时候,AS出现没有log的情况.一般您换了模拟器,或者使用真机 ...

  9. Android Multimedia框架总结(七)C++中MediaPlayer的C/S架构补充及MediaService介绍

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼,文章链接: http://blog.csdn.net/hejjunlin/article/details/52465168 前面一篇主要介绍 ...

  10. 有两个序列A和B,A=(a1,a2,...,ak),B=(b1,b2,...,bk),A和B都按升序排列。对于1<=i,j<=k,求k个最小的(ai+bj)。要求算法尽量高效。

    有两个序列A和B,A=(a1,a2,...,ak),B=(b1,b2,...,bk),A和B都按升序排列.对于1<=i,j<=k,求k个最小的(ai+bj).要求算法尽量高效. int * ...