整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

web前端布局HTML+CSS

web前端布局HTML+CSS

、W3C标准

万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南。 http://www.w3school.com.cn/

 规范是一种态度

2、页面布局

2.1 布局元素

 position定位:

  • absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  • fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  • relative 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
  • static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
  • inherit 规定应该从父元素继承 position 属性的值。

们在设计网站的时候,有时候为了体现出别具一格的风格,往往会设计出一些特殊的风格。这里就举一个比较常见的例子 —— 倾斜的背景颜色。

在CSS中,没有某一个属性能够直接实现倾斜的背景颜色,而是需要通过一些“手段”来实现。最常想到的方案就是在内容的底部放置一个div,给这个div设定一个背景颜色,然后让这个div倾斜一个角度,从而实现倾斜的背景颜色。比如像下图所示的案例:

那么下面就来用一个基本的实例来解释并实现倾斜背景的效果:

首先要说明一下,页面导航条是固定在页面顶部的,导航条不会随着页面的滚动而移动。这个效果的实现非常简单,就是利用了 position 这个属性的 fixed 值来实现的。

我下面的代码实例中,HTML用来给页面上添加元素,而在 CSS 部分需要精细化的设定属性的参数值,而且需要若干个HTML标签的CSS来配合,从而实现倾斜背景的效果。所以我在CSS代码部分用了比较多的注释来描述这些属性的效果和目的,大家在阅读的时候可以将 CSS 结合着 HTML 一起来理解。或者可以直接拿我的这个实例作为一个模板来使用。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="navbar-bg">
        <ul class="navbar">
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item sign">
                <a href="https://www.baidu.com">Sign</a>
            </li>
        </ul>
    </div>

    <div class="box-bg">
        <div class="box">
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
        </div>
    </div>

    <div class="content">
        <h1>This is content</h1>
    </div>

    <div class="footer">
        <div class="footer-bg">
            <ul class="list">
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>

为了让导航条和其他元素都能够与页面的两边留出距离,我在实际内容标签的外围又包裹了一层div,主要在这个包裹的div里设定左右内间距,从而实现两边留白的效果。这些外围包裹的 div 的 class 名称一般都会有一个后缀 "-bg"

在实际内容的排列时,我采用了更加方便灵活的弹性布局,这样会相对的减少HTML和CSS的代码量。

另外,如果想要实现倾斜的背景颜色,那么这些带有 bg 后缀的 div 就是需要倾斜的标签。倾斜这些 div 其实很简单,只需要设定一个 transform: skew(0deg, -9deg) 这样的CSS代码即可,但是我们可以想象一下,原本是长方形的 div 按照 Y 轴逆时针旋转了一个弧度(-9deg)后,它会变成一个平行四边形,这个平行四边形是左边低右边高。这样就会露出它后面的白色的 body 的部分。所以这种玩法麻烦的地方就是如何通过多个 CSS 属性的配合来遮住露出的白色的body部分。下面就来看一下这个HTML对应的 CSS 代码部分。

在大家阅读 CSS 的代码之前,我给出一个原理图来解释一下其中的原理:

当外围的 div 倾斜了之后,就需要把内容部分的div的上部的内间距增大,以此来遮住平行四边形的左侧露出的白色区域。这是页面上部区域的原理。

那么页面底部也同样需要实现这样倾斜背景颜色的设计,这样才能将风格一致,产生美感。原理还是这个原理图所示的逻辑,不同的地方在于,底部最外围的 div 不倾斜,而是需要两个属性,height 和 overflow-y,并且这个 div 不能带有背景颜色。它们的作用是当它里面的内容超出这个 div 的区域时就不显示,这样就会让上图中蓝色的平行西变形的左下角区域被红色的框线裁剪掉,从而让这个div 乖乖的呆在页面的底部。而这个 div 里面一层的 div 需要让它倾斜,而且还带有一个背景颜色。这样组合出来的效果就是一个看似是左右两边是竖线,下部是横线,只有上部是斜线的带有背景颜色的四边形,这个四边形里面是实际的页面内容。

最终的样子在这篇 CSS 代码的最后展示出来了。

CSS

了美化网站,我在网站上面添加了一个HTML悬浮音乐播放器,先来看看一下效果图。

如何在自己的网站上添加HTML悬浮音乐播放器呢?今天和你们分享

首先申明三点:

1、本播放器实际上是调用网易云音乐的音乐进行播放,音乐版权归网易云音乐所有,仅供个人学习研究,用于商用的后果自负!

2、本播放器的演示效果可以在我的博客首页看到,默认支持所有Html和PHP环境的网站。

3、本播放器可以使用电脑、手机、IPAD等设备访问,自适应。)


具体的操作方法:

在网站源文件中(如果有单独的页脚文件,也可以放在页脚文件里面)添加这三行代码:

<!--音乐播放器-->

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<script src="https://myhkw.cn/player/js/player.js" id="myhk" key="demo" m="1"></script>


然后保存发布,在浏览器刷新网页就看到效果了