• 【从零开始的Java开发】2-9-3 油画商城静态网页案例

    文章目录

    项目展示

    页眉区，banner区
    在这里插入图片描述
    正文区
    在这里插入图片描述
    页脚区
    在这里插入图片描述
    总体效果
    在这里插入图片描述

    页面布局相关技术
    在这里插入图片描述

    项目：

    0.准备工作

    文件夹：
    在这里插入图片描述

    html：

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>商城title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="js/js1.js">script>
head>

<body>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    image：
    在这里插入图片描述

    1.页眉区的制作

    功能介绍：
    在这里插入图片描述
    实现思路：

    1. 制作左上方的logo：注意上边距、左边距的距离
    2. 制作菜单：注意菜单的位置、间距、打开效果
    3. 右侧的用户交互区：注意右边距的位置、水平位置
    4. 页眉区的尺寸和距离，注意要和下方banner区域的大
      小、位置相应一致

    1-1.logo和menu位置的摆放

    html：

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>商城title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="js/js1.js">script>
head>

<body>
    
    <div class="header">
        
        <div class="logo">
            <img src="image/logo.png">
        div>
        
        <div class="menu">
            <div class="menu_title"><a href="">内容分类div>
            <ul>
                <li>现实主义li>
                <li>抽象主义li>
            ul>
        div>
    div>
    
    <div class="content">div>
    
    <div class="footer">div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    css：

    /*整体无间距*/
* {
    padding: 0px;
    margin: 0px;
}

/*logo离左、上的距离*/
.header {
    margin: 25px 0px 0px 50px;
}

/*子菜单不显示*/
.header .menu ul {
    display: none;
}

/*子菜单在logo右边：浮动*/
.header .logo {
    float: left;
    position: relative;
}

