qcode
  • 创作工场专业版,一问多答!更智能、更完整、更原创
  • 这是一个超强内容创作平台,它会写文章、做设计、绘图、敲代码,有问必答!
🔥点击使用-免登录深度版🔥

"创建新闻资讯网站的HTML和CSS代码示例"

时间2023-11-03 15:31:54 提问来自 广东省清远市 的网友 分类创作 浏览413
根据您的需求,我为您提供了一个简单的HTML和CSS代码示例,用于创建一个包含您所描述的元素的网页。请注意,这里只提供了前端部分的代码,您还需要后端服务器来处理数据请求。 ```html <!DOCTYPE html> <html lang="zh"> <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; } .header { display: flex; justify-content: space-between; align-items: center; background-color: #f1f1f1; padding: 20px; } .logo { font-size: 24px; color: #333; } .search-box { display: flex; align-items: center; } .search-input { width: 300px; height: 30px; border: 1px solid #ccc; padding: 0 10px; } .main-nav { display: flex; list-style-type: none; } .main-nav li { margin-left: 20px; } .main-nav a { text-decoration: none; color: #333; } .carousel { width: 100%; height: 300px; overflow: hidden; position: relative; } .carousel img { width: 100%; height: 300px; transition: all 1s ease; } .carousel img.active { opacity: 1; } .news-list { display: flex; flex-wrap: wrap; justify-content: space-between; } .news-item { width: calc(50% - 20px); background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); margin-bottom: 20px; padding: 20px; } .news-title { font-size: 18px; margin-bottom: 10px; } </style> </head> <body> <div class="header"> <div class="logo">Logo</div> <div class="search-box"> <input type="text" class="search-input" placeholder="搜索新闻"> </div> <ul class="main-nav"> <li><a href="#">首页</a></li> <li><a href="#">国内</a></li> <li><a href="#">国际</a></li> <li><a href="#">军事</a></li> <li><a href="#">体育</a></li> <li><a href="#">娱乐</a></li> </ul> </div> <div class="carousel"> <img src="image1.jpg" alt="轮播图1" class="active"> <img src="image2.jpg" alt="轮播图2"> <img src="image3.jpg" alt="轮播图3"> </div> <h2>时事热点</h2> <ul class="news-list"> <li class="news-item">标题1<br><img src="placeholder.jpg" alt="图片"><br><time>发布时间</time><a href="#">查看更多</a></li>

不满意?免费深度重写!

免责声明:
以上内容除特别注明外均来源于网友提问,创作工场回答,未经许可,严谨转载。

上一篇 耐抓的英文 下一篇 发条橙 A Clockwork Orange影评