CSS篇五

lewis 1年前 (2024-04-22) 阅读数 13 #技术

一、CSS字体及文本设置总结案例1. 根据所给页面完成一模一样的页面

代码示例-HTML代码部分：

<!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>新闻页面</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>北方高温明日达鼎盛，京津冀局地地表温度将超60℃</h1>           
    <div class="gray">
        2019-07-03 16:31:47 来源:<a href="http://www.weather.com.cn/index.shtml"> 中国天气网 </a> 
        <input type="text" class="search" value="请输入查询条件" />
        <button class="anniu">搜索</button>
    </div>
    <hr>
     <p>见附件</p>

    <h4>气温41.4℃！地表温度66.5℃！北京强势迎七月首个高温日</h4>
    <p>见附件</p>
    <p class="picture"> <img src="images/地面自动观测站气温.jpg" /> </p>
    <p>见附件</p>
    <p class="picture"> <img src="images/北京市温度图.jpg" /> </pclass>
    <p>见附件</p>

    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
    <p>见附件</p>
    <p>见附件</p>
    <p>见附件</p>
    <p>见附件</p>
    <p>见附件</p>

    <h4>京津冀周末迎降温 唯有济南热度不减</h4>
    <p>见附件</p>
    <p>见附件</p>
    <p class="footer">见附件</p>
</body>
</html>

代码示例-CSS代码部分：

h1 {
    text-align: center;
    font-weight: 400;
}
.gray {
    color: #888888;
    font-size: 12px;
    text-align: center;
}
.search {
    color: #666666;
    width: 170px;
}
.anniu {
    font-weight: 700;
}
body {
    /* body { font: font-style font-weight font-size/line-height font-family; } */
    font: normal 400 16px/28px "Microsoft YaHei";
}
p {
    text-indent: 2em;
}
a {
    text-decoration: none;
}
.picture {
    text-align: center;
}
.footer {
    color: #888888;
    font-size: 12px;
}