HTML网页作业代码（仿写商城首页、学校官网网页等、源码可直接运行）

乡下小哥编程

5619人浏览 · 2022-11-28 10:39:25

乡下小哥编程 · 2022-11-28 10:39:25 发布

文章目录

- 代码位置
1、网页效果
2、项目结构
3、部分css样式
4、部分页面代码
5、整体情况
6、如何运行
7、后语

代码位置

源代码位置：http://t.csdn.cn/nC8U4

1、网页效果

#轮播图实现动态切换

在这里插入图片描述

2、项目结构

在这里插入图片描述

3、部分css样式

/*去除默认样式*/
::-webkit-scrollbar {
    width: 0;
    height: 1px
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    background: rgba(0, 0, 0, .2)
}

* {
    outline: none;
    box-sizing: border-box;
}

/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    margin:0;
    padding:0;
}

ul {
    list-style: none;
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: black;
}

/*正常的未被访问过的链接*/
a:link {
    text-decoration: none;

}
/*已经访问过的链接*/
a:visited {
    text-decoration: none;
    color: black;
}
/*鼠标划过(停留)的链接*/
a:hover {
    text-decoration: none;
}
/* 正在点击的链接，鼠标在元素上按下还没有松开*/
a:active {
    text-decoration: none;
}
/* 获得焦点的时候 鼠标松开时显示的颜色*/
a:focus {
    text-decoration: none;
}

/* 轮播图 */
.swiper-container {
    width: 100%;
    height: 350px;
}

.carousel-img {
    width: 100%;
    height: 100%;
}

.bg-gray {
    background-color: #EEEEEE;
}

.p-10 {
    padding: 10px 0;
}

4、部分页面代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
    <title>首页</title>
    <link href="css/swiper-5.4.5/swiper.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/my.css" rel="stylesheet">
    <link href="css/nav.css" rel="stylesheet">
    <link rel="stylesheet" href="css/nav.css">

</head>

<body style="background-color: #f2dede">

    <div id="wrapper">
        <!--weather
    <div style="text-align: right;">
        <iframe width="700" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&amp;id=12&amp;icon=1&amp;num=5"></iframe>
    </div>
    weather-->
        <!-- 头部开始 -->
        <div style="width: 100%; height: 30px; line-height: 30px; background-color: #518657">
            <div class="container">
                <div class="col-md-6" style="text-align: left">
                    <a href="" target="_blank" style="color: white; margin-right: 20px">登录</a>
                    <a href="" target="_blank" style="color: white">注册</a>
                </div>
                <div class="col-md-6" style="color: yellow; text-align: right">
                    <span v-if="user.name">
                        欢迎您，{{user.name}}
                        <a style="color: white" href="javascript:void(0)" >退出</a>
                        <a v-if="isCollect" style="margin-left: 10px" href="collectInfo.html">收藏夹</a>
                    </span>
                </div>
            </div>
            <hr>
        </div>

5、整体情况

在这里插入图片描述

6、如何运行

在这里插入图片描述

7、后语

如有需要、可进行商务探讨

技术共进，成长同行——讯飞AI开发者社区

更多推荐

论文笔记：AlphaEdit: Null-Space Constrained Knowledge Editing for Language Models（AlphaEdit）

论文发表于人工智能顶会ICLR（基于定位和修改的模型编辑方法（针对和等）会破坏LLM中最初保存的知识，特别是在顺序编辑场景。为此，本文提出AlphaEdit：1、在将保留知识应用于参数之前，将扰动投影到保留知识的零空间上。2、从理论上证明，这种预测确保了在查询保留的知识时，编辑后的LLM的输出保持不变，从而减轻中断问题。3、对各种LLM（包括LLaMA3、GPT2XL和GPT-J）的广泛实验表明，