html 显示边框大小为2、宽度为200、高度为200的图像
时间: 2023-03-28 17:02:23 浏览: 63
你可以使用以下代码来显示边框大小为2、宽度为200、高度为200的图像:
<img src="your_image_url" style="border: 2px solid black; width: 200px; height: 200px;">
请将 "your_image_url" 替换为你想要显示的图像的 URL。
相关问题
1设计京东商品导购页面 C127,0.018020/ 京东商品导购 麦包包 Vinhas单肩包 优购:adidas休闲鞋 优购NB女子重古鞋 ¥128 ¥365 ¥299 优购VANS女子硫化鞋 优购:匡成经典低樱鞋 优购Belle羊皮女鞋 ¥280 ¥199 M19 具体要求如下: 整个页面由7个图层、1个标题、6个图像超链接构成。外围的图层包含6个子图层,每个子图层中包含1个图像超链接。表现设计: (1)img标记样式为宽度186px、高度205px (2)#divo(外层图层)样式宽度为720px、高度600px、边框宽度为1px、实线、边框颜色为#0099ff,边界上下为0、左右为自动、内容水平居中对齐(3)h标记样式为内容水平居中、字体大小 32px、颜色为红色 (4)定义六个子图层,统一样式,上下边界、左右边界均为10px、边框为1px、线型为双线(double)、颜色为#9999cc、向左浮动、内容水平居中显示,宽度为208px、高度225px(5)divaimg样式为边框粗细为10px,线型为groove、边框颜色为#9999cc (6)diva:hover img样式为边框相细为10px,线型为dashed边框颜色为#9999cc
以下是一个简单的京东商品导购页面的HTML代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>京东商品导购</title>
<style>
img {
width: 186px;
height: 205px;
}
#divo {
width: 720px;
height: 600px;
border: 1px solid #0099ff;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 32px;
color: red;
text-align: center;
}
.subdiv {
float: left;
width: 208px;
height: 225px;
border: 1px double #9999cc;
margin: 10px;
padding: 0;
text-align: center;
}
.divaimg {
border: 10px groove #9999cc;
}
.diva:hover img {
border: 10px dashed #9999cc;
}
</style>
</head>
<body>
<div id="divo">
<h1>京东商品导购</h1>
<div class="subdiv">
<a class="diva" href="#">
<img src="maibaobao.jpg" alt="麦包包 Vinhas单肩包">
</a>
<p>麦包包 Vinhas单肩包</p>
<p>¥128</p>
</div>
<div class="subdiv">
<a class="diva" href="#">
<img src="adidas.jpg" alt="优购:adidas休闲鞋">
</a>
<p>优购:adidas休闲鞋</p>
<p>¥365</p>
</div>
<div class="subdiv">
<a class="diva" href="#">
<img src="nb.jpg" alt="优购NB女子重古鞋">
</a>
<p>优购NB女子重古鞋</p>
<p>¥299</p>
</div>
<div class="subdiv">
<a class="diva" href="#">
<img src="vans.jpg" alt="优购VANS女子硫化鞋">
</a>
<p>优购VANS女子硫化鞋</p>
<p>¥280</p>
</div>
<div class="subdiv">
<a class="diva" href="#">
<img src="kuangcheng.jpg" alt="优购:匡成经典低樱鞋">
</a>
<p>优购:匡成经典低樱鞋</p>
<p>¥199</p>
</div>
<div class="subdiv">
<a class="diva" href="#">
<img src="belle.jpg" alt="优购Belle羊皮女鞋">
</a>
<p>优购Belle羊皮女鞋</p>
<p>M19</p>
</div>
</div>
</body>
</html>
```
在上面的代码中,我们使用了CSS样式来实现页面的布局和样式。其中,`img`标签的样式设置了宽度和高度,`#divo`标签的样式设置了宽度、高度、边框和居中对齐,`h1`标签的样式设置了字体大小、颜色和居中对齐,`.subdiv`类的样式设置了浮动、边框、外边距、内边距和居中对齐,`.divaimg`类的样式设置了图片链接的边框,`.diva:hover img`样式设置了鼠标悬停时图片链接的边框。
在页面的HTML代码中,我们使用了`<div>`标签来创建外层图层和子图层,使用`<h1>`标签创建页面标题,使用`<a>`标签创建图像超链接,使用`<img>`标签插入图片,使用`<p>`标签创建商品信息。最后,我们将页面保存为.html文件,并使用浏览器打开即可查看效果。
(3)样式说明。 #wrap:宽度900px、边界Oauto、边框红色2px实线、上边界Spx。div:文本居中对齐。#pic:宽度420px、高度300px、背景图像为e×8.jpg、不重复、位置居中、图像向左浮动、背景色为#77A。text:背景图像为ex8.jpg、向右浮动、宽度420px、高度500px、背景色为#77A、填充为10px、字体粗细为bold。 title:字体为“华文彩云”、大小为32px。#author:字号大小为12px、字体为黑体、文字右对齐、下边界为24px。p:字体为隶书、字号大小为24px、边界为2px、字符间距为0.5em、行高为1.5em、文字居中对齐。 2. 设计如图9-16所示的图文并茂的页面。设计要求: (1)插入图像为cup.jpg,图像向左浮动、边框为“1px虚线、颜色为gray”、边界为“10px10px10px0”、填充为5px。 (2)Mobile 首字母样式为“大小3em、向左浮动”。 (3)h1样式为“文字居中、白色、背景为#678”。
很抱歉,作为一个语言模型AI,我无法直接呈现页面效果,但是我可以为您提供相应的CSS样式代码,您可以将其添加到HTML页面中进行展示和测试。
HTML代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>图文并茂的页面</title>
<style>
#wrap {
width: 900px;
border: 2px solid red;
border-top: none;
overflow: auto;
}
div {
text-align: center;
}
#pic {
width: 420px;
height: 300px;
background-image: url('cup.jpg');
background-repeat: no-repeat;
background-position: center;
float: left;
background-color: #77A;
border: 1px dashed gray;
margin: 10px 10px 10px 0;
padding: 5px;
}
#text {
width: 420px;
height: 500px;
background-image: url('cup.jpg');
background-repeat: no-repeat;
background-position: right;
float: right;
background-color: #77A;
padding: 10px;
font-weight: bold;
}
.title {
font-family: "华文彩云";
font-size: 32px;
text-align: center;
color: white;
background-color: #678;
margin-top: 0;
padding: 10px;
}
#author {
font-size: 12px;
font-family: "黑体";
text-align: right;
margin-bottom: 24px;
}
p {
font-family: "隶书";
font-size: 24px;
border: 2px solid;
letter-spacing: 0.5em;
line-height: 1.5em;
text-align: center;
padding: 10px;
}
#mobile {
float: left;
font-size: 3em;
}
</style>
</head>
<body>
<div id="wrap">
<h1 class="title">图文并茂的页面</h1>
<div>
<img src="cup.jpg" alt="cup" id="pic">
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, libero eget tempus pharetra, ipsum enim sagittis lectus, nec bibendum metus augue sit amet felis. Donec elementum ante non elit ultrices, ut sodales sapien elementum. Integer luctus ultrices velit, non blandit risus dignissim vitae. Sed quis mauris velit.
</div>
</div>
<div id="author">作者:XXX</div>
<p>图文并茂的页面</p>
<div id="mobile">Mobile</div>
</div>
</body>
</html>
```
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)