首页使用HTML、CSS来创建一个类似央视网新闻页面的前端界面(40分) 要求:央视网文字能链接到央视网(https://www.cctv.com/)，视频能够正常播放，“央视网消息”文字加粗，文字首行缩进2字符

使用HTML、CSS来创建一个类似央视网新闻页面的前端界面(40分) 要求:央视网文字能链接到央视网(https://www.cctv.com/)，视频能够正常播放，“央视网消息”文字加粗，文字首行缩进2字符

时间: 2024-12-24 12:25:21 浏览: 18

要使用HTML和CSS创建一个类似央视网新闻页面的前端界面，你可以按照以下步骤操作： **HTML部分** (约25分): ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CCTV News</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1><a href="https://www.cctv.com/" target="_blank">央视网</a> 消息</h1> </header> <main> <article> <p style="text-indent: 2em;">【此处插入新闻内容】</p> </article>  <div class="video-container"> <iframe src="https://player.videocdn.cntv.cn/video/C0001/202X/0X/XX/XXXX.mp4" frameborder="0" allowfullscreen></iframe> </div> </main> </body> </html> ``` **CSS部分** (约15分) (保存为 styles.css 文件): ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #f1f1f1; padding: 20px; text-align: center; } h1 a { color: black; text-decoration: none; } article p { line-height: 1.6; margin-bottom: 20px; } .video-container { margin-top: 20px; width: 100%; position: relative; padding-bottom: 56.25%; /* 保持16:9宽高比 */ height: 0; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ```

阅读全文