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

原创

乡下小哥编程 2022-12-04 01:02:53 ©著作权

文章标签 html css css3 项目结构 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者乡下小哥编程的原创作品，请联系作者获取转载授权，否则将追究法律责任

源代码位置：F:\Users\lenovo\Documents\HBuilderProjects\html网页设计

文章目录

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

1、网页效果

#轮播图实现动态切换

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

2、项目结构

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

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&id=12&icon=1&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="">
                        欢迎您，{{}}
                        <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>