.header .menu {
    float: left;
    position: relative;
    /*让menu对齐*/
    margin-top: 12px;
    margin-left: 16px;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    效果：
    在这里插入图片描述

    1-2.menu功能的实现

    让鼠标浮动在菜单上时显示的css：

    /*鼠标浮动在菜单上就让ul显示*/
.header .menu:hover ul {
    display: block;
}

    • 1
    • 2
    • 3
    • 4

    让鼠标点击菜单时显示的js：

    var flag = true;

//鼠标放到菜单上时就显示
function show_menu() {
    var menu1 = document.getElementById("menu1");
    if (flag) {
        //块状显示
        menu1.style.display = "block";
        flag = false;
    } else {
        menu1.style.display = "none";
        flag = true;
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    让鼠标挪走时菜单自动关闭的js：

    //鼠标离开则菜单隐藏
function show_menu1() {
    var menu1 = document.getElementById("menu1");
    menu1.style.display = "none";
    //要改变开关按钮
    flag = true;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    html如下（主要是看事件添加在哪里）：

    
<div class="menu" onmouseleave="show_menu1()">
     
     <div class="menu_title"><a href="#" onclick="show_menu()">内容分类div>
     <ul id="menu1">
         <li>现实主义li>
         <li>抽象主义li>
     ul>
 div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    1-3.menu功能的样式

    主要是：

    • 菜单的间距
    • 菜单前的原点符号要去掉
    • 菜单的边框

    菜单前的原点符号要去掉css：

    .header .menu ul {
    display: none;
    /*1-3*/
    /*去掉列表小圆点*/
    list-style: none;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    菜单间距css：

    /*1-3*/
/*菜单间距加大*/
.header .menu ul li {
    margin-top: 20px;
}

    • 1
    • 2
    • 3
    • 4
    • 5

    菜单的边框css：

    .header .menu ul li {
    margin-top: 20px;
    /*文本居中*/
    width: 80px;
    text-align: center;
}

/*菜单边框*/
.header .menu .menu_title {
    border-bottom: 1px solid black;
    padding-bottom: 20px;
    width: 80px;
    text-align: center;
}

/*去掉超级链接的下划线*/
a {
    text-decoration: none;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    效果：
    在这里插入图片描述

    1-4.登录与注册

    有两种方法：

    • 标签里加超级链接
    • div+列表

    我们用后者。

    关于#：

    • #：不刷新页面，依然停留在当前页面
    • ###：锚点

    html：

    
<div class="auth">
     <ul>
         <li><a href="#">注册li>
         <li><a href="#">登录li>
     ul>
 div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    css：

    /*1-4*/
/*登陆与注册*/
.header .auth {
    float: right;
    /*position: relative;*/
}

/*对齐方式与去掉原点*/
.header .auth ul li {
    float: left;
    list-style: none;
    margin-right: 70px;
    margin-top: 12px;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    效果：
    在这里插入图片描述

    1-5.小结

    • 菜单的制作，要注意菜单的位置、利用js实现的弹出效
      果、菜单的外观样式。
    • 位置、对齐方式等细节设置

    小技巧：

    • 可以在设置页面区域的同时，将banner图进行设置，方便
      进行位置参照
    • div逐层设置，仔细观察样式所选择的对象以及实现的效果
    • JS菜单效果设置

    2.正文区的制作

    2-1.页眉和banner区

    html：

    
    <div class="content">
        <div class="banner">
            <img src="image/welcome.png" class="banner_img">
        div>
    div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    相关的css：

    /*子菜单不显示*/
.header .menu ul {
    display: none;
    /*1-3*/
    /*去掉列表小圆点*/
    list-style: none;

    /*单击目录后子菜单的显示：浮在图片上面*/
    position: absolute;
    width: 80px;
    background-color: white;
    /*半透明效果*/
    opacity: 0.5;
    color: black;
}

/*2-1.页眉和banner区制作*/
.content {
    width: 1200px;
    margin: 25px auto;
}

.content .banner .banner_img {
    margin-top: 30px;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    效果：
    在这里插入图片描述

    2-2.商品展示区

    一个粗略的商品展示：
    html：

    <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述p>
                        <div class="img_btn">
                            
                            <div class="price">￥5800div>
                            
                            <a href="" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                div>
                            a>
                        div>
                    div>
                li>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    显示：
    在这里插入图片描述
    加一点css：

    /*2-2.商品展示区*/
.content .img_content ul {
    width: 1280px;
}

.content .img_content ul li {
    width: 361px;
    float: left;

    /*图片之间的左右间距*/
    margin: 0px 58px 60px 0px;

    list-style: none;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    效果：
    在这里插入图片描述
    加上购物车css：

    /*购物车*/
.img_content .info .img_btn {
    width: 300px;
}

.img_content .info .img_btn .btn {
    width: 60px;
    height: 30px;
    background-color: red;
    text-align: center;
    border-radius: 5px;
    float: right;
}

.img_content .info .img_btn .cart img {
    /*background-color: white;*/
    width: 25px;
    height: 20px;
    margin-top: 5px;

}

.img_content .info .img_btn .price {
    float: left;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    效果：
    在这里插入图片描述
    再加一点细节：

    .content .img_content ul li {
    width: 361px;
    height: 500px;
    float: left;

    /*图片之间的左右间距*/
    margin: 0px 58px 60px 0px;

    list-style: none;

    /*边框与阴影*/
    margin-top: 20px;
    box-shadow: 2px 2px 5px 3px grey;
    /*谷歌浏览器兼容*/
    -webkit-box-shadow: 2px 2px 5px 3px grey;
    /*火狐浏览器兼容*/
    -moz-box-shadow: 2px 2px 5px 3px grey;

    /*背景色*/
    background-color: white;

}

.info {
    margin-left: 30px;
    margin-right: 30px;

}

/*图片标题*/
.info h3 {
    color: red;
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*段落*/
.info p {
    /*行间距*/
    line-height: 30px;
    /*下边距*/
    margin-bottom: 10px;
}

/*价格*/
.info .price {
    color: red;
    font-size: 25px;


}

body {
    background-color: #F5F5F5;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56

    效果：
    在这里插入图片描述

    2-3.分页区

    关于span和div：

    • div在默认情况下单独占一行，span在默认情况下一起占一行。
    • div里可以加span，但span里不能加div。

    html：

    <div class="page_nav">
            <ul>
                <li><a href="#">首页a>li>
                <li><a href="#">上一页a>li>
                
                <li><span class="first_page">1span>li>
                <li><a href="#">2a>li>
                <li><a href="#">3a>li>
                <li><a href="#">4a>li>
                <li><a href="#">5a>li>
                <li><a href="#">...a>li>
                <li><a href="#">98a>li>
                <li><a href="#">99a>li>
                <li><a href="#">下一页a>li>
                <li><a href="#">尾页a>li>
            ul>
        div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    css：

    /*分页区*/
.content .page_nav ul li {
    float: left;
    margin-right: 15px;
    list-style: none;
}

.content .page_nav {
    /*width: 1200px;*/
    width: 100%;
    /*跟上级的宽度一样*/
    height: 60px;
    line-height: 60px;

    /*border: 1px solid black;*/
    overflow: hidden;

}

.content .page_nav ul {
    /*水平居中*/
    margin: auto;
    overflow: hidden;
    width: 500px;
}

/*给1加圆形阴影*/
.content .page_nav .first_page {
    border-radius: 50%;
    background-color: #c5c5c5;
    padding: 3px 9px;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    效果：
    在这里插入图片描述

    2-4.小结

    重难点：

    • 两行三列排列方式
    • 商品展示区两端对齐
    • 正文区三部分布局的统一：banner区、商品展示区、分页区

    小技巧：

    • 位置：在进行页面布局时，位置和对齐十分重要
    • 什么时候添加div：有改变即添加div

    3.页脚区的制作

    html：

    
<div class="footer">
    <p><span>M-GALLARYspan>@2017 POWERED BY IMOOC.INCp>
div>

    • 1
    • 2
    • 3
    • 4

    css：

    /*页脚*/
.footer {
    width: 1200px;
    height: 100px;
    margin: 60px auto;
    /*用上边框来加线*/
    border-top: 1px solid #ccc;
    /*#ccc就是#cccccc*/
    overflow: hidden;
}

.footer p {
    text-align: center;
    line-height: 80px;
}

.footer span {
    color: deeppink;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    效果：
    在这里插入图片描述

    项目总结

    • 整体布局时，各个对象的位置、对齐方式、间距等设置要注意细节，要通过计算的方式获取相互位置的对应关系。

    • ul和li的使用频率较高，非常适合于规律性显示的页面效果。

    • overflow:hidden、height、float直接的关系：
      在这里插入图片描述

    • 水平居中：margin:xpx auto;

    • 垂直居中：将line-height和height设置成相等的大小。

    总体代码

    html

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>商城title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="js/js1.js">script>
head>

<body>
    
    <div class="header">
        
        <div class="logo">
            <img src="image/logo.png">
        div>
        
        <div class="menu" onmouseleave="show_menu1()">
            
            <div class="menu_title"><a href="#" onclick="show_menu()">内容分类div>
            <ul id="menu1">
                <li>现实主义li>
                <li>抽象主义li>
            ul>
        div>
        
        <div class="auth">
            <ul>
                <li><a href="#">注册li>
                <li><a href="#">登录li>
            ul>
        div>
    div>
    
    <div class="content">
        <div class="banner">
            <img src="image/welcome.png" class="banner_img">
        div>
        <div class="img_content">
            <ul>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述p>
                        <div class="img_btn">
                            
                            <div class="price">￥5800div>
                            
                            <a href="" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                div>
                            a>
                        div>
                    div>
                li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述p>
                        <div class="img_btn">
                            
                            <div class="price">￥5800div>
                            
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                div>
                            a>
                        div>
                    div>
                li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述p>
                        <div class="img_btn">
                            
                            <div class="price">￥5800div>
                            
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                div>
                            a>
                        div>
                    div>
                li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述p>
                        <div class="img_btn">
                            
                            <div class="price">￥5800div>
                            
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                div>
                            a>
                        div>
                    div>
                li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述p>
                        <div class="img_btn">
                            
                            <div class="price">￥5800div>
                            
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                div>
                            a>
                        div>
                    div>
                li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述p>
                        <div class="img_btn">
                            
                            <div class="price">￥5800div>
                            
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                div>
                            a>
                        div>
                    div>
                li>
            ul>
        div>
        <div class="page_nav">
            <ul>
                <li><a href="#">首页a>li>
                <li><a href="#">上一页a>li>
                
                <li><span class="first_page">1span>li>
                <li><a href="#">2a>li>
                <li><a href="#">3a>li>
                <li><a href="#">4a>li>
                <li><a href="#">5a>li>
                <li><a href="#">...a>li>
                <li><a href="#">98a>li>
                <li><a href="#">99a>li>
                <li><a href="#">下一页a>li>
                <li><a href="#">尾页a>li>
            ul>
        div>
    div>
    
    <div class="footer">
        <p><span>M-GALLARYspan>@2017 POWERED BY IMOOC.INCp>
    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170

    css

    /*1-1*/

/*整体无间距*/
* {
    padding: 0px;
    margin: 0px;
}

/*logo离左、上的距离*/
.header {
    margin: 25px auto;
    /*上下25 左右auto*/
    width: 1200px;
}

/*子菜单不显示*/
.header .menu ul {
    display: none;
    /*1-3*/
    /*去掉列表小圆点*/
    list-style: none;

    /*单击目录后子菜单的显示：浮在图片上面*/
    position: absolute;
    width: 80px;
    background-color: white;
    /*半透明效果*/
    opacity: 0.5;
    color: black;
}

/*子菜单在logo右边：浮动*/
.header .logo {
    float: left;
    position: relative;
}

.header .menu {
    float: left;
    position: relative;
    /*让menu对齐*/
    margin-top: 12px;
    margin-left: 16px;
}

/*1-2*/
/*鼠标浮动在菜单上就让ul显示*/
/*.header .menu:hover ul {
    display: block;
}*/

/*1-3*/
/*菜单间距加大*/
.header .menu ul li {
    margin-top: 20px;
    /*文本居中*/
    width: 80px;
    text-align: center;

}

/*菜单边框*/
.header .menu .menu_title {
    border-bottom: 1px solid black;
    padding-bottom: 20px;
    width: 80px;
    text-align: center;
}

/*去掉超级链接的下划线*/
a {
    text-decoration: none;
}

/*1-4*/
/*登陆与注册*/
.header .auth {
    float: right;
    /*position: relative;*/
}

/*对齐方式与去掉原点*/
.header .auth ul li {
    float: left;
    list-style: none;
    margin-right: 70px;
    margin-top: 12px;

}

/*2-1.页眉和banner区制作*/
.content {
    width: 1200px;
    margin: 25px auto;
}

.content .banner .banner_img {
    margin-top: 30px;
}

/*2-2.商品展示区*/
.content .img_content ul {
    width: 1280px;
}


.content .img_content ul li {
    width: 361px;
    height: 500px;
    float: left;

    /*图片之间的左右间距*/
    margin: 0px 58px 60px 0px;

    list-style: none;

    /*边框与阴影*/
    margin-top: 20px;
    box-shadow: 2px 2px 5px 3px grey;
    /*谷歌浏览器兼容*/
    -webkit-box-shadow: 2px 2px 5px 3px grey;
    /*火狐浏览器兼容*/
    -moz-box-shadow: 2px 2px 5px 3px grey;

    /*背景色*/
    background-color: white;

}

.info {
    margin-left: 30px;
    margin-right: 30px;

}

/*图片标题*/
.info h3 {
    color: red;
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*段落*/
.info p {
    /*行间距*/
    line-height: 30px;
    /*下边距*/
    margin-bottom: 10px;
}

/*价格*/
.info .price {
    color: red;
    font-size: 25px;


}

body {
    background-color: #F5F5F5;
}

/*购物车*/
.img_content .info .img_btn {
    width: 300px;
}

.img_content .info .img_btn .btn {
    width: 60px;
    height: 30px;
    background-color: red;
    text-align: center;
    border-radius: 5px;
    float: right;
}

.img_content .info .img_btn .cart img {
    /*background-color: white;*/
    width: 25px;
    height: 20px;
    margin-top: 5px;

}

.img_content .info .img_btn .price {
    float: left;
}


/*分页区*/
.content .page_nav ul li {
    float: left;
    margin-right: 15px;
    list-style: none;
}

.content .page_nav {
    /*width: 1200px;*/
    width: 100%;
    /*跟上级的宽度一样*/
    height: 60px;
    line-height: 60px;

    /*border: 1px solid black;*/
    overflow: hidden;

}

.content .page_nav ul {
    /*水平居中*/
    margin: auto;
    overflow: hidden;
    width: 500px;
}

/*给1加圆形阴影*/
.content .page_nav .first_page {
    border-radius: 50%;
    background-color: #c5c5c5;
    padding: 3px 9px;
}

/*页脚*/
.footer {
    width: 1200px;
    height: 100px;
    margin: 60px auto;
    /*用上边框来加线*/
    border-top: 1px solid #ccc;
    /*#ccc就是#cccccc*/
    overflow: hidden;
}

.footer p {
    text-align: center;
    line-height: 80px;
}

.footer span {
    color: deeppink;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242

    js

    var flag = true;

//鼠标放到菜单上时就显示
function show_menu() {
    var menu1 = document.getElementById("menu1");
    if (flag) {
        //块状显示
        menu1.style.display = "block";
        flag = false;
    } else {
        menu1.style.display = "none";
        flag = true;
    }
}

//鼠标离开则菜单隐藏
function show_menu1() {
    var menu1 = document.getElementById("menu1");
    menu1.style.display = "none";
    //要改变开关按钮
    flag = true;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    总体效果

    在这里插入图片描述

  • 相关阅读:
    一文看懂Filter过滤器
    Linux ARM平台开发系列讲解（Linux并发与竞争） 3.1 Linux并发与竞争概述
    深度学习知识点：循环神经网络（RNN）、长短期记忆网络（LSTM）、门控循环单元（GRU）
    运动装备有哪些？2022年值得买的运动装备分享
    java毕业生设计在线多媒体学习社区的设计与实现计算机源码+系统+mysql+调试部署+lw
    Ubuntu22.04安装Cuda11.3和Cudnn8.5的深度学习GPU环境
    江科大STM32 终
    Ansible-playbook的优化
    AT24C02存储与读取数据
    编程狂人|妙用Java 8中的 Function接口 消灭if...else...
  • 原文地址：https://blog.csdn.net/karshey/article/details/126649468