企业公司宣传网站(HTML静态网页项目实战)附源码【从0开始入门到精通】小白向(大学生毕设)大作业 <!DOCTYPE html> <html lang=“en“> <head> <

2023-12-31 20:18:25

企业公司宣传网站(HTML静态网页项目实战)附源码【从0开始入门到精通】小白向(大学生毕设)大作业

Business

关于我们

一个早已确立的事实是,当出现以下情况时,读者会被页面的可读内容分散注意力

段落有许多变体,但大多数都以某种形式、注入幽默或随机词语进行了更改

我们能做的

一个早已确立的事实是,当出现以下情况时,读者会被页面的可读内容分散注意力

研究与分析

段落有许多变体,但形式,通过注入幽默,或

服务计划

段落有许多变体,但形式,通过注入幽默,或

服务选择

段落有许多变体,但形式,通过注入幽默,或

研究与分析

段落有许多变体,但形式,通过注入幽默,或

服务计划

段落有许多变体,但形式,通过注入幽默,或

服务选择

段落有许多变体,但形式,通过注入幽默,或

轻松发展您的服务赚更多的钱

段落有许多变体,但大多数都以某种形式、注入幽默或随机词语进行了更改

按照我们的视频解决您的问题

取得联系

大多数人遭受了某种形式的改变,通过注入幽默,或

What says Clients

关于网页的元数据和样式表的链接。具体分析如下:

  • <meta charset="utf-8">:设置网页的字符编码为UTF-8,以支持多种语言字符。
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">:告诉IE浏览器使用最新的渲染引擎。
  • <meta name="viewport" content="width=device-width, initial-scale=1">:定义网页在不同设备上的视口宽度和初始缩放比例。
  • <title>Business</title>:设置网页标题为"Business"。
  • <meta name="keywords" content="">:设置网页的关键词,用于搜索引擎优化(SEO)。
  • <meta name="description" content="">:设置网页的描述,也用于SEO。
  • <meta name="author" content="">:设置网页的作者信息。
  • <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">:链接外部的Bootstrap样式表。
  • <link rel="stylesheet" type="text/css" href="css/style.css">:链接外部的自定义样式表。
  • <link rel="stylesheet" href="css/responsive.css">:链接外部的响应式样式表。
  • <link rel="icon" href="images/fevicon.png" type="image/gif" />:设置网页的图标。
  • <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">:链接外部的自定义滚动条样式表。
  • <link rel="stylesheet" href="css/font-awesome.css">:链接外部的字体图标样式表。
  • <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">:链接外部的Google字体样式表。
    一个典型的网页头部代码,用于定义网页的元数据和链接外部样式表以实现样式和布局的定制化效果。
    上述代码是一个网页头部的导航栏部分。具体分析如下:
  • <div class="header_section">:定义头部区域的外层div元素。
  • <div class="container">:定义一个容器,用于包裹导航栏内容。
  • <nav class="navbar navbar-expand-lg navbar-light bg-light">:定义导航栏的外层navbar元素,并指定样式和背景颜色。
  • <div class="logo"><a href="index.html"><img src="images/logo.png"></a></div>:定义一个logo的div元素,其中包含一个链接到首页的图片。
  • <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">:定义一个用于触发折叠导航栏的按钮。
  • <div class="collapse navbar-collapse" id="navbarSupportedContent">:定义一个折叠导航栏的区域,并指定ID用于与按钮对应。
  • <ul class="navbar-nav ml-auto">:定义一个导航栏的无序列表。
  • <li class="nav-item active">:定义一个导航栏项,并设置为激活状态。
  • <a class="nav-link" href="index.html">首页</a>:定义一个导航栏链接,指向首页。
  • 其他导航栏项和链接的结构与上述类似。
    这段代码实现了一个带有logo和导航链接的响应式导航栏,可以在不同设备上自动折叠和展开。导航栏的链接指向不同的页面,例如首页、服务、博客、关于、事件和联系我们。

我们页面的内容部分。具体分析如下:

  • <div class="about_section layout_padding">:定义关于我们页面部分的外层div元素,并设置样式。
  • <div class="container">:定义一个容器,用于包裹关于我们页面的内容。
  • <div class="row">:定义一个行,用于包裹关于我们页面的标题和文本。
  • <div class="col-md-12">:定义一个列,占据整行的宽度。
  • <h1 class="about_taital">关于我们 <span class="border_0"></span></h1>:定义一个关于我们的标题,包含一个下划线。
  • <p class="about_text">一个早已确立的事实是,当出现以下情况时,读者会被页面的可读内容分散注意力</p>:定义一个关于我们的文本。
  • <div class="about_section_2">:定义一个关于我们页面的第二部分。
  • <div class="col-md-6">:定义一个列,占据6个网格的宽度。
  • <div class="about_img"><img src="images/about-img.png"></div>:定义一个关于我们的图片。
  • <div class="col-md-6">:定义一个列,占据6个网格的宽度。
  • <p class="about_text_1">段落有许多变体,但大多数都以某种形式、注入幽默或随机词语进行了更改</p>:定义一个关于我们的文本。
  • <div class="readmore_bt"><a href="#">阅读更多</a></div>:定义一个阅读更多按钮。
    这段代码实现了一个关于我们页面的布局,包括标题、文本、图片和阅读更多按钮。通过使用网格系统,页面可以在不同设备上自适应并呈现出不同的布局。
    在这里插入图片描述

获取源码

文章来源:https://blog.csdn.net/zezeaichirou/article/details/135281522
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。