设计一个首页网页的HTML和CSS代码是一种有效的方法来展示设计和基本功能。以下是一个简单的示例：

HTML部分

html

CSS部分（`styles.css`）

css

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

box-sizing: border-box;

}

header {

background-color: #333;

padding: 10px 0;

}

header nav ul {

list-style-type: none;

padding: 0;

margin: 0;

display: flex;

justify-content: center;

}

header nav ul li {

margin: 0 15px;

}

header nav ul li a {

color: #fff;

text-decoration: none;

font-weight: bold;

}

.banner {

background: url('banner.jpg') no-repeat center center/cover;

height: 50vh;

display: flex;

justify-content: center;

align-items: center;

color: #fff;

text-align: center;

}

.banner .content {

background-color: rgba(0, 0, 0, 0.5);

padding: 20px;

border-radius: 10px;

}

.banner h1 {

margin: 0;

font-size: 2.5em;

}

.banner p {

font-size: 1.2em;

}

.btn {

background-color: #ff6600;

color: #fff;

padding: 10px 20px;

text-decoration: none;

border-radius: 5px;

margin-top: 10px;

display: inline-block;

}

section {

padding: 50px 20px;

text-align: center;

}

footer {

background-color: #333;

color: #fff;

text-align: center;

padding: 10px 0;

position: fixed;

bottom: 0;

width: 100%;

}

footer p {

margin: 0;

}

说明

- HTML部分:

- 使用了`