html,css,js学习笔记（第七天）

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量161 收藏
点赞数
文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shortcutsuccess/article/details/126116402
版权

01表格.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <template>
        <el-table :data="tableData" style="width: 100%">
            <!--prop=properties属性-->
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
    </template>
    <h1>自定义表格</h1>
    <template>
        <el-table :data="arr" style="width: 100%">
            <!--prop=properties属性-->
            <el-table-column
                    type="index"
                    label="序号"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="salary"
                    label="工资"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="job"
                    label="工作">
            </el-table-column>
            <!--*****************************-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!--scope变量中包含这一行的相关信息(这一行的下标,这一行对应的数组中的对象)
                    scope.$index  这一行的下标
                    scope.row 这一行对应的数组中的对象
                    -->
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <!--*****************************-->
        </el-table>
    </template>


</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                arr:[{name:"刘备",salary:3000,job:"人事"},
                    {name:"关羽",salary:4000,job:"销售"},
                    {name:"张飞",salary:5000,job:"市场"}]
            }
        },
        methods:{
            handleDelete(i,obj){
                v.$message("下标="+i+"姓名="+obj.name);
                //删除数据中的对象 页面表格会自动跟着改变
                v.arr.splice(i,1);
            }
        }
    })
</script>
</html>

02导航菜单.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <!--:default-active设置默认选中的位置
    mode="horizontal" 设置横向菜单, 如果去掉则显示成纵向
    -->
    <!--el-menu菜单-->
    <el-menu :default-active="activeIndex" class="el-menu-demo"
             mode="horizontal"  @select="handleSelect">
        <!--el-menu-item菜单项-->
        <el-menu-item index="1">处理中心</el-menu-item>
        <!--el-submenu子菜单-->
        <el-submenu index="2">
            <!--子菜单的标题-->
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
        </el-submenu>
        <!--disabled禁用-->
        <el-menu-item index="3" disabled>
            消息中心
        </el-menu-item>
        <el-menu-item index="4">
            <a href="https://www.ele.me" target="_blank">订单管理</a>
        </el-menu-item>
    </el-menu>
    <el-divider></el-divider>
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
    <h1>自定义导航菜单</h1>
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item v-for="(title,i) in arr" :index="i+1">{{title}}</el-menu-item>
    </el-menu>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                activeIndex: '3',
                activeIndex2: '1',
                arr:["首页","免费课","直播课","线上班","线下班","关于我们"]
            }
        },
       methods: {
           handleSelect(key, keyPath) {
               /*key表示位置  keyPath表示"路径" 包含key位置*/
               console.log(key, keyPath);
           }
       }
    })
</script>
</html>

03布局.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .c1{
            border: 1px solid red;border-radius: 5px;height: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--row表示行, 一行最多划分24分栏-->
    <!--gutter设置间距-->
    <el-row :gutter="30">
        <!--col表示列 span设置占的分栏数量-->
        <el-col :span="12"><div class="c1"></div></el-col>
        <el-col :span="12"><div class="c1"></div></el-col>
    </el-row>
    <h1>四等份  并居中</h1>
    <el-row style="width: 1200px;margin: 0 auto" :gutter="30">
        <el-col :span="6"><div class="c1"></div></el-col>
        <el-col :span="6"><div class="c1"></div></el-col>
        <el-col :span="6"><div class="c1"></div></el-col>
        <el-col :span="6"><div class="c1"></div></el-col>
    </el-row>
    <h1>划分3部分比例为1:2:3  间隔20个像素   整体居中</h1>
    <el-row style="width: 1200px;margin: 0 auto" :gutter="20">
        <el-col :span="4"><div class="c1"></div></el-col>
        <el-col :span="8"><div class="c1"></div></el-col>
        <el-col :span="12"><div class="c1"></div></el-col>
    </el-row>
    <h1>分栏偏移</h1>
    <el-row>
        <!--offset设置偏移的分栏数量-->
        <el-col :span="10" :offset="7"><div class="c1"></div></el-col>
    </el-row>



</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {

            }
        },
    })
