(学习笔记)Bootstrap实训二(简易公司官网首页面)

最新推荐文章于 2023-04-05 16:36:46 发布
最新推荐文章于 2023-04-05 16:36:46 发布
阅读量1k 收藏 6
点赞数 1
文章标签： 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56508310/article/details/124218427
版权

效果图

在这里插入图片描述

在这里插入图片描述

代码部分

一、（body部分）

<body>
  <!-- 导航条 -->
    <nav class="navbar navbar-inverse">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <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>
            
            <img src="../img/logo.png"  style="padding-top: 10px;">
          </div>
      
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active" style="padding-left: 15px;"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
              <li><a href="#">公司简介</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">合作 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <form class="navbar-form navbar-right">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="请输入...">
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                    </span>
                  </div><!-- /input-group -->
            </form>
           
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>

      <!-- 巨幕+形象照片 -->
      <div class="jumbotron  " style="margin-bottom: 0;">
          <div class="container">
              <div class="row">
                  <div class="col-md-6">
                      <div class="container-fluid">
                          <div class="row">
                               <div class="col-md-10 col-md-offset-2">
                                    <h2 style="padding-top: 15%; color: rgb(171, 227, 58);">公司简介</h2>
                                    <p style="color: white;">GEMINITECH有限公司， 我们作为创新型科技企业，拥有一个充满朝气，高素质、年轻化、专业化的开发团队， 为公司蓬勃发展提供源源不断的活力与动力。我们致力于为企业提供中高端专属定制开发服务， 集策划，设计，开发，营销服务于一体的新型互联网企业.</p>
                                </div>
                          </div>
                      </div>
                       
                    </div>

                    <div class="col-md-6 hidden-sm hidden-xs">
                        <img src="../img2/person.png">
                    </div>
                  </div>
                  
              </div>
          </div>
      </div>

      <!-- 解决方案+6图 -->
     <div class="container-fluid bg-grap">
       <div class="container">
         <div class="row">
           <div class="col-md-8 col-md-offset-2 ">
             <h2 style="color:rgb(45, 136, 19); margin-bottom: 20px;">解决方案</h2>
             <p style="line-height: 30px; padding-top: 0; margin-bottom: 100px;">主要从事互联网品牌建设与网络营销，专业领域包括网站建设，微信开发，网络营销，电子商务服务外包相关类别，并积极开拓IT技术在各个行业应用的咨询服务。致力于为用户提 供适合的解决方案。</p>
            </div>
       <div class="row" style="margin-bottom: 30px;">
        <div class="col-lg-4 col-md-6 col-sm-6 list-item">
          <h4>网站建设</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque.</p>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 list-item item-2"> <h4>网站建设</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe!</p>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 list-item item-3"> <h4>网站建设</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe!</p>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 list-item item-4"> <h4>网站建设</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe!</p>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 list-item item-5"> <h4>网站建设</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe!</p>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 list-item item-6"> <h4>网站建设</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe!</p>
        </div>

           </div>
         </div>
         
       </div>
     </div>

     <!-- 成功案例+8图片 -->
     <div class="container-fluid " >
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-2 ">
            <h2 style="color:rgb(45, 136, 19); margin-bottom: 20px;text-align: center;margin-top: 45px;">成功案例</h2>
            <p style="text-align: center;line-height: 30px; padding-top: 0; margin-bottom: 70px; ">以HTML5技术为基础，实现移动终端自动兼容与浏览，延伸品牌和用户之间的触点设计开发符合移动端的H5页面，全面兼容手机、PAD等移动设备，拓宽品牌传播渠道，结合移动互联网的特点，将个性化、社会化、场景化融入项目。</p>
           </div>
           <div class="row " style="margin-bottom: 100px;">
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
              <img src="../img2/pic01.jpg">
              <!-- <div class="mask">
                 <h4>网站建设</h4>
              <p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
              </div> -->
           </div>

           <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
            <img src="../img2/pic02.jpg">
           </div>
           <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
            <img src="../img2/pic03.jpg">
           </div>
           <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
            <img src="../img2/pic04.jpg">
           </div>
           <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
            <img src="../img2/pic05.jpg">
           </div>
           <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
            <img src="../img2/pic06.jpg">
           </div>
           <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
            <img src="../img2/pic07.jpg">
           </div>
           <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
            <img src="../img2/pic08.jpg">
           </div>



        </div>
      </div>
     </div>
     </div>



     <!-- 合作伙伴 -->
     <div class="container-fluid bg-primary img-5">
       <div class="container">
         <div class="row"> 
           <div class="col-md-8 col-md-offset-2" style="text-align: center;">
             <h2 style="margin: 20px;">合作伙伴</h2>
              <p>我们有众多合作伙伴</p>
           </div>
           <div class="row logo-list">
            <div class="col-lg-2"><a href="" class="logo1"></a></div>
            <div class="col-lg-2"><a href="" class="logo2"></a></div>
            <div class="col-lg-2"><a href="" class="logo3"></a></div>
            <div class="col-lg-2"><a href="" class="logo4"></a></div>
            <div class="col-lg-2"><a href="" class="logo5"></a></div>
 
          </div>
         </div>
       </div>
     </div>

     
    <!-- 超链接集合 -->
    <div class="container-fluid" style="background-color: rgb(228, 228, 228);">
      <div class="container" style="padding-top: 70px;margin-bottom: 70px;">
        <div class="row">
          <div class="col-md-3 col-md-6 col-sm-6 col-xs-6">
              <dt>公司</dt>
              <dd><a href="#">关于我们</a></dd>
              <dd><a href="#">公司招聘</a></dd>
              <dd><a href="">公司团队</a></dd>
              <dd><a href="">版权</a></dd>
              <dd><a href="">使用条款</a></dd>
              <dd><a href="">隐私政策</a></dd>
              <dd><a href="">联系我们</a></dd>
          </div>
          <div class="col-md-3 col-md-6 col-sm-6 col-xs-6">
              <dt>公司</dt>
              <dd><a href="#">关于我们</a></dd>
              <dd><a href="#">公司招聘</a></dd>
              <dd><a href="">公司团队</a></dd>
              <dd><a href="">版权</a></dd>
              <dd><a href="">使用条款</a></dd>
              <dd><a href="">隐私政策</a></dd>
              <dd><a href="">联系我们</a></dd>
          </div>
          <div class="col-md-3 col-md-6 col-sm-6 col-xs-6">
              <dt>公司</dt>
              <dd><a href="#">关于我们</a></dd>
              <dd><a href="#">公司招聘</a></dd>
              <dd><a href="">公司团队</a></dd>
              <dd><a href="">版权</a></dd>
              <dd><a href="">使用条款</a></dd>
              <dd><a href="">隐私政策</a></dd>
              <dd><a href="">联系我们</a></dd>
          </div>
          <div class="col-md-3 col-md-6 col-sm-6 col-xs-6">
            <dt>公司</dt>
            <dd><a href="#">关于我们</a></dd>
            <dd><a href="#">公司招聘</a></dd>
            <dd><a href="">公司团队</a></dd>
            <dd><a href="">版权</a></dd>
            <dd><a href="">使用条款</a></dd>
            <dd><a href="">隐私政策</a></dd>
            <dd><a href="">联系我们</a></dd>
          </div>
        </div>
      </div>
    </div>
 
    <!-- 底部 -->
    <div class="footer" style="background-color: rgb(50, 50, 50);">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6"><h5 style="color: white;">© 2017 Comlogo.All Rights Reserved.</h5></div>
          <div class="col-md-6">
            <div style="text-align: center;padding-top: 10px;">  <a href="#" >HOME</a> &nbsp; <a>ABOUT</a> &nbsp; <a>US</a> &nbsp; <a>FAP</a> &nbsp; <a>CONTACT US</a> &nbsp;</div>
          
          </div>
        </div>
      </div>
      
    </div>
    
    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
