2.导航条 横向排列 内容为:首页 唐诗 地图 音乐 个人信息 下方是水平线(红色,size=7) 水平线下方是一张名为“首页图片”的图片,图片设置大小为宽占整个屏幕60%,高占屏幕60%,图片居中显示。 点击首页,链接到当前页(index.html)
时间: 2024-04-06 18:29:09 浏览: 17
HTML代码:
```
<nav>
<a href="index.html">首页</a>
<a href="#">唐诗</a>
<a href="#">地图</a>
<a href="#">音乐</a>
<a href="#">个人信息</a>
</nav>
<hr style="height: 7px; background-color: red;">
<img src="homepage.jpg" alt="首页图片" style="width: 60%; height: 60%; display: block; margin: 0 auto;">
```
CSS代码:
```
nav {
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
padding: 10px;
}
nav a {
color: #333;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
color: #f00;
}
```
解释:
1. 导航条使用`<nav>`标签,包含五个链接`<a>`。
2. 设置导航条为横向排列,使用CSS的`display: flex`属性,并设置居中对齐方式和背景颜色、内边距等样式。
3. 设置链接样式,包括颜色、文本装饰、边距等样式。
4. 水平线和图片的代码与上一个问题中的代码相同。
相关问题
编写一个网页。要求网页的头部为一个横向导航条。随后是正文的内容区,要求应有4块具体的内容组成。四个块横向排列,所有的块里的内容一致。内容分为序号1,2: 1.宿舍 2.让家人。要求序号1在序号2上方,且二者之间存在横向分割线。以分割线为边界,块内背景颜色分为白色和灰色,白色在上方,灰色在下方。 当鼠标悬停在其中一个块时,块内灰色变为黑色。
好的,以下是一个示例代码,可以实现您的要求:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
nav {
background-color: #333;
height: 50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
}
nav ul li a:hover {
background-color: #fff;
color: #333;
}
.container {
display: flex;
flex-direction: row;
width: 100%;
height: calc(100vh - 50px);
}
.container .section {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #fff;
border-right: 1px solid #ccc;
transition: background-color 0.2s;
}
.container .section:nth-child(2) {
border-left: 1px solid #ccc;
}
.container .section:hover {
background-color: #333;
color: #fff;
}
.container .section:hover h2 {
color: #fff;
}
.container .section h2 {
font-size: 24px;
margin-bottom: 20px;
transition: color 0.2s;
}
.container .section p {
font-size: 18px;
line-height: 1.5;
text-align: center;
margin-bottom: 20px;
}
.container .section button {
padding: 10px 20px;
background-color: #fff;
color: #333;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.2s;
}
.container .section button:hover {
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</nav>
<div class="container">
<div class="section">
<h2>宿舍</h2>
<p>这是宿舍的内容</p>
<button>了解更多</button>
</div>
<div class="section">
<h2>让家人</h2>
<p>这是让家人的内容</p>
<button>了解更多</button>
</div>
</div>
</body>
</html>
```
您可以根据需要对样式进行修改。在这个示例中,导航条位于页面的顶部,使用了 flexbox 布局来实现横向排列。内容区使用了 flexbox 布局,其中的块使用了相对定位来实现横向排列,并使用了伪元素来实现横向分割线。当鼠标悬停在块上时,使用了 CSS 的 hover 伪类来修改背景颜色和字体颜色。
编写一个网页。要求网页的头部为一个横向导航条。随后是正文的内容区,要求应由四个距离相等的矩形方框组成。四个方框横向排列,所有的块里的内容一致。内容分为序号1,2: 1.宿舍 2.让家人。要求序号1及其内容在序号2上方,且二者之间存在横向分割线。以分割线为边界,方框内背景颜色分为白色和灰色,白色在上方,灰色在下方。 当鼠标悬停在其中一个块时,方框内灰色变为黑色。
好的,您需要一个网页,网页应该有一个导航条和四个矩形方框。方框应该均匀分布,以相同的距离放置,每个方框应该由两个部分组成,分别是序号1和宿舍,序号2和让家人。方框的背景颜色应该分为白色和灰色,白色在上方,灰色在下方。当鼠标悬停在其中一个块时,方框内灰色变为黑色。
这是一个示例代码,您可以根据需要进行修改和扩展:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
padding: 0 20px;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 18px;
}
.content {
display: flex;
justify-content: space-between;
margin-top: 50px;
padding: 20px;
}
.box {
width: 23%;
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
transition: background-color 0.3s ease-in-out;
}
.gray {
background-color: #ccc;
}
.black {
background-color: #000;
color: #fff;
}
.split-line {
height: 1px;
background-color: #ccc;
margin: 20px 0;
}
</style>
</head>
<body>
<nav>
<h1>网页标题</h1>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</nav>
<div class="content">
<div class="box">
<h2>1.宿舍</h2>
<p>这里是宿舍的内容。</p>
</div>
<div class="box">
<h2>2.让家人</h2>
<p>这里是让家人的内容。</p>
</div>
<div class="box gray">
<div class="split-line"></div>
<h2>1.宿舍</h2>
<p>这里是宿舍的内容。</p>
</div>
<div class="box gray">
<div class="split-line"></div>
<h2>2.让家人</h2>
<p>这里是让家人的内容。</p>
</div>
</div>
<script type="text/javascript">
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
boxes[i].addEventListener('mouseover', function() {
this.classList.add('black');
});
boxes[i].addEventListener('mouseout', function() {
this.classList.remove('black');
});
}
</script>
</body>
</html>
```
这个示例代码包括一个导航条和四个方框。每个方框由两个部分组成,分别是序号1和宿舍,序号2和让家人。方框的背景颜色分为白色和灰色,白色在上方,灰色在下方。当鼠标悬停在其中一个块时,方框内灰色变为黑色。
您可以在此基础上进行进一步的修改和扩展,以满足您的具体需求。