web期末作业设计网页代码
时间: 2024-06-24 12:02:15 浏览: 235
网页设计作业,期末网站与网页设计作业源代码,HTML+CSS
当设计一个Web期末作业时,需要考虑以下几个方面:
1. 网页的页面布局:包括头部、导航栏、主体内容、侧边栏、底部等。
2. 网页的样式:包括颜色、字体、字号、行高等。
3. 网页的交互效果:包括鼠标移动、点击等效果。
4. 网页的响应式设计:在不同设备上显示相应的布局和样式。
在设计过程中,可以使用HTML、CSS、JavaScript等技术进行实现。HTML用于构建网页结构,CSS用于实现网页的样式,JavaScript用于实现网页的交互效果。
下面是一个简单的Web期末作业设计网页代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Web期末作业</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav {
background-color: #f5f5f5;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
color: #333;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #333;
}
nav ul li a:hover {
background-color: #333;
color: #fff;
}
main {
background-color: #fff;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
aside {
background-color: #f5f5f5;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 10px;
}
p {
margin-top: 0;
margin-bottom: 10px;
}
img {
max-width: 100%;
height: auto;
}
button {
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #fff;
color: #333;
}
</style>
</head>
<body>
<header>
<h1>Web期末作业</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>
<main>
<h2>产品中心</h2>
<div>
<img src="product1.jpg" alt="产品1">
<h3>产品1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non eros at nunc venenatis congue vel ac purus. Ut dignissim semper quam, ac tincidunt elit dignissim a.</p>
<button>查看详情</button>
</div>
</main>
<aside>
<h3>联系我们</h3>
<p>地址:xxx</p>
<p>电话:xxx</p>
</aside>
<footer>
<p>©2021 Web期末作业</p>
</footer>
</body>
</html>
```
阅读全文