精通CSS+DIV网页样式与布局--图片效果
提到图片效果，小伙伴们可能会想到美图秀秀，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网页样式与布局--图片效果的更多相关文章
- 系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- 精通CSS+DIV网页样式与布局--制作实用菜单
在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...
- 精通CSS+DIV网页样式与布局--页面和浏览器元素
在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...
- 精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
- 精通CSS+DIV网页样式与布局--设置表单和表格
表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...
- 精通CSS+DIV网页样式与布局--CSS段落效果
在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...
- 精通CSS+DIV网页样式与布局--滤镜的使用
在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来 ...
- 精通CSS+DIV网页样式与布局--CSS文字效果
上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...
随机推荐
- 非Unicode编码的软件如何在Windows系统上运行
我们常常会遇到这样一种情况:点开某些日文软件(我不会说就是galgame( ╯□╰ ))会出现乱码或者直接无法运行. 出现乱码的原因很简单:编码与译码的方式不一致!!!!!!!!!!! 首先大家需要知 ...
- 《java技术》第二次作业
(一)学习总结 1.什么是构造方法?什么是构造方法的重载? 1)没有返回值,名字与类名相同,当新对象被创建的时候,构造函数会被调用,要想构造函数,必须声明对象并对其初始化.每一个类都有构造函数,如果没 ...
- Mac上安装brew 包管理工具
Mac 上的包管理工具对于开发者来说是一件非常方便的工具,能够有效的对包进行管理. 所以这篇博客就来简单的讲一下brew 的安装和一些基础命令. brew 全称叫做Homebrew . 1. 首先来说 ...
- Linux系统之TroubleShooting（故障排除）（转）
尽管Linux系统非常强大,稳定,但是我们在使用过程当中,如果人为操作不当,仍然会影响系统,甚至可能使得系统无法开机,无法运行服务等等各种问题.那么这篇博文就总结一下一些常见的故障排除方法,但是不可能 ...
- js页面刷新跳转的几种方式及区别
跳转常用方法: window.location.href="index.php"; window.history.back(-1);//类似于按钮,参数是负几,就后退几次. win ...
- linux上快速搭建宝塔面板来操作便捷功能
关于宝塔 Linux版请确保纯净系统安装(支持CentOS.Ubuntu.Debian.Fedora.Deepin),Web端管理,QQ群及论坛技术支持一键LAMP/LNMP.创建网站FTP.数据库. ...
- Wcf host
Uri baseAddress = new Uri(uri);//var binding = new WebHttpBinding(WebHttpSecurityMode.None); var bas ...
- ctf writeup之程序员密码
起因 在v2ex上看到有人发了一篇帖子,说做了一个程序员小游戏,遂试玩了一下. 游戏的地址在这里: http://www.bettertomissthantomeet.com/pages/level. ...
- Node.js C/C++ 插件
插件 Addons 是动态链接的共享对象.他提供了 C/C++ 类库能力.这些API比较复杂,他包以下几个类库: V8 JavaScript, C++ 类库.用来和 JavaScript 交互,比如创 ...
- RxJava(11-线程调度Scheduler)
转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51821940 本文出自:[openXu的博客] 目录: 使用示例 subscribeOn原理 ...