</body>

二、（css部分）

.footer{
    background-color:#101010 ;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
}
.jumbotron{
    background: url(../img2/bg.jpg) center center no-repeat;
    padding-top: 10px;
    padding-bottom: 0;
}
.navbar{
    margin-bottom: 0;
}
.bg-grap{
    background-color: rgb(240, 239, 239);
}
.bg-grap h2{
    margin: 45px;
}
.bg-grap .col-md-8{
    text-align: center;
}
.bg-grap .list-item{
    background: url(../img2/icons.png) left top  no-repeat;
    height: 112px;
    padding-left: 138px;
    margin-bottom: 20px;
}
.bg-grap .item-2{
    background-position:left -112px;
}
.bg-grap .item-3{
    background-position:left -224px;
}
.bg-grap .item-4{
    background-position:left -336px;
}
.bg-grap .item-5{
    background-position:left -448px;
}
.bg-grap .item-6{
    background-position:left -560px;
}
.logo-list a{
	display: block;
	width:200px;
	height:180px;
	background: url(../img2/logos.png) left top no-repeat;
	margin: 0 auto;
}

.logo-list .logo1{
	background-position: left -180px;
}
.logo-list .logo2{
	background-position: left -360px;
}
.logo-list .logo3{
	background-position: left -540px;
}
.logo-list .logo4{
	background-position: left -720px;
}
.col-lg-2{
    width: 20%

}

@media(max-width:1200px){
	.logo-list .col-lg-2{
		width:33%;
		float:left;
	}
}
@media(max-width:992px){
	.logo-list .col-lg-2{
		width:50%;
		float:left;
	}
}
@media(max-width:768px){
	.logo-list .col-lg-2{
		width:100%;
		
	}}
    

