补，书城首页热卖书籍推荐，网站底部源码+下拉菜单和表格变色的实现

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

6).附上热卖书籍推荐html和css代码：

html代码：

<div id="div_recommend">
    <div class="leftPage">
        <img src="images/subTop2.jpg" alt="top1"/>
        尊敬的网上节城用户：<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        为了让大家有更好的购物体验，3月25日起，当日达业务于小黑屋回炉升级!
        具体开放时间请留意公告，感谢大家的支持与理解，祝大家购物愉快!<br/>
        3月23日<br/>
        传智播客网上书域系统管理部
    </div>
    <div class="rightPage">
        <img class="rightPageTopImg" src="images/subTop1.jpg" alt="top2"/>
        <table>
            <tr>
                <td><img src="images/book1.jpg" alt="book1"></td>
                <td><img src="images/book2.jpg" alt="book2"></td>
            </tr>
        </table>
    </div>
</div>

css代码：

#div_recommend{
    height: 180px;
    width: 800px;
    margin-left: calc(50% - 400px);
}
.leftPage{
    width: 50%;
    height: 100%;
    float: left;
}
.leftPage img{
    width: 100%;
    height: 20%;
}
.rightPage{
    width: 50%;
    height: 100%;
    background-color: white;
    float: right;
}
.rightPageTopImg{
    width: 100%;
    height: 20%;
}
.rightPage table{
    margin-left: 10%;
}
.rightPage td{
    padding-left: 60px;
}

7).网站底部html和css代码：

html代码：

<div id="div_bottom">
    <table>
        <tr>
            <td >
                <img src="images/logo3.png" alt="logo3"/>
            </td>
            <td id="td2">
                <span id="span1">CONTACT US</span><br/>
                <span id="span2">COPYRIGHT 2015 &copy;BookStore All Rights RESERVED</span>
            </td>
        </tr>
    </table>
</div>

css代码：

#div_bottom{
    width: 100%;
    height: 47px;
    background-color: whitesmoke;
}
#div_bottom span{
    font-size: 15px;
}
#div_bottom #td2{
    padding-left: 50px;
}
#div_bottom #span2{
    color: gray;
}

8). 下拉菜单的实现

原来仿照文档上进行制作时，发现文档上进行下拉框对齐使用绝对布局需要通过一个个像素点微调到需要下拉的下方，感觉非常的不方便，于是在网上搜索后找到了另外一种比较方便的实现方法。
效果图如下：
在这里插入图片描述
实现的html代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>My test page</title>
    <link rel="stylesheet" href="styles/test.css"/>
</head>
<body>

<h1>下拉菜单</h1>
<div class="contain">
    <div class="dropdown">
        <button class="dropButton">下拉框1</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="dropButton">下拉框2</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="dropButton">下拉框3</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
</div>
</body>
</html>

这个通过了一个<div></div>标签将按钮和下拉的标签框选在了一起，这样可以将连个组件绑定在一块，这样就不需要再对另外的下拉标签一点点的微调了。其他的就是一些简单的布局设置了。

实现的css代码：

.dropButton {
    background-color: black;
    color: white;
    padding: 16px;
    font-size: 16px;
    width: 120px;
    border: none;
}

.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: lightgray;
    min-width: 120px;
}

.dropdown-content a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: whitesmoke
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropButton {
    background-color: gray;
}

.contain{
    background-color: black;
}

这里面很多也是简单的标签设置。
.dropdown{}的样式display: inline-block;可以另外加进来的相同组件以一行的形式排列，实现横向排列，竖向下拉的效果。
.dropdown-content的样式display: none;让下拉框隐藏。
.dropdown:hover .dropdown-content {display: block;}让鼠标移到按钮上面对下拉框显示
.dropdown-content a {}的样式display: block;让链接可以竖向排列，形成下拉框
其中需要重点提及的是position: absolute;这个位置样式，
之前认知里面以为这个样式是直接跳出所有布局独立于组件依据窗口距离进行匹配，
在进行了一点研究发现这个样式仍然是让组件在父元素的框选内，
同时这个样式可以让这个组件和其他组件进行重叠，没有组件之间的挤压，
对这个组件而言这就等同于独立于其他组件另外开辟了一个空间，进行位置的配置。
这样的操作可以可以防止下拉框触发后组件大小改变或者将下层的组件顶下去之类的事情发生，
可以说这个应该是进行下拉时下拉框必备的样式。
以我现在的认知也只能理解到这里。

9). 表格变色的实现

表格变色效果图如下：
在这里插入图片描述
当鼠标移动到某一个单元格上时，相关单元格的行将会变色。
实现html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
    <link rel="stylesheet" href="styles/table.css"/>
    <script src="scripts/table.js" type="text/javascript"></script>
</head>
<body>
    <table id="a_table" >
        <tr>
            <th>姓名</th>
            <th>门派</th>
            <th>成名绝技</th>
            <th>内功值</th>
        </tr>
        <tr>
            <td>乔峰</td>
            <td>丐帮</td>
            <td>少林长拳</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>虚竹</td>
            <td>灵鹫宫</td>
            <td>北冥神功</td>
            <td>15000</td>
        </tr>
        <tr>
            <td>扫地僧</td>
            <td>少林寺</td>
            <td>七十二绝技</td>
            <td>未知</td>
        </tr>
    </table>
<hr/>
</body>
</html>

设置了一个表格，没有什么需要讲解的。
实现css代码：

#a_table{
    width: 30%;
    margin-left: 35%;
    border-collapse: collapse;
    text-align: center;
}
#a_table td,th{
    border: 2px solid black;
}

为表格每个单元设置了一个边框，同时将表格位置和表格中的文字进行了居中。
实现的js代码：

window.onload=function(){
    //根据表格id属性获取表格
    var fruitTbl = document.getElementById("a_table");
    //获取表格中所有行
    var rows = fruitTbl.rows;
    for(var i = 1; i < rows.length ; i++){
        var tr = rows[i];
        option(tr);
    }
}

function option(tr) {
    //1.绑定鼠标悬浮和离开时背景颜色事件
    tr.onmouseover = showBGColor;
    tr.onmouseout = clearBGColor;
}

function showBGColor(){
    //event 发生的事件
    //event.srcElement 事件源
    //alert(event.srcElement);
    //alert(event.srcElement.tagName)
        var td = event.srcElement;
        //td.parentElement表示获取td父元素-->TR
        var tr = td.parentElement;
        //通过js代码设置某结点的样式,加上.style
        tr.style.backgroundColor = "navy";
        //获取tr中所有的单元格
        var tds = tr.cells;
        for(var i = 0 ; i < tds.length ; i++){
            tds[i].style.color = "white";
        }
}

//鼠标离开恢复样式
function clearBGColor(){
        var td = event.srcElement;
        //td.parentElement表示获取td父元素-->TR
        var tr = td.parentElement;
        //通过js代码设置某结点的样式,加上.style
        tr.style.backgroundColor = "white";
        //获取tr中所有的单元格
        var tds = tr.cells;
        for(var i = 0 ; i < tds.length ; i++){
            tds[i].style.color = "black";
        }
}

用window.onload在网页加载时进行组件的绑定，表格中的每一行绑定了option函数，
option函数中触发的showBGColor()和clearBGColor()函数中，
通过event.srcElement可以获得触发此时鼠标位置上的td元素，
通过td.parentElement可以获得父类元素tr，
然后通过对得到的tr元素进行背景颜色的设置，
tr.cells可以获得tr的子元素数组，
同时通过for循环遍历得到的每个元素，对其中的字体颜色进行设置。