简单淘宝网页

Py_mengxing

于 2025-02-06 22:23:12 发布

阅读量227

点赞数 2

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/Py_mengxing/article/details/145482843

这是一个简单的模拟了淘宝首页的部分主要结构和样式的网页。

1.index.html文件构建了页面的整体结构，包括顶部导航栏、搜索栏、主导航栏、轮播图、商品推荐和底部等部分。

2.styles.css文件定义了每个部分的样式，如背景颜色、字体样式、布局等。

3.代码示例

（1）index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟淘宝首页</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <div class="top-nav">
            <ul class="left-nav">
                <li>亲，请登录</li>
                <li>免费注册</li>
            </ul>
            <ul class="right-nav">
                <li>我的淘宝</li>
                <li>购物车</li>
                <li>收藏夹</li>
                <li>已买到的宝贝</li>
                <li>已卖出的宝贝</li>
                <li>联系卖家</li>
                <li>手机版</li>
                <li>网站导航</li>
                <li>更多</li>
            </ul>
        </div>
    </header>

    <section class="search-section">
        <div class="logo">
            <img src="./images/淘宝.png" alt="淘宝logo">
        </div>
        <div class="search-bar">
            <input type="text" placeholder="搜索宝贝、店铺">
            <button>搜索</button>
        </div>
        <div class="hot-words">
            女装
            男装
            手机
            数码
            家电
        </div>
    </section>

    <nav class="main-nav">
        <ul>
            <li>首页</li>
            <li>天猫</li>
            <li>聚划算</li>
            <li>淘抢购</li>
            <li>天天特卖</li>
            <li>淘金币</li>
            <li>有好货</li>
            <li>淘宝直播</li>
            <li>阿里拍卖</li>
            <li>飞猪旅行</li>
        </ul>
    </nav>

    <section class="banner">
        <img src="./images/slide2.jpg" alt="轮播图1">
        <img src="./images/OIP-C.jpg" alt="轮播图2">
        <img src="./images/slide3.jpg" alt="轮播图3">
    </section>

    <section class="product-recommend">
        <h2>热门推荐</h2>
        <div class="product-list">
            <div class="product-item">
                <img src="./images/shoes.jpg" alt="商品1">
                <p>运动鞋</p >
                <span>价格：199元</span>
            </div>
            <div class="product-item">
                <img src="./images/trousers.jpg" alt="商品2">
                <p>休闲裤</p >
                <span>价格：299元</span>
            </div>
            <div class="product-item">
                <img src="./images/clothes.jpg" alt="商品3">
                <p>西装</p >
                <span>价格：399元</span>
            </div>
        </div>
    </section>

    <footer>
        <div class="footer-links">
            <ul>
                <li>关于淘宝</li>
                <li>合作伙伴</li>
                <li>营销中心</li>
                <li>廉正举报</li>
                <li>联系我们</li>
                <li>网站地图</li>
            </ul>
        </div>
        <div class="copyright">
            <p>© 2025 Taobao.com 版权所有</p >
        </div>
    </footer>
</body>

</html>

（2）css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.top-nav {
    background-color: #f2f2f2;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
}

.top-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.left-nav {
    float: left;
}

.right-nav {
    float: right;
}

.top-nav ul li {
    display: inline;
    margin: 0 10px;
}

.top-nav ul li a {
    color: #666;
    text-decoration: none;
}

.top-nav ul li a:hover {
    text-decoration: underline;
}

.search-section {
    text-align: center;
    padding: 20px;
}

.logo img {
    width: 200px;
}

.search-bar {
    margin-top: 20px;
}

.search-bar input {
    width: 500px;
    height: 30px;
    padding: 5px;
    border: 1px solid #ccc;
}

.search-bar button {
    height: 42px;
    width: 100px;
    background-color: #ff6700;
    color: white;
    border: none;
    cursor: pointer;
}

.hot-words a {
    color: #666;
    text-decoration: none;
    margin: 0 10px;
}

.hot-words a:hover {
    text-decoration: underline;
}

.main-nav {
    background-color: #ff6700;
    height: 40px;
    line-height: 40px;
}

.main-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.main-nav ul li {
    display: inline;
    margin: 0 20px;
}

.main-nav ul li a {
    color: white;
    text-decoration: none;
}

.main-nav ul li a:hover {
    text-decoration: underline;
}

.banner img {
    width: 500px;
    height: 200px;
}

.product-recommend {
    text-align: center;
    padding: 20px;
}

.product-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.product-item {
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
}

.product-item img {
    width: 250px;
    height: 250px;
}

.product-item p {
    margin: 10px 0;
}

.product-item span {
    color: #ff6700;
}

footer {
    background-color: #f2f2f2;
    text-align: center;
    padding: 20px;
}

.footer-links ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.footer-links ul li {
    display: inline;
    margin: 0 10px;
}

.footer-links ul li a {
    color: #666;
    text-decoration: none;
}

.footer-links ul li a:hover {
    text-decoration: underline;
}

.copyright {
    margin-top: 10px;
    color: #999;
}