对以上代码添加旁边的图片
时间: 2023-09-16 12:11:03 浏览: 37
好的,以下是修改后的HTML代码,添加了一张图片:
```
<!DOCTYPE html>
<html>
<head>
<title>学校主页</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #1E90FF;
color: white;
padding: 20px;
text-align: center;
}
nav {
background-color: #F5F5F5;
padding: 10px;
text-align: center;
}
nav a {
color: #1E90FF;
display: inline-block;
margin: 0 10px;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
section {
margin: 20px;
text-align: center;
}
section h2 {
color: #1E90FF;
}
section p {
line-height: 1.5;
margin: 10px 0;
}
footer {
background-color: #F5F5F5;
color: #888;
font-size: 12px;
padding: 10px;
text-align: center;
}
/* 新添加的样式 */
aside {
float: right;
margin: 20px;
}
aside img {
max-width: 100%;
}
</style>
</head>
<body>
<header>
<h1>欢迎来到学校主页</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">新闻中心</a>
<a href="#">教学科研</a>
<a href="#">校园生活</a>
<a href="#">关于我们</a>
</nav>
<aside>
<img src="https://via.placeholder.com/300x300" alt="学校图片">
</aside>
<section>
<h2>学校简介</h2>
<p>这里是学校的简介,可以介绍学校的历史、优势学科等等。</p>
<h2>新闻中心</h2>
<p>这里可以展示最新的学校新闻,包括学术活动、校园文化等等。</p>
<h2>教学科研</h2>
<p>这里可以介绍学校的教学和科研情况,包括师资力量、科研项目等等。</p>
<h2>校园生活</h2>
<p>这里可以介绍学生的校园生活,包括社团活动、校园文化建设等等。</p>
<h2>关于我们</h2>
<p>这里可以介绍学校的发展愿景、办学理念等等。</p>
</section>
<footer>
<p>版权所有 © 2021 学校名称</p>
</footer>
</body>
</html>
```
在HTML代码中,添加了一个aside标签,用于显示图片。在CSS代码中,设置了aside标签的样式,使其浮动到页面的右侧,并设置了图片的最大宽度,以避免图片过大影响页面布局。在img标签中,通过设置src属性来引入图片。你可以将图片链接替换成你自己的图片链接。