新闻页面中个人中心HTML代码,其中包括收藏和历史浏览功能,以及html所引用的css样式
时间: 2023-11-27 18:50:26 浏览: 19
以下是一个简单的个人中心页面的HTML代码,包括收藏和历史浏览功能。同时,还引用了一个CSS样式文件。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人中心</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到个人中心!</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">收藏</a></li>
<li><a href="#">历史浏览</a></li>
</ul>
</nav>
<section>
<h2>收藏</h2>
<ul>
<li><a href="#">新闻标题1</a></li>
<li><a href="#">新闻标题2</a></li>
<li><a href="#">新闻标题3</a></li>
</ul>
</section>
<section>
<h2>历史浏览</h2>
<ul>
<li><a href="#">新闻标题4</a></li>
<li><a href="#">新闻标题5</a></li>
<li><a href="#">新闻标题6</a></li>
</ul>
</section>
</body>
</html>
```
同时,该页面引用了一个名为 "style.css" 的CSS样式文件,可以在 `<head>` 标签中进行引用,如下所示:
```html
<link rel="stylesheet" type="text/css" href="style.css">
```
CSS样式文件可以定义页面的样式,包括颜色、字体、大小、布局等等。下面是一个简单的 "style.css" 文件示例,为整个页面设置了一些基本的样式:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #444;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #111;
}
section {
background-color: #fff;
border: 1px solid #ccc;
margin: 20px;
padding: 20px;
}
h2 {
color: #222;
}
```