微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

如何做出这种效果？_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:08:30
原创
1212人浏览过

初学者，需要做一种页面效果。上面一行写着用户的名字，下面一行写着用户的职位，旁边是用户的照片。我是这样写的：


 
  
  
 
 
  
 
 

   李自成
  
     如何做出这种效果？_html/css_WEB-ITnose
  

  董事长
  

事实这样能做出要求的效果，可是交上去的时候被喷了，说应该这样写：

   

  李自成

董事长
   

   

   如何做出这种效果？_html/css_WEB-ITnose
   


说我的那种写法页面读取起来会慢很多，这是什么原因呢？另外看书上说DL、DT、DD这些是所谓的解说列表，是怎样原理实现这种效果呢……书上没说，代码也看得不是太明白，烦请指教，谢谢。

Zend_API 深入_PHP_内核
Zend_API 深入_PHP_内核

”扩展PHP“说起来容易做起来难。PHP已经进化成一个日趋成熟的源码包几十兆大小的工具。要骇客如此复杂的一个系统，不得不学习和思考。构建本章内容时，我们最终选择了“在实战中学习”的方式。这不是最科学也不是最专业的方式，但是此方式最有趣，也得出了最好的最终结果。下面的部分，你将先快速的学习到，如何获得最基本的扩展，且这些扩展立即就可运行。然后你将学习到 Zend 的高级 API 功能，这种方式将不得

Zend_API 深入_PHP_内核 392
查看详情 Zend_API 深入_PHP_内核

回复讨论(解决方案)

是的，少用Table，多用div或UL，dl之类的元素来代替table。据说table的性能不太好。

以前大都是表格布局，现在一般不会用表格布局，表格解析慢。

是的，少用Table，多用div或UL，dl之类的元素来代替table。据说table的性能不太好。
表格上能理解到代码怎么写……可是DL理解不了代码上怎么实现这个……就是不懂用DL怎么实现(上面的DL代码是是别人给的）……

以前大都是表格布局，现在一般不会用表格布局，表格解析慢。
表格上能理解到代码怎么写……可是DL理解不了代码上怎么实现这个……就是不懂用DL怎么实现(上面的DL代码是是别人给的）……

div+css吧 

表格都不常用，加载起来太慢！

之所以不用表格布局是因为表格布局比div的嵌套层多的多，浏览器解析速度慢。dl，dd，dt是要结合css来呈现效果的

只要布局思路合理 适当的表格也有比用块元素好的多的
对于初学者来说

表格的使用是个基础  不会用表格怎么理解块元素布局  

在某些复杂的列表式的元素 你那div或者其他的元素能写死你  
不要说什么单一用什么快的话  
那点家在速度对于现在的电脑和ie来说不很简单

关键在于整体布局，综合考虑

貌似浏览器在解析table时是把整个table全解析后才呈现出来，不像div，解析了多少就出来了多少内容

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：IE6弹出窗口中移动窗口滚动条时里面的下拉框出现混乱了，急救_html/css_WEB-ITnose 下一篇：用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML5Canvas动画怎么做_HTML5Canvas实现动画效果的技巧与代码示例 答案：HTML5Canvas通过JavaScript实现流畅动画，核心技巧包括使用requestAnimationFrame创建动画循环、边界检测实现小球弹跳、数组管理多个动画对象、利用时间差优化动画速度。示例代码展示了从基础移动到复杂粒子系统的实现方法，结合清屏、状态更新与绘制流程，可构建游戏、数据可视化等动态效果。
2025-11-23 02:37:32
951
HTML语义化footer怎么优化_HTML页脚footer标签的语义化使用与优化 footer标签具有明确语义化意义，用于定义页面或内容区块的页脚信息。它可包含作者、版权、联系方式、相关链接等元信息，并支持嵌套在article、section等元素内。正确使用footer能提升网页结构清晰度、增强SEO效果及辅助设备访问体验。应根据层级合理划分页面级与组件级footer，避免内容堆叠。通过nav包裹导航链接、添加ARIA或Schema.org标记优化可访问性与搜索引擎识别。响应式设计中建议采用垂直布局、控制信息量、提升可读性，确保移动端良好体验。合理使用footer是提升语义
2025-11-22 23:53:12
287
HTML文本透明度怎么调整_HTML文本透明度如何设置实现半透明效果 调整HTML文本透明度主要通过CSS实现，常用方法包括：1.使用opacity属性设置元素整体透明度，取值0到1，影响文本及容器所有内容；2.采用RGBA颜色值仅调整文字颜色透明度，如color:rgba(0,0,0,0.5)，避免影响背景；3.可选HSLA模式设置颜色透明度，适合偏好色相定义的开发者；4.将样式定义为CSS类便于复用。优先使用RGBA控制文字透明度，需整体透明时选用opacity。
2025-11-22 23:53:02
345
HTML表单怎么创建_HTML表单form标签的基本用法与创建步骤详解 答案：HTML表单通过form标签定义结构，使用action和method属性指定提交地址与方式，内部添加input、textarea等控件收集数据，配合label提升可访问性，设置name属性供后台识别，结合required等属性实现基本验证，最终构成功能完整的用户输入界面。
2025-11-22 23:50:02
660
HTML5新特性安全怎么考虑_HTML5新特性使用中的安全问题与防范措施 答案是HTML5带来安全挑战需重视输入验证、本地存储加密、CSP策略及跨域通信控制，防范XSS、数据泄露与点击劫持。
2025-11-22 23:50:02
736
HTML表单数据怎么导出保存_HTML表单数据导出为文件或保存的实现方法 答案：HTML表单数据需结合JavaScript或后端实现保存。前端可用JavaScript将数据导出为JSON或CSV文件，或通过localStorage暂存；后端可通过PHP、Node.js等接收数据并存储到数据库或文件系统，适合持久化管理。
2025-11-22 23:49:26
760
HTML单选按钮怎么用_HTML单选按钮radio的实现方法与分组技巧 正确使用HTML单选按钮需设置相同name属性实现单选分组，配合label提升可访问性，并通过value提交数据，如性别选择；每组应包含至少一个默认选中项，使用fieldset和legend增强语义结构，同时可通过CSS隐藏原生样式并自定义外观，结合JavaScript监听变化事件以优化交互体验。
2025-11-22 23:48:06
226
HTML表单打印怎么设置_HTML表单内容打印样式设置与打印功能实现 首先通过CSS媒体查询隐藏非打印元素并设置打印区域，接着使用@page定义页边距、避免分页截断，再通过JavaScript触发window.print()实现打印，同时可动态调整需显示的内容，确保表单在不同设备上打印时布局清晰、内容完整。
2025-11-22 23:46:02
737
HTML表单数据怎么序列化_HTML表单数据序列化为字符串的方法与用途 使用URLSearchParams可将表单数据序列化为标准查询字符串，如newURLSearchParams(newFormData(form)).toString()生成"username=alice&age=25&token=abc123"，自动编码特殊字符，推荐用于现代浏览器环境。
2025-11-22 23:43:02
342
HTML5WebRTC怎么用_HTML5WebRTC实现视频通话的原理与代码示例 WebRTC通过getUserMedia获取音视频流，RTCPeerConnection建立P2P连接，RTCDataChannel传输数据，借助信令服务器交换SDP和ICE候选实现浏览器间实时通信。
2025-11-22 23:42:06
207
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部