</script>
</html>

04布局容器.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-header{
            background-color: red;
        }
        .el-main{
            background-color: green;
            height: 300px;
        }
        .el-footer{
            background-color: blue;
        }
        .el-aside{
            background-color: purple;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>上中下</h1>
    <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
    </el-container>
    <h1>上,下(左,右(上,下))</h1>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>
    <h1>左,右(上,中,下)</h1>
    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {

            }
        },
    })
</script>
</html>

05走马灯.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 150px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <div style="width: 350px" class="block">
            <span class="demonstration">默认 Hover 指示器触发</span>
            <el-carousel height="150px">
                <el-carousel-item v-for="item in 4">
                    <h3 class="small">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="block">
            <span class="demonstration">Click 指示器触发</span>
            <el-carousel trigger="click" height="150px">
                <el-carousel-item v-for="item in 4" :key="item">
                    <h3 class="small">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
    </template>
    <h1>图片轮播图</h1>
    <div style="width: 300px">
        <el-carousel height="150px">
            <el-carousel-item v-for="item in arr">
                <img :src="item" width="100%" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
    <h1>卡片化</h1>
    <div style="width: 500px">
        <el-carousel type="card" height="150px">
            <el-carousel-item v-for="item in arr">
                <img :src="item" width="100%" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                arr:["imgs/b1.jpg","imgs/b2.jpg","imgs/b3.jpg","imgs/b1.jpg","imgs/b2.jpg","imgs/b3.jpg"]
            }
        },
    })
</script>
</html>

06卡片.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-row :gutter="20">
        <el-col :span="4">
            <el-card>
                <h1>卡片</h1>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card>
                <h1>卡片</h1>
            </el-card>
        </el-col>
    </el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {

            }
        },
    })
</script>
</html>

login.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            margin: 0;/*去掉自带外边距*/
            background-image: url("imgs/bg.jpg");
            /*cover设置封面效果*/
            background-size: cover;
            text-align: center;
        }
        h1{
            font-size: 72px;
            color: #0096dc;
            margin-bottom: 0;
        }
        img{width: 100px}
        h2{
            font-size: 32px;
            color: #0096dc;
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>欢迎来到酷鲨商城</h1>
    <img src="imgs/shark.png" alt="">
    <h2>CoolSharkMall</h2>
    <el-card style="width: 600px;height: 300px;margin: 0 auto;
background-color: rgba(255,255,255,0.3)">
        <el-form label-width="60px" style="width: 400px;margin:40px auto">
            <el-form-item label="用户名">
                <el-input type="text" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button style="position: relative;right: 30px" type="primary">登录</el-button>
            </el-form-item>
        </el-form>
    </el-card>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {

            }
        },
    })
