资讯详情

Web前端笔记三(结合Bootstrap)

结合以前的知识,可以简单地实现web网页,效果如下: 在这里插入图片描述 代码如下:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style> body{ 
          margin:0; } .container{ 
          width:1260px; margin-left:auto; margin-right:auto; } img{ 
          width:100%; height:100%; } .site-top{ 
          background-color:black; height:40px; } .site-top .menu{ 
          color:white; float:left; } .site-top .account{ 
          color:white; float:right; } .site-top a{ 
          color:white; line-height:40px; display/span>:inline-block; margin-right:12px; } .site-header{ 
           height:100px; } .site-header .logo{ 
           width:200px; height:100px; float:left; } .site-header .logo a{ 
           margin-top:22px; display:inline-block; } .site-header .logo a img{ 
           height:56px; width:56px; } .site-header .menu-list{ 
           float:left; height:100px; } .site-header .menu-list a{ 
           display:inline-block; line-height:100px; padding:0px 7px; color: #333; font-size: 16px; text-decoration:none; } .site-header .menu-list a:hover{ 
           color: red; text-decoration:none; } .site-header .search{ 
           height:100px; float:right; } .slide .slide-img{ 
           width:1260px; height:480px; } .row{ 
           margin-top:14px; } .row .channel-list{ 
           width:260px; height:200px; background-color:#5f5750; } .row .channel-list .item{ 
           height:92px; width:86px; float:left; text-align:center; } .row .channel-list .item a{ 
           font-size:12px; display:inline-block; padding-top:22px; color:#fff; text-decoration:none; opacity:.5; } .row .channel-list .item a:hover{ 
           opacity:1; } .row .channel-list .item img{ 
           height:30px; width:30px; display:block; margin:0 auto 6px; } .row .list{ 
           width:310px; height:200px; margin-left:20px; } .left{ 
           float:left; } .tool-bar{ 
           position:fixed; width:60px; height:60px; border:1px solid red; right:10px; bottom:50px; } .app{ 
           position:relative; } .app .download{ 
           display:none; position:absolute; height:100px; width:100px } .app:hover .download{ 
           display:block; } </style> </head> <body> <div class="header"> <div class="site-top"> <div class="container"> <div class="menu"> <a>小米商城</a> <a>MIUI</a> <a>云服务</a> <a>小爱开放平台</a> <a>企业团购</a> <a class="app">下载app <div class="download"> <img src="/static/download.png" alt=""> </div> </a> </div> <div class="account"> <a>登录</a> <a>注册</a> <a>购物车</a> </div> <div style="clear:both"></div> </div> </div> <div class="site-header"> <div class="container"> <div class="logo"> <a href="https://www.mi.com/index.html" > <img src="/static/logo-mi2.png" alt=""> </a> </div> <div class="menu-list"> <a>Xiaomi手机</a> <a>Redmi红米</a> <a>电视</a> <a href="https://www.mi.com/service" target="_blank">服务中心</a> </div> <div class="search"></div> <div class="clear:both"></div> </div> </div> </div> <div class="slide"> <div class="container"> <div class="slide-img"> <img src="/static/xiaomi12.jpg" alt=" "> </div> </div> </div> <div class="row"> <div class="container"> <div class="channel-list left"> <div class="item"> <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search" target="_blank"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"> <span>保障服务</span> </a> </div> <div class="item"> <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search" target="_blank"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"> <span>保障服务</span> </a> </div> <div class="item"> <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search" target="_blank"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"> <span>保障服务</span> </a> </div> <div class="item"> <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search" target="_blank"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"> <span>保障服务</span> </a> </div> <div class="item"> <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search" target="_blank"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"> <span>保障服务</span> </a> </div> <div class="item"> <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search" target="_blank"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"> <span>保障服务</span> </a> </div> <div class="clear:both"></div> </div> <div class="list left"> <img src="/static/list1.jpg" alt=" "> </div> <div class="list left"> <img src="/static/list2.jpg" alt=" "> </div> <div class="list left"> <img src="/static/list3.jpg" alt=" "> </div> <div class="clear:both"></div> </div> </div> <div class="tool-bar"> </div> </body> </html> 

可见上面页面的实现,设置了很多的css样式。而现在前端有很多成熟的组件css样式可以使用,本篇结合Bootstrap,实现了一个web页面,包含表单,导航条,表格等,且不再设置很多css样式,只需要将BootStrap在项目中引用,在需要对应组件时,可以直接通过class引用,如下:

<link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">

且很多css样式可以在Bootstrap的网站中有样例,我们可以复制过来稍作修改,就可以实现我们想要的效果。Bootstrap网站:https://v3.bootcss.com/,在导航条选中全局css样式,即进入css样式示例页面。 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <style> .login{ 
          width:400px; border:1px solid red; height:400px; margin-left:auto; margin-right:auto; padding:18px 40px; } .login h2{ 
          text-align:center; } img{ 
          width:60px; height:60px; } .bs-example{ 
          margin-top:10px; } </style>
</head>
<body>
  <!-- 导航条示例-->
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- 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>
          <a class="navbar-brand" href="#">华为品牌</a>
        </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"><a href="#">华为专区 <span class
        标签: 7jb4继电器3th2040

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

锐单商城 - 一站式电子元器件采购平台