<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>绝对定位</title> <style type="text/css"> @charset "utf-8"; /* DIVCSS5-CSS初始化 */ body, div, ul, li,h3{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} ol, ul ,li{list-style:none} img {border: 0; vertical-align:middle} body{color:#FFF;background:#FFF; text-align:center} a{color:#000;text-decoration:none} a:hover{color:#BA2636;text-decoration:underline} /* 根据本实例 设置超链接字体与没有超链接字体演示为白色 */ #wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(http://www.divcss5.com/yanshi/2014/2014062603/images/bg.jpg) no-repeat} /* position:relative是绝对定位关键，父级设置 */ .box1{ position:absolute; width:147px; height:140px; left:198px; top:14px} .box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px} .box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px} /* position:absolute是绝对定位关键，子级设置同时lef right top bottom配合使用 */ h3.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left} /* 标题统一设置 */ ul.list{ text-align:left; width:100%; padding-top:8px} ul.list li{ width:100%; text-align:left; height:22px;overflow:hidden} /* 加了overflow:hidden防止内容过多后自动换行 隐藏超出内容 */ </style> </head> <body> <div id="wrapper"> <div class="box1"> <h3 class="title">新闻动态</h3> <ul class="list"> <li><a href="javascript:">不会程序能学会CSS吗？</a></li> <li><a href="javascript:">DIVCSS学习难吗？</a></li> <li><a href="javascript:">我要参加DIVCSS5的培训</a></li> <li><a href="javascript:">jQuery所以版本集合整理</a></li> </ul> </div> <div class="box2"> <h3 class="title">DIVCSS5栏目</h3> <ul class="list"> <li><a href="javascript:">CSS基础教程</a></li> <li><a href="javascript:">HTML基础教程</a></li> <li><a href="javascript:">CSS问题</a></li> <li><a href="javascript:">CSS制作工具</a></li> <li><a href="javascript:">DIV CSS技巧</a></li> <li><a href="javascript:">DIV+CSS+JS特效</a></li> </ul> </div> <div class="box3"> <h3 class="title">网站栏目</h3> <ul class="list"> <li><a href="javascript:">DIV CSS入门</a></li> <li><a href="javascript:">HTML入门教程</a></li> <li><a href="javascript:">CSS实例</a></li> <li><a href="javascript:">DIVCSS5首页</a></li> <li><a href="javascript:">DIV CSS模块模板</a></li> <li><a href="javascript:">DIV CSS WEB标准</a></li> </ul> </div> </div> </body> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！