模仿文章框

来源：互联网发布：s7 200编程电缆编辑：程序博客网时间：2024/05/20 18:20
要模仿的框：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!-- 参考百度新闻 --><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><style>body {margin: 0;padding: 0;}ul li, li{list-style: none;margin-right: 10px;    /* 换一个单位 */} a {text-decoration: none;}header,section {margin: 0;padding: 0;}.dh {font-size: 18px;margin-bottom: 10px;background-color: #1E90FF;}.tab1{margin-left: 10px;border-spacing: 10px 5px;}tr td {position: relative;  /* 可以这样子 */top: 5px;line-height: 44px;}tr td a{color: #D9D9D9;}.list_a a:hover {color: red;}.active {border-bottom: 2px solid #FFFFFF;position: relative;  /* 可以这样子 */top: 5px;line-height: 44px;}.article {margin-left: 10%;width: 80%;border: 1px #c3c3c3 solid;}</style></head><body><div class="dh"><div align="center">网站标题</div><table class="tab1"><tr><td class="active"><a href="1.html" style="color:#FFFFFF;">标题1</a></td><td><a href="2.html">标题2</a></td><td><a href="3.html">标题3</a></td><td><a href="4.html">标题4</a></td></tr></table></div><section class="article"><header align="center"><p><h2>2017成功设计奖范石钟捧三大奖(图文)</h2></p><p>创建于：XXX  来源于：XXXXX</p></header><section><p>10月14日，在上海世博会博物馆举行的《2017年度成功设计奖》颁奖典礼上，我校设计艺术学院研究生范石钟一举获得三项大奖：“2017年度最成功设计大奖”（最高奖），“2017年度青年设计师”（唯一获奖者），2017年度“成功设计大奖”。</p><p>创办于2006年的成功设计大赛是全球性的设计奖项，由来自八个国家和地区的设计大师联合发起。创办以来，23个国家和地区以及中国42个地区12000多名优秀设计工作者积极参与。独创SPR评审体系，评估设计对商业和社会产生的价值，每年的颁奖典礼成为了解设计最新风向，设计资源对接的年度盛事。</p><p>据了解，大赛今年开赛以来，受到国内外设计界的广泛关注，来自世界各地的优秀参赛作品比往年增加了一倍。除了一些知名品牌如飞利浦、世博会英国馆、上汽荣威、锤子手机、名爵MG、九牧、海尔、中国中车等外，众多创业品牌也参与其中并取得了优秀的成绩。</p></section><footer><p align="center">浏览量：</p></footer></section></body></html>
效果：
阅读全文
0 0