</script>
</html>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        header a{
            text-decoration: none;
            color: #6c6c6c;
        }
        .el-table .el-table__cell{
            padding: 0;/*去掉表格中每一行自带的内边距*/
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150">
            <div style="width: 1200px;margin: 0 auto;">
                <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
                <span>
                    <a href="">首页</a><el-divider direction="vertical"></el-divider>
                    <a href="">热点资讯</a><el-divider direction="vertical"></el-divider>
                    <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
                    <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
                    <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
                    <a href="">帮助</a>
                </span>
            </div>
            <!--导航菜单开始-->
            <div style="background-color: #82c8ec">
                <el-menu style="width: 1200px;margin: 0 auto"
                        :default-active="1"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#82c8ec"
                        text-color="#fff"
                        active-text-color="#fff">
                    <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
                    <div style="float: right;margin-top: 10px">
                        <el-input placeholder="请输入搜索内容">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-menu>
            </div>
            <!--导航菜单结束-->
        </el-header>
        <el-main style="width: 1200px;margin: 0 auto">
            <el-row :gutter="20">
                <el-col :span="18">
                    <el-carousel height="300px">
                        <el-carousel-item v-for="item in bannerArr">
                            <img :src="item.url" width="100%" height="100%" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
                <el-col :span="6">
                    <el-card style="height: 300px">
                        <h3>
                            <i style="font-weight: bold" class="el-icon-trophy">销量最高</i>
                        </h3>
                        <el-divider></el-divider>
                        <el-table :data="topArr">
                            <el-table-column type="index" label="排名" width="50"></el-table-column>
                            <el-table-column prop="title" label="商品名" width="80"></el-table-column>
                            <el-table-column prop="saleCount" label="销量" width="80"></el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
            <!--商品列表开始-->
            <el-row :gutter="20">
                <el-col style="margin-top: 20px" :span="6" v-for="p in productArr">
                    <el-card>
                        <img :src="p.url" width="100%" alt="">
                        <div>
                            <p style="font-size: 15px;height: 40px;margin-top: 0">{{p.title}}</p>
                            <div style="color: #666">
                                <span>￥{{p.price}}</span>
                                <s style="font-size: 12px">{{p.oldPrice}}</s>
                                <span style="float: right">销量:{{p.saleCount}}</span>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <!--商品列表结束-->
        </el-main>
        <el-footer>
            <div style="height: 95px;background-image: url('imgs/wave.png')"></div>
            <div style="height: 100px;background-color: #3f3f3f;padding: 30px 0;
                        text-align: center;color: #b1b1b1">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                categoryArr:[{id:1,name:"精彩活动"},
                    {id:2,name:"当季女装"},{id:3,name:"品牌男装"},
                    {id:4,name:"环球美食"},{id:5,name:"医药健康"},
                    {id:6,name:"美妆彩妆"},{id:7,name:"母婴产品"}],
                bannerArr:[{id:1,url:"imgs/b1.jpg"},
                    {id:2,url:"imgs/b2.jpg"},
                    {id:3,url:"imgs/b3.jpg"}],
                topArr:[{title:"小米电视",saleCount:1453},
                    {title:"李宁球鞋",saleCount:983},
                    {title:"毛巾",saleCount:865},
                    {title:"安踏拖鞋",saleCount:811},
                    {title:"华为手机",saleCount:564},
                    {title:"耐克篮球",saleCount:453}],
                productArr:[{title:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342},
                    {title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
                    {title:"雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},
                    {title:"【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342},
                    {title:"BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",price:233,oldPrice:598,url:"imgs/e.jpg",saleCount:2342},
                    {title:"香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣",price:233,oldPrice:598,url:"imgs/f.jpg",saleCount:2342},
                    {title:"SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",price:233,oldPrice:598,url:"imgs/g.jpg",saleCount:2342},
                    {title:"美特斯邦威女MTEE 贺岁系列中长款风衣736598",price:233,oldPrice:598,url:"imgs/h.jpg",saleCount:2342},
                    {title:"imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",price:233,oldPrice:598,url:"imgs/i.jpg",saleCount:2342},
                    {title:"BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",price:233,oldPrice:598,url:"imgs/j.jpg",saleCount:2342},
                    {title:"憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",price:233,oldPrice:598,url:"imgs/k.jpg",saleCount:2342},
                    {title:"美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342}]
            }
        },
       methods:{
           handleSelect(key,keyPath){
               console.log(key);
           }
       }
    })
</script>
</html>

detail.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        header a{
            text-decoration: none;
            color: #6c6c6c;
        }
        .el-table .el-table__cell{
            padding: 0;/*去掉表格中每一行自带的内边距*/
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150">
            <div style="width: 1200px;margin: 0 auto;">
                <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
                <span>
                    <a href="">首页</a><el-divider direction="vertical"></el-divider>
                    <a href="">热点资讯</a><el-divider direction="vertical"></el-divider>
                    <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
                    <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
                    <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
                    <a href="">帮助</a>
                </span>
            </div>
            <!--导航菜单开始-->
            <div style="background-color: #82c8ec">
                <el-menu style="width: 1200px;margin: 0 auto"
                        :default-active="1"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#82c8ec"
                        text-color="#fff"
                        active-text-color="#fff">
                    <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
                    <div style="float: right;margin-top: 10px">
                        <el-input placeholder="请输入搜索内容">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-menu>
            </div>
            <!--导航菜单结束-->
        </el-header>
        <el-main style="width: 1200px;margin: 0 auto">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card>
                        <img src="imgs/a.jpg" width="100%" alt="">
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <p style="font-size: 25px">{{product.title}}</p>
                    <el-divider></el-divider>
                    <p style="font-size: 15px;color: #666">
                        销量:{{product.saleCount}} 浏览量:{{product.viewCount}}
                    </p>
                    <p style="font-size: 25px;font-weight: bold">
                        ￥{{product.price}}
                        <span style="font-size: 15px;color: #666">原价:<s>{{product.oldPrice}}</s></span>
                    </p>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-card>
                                <img src="imgs/ewm.jpg" width="100%" alt="">
                            </el-card>
                            <p style="text-align: center">扫码关注公众号</p>
                        </el-col>
                        <el-col :span="8">
                            <el-card>
                                <img src="imgs/ewm.jpg" width="100%" alt="">
                            </el-card>
                            <p style="text-align: center">扫码购买商品</p>
                        </el-col>
                        <el-col :span="8">
                            <el-card>
                                <img src="imgs/ewm.jpg" width="100%" alt="">
                            </el-card>
                            <p style="text-align: center">扫码下载App</p>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <div style="height: 95px;background-image: url('imgs/wave.png')"></div>
            <div style="height: 100px;background-color: #3f3f3f;padding: 30px 0;
                        text-align: center;color: #b1b1b1">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                categoryArr:[{id:1,name:"精彩活动"},
                    {id:2,name:"当季女装"},{id:3,name:"品牌男装"},
                    {id:4,name:"环球美食"},{id:5,name:"医药健康"},
                    {id:6,name:"美妆彩妆"},{id:7,name:"母婴产品"}],
                product:{title:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",
                    price:233,oldPrice:598,url:"imgs/a.jpg",
                    saleCount:2342,viewCount:100},

            }
        },
       methods:{
           handleSelect(key,keyPath){
               console.log(key);
           }
       }
    })
