gpt4 book ai didi

html - 布局图像和编写 css 的最佳方式

转载 作者:太空宇宙 更新时间:2023-11-03 20:22:39 25 4
gpt4 key购买 nike

enter image description here

我是 html 和 css 的新手。现在我想知道其他专家如何使用 html 和更少的 css 来布局上面的图像。谢谢。

我的方式:首先,切片八张小图和一张白色小背景图(圆 Angular 图)。

html:

<div id="top" style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>

</div>
<div id="bottom" style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
</div>

ps: 使用这些图像作为背景图像而不是在 img 标签中有什么区别。哪个更好?为什么?

最佳答案

例如使用具有适当宽度的 ul 并将其 li float 到左侧(如果这是导航)、div 内的 div 或直接在 body 中的 div。

这应该使它更容易理解:

style.css(同目录下的CSS,否则在链接href中应该指向路径):

ul { margin: 0; padding: 0;  width: 500px; }
li { float: left; /* width: 100px - if your images are different size. */ }

HTML:

<!DOCTYPE ...>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en-US" />
<!-- ... -->
<title>My Page</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="some js file"></script>
</head>
<body>
<!-- .... -->
<ul>
<li><a href="http://target.com/target1" title="Latest News"><img alt="Latest News" src="..." /></a></li>
<li><a href="http://outer.com" title="Outer Link" target="_blank"><img alt="Latest News" src="..." /></a></li>
<!-- .. -->
</ul>
<!-- .... -->
</body>
</html>

关于html - 布局图像和编写 css 的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6703670/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com