作业3（初学CSS）
1.
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>题目1</title><style tyle="css">.p1,.p2{font-size:14px;font-weight:bold;color:blue;}.p1{font-family:'Microsoft Yahei',sans-serif;}.p2{font-family:'苹方';}</style>
</head>
<body><div class="p1">有规划的人生叫蓝图，没规划的人生叫拼图</div><div class="p2">有规划的人生叫蓝图，没规划的人生叫拼图</div>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8" /><title>题目2</title><style type="text/css">body{max-width:400px;}.p1{font-family:'微软雅黑';font-size:20px;margin-top:10px;margin-bottom:20px;text-indent:2em;}.p2{font-family:'Times New Roman';font-size:20px;text-indent:2em;text-transform:uppercase;}span{font-weight:bold;text-decoration:underline;}</style>
</head>
<body><div class="p1">很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰，事实上这种<span>“低水平的勤奋”</span>远远比懒惰可怕。</div><div class="p2">Remember: no pain, no gain！</div>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>题目3</title><style type="text/css">ol{list-style-type:none;padding:20px;border:2px dashed gray;display: inline-block;}a {text-decoration: none;color: pink;}</style>
</head>
<body><div><ol><li><a href="https://www.baidu.com" target="_blank">Top1：百度</a></li><li><a href="https://www.taobao.com" target="_blank">Top2：淘宝</a></li><li><a href="https://www.sina.com.cn" target="_blank">Top3：新浪</a></li><li><a href="https://www.163.com" target="_blank">Top4：网易</a></li><li><a href="https://www.sohu.com" target="_blank">Top5：搜狐</a></li></ol></div>
</body>
</html>
4.
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>题目4</title><style type="text/css">div {width: 100vw;height: 100vh;background-image: url("img/背景图1.png");background-repeat: no-repeat;background-size: cover;background-position: center;}</style>
</head>
<body><body style="margin: 0;"><div></div></body>
</body>
</html>
5.
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8" /><title>题目5</title><style type="text/css">a{color:red;text-decoration: none;}a:hover{color:blue;text-decoration:underline;}</style>
</head>
<body><div><a href="https://www.baidu.com" target="_blank">百度</a></div>
</body>
</html>
6.
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>题目6</title><style type="text/css">.box {/* 内容区域尺寸 */width: 140px;height: 140px;/* 内边距：上、右、下、左分别为 20px */padding: 20px;/* 边框：宽度 10px，实线，红色 */border: 10px solid red;/* 外边距：上、右、下、左分别为 30px */margin: 30px;/* 背景颜色：浅青绿色，与示例外观匹配 */background-color: aquamarine;}</style>
</head>
<body><div class="box">AAAAAAAAAA<br>AAAAAAAAAA<br>AAAAAAAAAA<br>AAAA</div>
</body>
</html>
7.
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>题目7</title><style type="text/css">/* 清除页面默认的边距和内边距 */* {margin: 0;padding: 0;}.header {width: 800px;height: 100px;background-color: skyblue;margin: 0 auto; /* 水平居中 */}/* 中间容器样式 */.container {width: 800px;margin: 10px auto;overflow: hidden;}/* 左侧区域样式 */.left {width: 595px;height: 380px;background-color: hotpink;float: left; /* 向左浮动 */}/* 右侧区域样式 */.right {width: 200px;height: 380px;background-color: hotpink;float: left; /* 向左浮动，与左侧区域在同一行 */margin-left: 5px;}/* 底部区域样式 */.footer {width: 800px;height: 100px;background-color: skyblue;margin: 0 auto;}</style>
</head>
<body><div class="header">顶部区域</div><div class="container"><div class="left">左侧粉色区域</div><div class="right">右侧粉色区域</div></div><div class="footer">底部区域</div>
</body>
</html>
8.
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓</title><style>body {font-family: "Microsoft Yahei", sans-serif;line-height: 1.6;margin: 0 auto;max-width: 800px;padding: 20px;}.logo {display: flex;align-items: center;margin-bottom: 10px;}.logo img {width: 140px;height: auto;margin-right: 8px;}.text, .time, .source {font-size: 14px;color: #666;}.source{color:#000;}.time, .source {display: inline-block; /* 把块级元素转为行内块，可同行显示 */margin-right: 10px; /* 可选：增加两个元素之间的间距 */}h1 {font-size: 24px;margin: 10px 0 15px;font-weight: bold;}.info {margin-bottom: 20px;border-top: 1px solid #e5e5e5; /* 上边线：1像素粗、浅灰色实线 */border-bottom: 1px solid #e5e5e5;/* 下边线：与上边线样式一致 */padding: 10px 0; }.video-container {display: flex;justify-content: center;margin-bottom: 20px;}video {max-width: 100%;height: auto;}p {margin-bottom: 15px;text-indent: 2em;font-size: 16px;line-height: 1.8;}a {color: #000;text-decoration: none;}a:hover {text-decoration: underline;}</style>
</head>
<body><div class="logo"><img src="D:\网页设计\图片、音频、视频\3. 图片、音频、视频\img\news_logo.png" alt="新浪图标"><div class="text">新闻中心 新浪政务 > 正文</div></div><h1>焦点访谈：我爱学习，学习使我快乐</h1><div class="info"><div class="time">2023年03月02日 21:50</div><div class="source">央视网</div></div><div class="video-container"><video controls><source src="D:\网页设计\图片、音频、视频\3. 图片、音频、视频\video\1.mp4" type="video/mp4">您的浏览器不支持HTML5视频播放，请更新浏览器版本。</video></div><p><a href="https://tv.cctv.com/" target="_blank"><strong>央视网消息</strong></a> (焦点访谈) ：我喜欢学习，学习使我快乐，好好学习，天天向上</p>
</body>
</html>