一、结构与表现相分离的思想

1.1、微博用户发言信息列表制作

代码示例：

<!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" /><style type="text/css">/*reset*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma"}/*公共样式*/body{ padding-top:50px; line-height:20px}.userPic{padding:5px; border:1px #ccc solid}.demo01, .demo02{ margin-bottom:20px}p{ text-indent:2em}/*初级*/.demo01{width:600px; overflow:hidden}.demo01 .left{ width:100px; float:left}.demo01 .left .userPic{margin-left:20px}.demo01 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}.demo01 .right h6{ margin-bottom:5px}.demo01 .right .pubTime{ float:right;color:#999; margin-top:-8px}/*中级*/.demo02{width:600px; overflow:hidden}.demo02 .userPic{float:left; margin-left:20px}.demo02 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}.demo02 .right h6{ margin-bottom:5px}.demo02 .right .pubTime{ float:right;color:#999; margin-top:-8px}/*高级*/.demo03{width: 460px;padding:20px;position: relative;background-color: #EEF7FF;border: 1px solid #CCC; margin-left:100px}.demo03 h6{ margin-bottom:5px}.demo03 .dialog p{text-indent: 2em; line-height:20px}.demo03 .userPic{ float:left; margin:-20px 0 0 -100px}.demo03 .pubTime{position:absolute; top:10px; right:20px; color:#999;}</style></head><body><!---demo01-----------------------------------><div class="demo01"><div class="left"><img class="userPic" src="data:images/head01.jpg" width="50" height="50" /></div><div class="right"><span class="pubTime">10分钟前</span><h6>火影忍者</h6><p>火影忍者是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p></div></div><!---demo02----------------------------------->    <div class="demo02"><img class="userPic" src="data:images/head01.jpg" width="50" height="50" /><div class="right"><span class="pubTime">10分钟前</span><h6>火影忍者</h6><p>火影忍者是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p></div></div><!---demo03----------------------------------->    <div class="demo03"><img class="userPic" src="data:images/head02.jpg" width="50" height="50" /><h5>樱桃小丸子</h5><p>火影忍者是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p><span class="pubTime">10分钟前</span></div></body>
</html>

运行结果：

此篇博客代码下载地址：Layout教程2代码下载
博主的所有博客目录如下：博客文章目录汇总
Java面试部分的博客目录如下：Java笔试面试目录

转载请标明出处，原文地址：https://blog.csdn.net/weixin_41835916 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。

前端开发系列（十六）网页布局教程（2）相关推荐

S3C2416裸机开发系列十六_sd卡驱动实现
S3C2416裸机开发系列十六 sd卡驱动实现象棋小子 1048272975 SD卡(Secure Digital Memory Card)具有体积小.容量大.数据传输快.可插拔.安全性好等优 ...
五种网站前端开发必学的网页布局方式？
作为前端开发工程师,布局方式有多种,针对不同的情况有不一样的处理,但是很多初学的同学都不知道这些情况,那么我们今天就来说说,那些网站前端开发工程师不可不知的5种布局方式! 一.静态布局(static ...
前端开发系列（十一）CSS教程（6）
一.CSS盒模型 1.1.元素分类在讲解 CSS 布局之前,我们需要提前知道一些知识,在 CSS 中,html 的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素 ...
陈力：传智播客古代珍宝币泡泡龙游戏开发第十五讲：HTML教程笔记
陈力:传智播客古代珍宝币泡泡龙游戏开发第十五讲:HTML教程笔记摘要:通过前节<第十三讲:盒子的定位实例>学习了网站建设中的DIV+CSS中实例综合应用介绍.本节对HTML试题笔记进 ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
来自极客标签10款最新设计素材-系列十六
本周我们推荐来自极客标签社区带来的10款免费设计素材,大家可以在这里免费下载你需要的内容.如果你也有更好的作品,欢迎分享到社区中来,在得到帮助的同时,也能与更多人分享来自你的作品. 免费图标:扁平风格 ...
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
数学之美系列十六（下）－不要把所有的鸡蛋放在一个篮子里最大熵模型
数学之美系列十六 (下)- 不要把所有的鸡蛋放在一个篮子里最大熵模型我们上次谈到用最大熵模型可以将各种信息综合在一起.我们留下一个问题没有回答,就是如何构造最大熵模型.我们已经所有的最大熵模型都 ...

前端开发系列（十六）网页布局教程（2）

一、结构与表现相分离的思想

1.1、微博用户发言信息列表制作

前端开发系列（十六）网页布局教程（2）相关推荐

最新文章

热门文章

前端开发系列（十六）网页布局教程（2）

一、 结构与表现相分离的思想

1.1、微博用户发言信息列表制作

前端开发系列（十六）网页布局教程（2）相关推荐

最新文章

热门文章

一、结构与表现相分离的思想