HTML——制作一个图片列表

最新推荐文章于 2022-11-06 18:18:45 发布
最新推荐文章于 2022-11-06 18:18:45 发布
阅读量1.9k 收藏 2
点赞数
原文链接：http://www.cnblogs.com/gaoquanquan/p/9143652.html
版权
本文总结了在HTML中创建图片列表时的关键步骤和常见问题。首先，需要清除默认样式以符合实际需求。其次，要关注margin-top塌陷的处理。接着，利用float:left布局并适时使用clear:both避免布局混乱。最后，别忘了考虑IE浏览器的兼容性问题。
摘要由CSDN通过智能技术生成

总结：

1）html有很多默认样式，然而实际应用中并不需要，因此要在制作样式之前清除掉默认样式。

2）注意清除margin-top塌陷

3）使用float：left后要使用clear：both清除其影响

4）注意要兼容IE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片列表布局</title>
    <style type="text/css">
        body,ul,h3{
    
            /*清除默认格式中的margin 和 padding*/
            margin:0;
            padding:0;
        }
        ul{
    
            /*清除ul默认格式中的.*/
            list-style: none;
        }
        /*清除margin-top塌陷*/
        .clearfix:before,.clearfix:after{
    
            content:"";
            display:table;
        }
        /*清除浮动*/
        .clearfix:after{
    
            clear:both;
        }
