web开发源代码案例4-css应用

原创2022-07-21 22:07·小猴web开发

本次案例使用了css多个属性

font-family 设置字体

font-size 字号大小

font-weight 字体粗细

font-style 字体样式

font 复合属性写法

color 文本颜色

text-align 文本对齐

text-decoration 文本装饰

text-indent 文本缩进

line-height 行间距

外部样式表方式

如果还在学习web开发的你，可以一起来学习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>web开发源代码案例4-css应用</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    body {
      font: 16px/28px 'Microsoft YaHei';
    }
    h1 {
      font-weight: 400;
      text-align: center;
    }
    a {
      text-decoration: none;
    }
    p {
    text-indent: 2em;
    }
  </style>
</head>
<body>
  <h1>励志的话</h1>
  <div class="gray">2019-07-03 16:31:47 来源: <a href="#">我</a>    
    <input type="text" value="请输入查询条件..." class="search"> <button class="btn">搜索</button>
  </div>
  <hr>
  <p>1. 另一种是漠视一切的意义，包括青春的意义，因为那就是青春的本质。——陈绮贞　　2. 青春不是人生的一段时期，而是心灵的一种状况。——塞涅卡　　3. 世界上是先有爱情，才有表达爱情的语言的，在爱情刚到世界上来的青春时期中，它学会了一套方法，往后可始终没有忘掉过。——杰克·伦敦</p>

  <h4>励志的话</h4>
  <p class="pic">
    <img src="images/猴犀利LOGO.jpg" alt="地图" >
  </p>
  <p>青春像只唱着歌的鸟儿，已从残冬窗里闯出来，驶放宝蓝的穹窿里去了。——闻一多</p>
  <p>一个人只要他有纯洁的心灵，无愁无恨，他的青春时期，定可因此而延长。——司汤达</p>
  <p>白首壮心驯大海，青春浩气走千山。——林伯渠</p>
  <p>人生最大的感叹是：年轻的激情是从未实现;年老的追忆是从没发生。勇气是青年人漂亮的装饰。假若人生下来就是中年，然后再渐渐年轻起来，那样，他就会珍惜一切时光，决不会再无谓的事情上消耗自己。风华正茂夜晚给老年人带来平静，给青年人带来希望。——萧伯纳</p>
  <p>一个人年轻的时候年轻，固然有福，可是把自己的青春保持到进入坟墓为止，那就更加百倍地有福。——契诃夫</p>

  <p class="footer">本文来源：网络</p>
</body>
</html>

css代码块

.gray {
    color: #888;
    font-size: 12px;
    text-align: center;
  }
  .search {
    color: #666;
    width: 170px;
  }
  .btn {
    font-weight: 700;
  }

  .pic {
    text-align: center;
  }
  .footer {
    color: #888;
    font-size: 12px;
  }

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

web开发源代码案例4-css应用（web前端开发源代码）

web开发源代码案例4-css应用