样式，表现分离--微博发言三种方式

最新推荐文章于 2021-10-29 10:47:28 发布

oHayHay

最新推荐文章于 2021-10-29 10:47:28 发布

阅读量381

点赞数

分类专栏： css 文章标签：样式-表现分离

本文链接：https://blog.csdn.net/oHayHay/article/details/51901942

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>微博用户发言</title>
    <style type="text/css">
    *{margin:0;padding: 0}
    h6{font-size: 14px}
    .demo1{width: 600px;position: relative;overflow: hidden;}
    .demo1 .left img{margin-left: 20px;}
    .left{width: 100px;float: left;}
    .right{width: 458px;padding:20px;float: right;background:#B1E6EA;border: 1px solid #1F1E1E;}
    .demo1 .right p{font-size: 12px;line-height: 25px}
    .demo1 span{position: absolute;top: 10px;right: 20px;font-size: 12px}


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

    .demo3{width: 458px;padding:20px;background:#B1E6EA;border: 1px solid #1F1E1E;margin-left: 100px;position: relative;}
    .demo3 img{float: left;margin: -20px 0 0 -100px}
    .demo3 p{font-size: 12px;line-height: 25px}
    .demo3 span{position: absolute;top: 10px;right: 20px;font-size: 12px}
    </style>
</head>
<body>
<div class="demo1">
    <div class="left">
        <img src="image/head01.jpg"></img>
    </div>
    <div class="right">
        <h6>樱桃小丸子</h6>
        <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736</p>
        <span>5分钟之前</span>
    </div>
</div>
</br>
</br>

<div class="demo2">
        <img src="image/head01.jpg"></img>
    <div class="right">
        <h6>樱桃小丸子</h6>
        <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736</p>
        <span>5分钟之前</span>
    </div>
</div>
</br>
</br>

<div class="demo3">
    <img src="image/head01.jpg">
    <h6>樱桃小丸子</h6>
    <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736</p>
    <span>5分钟之前</span>
</div>
</body>
</html>

这里写图片描述

oHayHay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
样式，表现分离--微博发言三种方式

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>微博用户发言</title> <style type="text/css"> *{margin:0;padding: 0} h6{font-size: 14px} .demo1{width: 600px;position: relat
复制链接

扫一扫

专栏目录