</script>
</html>

admin.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="background-color: #0095d7">
            <h1 style="color: white;font-size: 22px">
                CoolShark商城后台管理系统
                <span style="float: right">欢迎xxx回来!<a href="">退出登录</a></span>
            </h1>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <!--**************导航菜单开始*****************-->
                <el-menu @select="handleSelect" class="el-menu-vertical-demo">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-flag"></i>
                            <span>分类管理</span>
                        </template>
                        <el-menu-item index="1-1">分类列表</el-menu-item>
                        <el-menu-item index="1-2">添加分类</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-picture"></i>
                            <span>轮播图管理</span>
                        </template>
                        <el-menu-item index="2-1">轮播图列表</el-menu-item>
                        <el-menu-item index="2-2">添加轮播图</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-shopping-cart-2"></i>
                            <span>商品管理</span>
                        </template>
                        <el-menu-item index="3-1">商品列表</el-menu-item>
                        <el-menu-item index="3-2">添加商品</el-menu-item>
                    </el-submenu>
                </el-menu>
                <!--**************导航菜单结束*****************-->
            </el-aside>
            <el-main>
                <!--*****************分类表格开始************************-->
                <el-table v-if="currentIndex=='1-1'" :data="categoryArr" style="width: 100%">
                    <el-table-column
                            type="index"
                            label="序号"
                            width="50">
                    </el-table-column>
                    <!--prop=properties属性-->
                    <el-table-column
                            prop="name"
                            label="分类名称"
                            width="180">
                    </el-table-column>
                    <!--*****************************-->
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                    <!--*****************************-->
                </el-table>
                <!--*****************分类表格结束************************-->
                <!--*****************轮播图表格开始************************-->
                <el-table v-if="currentIndex=='2-1'" :data="bannerArr" style="width: 100%">
                    <el-table-column
                            type="index"
                            label="序号"
                            width="50">
                    </el-table-column>
                    <!--prop=properties属性-->
                    <el-table-column
                            label="轮播图"
                            width="300">
                        <!--scope.row得到的是bannerArr数组中对应的轮播图对象-->
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%" alt="">
                        </template>
                    </el-table-column>
                    <!--*****************************-->
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                    <!--*****************************-->
                </el-table>
                <!--*****************轮播图表格结束************************-->
                <!--*****************商品表格开始************************-->
                <el-table v-if="currentIndex=='3-1'" :data="productArr" style="width: 100%">
                    <el-table-column
                            type="index"
                            label="序号"
                            width="50">
                    </el-table-column>
                    <!--prop=properties属性-->
                    <el-table-column label="商品标题" width="200" prop="title"></el-table-column>
                    <el-table-column label="价格" width="100" prop="price"></el-table-column>
                    <el-table-column label="原价" width="100" prop="oldPrice"></el-table-column>
                    <el-table-column label="销量" width="100" prop="saleCount"></el-table-column>
                    <el-table-column
                            label="商品图片"
                            width="100">
                        <!--scope.row得到的是bannerArr数组中对应的轮播图对象-->
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%" alt="">
                        </template>
                    </el-table-column>
                    <!--*****************************-->
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                    <!--*****************************-->
                </el-table>
                <!--*****************商品表格结束************************-->
            </el-main>
        </el-container>
    </el-container>



