微博用户发言信息列表

最新推荐文章于 2022-08-12 00:27:34 发布

-dzy-

最新推荐文章于 2022-08-12 00:27:34 发布

阅读量410

点赞数

分类专栏： Java Web 文章标签： html 微博 css

本文链接：https://blog.csdn.net/qq_34803572/article/details/68218223

版权

Java Web 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1.初学者的理解与定义：div层层嵌套。
2.中级者的理解与定义：去掉多余的div，进行简化。
3.高手的理解与定义： 最大化的简化html的结构，然后用css进行设置，减少html与css的契合度。

<!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>微博用户发言信息列表</title>
<style type="text/css">
.demo01{width:600px;position:relative;overflow:hidden;}
.demo01 .left{width:100px;float:left;}
.demo01 .left img {margin-left:20px;}
.demo01 .right{width:458px;padding:20px;float:right;background:#9cf;border:1px solid #ccc}
.demo01 .right p{font-size:12px;line-height:25px;}
.demo01 span {position:absolute;right:20px;top:10px;font-size:12px;}

.demo02{width:600px;position:relative;overflow:hidden;}
.demo02 img{float:left;margin-left:20px;}
.demo02 .right{width:458px;padding:20px;float:right;background:#9cf;border:1px solid #ccc}
.demo02 .right p{font-size:12px;line-height:25px;}
.demo02 span {position:absolute;right:20px;top:10px;font-size:12px;}

.demo03 {width:458px;padding:20px;background:#9cf;border:1px solid #ccc;margin-left:100px;position:relative}
.demo03 img {float:left;margin:-20px 0 0 -100px;}
.demo03 p{font-size:12px;line-height:25px;}
.demo03 span {position:absolute;right:20px;top:10px;font-size:12px;}
</style>
</head>

<body>
<div class="demo01">
		<div class="left">
			<img src="images/535ce105000118b504440337.jpg"width="44" height="33"/>
		</div>
		<div class="right">
    
		<h6>樱桃小丸子</h6>
		<p>颜色值由十六进制来表示红、绿、蓝（RGB）。
		每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。
		十六进制值的写法为#号后跟三个或六个十六进制字符。
		三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。</p>
		<span>10分钟之前</span>
		</div>
</div>
</br>
</br>
<div class="demo02">
		
			<img src="images/535ce105000118b504440337.jpg"width="44" height="33"/>
		
		<div class="right">
    
		<h6>樱桃小丸子</h6>
		<p>颜色值由十六进制来表示红、绿、蓝（RGB）。
		每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。
		十六进制值的写法为#号后跟三个或六个十六进制字符。
		三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。</p>
		<span>10分钟之前</span>
		</div>
</div>
</br>
</br>
<div class="demo03">
		
		<img src="images/535ce105000118b504440337.jpg"width="44" height="33"/>
		<h6>樱桃小丸子</h6>
		<p>颜色值由十六进制来表示红、绿、蓝（RGB）。
		每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。
		十六进制值的写法为#号后跟三个或六个十六进制字符。
		三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。</p>
		<span>10分钟之前</span>
		
</div>
</body>
</html>
效果：

-dzy-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微博用户发言信息列表

1.初学者的理解与定义：div层层嵌套。2.中级者的理解与定义：去掉多余的div，进行简化。3.高手的理解与定义：最大化的简化html的结构，然后用css进行设置，减少html与css的契合度。微博用户发言信息列表.demo01{width:600px;position:relative;overflow:hidden;}.demo01 .left{width:100px;
复制链接

扫一扫

专栏目录