综合案例--新闻详情

最新推荐文章于 2024-08-03 22:01:17 发布

小彭爱敲代码

最新推荐文章于 2024-08-03 22:01:17 发布

阅读量551

点赞数 14

分类专栏： Html5+css3 文章标签：物联网 css3 html5

本文链接：https://blog.csdn.net/2303_78660417/article/details/140320769

版权

Html5+css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.前言

如果说HTML是用来放置东西的，那么CSS则能够让这些东西变得更加的精美。简而言之，CSS就是一种样式表语言，用来描述HTML文档的呈现（即美化内容）。下面我们就来实现下这个综合案例。

二.预期效果展示

三.案例设计思路

在看了预期效果展示之后，我们来提供一个设计思路步骤如下，希望能帮助你有个更好的理解，一般遵循先整体后局部的设计思路。

四.设计原理

1.在HTML文件的body中，title标签的下方进行我们CSS代码的书写，这是我们学习中常用的一种方式。

2.要想哪个部分达到该有的效果就得选中相应的部分，来进行美化。如想要使一段落文字达到首行缩进的效果，可以这样书写代码：

p{
    text-indent:2em;
}

这样所有的段落都会进行首行缩进了，这种让使用了同种标签的文字达到同样效果的我们称为标签选择器。

3.如果有多个段落文字，只想要其中一个段落改变效果，我们可以使用类选择器，如下：

.p{
    text-indent:2em;
}

类选择器只需要在你命名的类名前面加上一个.号，然后令标签中的class属性的属性值为这个类名p即可（注意，属性值中的类名不需要加.号了）

4.字体大小的属性名为font-size，属性值为文字尺寸。

5.文本缩进属性名为text-indent，属性值数字加px或者为数字加em（1em=当前标签的字体大小）。

6.文本对齐属性名为text-align，属性值left表示左对齐（这是默认效果）；属性值center表示居中效果；属性值right表示右对齐。

7.文字颜色的属性名为color，属性值有rgb(r,g,b),rgba(r,g,b,a),#RRGGBB。

五.案例代码展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1{
      text-align: center;
      font: size 30px;
      color:#333;
    }
    div{
      font: size 14px;
      color:#999;
    }
    p{
      font: size 30px;;
      color:#333;
      text-indent: 2em;
    }
    .center{
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
  <div>来源:央视网|2222年12月12日 12:12:12</div>
  <p><strong>央视网消息:</strong>眼下,湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成,玉米收割七成。<br>
    湖北省通过大力推广新品种水稻,建设高标准农田等一系列措施,为秋粮稳产提供有力支撑。
  </p>
  <p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市,370万亩中稻已经收割四成以上。</p>
  <div class="center">
    <img src="./秋收照片.jpg" width="1000" height="500">
  </div>
  <p>王华林说的新品种,是湖北省研发的杂交水稻"华夏香丝",不仅产量高,还具有抗病,抗倒,抗高温的特性。<br>
  在荆门潭河镇的一工程示范田内,这样的抗旱品种还有20多个,这些水稻新品在荆门全面推广,确保来年增产增收。
  </p>
  <p>此外,湖北还大力推进高标准农田建设。截止今年6月,已建成39800万亩高标准农田。目前,湖北全省仍有1800多万亩中稻正在有序收割中,预计10月中旬收割完毕。</p>
</body>
</html>