</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                currentIndex:"1-1",
                categoryArr:[{id:1,name:"精彩活动"},
                    {id:2,name:"当季女装"},{id:3,name:"品牌男装"},
                    {id:4,name:"环球美食"},{id:5,name:"医药健康"},
                    {id:6,name:"美妆彩妆"},{id:7,name:"母婴产品"}],
                bannerArr:[{id:1,url:"imgs/b1.jpg"},
                    {id:2,url:"imgs/b2.jpg"},
                    {id:3,url:"imgs/b3.jpg"}],
                productArr:[{title:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342},
                    {title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
                    {title:"雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},
                    {title:"【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342},
                    {title:"BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",price:233,oldPrice:598,url:"imgs/e.jpg",saleCount:2342},
                    {title:"香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣",price:233,oldPrice:598,url:"imgs/f.jpg",saleCount:2342},
                    {title:"SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",price:233,oldPrice:598,url:"imgs/g.jpg",saleCount:2342},
                    {title:"美特斯邦威女MTEE 贺岁系列中长款风衣736598",price:233,oldPrice:598,url:"imgs/h.jpg",saleCount:2342},
                    {title:"imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",price:233,oldPrice:598,url:"imgs/i.jpg",saleCount:2342},
                    {title:"BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",price:233,oldPrice:598,url:"imgs/j.jpg",saleCount:2342},
                    {title:"憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",price:233,oldPrice:598,url:"imgs/k.jpg",saleCount:2342},
                    {title:"美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342}]
            }
        },
        methods:{
            handleSelect(key,keyPath){
                if (key=="1-2"){
                    v.$message("添加分类");
                }else if (key=="2-2"){
                    v.$message("添加轮播图");
                }else if (key=="3-2"){
                    v.$message("添加商品");
                }else{
                    v.currentIndex=key;
                }
            }
        }
    })
</script>
</html>

以下是web前端学习的笔记：
https://docs.qq.com/doc/DWHlQbWdWanZRemN1?&u=b0e5bbca099a4fdea0769845d272d5bc

shortcutsuccess
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html和css学习笔记
03-16
### HTML与CSS学习笔记 #### 一、基础知识概述 HTML（HyperText Markup Language）与CSS（Cascading Style Sheets）是构建网页的基础技术。通过学习HTML与CSS，我们可以创建结构化且美观的网页。 - **WWW (World ...
前端第一阶段笔记HTML+CSS
08-15
【HTML与CSS基础】 HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，它定义了网页的结构。...随着技能的提升，可以进一步学习更复杂的布局、响应式设计、JavaScript交互以及前端框架等高级概念。
酷鲨商城登录页面
m0_69712602的博客
08-31 566
酷鲨商城登录页面
前端三剑客 HTML+CSS+JavaScript 学习笔记
霁晨晨晨的博客
12-10 3万+
总结了一些关于前端 HTML&CSS&JavaScript 的知识点，比较适合初学者快速了解和入门〝前端三剑客〞
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
前端学习笔记-HTML、CSS、Javascript基础知识
m0_53527658的博客
04-17 403
采用前后端分离技术开发。
HTML+CSS+JS+Vue学习笔记【持续更新】
m0_63231188的博客
07-04 954
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue.js是一个基于JavaScript的框架，它本身就是用JavaScript编写的。Vue.js利用JavaScript的语法和功能来实现其响应式数据绑定、组件化开发、虚拟DOM等特性。
HTML CSS JS学习笔记之实现网页计算器1
2401_84093899的博客
04-19 752
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-zUDcAlh4-1713489130050)]一个好的心态和一个坚持的心很重要。
html css js笔记,html+CSS+js学习笔记.doc
weixin_30610943的博客
06-30 157
第一章2一、关于html的大致了解2二、Html常用的标签3三、使用vs创建网页6第二章6DiV(层)、span6二、样式表、css(层叠样式表)6文档流9Javascript(JS)简介9第三章11一．类型转换12二、断点调试、异常处理12三、函数声明12四、字符串13五、数组14六、javaScript Dom编程15第四章15一、Body、document对象的事件：16二、Window对象...
HTML CSS JS学习笔记之实现网页计算器2
2401_83703835的博客
03-29 898
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可获取！由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可获取！[外链图片转存中…(img-nidwfKWt-1711664380942)][外链图片转存中…(img-PNzww6qB-1711664380942)]点击【学习资料】
javaScript学习笔记（一）js基础
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
千峰HTML5+CSS3学习笔记
李英俊小朋友
08-31 2551
我的千峰HTML5+CSS3学习笔记
HTML5+CSS3 markdown笔记
11-17
Markdown则是一种轻量级的标记语言，常用于编写文档、笔记和个人日记，因其简洁易读的语法而备受青睐。以下是这些技术的一些关键知识点： **HTML5** HTML5是超文本标记语言的第五个版本，它对旧版本进行了许多改进...
HTML-CSS-JS:关于前端的一些技巧
08-04
CSS嵌入HTML的第三种方式4-CSS嵌入HTML的第三种方式(外部的.CSS文件)5-display样式(隐藏列表)6-内补丁和外补丁7-去掉列表前边的标记8-定位样式position9-文本装饰样式10-浮动窗口11-鼠标悬停样式12-css笔记3....
Ruffy javascript 学习笔记
10-29
### Ruffy JavaScript 学习笔记知识点详解 #### 1. JavaScript 的原型模型 JavaScript 的原型模型是实现面向对象编程的基础之一。在这个模型中，构造函数用于定义对象的成员，而方法则是通过构造函数的 `prototype...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 821
注释很详细，直接上代码……
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
m0_74283290的博客
08-03 1238
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 824
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 704
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
PHP学习笔记：从HTML到CSS的全面梳理
"这是一份详细的PHP学习笔记，包含了HTML、CSS、JavaScript和PHP的基础知识。笔记以天为单位划分，每天的学习内容涵盖了一系列相关主题，旨在帮助学习者系统地掌握Web开发的基本技能。" 在这些笔记中，首先介绍了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值