首页 > 其他分享 >186. 大学生HTML期末大作业 ―【 Bootstrap多肉植物主题响应式自适应网页（6页）】 Web前端网页制作 html+css+js

186. 大学生HTML期末大作业 ―【 Bootstrap多肉植物主题响应式自适应网页（6页）】 Web前端网页制作 html+css+js

时间：2024-12-29 10:55:33浏览次数：3  
标签：Web 网页 bottom top Bootstrap news overflow margin

目录

一、网页概述

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

 5000+完整代码，主题涵盖30+种类型:

​

一、网页概述

本实例应用html+css+js： Div、导航栏、选项卡、图片轮翻效果、鼠标滑动特效等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含6个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

html>

    <head>
        <meta charset="utf-8" />
        <!-- 优先使用 IE 最新版本和 Chrome -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <!-- 为移动设备添加 viewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <!--忽略页面中的数字识别为电话，忽略email识别-->
        <meta name="format-detection" content="telphone=no, email=no" />
        <title>首页</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="css/base.css" />
        <!--[if lt IE 9]>
            <script type="text/javascript" src="js/html5shiv.min.js"></script>
            <script type="text/javascript" src="js/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <!--导航-->
        <nav class="navbar navbar-default navbar-fixed-top top-box">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="picture/logo.png" class="img-responsive" /></a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right top-nav">
                        <li class="active">
                            <a href="index.html">
                                首页
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li>
                            <a href="about.html">关于肉萌萌</a>
                        </li>
                        <li>
                            <a href="news.html">公司新闻</a>
                        </li>
                        <li>
                            <a href="customer.html">客服中心</a>
                        </li>
                        <li>
                            <a href="zhaoshang.html">招商加盟</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
        <!--/ 导航-->

        <!--轮播图-->
        <div id="carousel-example-generic" class="carousel slide banner" data-ride="carousel">
            <!-- 圆点 -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- 图片区域 -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="picture/index-bn1.jpg" alt="">
                </div>
                <div class="item">
                    <img src="picture/index-bn2.jpg" alt="">
                </div>
                <div class="item">
                    <img src="picture/index-bn3.jpg" alt="">
                </div>
            </div>

          

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
html,
body {
    font-family: "novecento_widenormal", "STHeiti", "Microsoft JhengHei", "Microsoft YaHei", tahoma;
}

body {
    padding-top: 50px;
}


/*顶部导航*/

.top-box {
    height: 50px;
    margin-bottom: 0;
    z-index: 16;
}

.top-box .navbar-collapse {
    border: none;
}

.top-box .navbar-brand {
    height: 50px;
    padding: 10px;
}

.top-box .navbar-brand img {
    height: 100%;
}

.top-box .navbar-toggle {
    margin-top: 8px;
}

.top-box .navbar-nav {
    margin-top: 0 !important;
}

.top-nav li a {
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    background: #fff !important;
}

.top-nav li.active a,
.top-nav li a:hover {
    color: #f00 !important;
}

.common-title {
    text-align: center;
}

.common-title h2 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10px;
}

.common-title span {
    display: block;
    font-size: 18px;
    color: #b2b2b2;
    margin-bottom: 15px;
}

.common-title p {
    text-align: center;
    font-size: 0;
    margin-bottom: 0;
}

.common-title p i {
    display: inline-block;
    width: 50px;
    height: 1px;
    margin: 0 2px;
    background: #a4a4a4;
}

.common-title p i:first-child {
    background: #009944;
}


/*页脚*/

