html仿写新闻界面
时间: 2023-12-21 10:32:01 浏览: 31
以下是一个简单的HTML仿写新闻界面的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>仿写新闻界面</title>
<style>
* {
margin: 0%;
padding: 0%;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
html, body {
width: 100%;
height: 100%;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 125px;
z-index: 22;
background-color: #f1f1f1;
}
#footer {
width: 100%;
height: 340px;
background-color: #f1f1f1;
}
#content {
margin-top: 125px; padding: 20px;
}
.news {
margin-bottom: 20px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
}
.news h2 {
font-size: 18px;
margin-bottom: 10px;
}
.news p {
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<div id="header">
<!-- 这里放置头部内容 -->
</div>
<div id="content">
<div class="news">
<h2>新闻标题1</h2>
<p>新闻内容1</p>
</div>
<div class="news">
<h2>新闻标题2</h2>
<p>新闻内容2</p>
</div>
<div class="news">
<h2>新闻标题3</h2>
<p>新闻内容3</p>
</div>
</div>
<div id="footer">
<!-- 这里放置底部内容 -->
</div>
</body>
</html>
```
这个例子中,我们使用了HTML和CSS来创建一个简单的仿写新闻界面。其中,`#header`代表头部区域,`#content`代表新闻内容区域,`#footer`代表底部区域。每个新闻都被包裹在一个`<div class="news">`元素中,其中包含新闻标题和内容。你可以根据自己的需求修改样式和内容。