精华内容
下载资源
问答
  • 如何用css实现网页footer的效果

    千次阅读 2017-02-22 12:08:06
    实现footer这个问题比较常见,基本上每个公司都会有自己的页脚来声明版权,来提供一些商务合作,或者说是联系方式,加入我们等。。 我之前也没有仔细思考过这个问题,以为就是在footer css当中设置一下bottom: 0 ...

           实现footer这个问题比较常见,基本上每个公司都会有自己的页脚来声明版权,来提供一些商务合作,或者说是联系方式,加入我们等。。

           我之前也没有仔细思考过这个问题,以为就是在footer css当中设置一下bottom: 0 就可以了,但是今天亲自实践了才发现,有以下几种情况:

         (1)如果footer所在的div没有父级div,footer的定位为absolute直接设置bottom: 0就可以实现footer,但是当内容超过屏幕的高度的时候,超过屏幕高度的内容就在footer的下面了。这里如果footer的定位为relative会与absolute有区别,而如果是static定位的话,浏览器会忽略left,right,top,bottom。

        (2)如果footer所在的div有父级div,而父级div如果是static,footer定位是absolute会直接忽视掉父级div,就与上面(1)相同了,因为absolute只会相对父级是absolute和relative而定位。如果父级是absolute和relative,而没有设置父级的最小高度为100%的时候,footer就会在父级div的最下方,可能是最下面,也可能在中间,视父级的内容而定。

    直接上源码:

    <!Doctype>
    <meta charset="utf-8">
    <html>
    <head>
    <title>footer</title>
    <style>
    html,body {
      margin: 0;
      padding: 0;
    }
    
    #container {
      position: relative;
      min-height: 100%;  //这里很重要
      height: 100%; /*ie6不识别min-height*/
      padding-bottom: 100px;
      box-sizing: border-box;
    }
    
    #content {
      margin: 0 auto;
      width: 100%;
    }
    
    #footer {
      position: absolute;
      width: 100%;
      height: 100px;
      bottom: 0;
      text-align: center;
    }
    </style>
    </head>
    <div id="container">
      <div id="header">导航部分</div>
      <div id="content" class="clearfix">页面内容部分</div>
      <div id="footer">页脚部分</div>
    </div>
    </html>

    注意这里设置父级样式的时候指定了padding-bottom,就是为了给footer留下预留位置,这样就可以实现footer效果了。

    展开全文
  • HTML5 +粘性踏板 一个简单HTML5模板,其中包含一个页脚。 专为那些需要粘贴页脚的小型网页而设计。 只需在CSS中调整body和footer高度标签的下距底部即可满足您的需求。
  • /*基本样式*/ * { margin: 0; padding: 0; -moz-box-sizing: border-box;...其他栏目 页脚区域 标签:box,flex,网页,moz,HTML5,ms,webkit,display,模板 来源: https://blog.csdn.net/sakenc/article/details/91490108

    311c55ce2b1e74baba148d1f5b6210dd.png

    /*基本样式*/

    * {

    margin: 0;

    padding: 0;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    html, body {

    height: 100%;

    color: #fff;

    }

    body {

    min-width: 100%;

    }

    header, section, article, nav, aside, footer {

    display: block;

    text-align: center;

    text-shadow: 1px 1px 1px #444;

    font-size: 1.2em;

    }

    /*页眉框样式:限高、限宽*/

    header {

    background-color: hsla(200,10%,20%,.9);

    min-height: 100px;

    padding: 10px 20px;

    min-width: 100%;

    }

    /*主体区域框样式:满宽显示*/

    section {

    min-width: 100%;

    }

    /*导航框样式:固定宽度*/

    nav {

    background-color: hsla(300,60%,20%,.9);

    padding: 1%;

    width: 220px;

    }

    /*文档栏样式*/

    article {

    background-color: hsla(120,50%,50%,.9);

    padding: 1%;

    }

    /*侧边栏样式:弹性宽度*/

    aside {

    background-color: hsla(20,80%,80%,.9);

    padding: 1%;

    width: 220px;

    }

    /*页脚样式:限高、限宽*/

    footer {

    background-color: hsla(250,50%,80%,.9);

    min-height: 60px;

    padding: 1%;

    min-width: 100%;

    }

    /*flexbox样式*/

    body {

    /*设置body为伸缩容器*/

    display: -webkit-box; /*老版本:iOS 6-, Safari 3.1-6*/

    display: -moz-box; /*老版本:Firefox 19- */

    display: -ms-flexbox; /*混合版本:IE10*/

    display: -webkit-flex; /*新版本:Chrome*/

    display: flex; /*标准规范:Opera 12.1, Firefox 20+*/

    /*伸缩项目换行*/

    -moz-box-orient: vertical;

    -webkit-box-orient: vertical;

    -moz-box-direction: normal;

    -moz-box-direction: normal;

    -moz-box-lines: multiple;

    -webkit-box-lines: multiple;

    -webkit-flex-flow: column wrap;

    -ms-flex-flow: column wrap;

    flex-flow: column wrap;

    }

    /*实现stick footer效果*/

    section {

    display: -moz-box;

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-flex: 1;

    -moz-box-flex: 1;

    -ms-flex: 1;

    -webkit-flex: 1;

    flex: 1;

    -moz-box-orient: horizontal;

    -webkit-box-orient: horizontal;

    -moz-box-direction: normal;

    -webkit-box-direction: normal;

    -moz-box-lines: multiple;

    -webkit-box-lines: multiple;

    -ms-flex-flow: row wrap;

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    -moz-box-align: stretch;

    -webkit-box-align: stretch;

    -ms-flex-align: stretch;

    -webkit-align-items: stretch;

    align-items: stretch;

    }

    /*文章区域伸缩样式*/

    article {

    -moz-box-flex: 1;

    -webkit-box-flex: 1;

    -ms-flex: 1;

    -webkit-flex: 1;

    flex: 1;

    -moz-box-ordinal-group: 2;

    -webkit-box-ordinal-group: 2;

    -ms-flex-order: 2;

    -webkit-order: 2;

    order: 2;

    }

    /*侧边栏伸缩样式*/

    aside {

    -moz-box-ordinal-group: 3;

    -webkit-box-ordinal-group: 3;

    -ms-flex-order: 3;

    -webkit-order: 3;

    order: 3;

    }

    页眉区域

    1.主体内容区域

    2.导航栏

    3.其他栏目

    页脚区域

    标签:box,flex,网页,moz,HTML5,ms,webkit,display,模板

    来源: https://blog.csdn.net/sakenc/article/details/91490108

    展开全文
  • 纯静态网站模板封装header和footer

    千次阅读 2019-08-18 00:30:49
    前后端分离的网站模板,如果不用任何渲染引擎,能否封装公共的header和footer(或其它html公共代码呢)? 答案是肯定的,因为jQuery有一个函数叫 load ,可以在浏览器绘制页面之前加载完整的 html 页面。所以,当前...

    前后端分离的网站模板,如果不用任何渲染引擎,能否封装公共的header和footer(或其它html公共代码呢)?

    答案是肯定的,因为jQuery有一个函数叫 load ,可以在浏览器绘制页面之前加载完整的 html 页面。所以,当前页面必须要先加载jQuery框架,即你的script标签加载顺序需要注意。

    示例代码如下:

    index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="style/cms-PC.css" rel="stylesheet">
        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
        <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
    <!-- header -->
    <div class="headerpage"></div>
    
    <div class="main container">
        <!-- 首页其它渲染 -->
    </div>
    
    
    <!--footer-->
    <div class="footerpage"></div>
    
    <!-- fixed QQ 返回顶部 -->
    <div class="fixedQQpage"></div>
    
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/utils/common.js"></script>
    <script src="js/utils/request.js"></script>
    <script src="js/index.js"></script>
    </body>
    </html>
    

    header.html

    <nav class="navbar navbar-default navbar-fixed-top" id="nav">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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 class="dropdown-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="../navbar/">Default</a></li>
                    <li><a href="../navbar-static-top/">Static top</a></li>
                    <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
    

    footer.html

    <footer>
        <div class="container container-top">
            <div class="row">
                <div class="col-sm-3 creator">
                    <div class="creator-title">Created by</div>
                    <a href="https://notainc.com" target="_blank"><img class="creator-logo" src="images/test-2.jpg"></a>
                </div>
                <div class="col-sm-9">
                    <ul class="menu">
                        <li><a href="/product">Home</a></li>
                        <li><a href="/pricing">Pricing</a></li>
                        <li><a href="/contact">Contact</a></li>
                        <li><a href="http://www.notainc.com" target="_blank" rel="noopener">About us</a></li>
                        <li><a href="/privacy">Privacy</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container container-bottom">
            <div class="row">
                <div class="col-xs-6 container-bottom-col">© 2019 Nota Inc.</div>
                <div class="col-xs-6 container-bottom-col">
                    © 2019 Nota Inc.
                </div>
            </div>
        </div>
    </footer>

     

    展开全文
  • 网页布局模板——直接使用

    千次阅读 多人点赞 2020-07-08 15:32:05
    1.命名 1.头部区域——header ...4.底部区域——footer 底部区域在网页的最下方,一般包含版权信息和联系方式等。 2.id和class 用class比较多。 3.制作导航栏 方法一: <!DOCTYPE html> <html lang="en">

    1.命名

    1.png

    1.头部区域——header

    头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo。

    2.菜单导航栏——topnav

    菜单导航条包含了一些链接,可以引导用户浏览其他页面。

    3.内容区域

    column——专栏

    sidemenu——侧边栏目

    4.底部区域——footer

    底部区域在网页的最下方,一般包含版权信息和联系方式等。

    2.制作导航栏

    样式一:

    3.png

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <style>
      * {
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
      }
    
      .topnav {
        margin: 0px 150px;
        background-color: #777777;
        overflow: hidden;  /*清除浮动,否则会父级坍塌*/
      }
    
      .topnav ul {
        list-style-type: none;
      }
    
      .topnav ul li a {
        float: left;
        padding: 15px;
        text-decoration: none;
        color: white;
      }
    
      .topnav ul li a:hover {
        background-color: black;
      }
    
      .topnav ul li a.active {
        background-color: #4CAF50;
      }
    </style>
    
    <body>
      <div class="topnav">
        <ul>
          <li><a href="#home" class="active">主页</a></li>
          <li><a href="#news">新闻</a></li>
          <li><a href="#contact">联系我们</a></li>
          <li><a href="#about">关于我们</a></li>
        </ul>
      </div>
      
    </body>
    
    </html>
    

    样式二:

    批注 2020-07-09 225614.png

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          padding: 0px;
          margin: 0px;
        }
    
        body {
          font-family: sans-serif;
          font-size: 16px;
          background-color: #DEDEDE;
        }
    
        .topnav {
          background-color: #333333;
          overflow: hidden;
        }
    
        .topnav img {
          float: left;
          width: 50px;
          height: 50px;
          margin: 10px 30px;
        }
    
        .topnav .topmenu {
          list-style-type: none;
          float: right;    /*集体向右浮动*/
        }
    
        .topnav .topmenu li {
          float: left;     /*左浮动*/
        }
    
        .topnav .topmenu li a {
          text-decoration: none;
          color: white;
          display: inline-block;
          line-height: 70px;    /*达到居中的效果*/
          margin-right: 20px;
        }
    
        .topnav .topmenu li a:hover {
          opacity: 0.5;   
        }
      </style>
    </head>
    
    <body>
      <div class="topnav">
        <img src="../../images/1.jpg" alt="">
    
        <ul class="topmenu">
          <li><a href="#">导航链接一</a></li>
          <li><a href="#">导航链接二</a></li>
          <li><a href="#">导航链接三</a></li>
          <li><a href="#">导航链接四</a></li>
        </ul>
      </div>
      </body>
      </html>
    

    4.内容区域划分

    更多:CSS 网页布局——链接

    展开全文
  • 作为网页设计师,你的作品就是你专业水平的最好体现方式。所以,无论是参加面试还是个人作品展示,你的网页模型是否能让人眼前一亮,是否能在交互设计或视觉设计方面突出任何一点的优势,是你取得面试机会和赢得客户...
  • 浪漫爱心表白网页模板

    千次阅读 2019-10-17 21:53:29
    <!DOCTYPE HTML> <... <head> <title>某某,我爱你 浪漫爱心表白网页模板一 </title> <meta name="keywords" content="表白网页在...
  • 这篇文章不是关于标签的具体使用,而是对网页模板的一些理解。包括基本的标签语法,封面模板,列表模板和文档模板的关系。一 关于标签dedecms标签:就像html标签,不过是织梦自定义的,由标签名,属性,和InnerText...
  • wap网页通用模板

    2015-10-29 17:23:05
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td , footer {margin:0;padding:0;} html {-ms-text-size-
  • css网页布局模板

    2019-06-21 14:04:00
    .footer { padding : 20px ; text-align : center ; background : #ddd ; margin-top : 20px ; } /* 响应式布局 - 屏幕尺寸小于 800px 时,两列布局改为上下布局 */ @media screen and ...
  • 例如: 了header.html /p> "http://www.w3.org/TR/html4/strict.dtd">[% title %] Banner footer.html Last update: [%- USE date -%] [%- date.format(date.now, '%Y-%m-%d %H:%M:%S') -%] aboutus.html [%- ...
  • 抗疫感动致敬逆行者学生网页设计作品网页作品介绍作品首页截图作品代码展示作品下载地址 网页作品介绍 抗击疫情致敬逆行者感人类题材网页设计作品采用DIV CSS布局制作,共8个页面:网站首页、感动人物、动人瞬间、...
  • Page With Footer Page Without Sidebar Page With Right Sidebar Page With Minified Sidebar Page With Two Sidebar Page Full Height Page With Simple Line Icons Page With Ionicons Page With Light ...
  • 应用网页模板* {margin:0px;padding:0px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}html,body {width:100%;background:#fff;}body {min-width:100%;}header,section,nav,...
  • dedecms网页模板编写

    2015-08-20 15:24:17
    这篇文章不是关于标签的具体使用,而是对网页模板的一些理解。包括基本的标签语法,封面模板,列表模板和文档模板的关系。 一 关于标签 dedecms标签:就像html标签,不过是织梦自定义的,由标签名,属性,和...
  • HTML5应用网页模板

    2018-11-23 22:12:31
    <title>HTML5应用网页模板 页眉区域 <article>1.主体内容区域 <nav>2.导航栏 <aside>3.其他栏目 <footer>页脚区域</footer> CSS代码: @CHARSET "UTF-8"; /*基本样式*/ *{/*重置所有标签...
  • ─ firends.jpg │ │ ├── fj1.png │ │ ├── fj2.png │ │ ├── fj3.png │ │ ├── footer_bg.gif │ │ ├── footer_logo.gif │ │ ├── fuhuo.png │ │ ├── header.jpg │ ...
  • OnceIO是OnceDoc企业私有内容(网盘)管理系统的底层Web框架,它可以实现模板文件、静态文件的全缓存,运行起来完全不需要I/O操作,并且支持客户端缓存优化,GZIP压缩等(只压缩一次),拥有非常好的性能,为您节约...
  • 用ejs写网页模板

    万次阅读 2017-06-16 20:23:55
    今天试着用ejs模板引擎写一些页面,虽然ejs写页面与平时html写页面基本一样,但是为了方便,一些...所以用一个模板做好头部与脚部,中间部分引入就可以了。layout.ejs//layout.ejs 模板页面 <!DOCTYPE html> <head>
  • 这篇文章不是关于标签的具体使用,而是对网页模板的一些理解。包括基本的标签语法,封面模板,列表模板和文档模板的关系。 一 关于标签 dedecms标签:就像html标签,不过是织梦自定义的,由标签名,属性,和...
  • 简洁的静态网页模板

    千次阅读 2020-08-19 16:55:37
    模板效果: 目录结构: Website >css style.css >fonts (字体图标存放目录) >img(图片存放目录) about.html contact.html index.html index.html代码 <!DOCTYPE html> <...
  • 在thinkPHP的手册的模板里面有模板继承,模板继承的优势其实是设计基础模板中的区块(block)和子模板中替换这些区块 具体如下: 每个区块由标签组成。下面就是基础模板中的一个典型的区块设计(用于设计网站标题...
  • 如何实现JSP网页模板 JSP网页母版

    千次阅读 2016-02-02 21:47:07
    通常情况下,我们的解决办法就是使用网络模板。其实很简单就是用来一个标签,将重复使用的代码写到一个页面上,然后将其引用过来。 实例: main.jsp:    Template Page Sample          
  • 网页模板pug基本语法

    千次阅读 2018-09-01 14:30:33
    Pug – robust, elegant, feature rich template engine ...与hexo默认模块ejs一样,pug也是一个模板引擎,可用于快速的网站开发,当然也可以用于静态博客网站的设计。本站点现时所用主题manupassant也使用了pug。 ...
  • var footerA=document.getElementsByClassName("footer")[0] var tablist=document.getElementsByTagName("li") window.οnscrοll=function(){ var scrolltop=document.documentElement.scrollTop||document.body....
  • <%= render :partial =>...如果模板是整版,比如带header footer的这种,首先在要自己添加代码的地方加上; 然后在需要添加模板的controller中加入render:layout => '对应模板' 转载于:https://www.cnb...
  • 我是主体 {/block} {* 尾部 *} {block name="footer"} {$smarty.block.parent} ,我是尾部 {/block} 三、.layout.html模板页面{block name="title"}模板继承案例{/block} {block name="header"} 1.你好 {/block} {...
  • HTML5 应用网页模板

    千次阅读 2019-06-12 09:52:30
    <!DOCTYPE HTML> <title></title> ... header, section, article, nav, aside, footer { ... footer { ... /*实现stick footer效果*/ ... <article>1.... <nav>2.... <aside>3.... <footer>页脚区域</footer>  

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,953
精华内容 3,581
关键字:

网页footer模板