书城首页实现之布局、’水平菜单栏、广告页轮播的实现

最新推荐文章于 2023-04-09 23:10:51 发布

泡泡果奶

最新推荐文章于 2023-04-09 23:10:51 发布

阅读量862

点赞数 3

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_52708099/article/details/126843301

版权

本文详细介绍了书城首页的实现过程，包括布局、水平菜单栏、下拉菜单、表格变色和广告页轮播等功能。通过创建资源文件夹、设置页面结构、实现顶部栏目、菜单栏和搜索框，以及轮播图的CSS和JavaScript代码，实现了一个完整的书城首页。文章还总结了图片调整、CSS样式设计和JavaScript交互效果的技巧。

摘要由CSDN通过智能技术生成

1. 书城首页的实现

功能

布局
水平菜单栏
下拉菜单
表格变色
广告页轮播

效果图

在这里插入图片描述

实现步骤

1). 创建资源文件夹

在这里插入图片描述

2). 布局的实现

实现代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="styles/Home.css"/>
    <script type="text/javascript" src="scripts/Home.js"></script>
    <title>首页</title>
</head>
<body >
<!--顶部导航-->
    <div id="div_head"></div>
<!--菜单列表-->
    <div id="div_menu"></div>
<!--搜索框-->
    <div id="div_search"></div>
<!--轮播图-->
    <div id="div_container"></div>
<!--热卖书籍推荐-->
    <div id="div_recommend"></div>
<!--网站底部-->
    <div id="div_bottom"></div>
</body>
</html>

对页面进行分层，可以分层为顶部栏目层，以及顶部的菜单层，搜索框层，轮播图层，书籍推荐层，底部标识层六层，
用标签<div></div>进行分层，
同时在<head></head>标签中，导入css文件和js文件的路径，
css文件用<link/>标签进行导入,js文件用<script>标签进行导入。

3). 书城顶部的实现

图片如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G1IuEjGO-1663080193268)(/pro-image/p1.jpg)]
实现的html代码：

<!--顶部导航-->
    <div id="div_head">
        <table id="head_table" >
            <tr>
                <td >
                    <a href="#">
                        <img src="images/logo1.jpg" id="top_img1" alt="传智书城logo"/>
                    </a>
                </td>
                <td style="text-align:right">
                        <img src="images/logo2.jpg" id="top_img2" alt="购物车logo"/>
                        <a href="#">购物车</a> |
                        <a href="#">帮助中心</a> |
                        <a href="#">我的帐户</a> |
                        <a href="resign.html">新用户注册</a>
                </td>
            </tr>
        </table>
    </div>

对应css代码：

/*顶部样式*/
#div_head {
    width: 100%;
    font-weight: bolder;
}
#head_table{
    width: 100%;
}
#head_table td {
    font-size: 16px;
}
#top_img1{
    width: 150px;
}
#top_img2{
    width: 26px;
}

整个栏目通过表格进行布局，整行有两个单元格，左侧logo单独站一个单元格，右侧购物车图片以及各种超链接占一个单元格，
左侧图标通过<img/>标签进行图片的导入，右侧导入一个购物车图片之后，使用<a></a>标签进行超链接文字的设置。
经验总结：对图片进行大小调整时，可以只限定其宽度或高度，图片会自动适应，如果强行改变图片大小可能导致图片的失真（清晰度降低）。

4). 书城菜单栏和搜索框的实现

在这里插入图片描述

实现的html代码：

<!--菜单列表-->
    <div id="div_menu">
            <ul class=

最低0.47元/天解锁文章

泡泡果奶

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