css图像效果

andrew7676

浏览: 190754 次
性别:
来自: 北京

最近访客更多访客>>

权律二

xingming_03

dongcaoheneric

dongguangming88

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2019-04 ( 38)
2019-03 ( 20)
2019-02 ( 34)
更多存档...

博客分类：

css

1. css图像效果

1) 设置图片边框

<style type="text/css">
    .i1{
        border-width: 1px;
        border-color: red;
        border-style: solid;
    }
    .i2{ border: 2px red dashed; }
    .i3{ border: 2px red dotted; }
    .i4{
        border-top: 6px red solid;
        border-right:2px blue dashed;
        border-bottom: 2px yellow dotted;
        border-left: 2px blue dashed;
    }
</style>
</head>
<body>
<h1>实线边框</h1>
<img src="../java2.jpg" class="i1"/>
<h1>虚线边框</h1>
<img src="../java2.jpg" class="i2"/>
<h1>点画线边框</h1>
<img src="../java2.jpg" class="i3"/>
<h1>给不同的边框设置样式</h1>
<img src="../java2.jpg" class="i4"/>
</body>

2) 设置图片大小及缩放

<div style="border: 1px red solid;">
    <h1>图片大小</h1>
    <img  src="../java.jpg" style="width: 160px;height: 180px;"/>
</div>
<div style="border: 1px red solid;">
    <h1>图片缩放</h1>
    <img src="../java.jpg" style="width: 20%;"/>
</div>

3) 图文混排

<style type="text/css">
    img{
        width: 150px;
        height: 180px;
        float: left;
        margin: 5px;
    }
</style>
</head>
<body>
<img src="../java.jpg">
<p>Java之父——詹姆斯·高斯林出生于加拿大，是一位计算机编程天才。在卡内基·梅隆大学攻读计算机博士学位时，他编写了多处理器版本的Unix操作系统。</p>
</body>

4) 设置图片与文字的对齐方式

<style type="text/css">
    p{ border: 1px red solid; }
</style>
</head>
<body>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: baseline;"/> 方式：<img src="../blue.jpg" style="vertical-align: baseline;"/>baseline</p>

<p>竖直对齐：<img src="../red.jpg" style="vertical-align: top;"/> 方式：<img src="../blue.jpg" style="vertical-align: top;"/>top</p>

<p>竖直对齐：<img src="../red.jpg" style="vertical-align: middle;"/> 方式：<img src="../blue.jpg" style="vertical-align: middle;"/>middle</p>

<p>竖直对齐：<img src="../red.jpg" style="vertical-align: bottom;"/> 方式：<img src="../blue.jpg" style="vertical-align: bottom;"/>bottom</p>

<p>竖直对齐：<img src="../red.jpg" style="vertical-align: text-bottom;"/> 方式：<img src="../blue.jpg" style="vertical-align: text-bottom;"/>text-bottom</p>

<p>竖直对齐：<img src="../red.jpg" style="vertical-align: text-top;"/> 方式：<img src="../blue.jpg" style="vertical-align: text-top;"/>text-top</p>

<p>竖直对齐：<img src="../red.jpg" style="vertical-align: sub;"/> 方式：<img src="../blue.jpg" style="vertical-align: sub;"/>sub</p>

<p>竖直对齐：<img src="../red.jpg" style="vertical-align: super;"/> 方式：<img src="../blue.jpg" style="vertical-align: super;"/>super</p>

<p>竖直对齐：<img src="../red.jpg" style="vertical-align: 20px;"/> 方式：<img src="../blue.jpg" style="vertical-align: 20px;"/>20px;</p>

<p>竖直对齐：<img src="../red.jpg" style="vertical-align: -20px;"/> 方式：<img src="../blue.jpg" style="vertical-align: -20px;"/>-20px;</p>

分享到：

css背景颜色、图像 | css文本样式

2019-01-04 08:48
浏览 443
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css图像效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css图像效果

评论

发表评论

相关推荐

css百分比浮动法

css固定宽度布局

css列表样式

css超链接样式

css表格样式

css盒子的浮动与定位

css盒模型

css背景颜色、图像

css文本样式

css复合选择器、继承、层叠

css网页

css选择器、导入、优先级

css简介

最近访客更多访客>>