1. 响应式布局：在电脑和手机上都能良好显示。
  2. 核心板块：顶部导航、横幅广告、图书分类、图书列表、页脚。
  3. 现代美观的设计：使用了柔和的配色、阴影和过渡效果。
  4. 清晰的代码结构：HTML 语义化标签和模块化的 CSS。

最终效果预览

第一步：HTML 代码 (index.html)

这是网页的骨架,定义了所有的内容和结构。

HTML加CSS制作书城网页代码
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">云端书城 - 您的线上图书馆</title>
    <link rel="stylesheet" href="styles.css">
    <!-- 引入一个图标库，这里使用 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="main-header">
        <div class="header-container">
            <div class="logo">
                <a href="#">云端书城</a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="#" class="active">首页</a></li>
                    <li><a href="#">小说</a></li>
                    <li><a href="#">科技</a></li>
                    <li><a href="#">经管</a></li>
                    <li><a href="#">少儿</a></li>
                    <li><a href="#">全部图书</a></li>
                </ul>
            </nav>
            <div class="header-actions">
                <div class="search-bar">
                    <input type="text" placeholder="搜索您想要的书籍...">
                    <button type="submit"><i class="fas fa-search"></i></button>
                </div>
                <a href="#" class="action-btn"><i class="fas fa-shopping-cart"></i> 购物车</a>
                <a href="#" class="action-btn"><i class="fas fa-user"></i> 登录</a>
            </div>
        </div>
    </header>
    <!-- 横幅广告 -->
    <section class="banner">
        <div class="banner-container">
            <h1>欢迎来到云端书城</h1>
            <p>海量好书，优惠不断，开启您的阅读之旅</p>
            <a href="#" class="cta-button">立即选购</a>
        </div>
    </section>
    <!-- 主要内容区 -->
    <main class="main-content">
        <div class="container">
            <!-- 图书分类 -->
            <section class="categories">
                <h2>热门分类</h2>
                <div class="category-list">
                    <div class="category-item">
                        <i class="fas fa-book-open"></i>
                        <span>文学小说</span>
                    </div>
                    <div class="category-item">
                        <i class="fas fa-laptop-code"></i>
                        <span>计算机与互联网</span>
                    </div>
                    <div class="category-item">
                        <i class="fas fa-chart-line"></i>
                        <span>经济管理</span>
                    </div>
                    <div class="category-item">
                        <i class="fas fa-graduation-cap"></i>
                        <span>人文社科</span>
                    </div>
                    <div class="category-item">
                        <i class="fas fa-heartbeat"></i>
                        <span>生活与健康</span>
                    </div>
                    <div class="category-item">
                        <i class="fas fa-child"></i>
                        <span>少儿读物</span>
                    </div>
                </div>
            </section>
            <!-- 新书上架 -->
            <section class="book-section">
                <div class="section-header">
                    <h2>新书上架</h2>
                    <a href="#">查看更多 <i class="fas fa-chevron-right"></i></a>
                </div>
                <div class="book-grid">
                    <!-- 图书卡片 1 -->
                    <div class="book-card">
                        <img src="https://via.placeholder.com/200x300.png?text=Book+1" alt="《人类简史》封面">
                        <div class="book-info">
                            <h3>人类简史</h3>
                            <p class="author">作者：尤瓦尔·赫拉利</p>
                            <p class="price">¥ <span class="current-price">68.00</span> <span class="old-price">88.00</span></p>
                            <button class="add-to-cart-btn">加入购物车</button>
                        </div>
                    </div>
                    <!-- 图书卡片 2 -->
                    <div class="book-card">
                        <img src="https://via.placeholder.com/200x300.png?text=Book+2" alt="《三体》封面">
                        <div class="book-info">
                            <h3>三体</h3>
                            <p class="author">作者：刘慈欣</p>
                            <p class="price">¥ <span class="current-price">45.00</span> <span class="old-price">59.00</span></p>
                            <button class="add-to-cart-btn">加入购物车</button>
                        </div>
                    </div>
                    <!-- 图书卡片 3 -->
                    <div class="book-card">
                        <img src="https://via.placeholder.com/200x300.png?text=Book+3" alt="《活着》封面">
                        <div class="book-info">
                            <h3>活着</h3>
                            <p class="author">作者：余华</p>
                            <p class="price">¥ <span class="current-price">32.00</span> <span class="old-price">42.00</span></p>
                            <button class="add-to-cart-btn">加入购物车</button>
                        </div>
                    </div>
                    <!-- 图书卡片 4 -->
                    <div class="book-card">
                        <img src="https://via.placeholder.com/200x300.png?text=Book+4" alt="《JavaScript高级程序设计》封面">
                        <div class="book-info">
                            <h3>JavaScript高级程序设计</h3>
                            <p class="author">作者：马特·弗里斯比</p>
                            <p class="price">¥ <span class="current-price">129.00</span> <span class="old-price">159.00</span></p>
                            <button class="add-to-cart-btn">加入购物车</button>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 畅销推荐 -->
            <section class="book-section">
                <div class="section-header">
                    <h2>畅销推荐</h2>
                    <a href="#">查看更多 <i class="fas fa-chevron-right"></i></a>
                </div>
                <div class="book-grid">
                    <!-- 图书卡片 5 -->
                    <div class="book-card">
                        <img src="https://via.placeholder.com/200x300.png?text=Book+5" alt="《原则》封面">
                        <div class="book-info">
                            <h3>原则</h3>
                            <p class="author">作者：瑞·达利欧</p>
                            <p class="price">¥ <span class="current-price">98.00</span> <span class="old-price">128.00</span></p>
                            <button class="add-to-cart-btn">加入购物车</button>
                        </div>
                    </div>
                    <!-- 图书卡片 6 -->
                    <div class="book-card">
                        <img src="https://via.placeholder.com/200x300.png?text=Book+6" alt="《小王子》封面">
                        <div class="book-info">
                            <h3>小王子</h3>
                            <p class="author">作者：安托万·德·圣-埃克苏佩里</p>
                            <p class="price">¥ <span class="current-price">35.00</span> <span class="old-price">45.00</span></p>
                            <button class="add-to-cart-btn">加入购物车</button>
                        </div>
                    </div>
                     <!-- 图书卡片 7 -->
                    <div class="book-card">
                        <img src="https://via.placeholder.com/200x300.png?text=Book+7" alt="《百年孤独》封面">
                        <div class="book-info">
                            <h3>百年孤独</h3>
                            <p class="author">作者：加西亚·马尔克斯</p>
                            <p class="price">¥ <span class="current-price">55.00</span> <span class="old-price">68.00</span></p>
                            <button class="add-to-cart-btn">加入购物车</button>
                        </div>
                    </div>
                    <!-- 图书卡片 8 -->
                    <div class="book-card">
                        <img src="https://via.placeholder.com/200x300.png?text=Book+8" alt="《围城》封面">
                        <div class="book-info">
                            <h3>围城</h3>
                            <p class="author">作者：钱钟书</p>
                            <p class="price">¥ <span class="current-price">42.00</span> <span class="old-price">52.00</span></p>
                            <button class="add-to-cart-btn">加入购物车</button>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
    <!-- 页脚 -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>关于我们</h4>
                    <p>云端书城致力于为读者提供最优质、最丰富的图书资源，让阅读触手可及。</p>
                </div>
                <div class="footer-section">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">退换货政策</a></li>
                        <li><a href="#">隐私政策</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>关注我们</h4>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-qq"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 云端书城. All Rights Reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