最低0.47元/天 解锁文章
子非鱼1210
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片列表样式 html,div+css图片列表布局（二）
weixin_39644139的博客
06-04 901
本文默认你已经看过了我的上一篇文章div+css图片列表布局(一)，接下来我们来实现复杂一点的图片列表布局。以下面的样式为例为了方便，我只列出display:inline-block的布局示例。和上一篇介绍的一样，第一步也是给父容器li元素定义一个宽度li {list-style: none;display: inline-block;width: 33.3%;/*三列图片排列*/text-ali...
HTML 图片列表
m0_49830850的博客
08-17 749
<%-- Created by IntelliJ IDEA. User: user Date: 2021/8/10 Time: 17:22 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> .
HTML图像及列表
weixin_30809173的博客
05-12 236
一、图像 排列图片： <!DOCTYPE html> <html> <body> <h4>Image with default alignment (align="bottom"):</h4> <p>This is some text. <img src="smiley.gif" alt="Smile...
HTML-图文列表
qq_58154602的博客
08-16 398
html模板 图片文列表,图像和文本列表（集合贴靠）模板 (HTML)
weixin_30597089的博客
06-04 333
图像和文本列表(集合贴靠)模板 (HTML)03/04/2016本文内容[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]为贴靠视图定义一项，其中包含一个图标、一个较大的粗体标题、一个较小的副标题和描述性文本。 此模板可以与具有列表布局的 ListView 结...
网页制作基础语言-HTML(1).ppt
11-20
一个HTML文档通常由以下部分组成： 1. 开头的`<!DOCTYPE>`声明，指定文档类型和版本，如`<!DOCTYPE html>`。 2. `<html>`元素是整个文档的根元素，包含其他所有元素。 3. `<head>`元素包含文档元数据，如标题、字符...
HTML+CSS购物网站——小米有品
03-23
HTML和CSS是构建网页的基本技术，本项目是一个以"小米有品"为主题的购物网站实现，涵盖了用户在在线购物过程中可能遇到的各种页面。下面将详细解释这些知识点。 首先，HTML（HyperText Markup Language）是用于创建...
html制作的备忘录html制作的备忘录
最新发布
06-27
在这个名为“html制作的备忘录”的项目中，我们可以推测这是一个用HTML构建的简单备忘录应用，可能用于个人或团队记录待办事项。 在HTML备忘录的创建过程中，主要涉及以下几个关键知识点： 1. **HTML基础结构**：...
从入门到精通HTML5——PDF——网盘链接
02-27
　1.4 编写第一个HTML文件 8 　1.4.1 HTML文件的编写方法 8 　1.4.2 手工编写页面 9 　1.4.3 使用可视化软件制作页面 10 　1.4.4 使用浏览器浏览HTML文件 14 　1.4.5 使用HTML开发的明日图书网 14 　1.5 小结 15 　...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
网页制作简易图片列表
07-08
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style> body,td,th { font-size: 14px; } ul,li { padding:0; margin:0; list-style:none; } a:hover { color:#F00; } #imglist { width:1280px; border:1px solid #b5b5b5; margin:0 auto; clear:both; height:500px; padding:22px 0 0 0; } #imglist li { float:left; text-align:center; line-height:30px; margin:0 0 0 27px; width:125px; } #imglist li span { display:block; } #imglist li { float:left; text-align:center; line-height:30px; margin:0 0 0 27px; width:125px; white-space:nowrap; overflow:hidden; display:inline; } #imglist li img { width:123px; height:123px; border:1px solid #b5b5b5; } </style> </head> <div id="imglist"> <ul> <li><a onclick="alert(1)"><img src="img/wuluzhuishaling2.jpg" border="0" /><span>五路追杀令：刺客舞会</span></a></li> <li><a onclick="alert(1)"><img src="img/congtoukiaishi.jpg" border="0" /><span>从头开始</span></a></li> <li><a onclick="alert(1)"><img src="img/wohucanglong.jpg" border="0" /><span>卧虎藏龙</span></a></li> <li><a onclick="alert(1)"><img src="img/chuzixizipizi.jpg" border="0" /><span>厨子戏子痞子</span></a></li> <li><a onclick="alert(1)"><img src="img/waixinghuanxiangqu.jpg" border="0" /><span>外星幻想曲</span></a></li> <li><a onclick="alert(1)"><img src="img/dashuaimai.jpg" border="0" /><span>大甩卖</span></a></li> <li><a onclick="alert(1)"><img src="img/yaoshu.jpg" border="0" /><span>妖术</span></a></li> <li><a onclick="alert(1)"><img src="img/xiaodingdanghexianzijiuyuan.jpg" border="0" /><span>小叮当和仙子救援大行动</span></a></li> <li><a onclick="alert(1)"><img src="img/bihu.jpg" border="0" /><span>庇护</span></a></li> </ul> </div> <body> </body> </html>
HTML图像，表格，列表
m0_55017965的博客
11-06 1045
HTML的图像，表格和列表的详细知识
HTML-图像，表格及列表
qq_55046209的博客
02-25 593
HTML图像： <img src="url" alt="some_text" width="..." height="..."> src（源属性）：url指存储图像的位置 alt：用来为图像定义一串预备的可替换的文本（当浏览器无法载入图像时，替换文本提示用户失去的图像信息） height(高度)与width（宽度）：用来设置图像的显示高度和宽度（默认单位为像素） HTML图像标签： <img> 定义图像 <map> 定义图像地图
HTML图片标签和列表标签
dream_follower的博客
07-25 2679
1.img标签 img标签用于在网页中插入图片，基本语法如下： &lt;img src="图片路径"&gt; 常用属性如下： 属性 描述 alt 指定图片的替换信息 height 定义图片的高度 width 定义图片的宽度 title 定义图片的提示信息 注意：默认情况下图片和父级元素的下边框会存在一个小空隙，解决...
html模板 图片文列表,图片列表模板
weixin_34503235的博客
06-04 566
图片列表模板1、如何编辑图片列表模板图片列表模板存放在模板包archive文件夹中，命名以list_pic为前缀在模板包中找到list_pic.html 模板，复制另存为一个新模板，命名为list_text_自定义名称.html自定义名称可以是英文或拼音，但不能用中文！2、图片列表模板结构所有列表页面模板结构基本类似，分别为页头，页中，页底三部分。页头引用全站通用页头模板{template 'he...
html图片列表布局变化,div+css图片列表布局（二）
weixin_28692867的博客
06-04 1788
本文默认你已经看过了我的上一篇文章 p+css图片列表布局(一)，接下来我们来实现复杂一点的图片列表布局。以下面的样式为例为了方便，我只列出display:inline-block的布局示例。和上一篇介绍的一样，第一步也是给父容器li元素定义一个宽度li {list-style: none;display: inline-block;width: 33.3%;/*三列图片排列*/text-alig...
尚硅谷html练习-图片的列表
weixin_58264104的博客
07-13 177
尚硅谷html练习-图片的列表
商品图片列表html,用html制作一个商品图片列表
weixin_28741707的博客
06-07 1662
图片列表*{margin: 0;padding: 0;}ul{list-style: none;}.box{width:958px;border: 1px solid #ddd;margin: 50px auto 0;overflow: hidden;}.title{width: 918px;height: 50px;border-bottom: 1px solid #ddd;margin: 0 ...
前端——html——html列表
小白龙白龙马的博客
06-12 213
HTML 支持有序、无序和定义列表: HTML无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表使用 <ul> 标签 <ul><li>Coffee</li><li>Milk</li></ul> 浏览器显示如下： Coffee Milk HTML 有序列表...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值