.footer {
    background: #eeeeee;
    border-top: 10px solid #598c55;
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer .thumbnail {
    background: #eeeeee;
    border: none;
    text-align: center;
    font-size: 12px;
    margin-bottom: 0;
}
.bread {
    font-size: 0;
    background: #fff;
    border-bottom: 2px solid #598c55;
    border-radius: 0;
    margin-bottom: 30px;
    margin-top: 30px;
    padding:10px 0;
}
.bread li,.bread li a{
    font-size: 14px;
    color: #808080;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bread li:last-child{
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bread .active{
    color: #598c55;
}

/*首页--新闻中心*/

.news {
    padding-top: 40px;
    padding-bottom: 40px;
}

.news .news-content {
    margin-top: 40px;
}

.news .news-content p {
    margin-bottom: 0;
}

.news .thumbnail {
    overflow: hidden;
    padding: 0;
}

.news .thumbnail img {
    width: 100%;
}

.news .news-content .caption {
    padding: 0px 9px 20px 9px;
    border-bottom: 1px solid #ccc;
    color: #333;
}

.news .news-content .caption h3 {
    margin-bottom: 12px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news .news-content .caption p {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news .news-des {
    padding: 20px 9px 20px 9px;
    color: #b2b2b2;
}

.news .news-des p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
 

...

3.JS

代码如下（节选示例）：

/*!
 * Bootstrap v3.3.0 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery),+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("bsTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b(),a.support.transition&&(a.event.special.bsTransitionEnd={bindType:a.support.transition.end,delegateType:a.support.transition.end,handle:function(b){return a(b.target).is(this)?b.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var c=a(this),e=c.data("bs.alert");e||c.data("bs.alert",e=new d(this)),"string"==typeof b&&e[b].call(c)})}var c='[data-dismiss="alert"]',d=function(b){a(b).on("click",c,this.close)};d.VERSION="3.3.0",d.TRANSITION_DURATION=150,d.prototype.close=function(b){function c(){g.detach().trigger("closed.bs.alert").remove()}var e=a(this),f=e.attr("data-target");f||(f=e.attr("href"),f=f&&f.replace(/.*(?=#[^\s]*$)/,""));var g=a(f);b&&b.preventDefault(),g.length||(g=e.closest(".alert")),g.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(g.removeClass("in"),a.support.transition&&g.hasClass("fade")?g.one("bsTransitionEnd",c).emulateTransitionEnd(d.TRANSITION_DURATION):c())};var e=a.fn.alert;a.fn.alert=b,a.fn.alert.Constructor=d,a.fn.alert.noConflict=function(){return a.fn.alert=e,this},a(document).on("click.bs.alert.data-api",c,d.prototype.close)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof b&&b;e||d.data("bs.button",e=new c(this,f)),"toggle"==b?e.toggle():b&&e.setState(b)})}var c=function(b,d){this.$element=a(b),this.options=a.extend({},c.DEFAULTS,d),this.isLoading=!1};c.VERSION="3.3.0",c.DEFAULTS={loadingText:"loading..."},c.prototype.setState=function(b){var c="disabled",d=this.$element,e=d.is("input")?"val":"html",f=d.data();b+="Text",null==f.resetText&&d.data("resetText",d[e]()),setTimeout(a.proxy(function(){d[e](null==f[b]?this.options[b]:f[b]),"loadingText"==b?(this.isLoading=!0,d.addClass(c).attr(c,c)):this.isLoading&&(this.isLoading=!1,d.removeClass(c).removeAttr(c))},this),0)},c.prototype.toggle=function(){var a=!0,b=this.$element.closest('[data-toggle="buttons"]');if(b.length){var c=this.$element.find("input");"radio"==c.prop("type")&&(c.prop("checked")&&this.$element.hasClass("active")?a=!1:b.find(".active").removeClass("active")),a&&c.prop("checked",!this.$element.hasClass("active")).trigger("change")}else this.$element.attr("aria-pressed",!this.$element.hasClass("active"));a&&this.$element.toggleClass("active")};var d=a.fn.button;a.fn.button=b,a.fn.button.Constructor=c,a.fn.button.noConflict=function(){return a.fn.button=d,this},a(document)

...

五、总结

一个优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性； 

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

更多优质博客文章、完整代码案例模板，点击以下链接查阅：

仙女网页设计-CSDN博客

Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流

标签：Web,网页,bottom,top,Bootstrap,news,overflow,margin
From： https://blog.csdn.net/m0_67368443/article/details/144707699

相关文章

  • 118. Web前端网页案例——【黑色的电影主题网页（ 4页）】 大学生期末大作业 html+css+js
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端......
  • 在网页中加入CSS样式
    在网页中加入CSS样式可以通过多种方式实现，以下是一些常见的方法： 1.内联样式：直接在HTML元素的style属性中定义CSS样式。这种方法适用于对单个元素进行快速样式调整，但不利于样式的复用和维护。【html】<pstyle="color:red;font-size:16px;">这是一个带有内联样式的......
  • 云服务器网页打开太慢，怀疑受到攻击
    根据您的描述，所有站点在该服务器上打开都非常缓慢，甚至有时无法访问。这类问题可能由以下几个原因引起：服务器资源不足：服务器的CPU、内存或带宽资源可能不足，导致响应速度变慢。建议您检查服务器的资源使用情况，确保有足够的资源支持网站运行。可以通过命令行工具如top或htop查看......
  • 127.0.0.1服务器无法访问网页
    Web服务器未启动或异常：Web服务器（如Nginx或Apache）可能未启动或出现异常。可以通过命令systemctlstatusnginx（适用于Nginx）或systemctlstatushttpd（适用于Apache）检查Web服务器的状态。如果服务未启动或已停止，可以尝试重启Web服务器：systemctlrestartnginx或systemctlrestarth......
  • Odoo QWeb 语法
    QWeb是Odoo的模板引擎，用于生成HTML页面和片段。它基于XML格式，允许在模板中使用特定的指令来动态生成内容。以下是QWeb的一些关键概念和语法，帮助你理解和使用它。一：简介QWeb是一种基于XML的模板引擎，用于生成HTML页面和片段。模板中的指令以 t- 开头。二：templ......
  • 1.高品质摄影公司网页 Web前端网页制作 大学生期末大作业 html+css+js
    目录一、更多推荐二、网页简介三、网页效果四、代码展示1.HTML2.CSS3.JS 一、更多推荐欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业模板案例、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以......
  • 381.大学生HTML期末大作业 —【紫色的景区旅游网页(4页)】 Web前端网页制作 html+css+
    目录一、网页简介二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交......
  • 使用 `hash-wasm` 的 `createMD5`方法，生成md5值，批处理500张图片会报错， `RangeError: W
    处理大量文件时遇到RangeError:WebAssembly.instantiate():Outofmemory错误，通常是因为一次性创建了过多的WebAssembly实例，导致内存不足。每个createMD5()调用都会创建一个新的WebAssembly实例，这对于大量的并发操作来说是不可行的。为了优化代码并避免此问题，可以考虑......
  • 【笔记】在虚拟机中通过apache2给一个主机上配置多个web服务器
    （配置出来的web服务器又叫虚拟主机……）下载apache2sudoaptupdatesudoaptinstallapache2（一）ip相同web端口不同的web服务器进入/var/www/html创建站点一和站点二的目录文件（目录文件名自定义哈）sudomkdirweb1web2并进入其中分别创建一个index.htmlps：/var/w......
  • python毕设 基于web的旅游网站的设计与实现程序+论文
    本系统（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。系统程序文件列表开题报告内容一、选题背景随着互联网技术的飞速发展，基于web的应用在各个领域广泛普及。在旅游行业，国内外对于旅游网站的研究已经取得了不少成果。现有研究主要......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99