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

港控/mmm° 2021-09-28 03:00 336阅读 0赞

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

## 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>
    	
    		<div class="demo01">
    			<div class="left">
    				<img class="userPic" src="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>
    		
    	    
    		<div class="demo02">
    			<img class="userPic" src="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>
    
    	    
    		<div class="demo03">
    			<img class="userPic" src="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>

> 运行结果：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70]

--------------------

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

> **转载请标明出处，原文地址：[https://blog.csdn.net/weixin\_41835916][https_blog.csdn.net_weixin_41835916] 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。  
> ![这里写图片描述][70]**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70]: /images/20210923/f632c3644c5640a8bb67ef5b35b4395e.png
[Layout_2]: https://github.com/longjiahao666/Web/tree/master/Code1/layout
[Link 1]: https://blog.csdn.net/weixin_41835916/article/details/81879208
[Java]: https://blog.csdn.net/weixin_41835916/article/details/81413498
[https_blog.csdn.net_weixin_41835916]: https://blog.csdn.net/weixin_41835916
[70]: /images/20210923/833f9c1ec3784b698c221b6d21313dab.png