怎么用css设置一个图片位置并有边框宽度

在网页设计中常常会用到图片放到一个想要的位置，并制定宽度高度，使得这样图片增加网页的绚丽多姿，怎么设置额。下面讲讲css使用。通过css选择器使用及宽度高度定位等知识组合。

操作方法

  • 01

    先写好html代码，把图片引入网页。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>cssstyle</title> </head> <body> <div class='div1'> <ul class="faceul"> <li><img src="mv.jpg" /></li> </ul> </div> </body> </html>

  • 02

    运行网页程序，可以看到图片显示了。现在通过css来将图片设定固定的宽度高度，并使图片有边框。

  • 03

    我们先写好css代码： .div{ width:500px; height:300px; border:1px solid red; } .faceul{ background:pink; width:300px; height:200px; border:1px solid blue; } .faceul img{ width:60px; margin:10px 20px; border:1px solid black; } .faceul li{ list-style-type:none; }

  • 04

    这时我们引入css文件，在html文件<head></head>标记对加入如下代码： <link rel="stylesheet" type="text/css" href="a.css"> 我们这里把css代码命名为a.css

  • 05

    这时会发现图片位置、边框、背景等都有了，如图：

  • 06

    至此，控制页面中图片位置及大小实现了，有需要的伙伴可以了解下。

赞 (0)

相关推荐

  • css设置背景图片大小

    网页的某些装饰可以通过背景图片来渲染,使得网页更加美观,CSS设置背景图片,不仅仅是大小,还有位置,放大方式,透明化之类.都是必备的CSS技能.层叠样式表(英文全称:Cascading Style S ...

  • css设置背景图片平铺方式

    css设置背景图片平铺方式 repeat:沿水平竖直两个方向平铺,这也是默认值 no-repeat:不平铺,即只显示一次 repeat-x:只沿水平方向平铺 repeat-y:只沿竖直方向平铺 操作方 ...

  • css设置背景图片居中；css背景图片自动居中

    如何通过css设置一张背景图片自动水平垂直居中呢?可以通过css提供的background-position: center进行设置. 设置代码: .bg-img{ height: 100vh; wi ...

  • 如何用CSS设置背景图片

    我们经常会看一些如游戏.电影.购物网上那种五颜六色的网页画面,包括导航菜单,网页主题背景,红的,黑的,(如小简头,像框等)五颜六色的都有,那么我们如何在网页中设置背景图片呢? 列:设置元素背景属性 0 ...

  • 如何用css设置一个table中的td的边框

    在网页设计过程中,怎么设置table中td的边框,设置div的边框都是一样 操作方法 01 html代码: <table> <tr> <td><input t ...

  • css设置背景不重复

    css设置背景图片,默认的样式是图片重复,有的时候页面只需要一个不重复的背景图片,这就需要使用到css背景图片重复属性 background-repeat: no-repeat;进行设置. 操作方法 ...

  • 怎么给word文档设置背景图片

    怎么给word文档设置背景图片

    我们在制作word文档的时候,有时想要美观一些,可以给word文档设置一个图片作为页面背景,今天就跟大家介绍一下怎么给word文档设置背景图片的具体操作步骤.1. 首先双击打开我们想要添加背景图片的W ...

  • Word文档中的背景如何设置为图片背景

    Word文档中的背景如何设置为图片背景

    我们在制作Word文档时,有时会想要给文档设置一个图片背景,以使我们的文档更加美观,今天就跟大家介绍一下Word文档中的背景如何设置为图片背景的具体操作步骤.1. 首先找到想要编辑的Word文档,双击 ...

  • 如何给PPT中的图片设置一个一个显示

    如何给PPT中的图片设置一个一个显示

    今天给大家介绍一下如何给PPT中的图片设置一个一个显示的具体操作步骤.1. 首先打开电脑,进入桌面,找到想要设置的PPT文档,双击打开:2. 点击上方菜单中的插入菜单,然后在打开的插入选项下,找到图片 ...