一个小小小Demo

实现的效果如下:


图片发自简书App

代码如下:

<!DOCTYPE html>
<html>
<head> <meta charset=utf-8" />
<title>无标题文档</title>
<style>
#box-1{ width:511px;height:342px;padding:0px 22px 4px 23px;border:solid 1px #000000;}
#title-1{font-weight:bold;font-size:26px;line-height:44px;font-family: 宋体; }
#title-2{font-weight:bold;font-size:20px;line-height:54px;font-family: 宋体; }
#content-1{height:80px;border-bottom:dashed #000000 1px;font-size:14px;line-height:26px;font-family: 宋体; text-indent:2em;color:#9b9b9b;}
#content-2-1{background:url(%E7%AC%AC%E4%BA%8C%E6%AC%A1%E4%BD%9C%E4%B8%9A-2-1.gif) 0px 35px no-repeat;height:18px;text-indent:16px;padding-top:29px;font:bold 18px "宋体" ;letter-spacing:0px;color:#404646;}
#content-2-2{background:url(%E7%AC%AC%E4%BA%8C%E6%AC%A1%E4%BD%9C%E4%B8%9A-2-1.gif) 0px 25px no-repeat;height:18px;text-indent:16px;padding-top:19px;font:bold 18px "宋体" ;letter-spacing:0px;color:#404646;}
#content-2-3{background:url(%E7%AC%AC%E4%BA%8C%E6%AC%A1%E4%BD%9C%E4%B8%9A-2-1.gif) 0px 25px no-repeat;height:18px;text-indent:16px;padding-top:19px;font:bold 18px "宋体" ;letter-spacing:0px;color:#404646;}
#content-2-4{background:url(%E7%AC%AC%E4%BA%8C%E6%AC%A1%E4%BD%9C%E4%B8%9A-2-1.gif) 0px 25px no-repeat;height:18px;text-indent:16px;padding-top:19px;font:bold 18px "宋体" ;letter-spacing:0px;color:#404646;}
</style>
</head>
<body>
<div id="box-1">    
<div id="title-1"> 动态新闻</div> 
<div id="title-2">掌握一门技术的重要性              </div>    
<div id="content-1">掌握一门技术是未来生存的一块敲门砖,掌握一门技术是未来生存的一块敲门砖,掌握一门技术是未来生存的一块敲门砖<br/>    </div>  
  <div id="content-2-1">走进民企观摩学习与民企面对面</div>    
<div id="content-2-2">走进民企观摩学习与民企面对面</div>    
<div id="content-2-3">走进民企观摩学习与民企面对面</div>    
<div id="content-2-4">走进民企观摩学习与民企面对面</div>
</div>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,544评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,255评论 4 61
  • 美剧《傲骨贤妻》在经历了8年挣扎后,终于迎来了全剧终。该剧在前三季时倍受追捧,赢得了不少铁粉儿。可后面的几季随着剧...
    瑞存于渊阅读 238评论 3 3
  • 1. 学习知识的流程如下。 2. 第一,找到好书。怎么找好书?这得自己练,挑书挑多了积累经验。 3. 第二,阅读。...
    琢磨概念者阅读 211评论 0 0
  • 解释永远都是多余,理解你的人不需要,不理解你的人没必要。 通常愿意留下来跟你争吵的人,才是真正爱你的人。 付出真心...
    广哥阅读 205评论 0 0