.footer a{
    color: white;
}
dt{
    margin-bottom: 8px;
}
dd a{
    color: gray;

}
dd{
    margin-bottom: 8px;
}
dt{
    font-size: 20px;
}
cat and cats
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实训第二天之bootstrap首页框架（一)
菜菜的博客
12-12 1125
\\首先填个坑，在标签中，如果不指定 type 默认submit
bootstrap学习笔记之初识bootstrap
01-19
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集，我们可以用bootstrap搭建出简洁，清新的网站或软件界面，有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了。...
bootstrap深蓝色响应式企业官网模板
04-29
bootstrap深蓝色响应式企业官网模板。非常好的资源，内含网站模板下载链接，大量网站模板免费下载。
Bootstrap总结
qq_63339311的博客
11-21 1356
Bootstrap感悟：二级目录三级目录 二级目录 三级目录
期末实训：Django+bootstrap实现登录注册和数据的增删查改
qq_59020329的博客
06-20 1293
目录一.登录注册界面的前后端逻辑（只上传了重要的代码部分）1.注册页面的验证（1）效果图（2）注册页面的前后端逻辑2.登录页面的验证（1）效果图（2）登录页面的前后端逻辑 二.主页页面1.主页页面响应式展示（1）效果图（2）页面的卡片数据渲染2.跳转添加页面和退出登录（1）效果图 （2）导航栏选项跳转三.添加卡片壁纸信息1.页面实现壁纸的添加（1）效果图（2） 添加壁纸的前后端逻辑四.编辑和删除壁纸1.更改壁纸信息（1）效果图 （2）更新页面的前后端逻辑（3）提交表单时的逻辑2.删除壁纸信息（1）效果图 （
bootstrap -- 学习总结
isfor_you的博客
01-26 1688
1.bootstrap简介 Bootstrap是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本 引入库（两种方法）： 1.外联引入 先将下载的三个css、jquery、js文件放入项目文件中，然后通过link和script标签分别引入文件 <link rel="stylesheet" type="text/css" href="assets/bootst
学校实训项目-简洁蓝色bootstrap单页.zip
08-31
学校实训项目-简洁蓝色bootstrap单页.zip
学校实训项目-国外Bootstrap设计公司网站模板.zip
09-04
学校实训项目-国外Bootstrap设计公司网站模板.zip
bootstrap基础知识学习笔记
09-01
主要针对bootstrap基础知识为大家整理了详细的学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap的使用手册及学习笔记.doc
12-21
Bootstrap是基于HTML5和CSS3开发的用于前端开发的工具包。关于Bootstrap的介绍和下载，大家可以去搜索查看。Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 的文件类型。
bootstrap总结与例子
08-02
对bootstrap常用的25个知识点进行了简单总结，附带总结文档与代码实例。总结文档月代码时一一对应的
基于bootstrap金融平台网站管理后台模板
02-08
这套是基于bootstrap的金融平台网站管理后台模板，界面简洁大方，支持响应式，分享给大家
课程设计报告
04-10
该课设包含了按照软件工程思想开发软件的流程，是关于二手书城的开发
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
Zhang_wang_yun的博客
04-05 5074
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
2021-06-23
qq_52819136的博客
06-23 163
#Java课程设计“论坛系统”前端 ##六个文件 error.html ；index.html;navigation.html; profile.html;publish.html;question.html. <!DOCTYPE HTML> <!--网页出现错误时的网页--> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>第一社区</title> <!
最好懂的 Bootstrap 实战案例教程
热门推荐
LakeYC的博客
03-07 6万+
我们每期会根据不用的项目案例安排不同的技术栈免费课程！免费！免费！免费！来帮助大家提高，有兴趣的同学可以私信我哦~ 所有项目都是以真实项目为实战例。 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是
web前端：企业官网响应式bootstrap一套代码跑三端，首页基本功能
cevent的博客
01-21 979
1.项目需求 编码工具 H-Builder less预处理css工具 Koala考拉 响应式框架 bootstrap3.0 javascript jQuery1.10及以上 需求js bootstrap.min.js、html5shiv.js、respond.min.js、jquery.min.js 轮播图尺寸推荐 1920px*1200px 自建脚本 cevent.less cevent.js 2.效果图 2.1PC端 2.2手机、pad端 2.3小功能 3
Bootstrap学习--基本模板
一尾流莺 半世情缘
08-06 219
Bootstrap引入方式的学习和基本的模板
前端简单入门第二十五讲 使用BootStrap开发出一个网站的首页
李阿昀的博客
01-07 1843
我们之前写过一个商城的首页，并且又使用DIV+CSS完成了网站首页的优化，现在我们使用BootStrap来再次优化这个商城首页。 仅适用于PC端的网站首页 我们一步一步来使用BootStrap来优化商城首页，先仅只考虑适用于PC端的商城首页，完整的首页代码如下。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset...
bootstrap实训作业
最新发布
01-04
在Bootstrap实训作业中，您可能会学习如何使用Bootstrap来创建漂亮的界面和交互效果，以及如何与后端数据库进行交互。 在实训过程中，您可能会学习以下内容： 1. 学习如何使用Bootstrap的网格系统来创建响应式布局...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值