自己测试网页用的哈哈1 23.21KB

shuaikang9864

资源文件列表:

归档.zip 大约有4个文件

testhtml.html 10.69KB
__MACOSX/._testhtml.html 219B
Teslalogo.png 22.89KB
__MACOSX/._Teslalogo.png 573B

资源介绍:

自己测试网页用的哈哈1

<!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: Arial, sans-serif; margin: 0; padding: 0; text-align: center; } /* 限制页面整体宽度，居中对齐 */ .container { max-width: 800px; margin: 0 auto; padding: 10px; } .header { background-color: #f0f0f0; padding: 20px; border-radius: 5px; /* 添加圆角 */ } .header-content { display: flex; align-items: flex-start; } .header img{ width: 80px; height: auto; margin-right: 20px; } .header-content2 { display: flex; width: 100%; justify-content: space-between; } .header h1 { position: relative; height: 100px; /* 设置一个高度，根据需要调整 */ margin: 0; font-size: 24px; } .header h1 .cont{ position: absolute; top: 50%; transform: translateY(-50%); left: 10px; /* 或者你需要的左边距 */ /* 如果你也想水平居中对齐 */ width: 85%; } .header h1 .cont_{ position: absolute; top: 50%; transform: translateY(-50%); left: 10px; /* 或者你需要的左边距 */ /* 如果你也想水平居中对齐 */ width: 100%; } .header .date { margin-top: 10px; color: #999; font-size: 14px; } .header .data_ { float: left; color: #999; } .header .editor { float: right; color: #999; } /* 灰色框排版 */ .preview { background-color: #f5f5f5; padding: 20px; border-radius: 5px; /* 添加圆角 */ } .preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .preview-header h1 { font-size: 24px; margin: 0; } .preview-header .date-info { font-size: 14px; color: #999; } .preview-content { display: flex; align-items: flex-start; } .preview-content img { margin-top: 30px; width: 200px; height: auto; margin-right: 20px; } /* 导航栏两列布局，分别放置奇数和偶数项目 */ .titles { display: flex; width: 100%; justify-content: space-between; } .col { display: flex; flex-direction: column; width: 48%; } /* 栏目项样式 */ .titles a { color: black; text-decoration: none; padding: 10px; margin-bottom: 10px; border-left: 2px solid #fff; transition: all 0.3s ease; text-align: left; /* 文字左对齐 */ } .titles a:hover { background-color: #ddd; border-left: 2px solid red; } .titles a .number { color: red; font-weight: bold; margin-right: 10px; } .content { padding: 20px; text-align: left; } .content h2 { font-size: 20px; margin-top: 40px; color: red; } .content h2 .color-blue { color: black; } .content p { font-size: 16px; line-height: 1.6; color: #333; } .content img { margin-top: 10px; width: 750px; height: auto; margin-bottom: 10px; } /* 适应手机屏幕宽度，调整排版 */ @media (max-width: 600px) { .preview-content { flex-direction: column; align-items: center; } .preview-content img { margin-bottom: 20px; } /* 手机端每列占满一行 */ .titles { flex-direction: column; } .col { width: 100%; } .content { padding: 10px; } } </style> </head> <body>  <div class="container">  <div class="header"> <h1><span class="cont"><img src="Teslalogo.png"></span><span class="cont_">数报</span></h1> <div class="date"> <span class="data_">二〇二四年九月二十三日 · 星期日</span> <span class="editor">团队</span> </div> </div>  <div class="preview"> <div class="preview-content">  <img src="https://cjh2.autoimg.cn/chejiahaodfs/g31/M04/3F/B9/1000x0_q100_autohomecar__ChtlyGZW2eeAQre-ABUDjaziPyg971.png?x_image_process=text/5Lit5Y2a6K-06L2m/fontSize/13" alt="汽车图片">  <div class="titles">  <div class="col"> <a href="#news1"> <span class="number">01</span> 乐道正式发布 L60 电动 SUV </a> <a href="#news3"> <span class="number">03</span> Mozilla 去中心化社交平台即将关闭 </a> <a href="#news5"> <span class="number">05</span> 造机器人可以这么简单！地瓜机器人旭日5芯片、RDK全套开发利器发布 </a> </div>  <div class="col"> <a href="#news2"> <span class="number">02</span> 铁威马推出 F8 SSD 系列 NAS </a> <a href="#news4"> <span class="number">04</span> 工信部征集车载无线广播接收系统标准意见 </a> <a href="#news6"> <span class="number">06</span> 优必选发工业场景解决方案,技术要点一文揭秘 </a> </div> </div> </div> </div>  <div class="content"> <h2 id="news1">01 <span class="color-blue">乐道正式发布 L60 电动 SUV</span></h2> <p>9 月 19 日，蔚来子品牌乐道的首款车型</p>——<p>乐道 L60 正式上市。乐道 L60 定位家庭智能电动 SUV</p>，标准续航为 60kWh，售价 20.69 万元；长续航版本 85kWh，售价 23.59 万元。</p> <h2 id="news2">02 <span class="color-blue">铁威马推出 F8 SSD 系列 NAS</span></h2> <p>铁威马近日发布了 F8 系列 SSD NAS，该产品专为高效能存储需求设计，支持多种 RAID 模式，满足个人和企业用户的需求。</p> <h2 id="news3">03 <span class="color-blue">Mozilla 去中心化社交平台即将关闭</span></h2>

标题	大小	时间
traceroute rpm 离线安装包(x86-64 和 arrch64)	96.95KB	7月前

1_3_231164288张成伟.zip	7.62KB	7月前
影刀RPA-社区版创业版-应用一键迁移部署工具	6.89MB	7月前
中文版VC++6.0.zip	30.34MB	7月前
Bloodshed_Dev_C_5.11.0.0.zip	48.1MB	7月前

LArea的js与css	74.72KB	7月前
k8s文档解压即可使用	2.51MB	7月前
INA226软件IIC驱动.zip	2.34KB	7月前