第二步：CSS 代码 (styles.css)

这是网页的样式表，负责美化网页的布局、颜色、字体等。

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #e74c3c; /* 主色调，用于按钮、链接等 */
    --secondary-color: #2c3e50; /* 次要色调，用于文字、背景等 */
    --background-color: #f4f4f4; /* 页面背景色 */
    --text-color: #333; /* 主要文字颜色 */
    --light-gray: #ecf0f1; /* 浅灰色，用于分隔线 */
    --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
    --transition-speed: 0.3s; /* 过渡动画速度 */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color var(--transition-speed);
}
a:hover {
    color: #c0392b;
}
h1, h2, h3 {
    color: var(--secondary-color);
    margin-bottom: 15px;
}
img {
    max-width: 100%;
    height: auto;
}
button {
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}
button:hover {
    transform: translateY(-2px);
}
/* --- 头部样式 --- */
.main-header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}
.logo a {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--secondary-color);
}
.main-nav ul {
    list-style: none;
    display: flex;
}
.main-nav ul li {
    margin-left: 25px;
}
.main-nav a {
    color: var(--text-color);
    font-weight: 500;
    position: relative;
}
.main-nav a.active,
.main-nav a:hover {
    color: var(--primary-color);
}
.main-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}
.search-bar {
    display: flex;
    border: 1px solid var(--light-gray);
    border-radius: 25px;
    overflow: hidden;
}
.search-bar input {
    border: none;
    padding: 8px 15px;
    outline: none;
    width: 200px;
}
.search-bar button {
    background-color: var(--primary-color);
    color: white;
    padding: 8px 12px;
    border-radius: 50%;
}
.action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 0.9rem;
}
.action-btn:hover {
    background-color: var(--primary-color);
    color: white;
}
/* --- 横幅样式 --- */
.banner {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80') no-repeat center center/cover;
    color: white;
    text-align: center;
    padding: 100px 20px;
}
.banner-container h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}
.banner-container p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}
.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: bold;
}
.cta-button:hover {
    background-color: #c0392b;
}
/* --- 主要内容样式 --- */
.main-content {
    padding: 40px 0;
}
/* --- 分类样式 --- */
.categories {
    margin-bottom: 50px;
    text-align: center;
}
.categories h2 {
    margin-bottom: 30px;
}
.category-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}
.category-item {
    background-color: #fff;
    padding: 30px 15px;
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed);
}
.category-item:hover {
    transform: translateY(-5px);
}
.category-item i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.category-item span {
    display: block;
    font-weight: 500;
}
/* --- 图书板块样式 --- */
.book-section {
    margin-bottom: 60px;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}
