前端学习（鲁能案例）

最新推荐文章于 2024-05-21 21:13:29 发布

zhangfei199507

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量487

点赞数 5

文章标签： css

本文链接：https://blog.csdn.net/zhangfei199507/article/details/104701339

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鲁能案例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none;
      color: #0454a7;
    }
    a:hover {
      text-decoration: underline;
    }
    .box {
      width: 638px;
      margin: 118px auto;
      border: solid 1px #BBBBBB;
      padding: 26px 48px;
      border-top: 2px solid #0454a7;
    }
    .box h2 {
      color: #000000;
      /*字体*/
      font-family: "Microsoft Yahei",微软雅黑,黑体,serif;
      /*字号*/
      font-size: 22px;
      /*字体粗细*/
      font-weight: normal;
      /*高度*/
      height: 35px;
      /*行高*/
      line-height: 35px;
      /*裁剪溢出，无滚动条*/
      overflow: hidden;
      /*文字居中*/
      text-align: center;
    }
    .artInfo {
      /*下边框样式 实线 宽度1px 颜色*/
      border-bottom: solid 1px #ccc;
      /*文字颜色*/
      color: #999;
      /*内边距 上下10 左右0*/
      padding: 10px 0;
      /*文字居中对齐*/
      text-align: center;
      /*字体大小*/
      font-size: 12px;
    }
    .artInfo a {
      color: #999;
      /*取消下划线*/
      text-decoration: none;
      /*左右外边距为10px*/
      margin: 0 10px;
    }
    .artInfo a:hover {
      text-decoration: underline;
    }
    .time {
      margin: 0 10px;
    }
    .re {
      /*！important加重字体*/
      color: #b60c0c !important;
    }
    .article {
      padding: 20px;
      font-size: 14px;
      line-height: 23px;
      color: #333;
    }
    .img-wrap {
      text-align: center;
    }
    .img-wrap span {
      line-height: 20px;
      padding: 6px 0;
      font-size: 12px;
      /*上下外边距5px 左右外边距居中*/
      margin: 5px auto;
      /*转换为行内块*/
      display: inline-block;
    }
    .article p {
      /*缩进2字符*/
      text-indent: 2em;
    }
    .ln {
      border: 1px dashed #ccc;
      padding: 10px;
      margin-top: 10px;
    }
    .ln a {
      color: #0454a7;
      text-decoration: none;
    }
    .info {
      text-align: right;
      font-size: 12px;
    }
    .keywords {
      margin: 10px 0;
    }
    .keywords span {
      font-weight: bold;
    }
    .load {
      margin: 0 20px;
      padding: 2px 0;
      border: 1px solid #0454a7;
      text-align: center;
      background-color: rgb(222,226,243);
    }
  </style>
</head>
<body>
<div class="box">
<!--  第一行-->
  <h2>鲁能热身赛16-0大胜业余队 野牛4球蒙蒂略戴帽</h2>
<!--  第二行-->
  <div class="artInfo">
    <span class="time">2015年08月08日18:19</span>
      <a href="#" class="re">新浪体育</a>微博
      <a href="#">我有话说(<span class="re">10,370</span>人参与)</a>
      <a href="#">收藏本文</a>
  </div>
  <div class="article">
<!--    第三行-->
    <div class="img-wrap">
      <img src="imges/img.jpg" height="427" width="570"/>
      <span>鲁能热身赛16-0大胜</span>
    </div>
<!--    第四行-->
    <p>北京时间8月8日消息，山东鲁能俱乐部在训练基地内与业余球队山东太阳金
      店足球俱乐部进行了一场热身赛，最终鲁能以16-0大胜对手，阿洛伊西奥上演
      大四喜，韩鹏和蒙蒂略完成帽子戏法，尤西雷梅开二度，塔尔德利、赵明剑、张
      文钊、成源均取得进球。</p>
<!--    第五行-->
    <div class="ln">
      <a href="#">鲁能泰山足球新闻</a>#鲁能泰山#鲁能热身赛16-0击败一支业余球队
      ，韩鹏和蒙蒂略帽子戏法，野牛大四喜，尤西雷梅开二度，塔尔德利、赵明剑、张文
      钊、成源取得进球。
      <div class="info">2015-08-08 17:54 来自百度浏览器
        转发(49) | 收藏 | 评论(50)</div>
    </div>
    <p>由于国足征战东亚杯比赛，中超联赛获得了两周的间歇期，山东鲁能训练备战同时，也
      邀请了一支业余球队进行热身赛。尽管王大雷、王永珀、杨旭、王彤等人随国足征战东亚杯
      ，但鲁能还是派出了现有最强阵容，以16-0大胜了对手，据悉上半场就取得了9-0的领
      先，尽管与业余球队比赛，胜负并不重要，但这样的大比分胜利也能看出鲁能全队目
      前状态不错。</p>
    <p>下周三中超第22轮就将打响，山东鲁能客场挑战北京国安，两支争冠球队的直接对话
      ，无疑是本轮最焦点之战。由于国足本周日才结束东亚杯赛事，鲁能阵中的国脚体能
      能恢复多少非常关键，而以现有的鲁能球员组成的阵容，实力也绝对不容小觑。(瑪塔)</p>
    <div class="keywords">
      <span>文章关键词：</span>
      <a href="#">中超</a>
      <a href="#">鲁能</a>
      <a href="#">阿洛伊西奥</a>
      <a href="#">蒙蒂略</a>
    </div>
    <div class="load">
      <a href="#">点击下载【新浪体育客户端】，赛事视频直播尽在掌握</a>
    </div>
  </div>
</div>
</body>
</html>

zhangfei199507

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
前端学习（鲁能案例）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鲁能案例</title> <style> * { margin: 0; padding: 0; } a {...
复制链接

扫一扫