.section-header a {
    font-size: 0.9rem;
    color: var(--secondary-color);
}
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
}
.book-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed);
    display: flex;
    flex-direction: column;
}
.book-card:hover {
    transform: translateY(-10px);
}
.book-card img {
    height: 300px;
    object-fit: cover; /* 确保图片填充区域且不变形 */
}
.book-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.book-info h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.book-info .author {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 15px;
}
.price {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}
.old-price {
    font-size: 0.8rem;
    color: #999;
    text-decoration: line-through;
}
.add-to-cart-btn {
    margin-top: 15px;
    background-color: var(--primary-color);
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    width: 100%;
}
.add-to-cart-btn:hover {
    background-color: #c0392b;
}
/* --- 页脚样式 --- */
.main-footer {
    background-color: var(--secondary-color);
    color: #ccc;
    padding: 40px 0 20px;
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}
.footer-section h4 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.1rem;
}
.footer-section p, .footer-section ul {
    line-height: 1.8;
}
.footer-section ul {
    list-style: none;
}
.footer-section ul li a {
    color: #ccc;
}
.footer-section ul li a:hover {
    color: #fff;
}
.social-links a {
    color: #fff;
    font-size: 1.5rem;
    margin-right: 15px;
}
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #444;
    font-size: 0.9rem;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .header-container {
        flex-wrap: wrap;
        gap: 15px;
    }
    .main-nav ul {
        margin-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .header-actions {
        width: 100%;
        justify-content: center;
    }
    .search-bar input {
        width: 150px;
    }
    .banner-container h1 {
        font-size: 2rem;
    }
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 20px;
    }
}

如何使用

  1. 创建文件：在你的项目文件夹中，创建两个文件，分别命名为 index.html 和 styles.css。
  2. 复制代码：将上面提供的 HTML 代码完整地复制到 index.html 文件中。
  3. 复制代码：将上面提供的 CSS 代码完整地复制到 styles.css 文件中。
  4. 打开网页：用浏览器打开 index.html 文件,你就能看到这个书城网页了。

代码解释

  • HTML 结构:

    • 使用了 <header>, <main>, <footer>, <section>, <nav> 等语义化标签，让代码结构更清晰，也有利于 SEO。
    • class 属性用于给 CSS 提供选择器,以便应用样式。
    • <div class="container"> 是一个常用的布局容器,用于限制内容最大宽度并居中。
    • 图书列表使用了 <div class="book-grid"> 和多个 <div class="book-card"> 的网格布局,非常适合展示商品。
    • 图片使用了 https://via.placeholder.com/ 服务,你可以替换成你自己的图书封面链接。

  • CSS 样式:

    • 响应式设计：核心是使用了 display: grid; 和 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));，这会自动根据屏幕宽度调整每行的列数,非常灵活。
    • Flexbox：在导航栏、头部操作区等地方使用了 display: flex; 来轻松实现元素的水平排列、对齐和分布。
    • CSS 变量：在 root 中定义了颜色、阴影等变量,方便全局统一修改和维护。
    • 交互效果：通过 hover 伪类为链接、按钮、卡片添加了悬停效果，如改变颜色、上移等,提升了用户体验。
    • 媒体查询：@media (max-width: 768px) 是响应式设计的核心，当屏幕宽度小于 768px（如平板或手机）时，它会应用新的样式规则，如改变导航栏布局、调整图书网格的列数等。

这个例子是一个非常好的起点，你可以基于此继续扩展功能，比如添加 JavaScript 实现购物车交互、动态加载更多图书等。

HTML加CSS制作书城网页代码
（图片来源网络，侵删）
HTML加CSS制作书城网页代码
（图片来源网络，侵删）