七小时带你入门HTML+CSS网页设计，编写网页代码的思路（三）

一篇文章中我分享了一段图文标签，这篇文章主要给大家详细解释一下这些代码的作用和意义，以及编写网页代码的格式与思路。

下面我贴上html代码：

<!--HTML-->
<div>
<h2>这是我的第一个网页</h2>
<p>BODY标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这里我写了一段文字，它就会在浏览器里显示出来。这些就构成了我们网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。</p>
<p><img src="http://www.hmttv.cn/uploadfile/2024/0806/20240806104803445.png"></p>
</div>

从代码当中可以发现，所有的标签内容都被一个div标签所包含着，div属于组合块级元素，常用来区分不同的区域或模块，它可以是独立的，可分割的，它有自动换行的属性，但你可以通过使用css来给它定义样式或布局。

h2属于标题标签，从h1到h6都可以自定义，一般网页的标题或者需要着重表现的都可以用，p标签表示段落或者一段文字介绍，img标签表示页面中的图像，你可以直接引入图片地址，注意，它是一个单标记。

那么知道了这些标签的意义，我们就可以根据自己实际的需求给这段html代码定义css样式，

首先，我想给整个区域限制一个高度和宽度，那么我们就应该这样写：

<style type="text/css">
div {
 width: 300px; /*这里给个300像素的宽度*/
}

... /*未完待续*/

</style>

如果想加入其他的样式可以继续定义，如：添加一个背景颜色，添加一个内边距或外边距。

div {
 width: 300px; /*这里给个300像素的宽度*/
 background: #f2f2f2; /*这里给一个灰色的背景*/
 padding: 20px; /*这里给一个20像素的内边距*/
 margin: 20px; /*这里给一个20像素的外边距*/ 
}

注意：内边距的意思就是一个独立的区块或者标签往内部扩展距离，外边距就是往外部扩展距离，新入门的同学这里容易搞混。

接下我们定义标题，标题比较简单，比如，给它一个20像素的大小，标题颜色为红色，需要让它居中，那么就应该这样写：

h2 {
 font-size: 20px; /*这里给个20像素的字体大小*/
 color: #ff0000; /*这里给一个红色的字体颜色*/
 text-align: center; /*让它居中*/
}
```

文字介绍和标题差不多，就是字体小一点，注意的是需要给段落定义一个行高，调整段落之间的间隔。

p {
 font-size: 14px; /*这里给个14像素的字体大小*/
 color: #333; /*这里给一个黑色的字体颜色*/
 line-height: 24px; /*这里给一个24像素的行高*/
}

最后图片就更简单了，直接让它自适应宽度，跟随div，设置一个100%。

img {
	width: 100%;
}

一个简单的网页代码和设计思路就这样完成了，如果你懂了这些代码的作用和意义，那么恭喜你，你就基本入门了，因为所有的网页代码基本都是按照这种格式和思路编写的。下一篇给大家继续介绍其他常用的html+css标签以及实战演示，谢谢观看！！！

用wordpress开发主题的时候，经常避免不了要写各种样式的按钮，下面记录一下用按钮样式的写法，以后用的时候直接拿来即可。

HTML和CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0; padding: 0;}
.container{
margin: 0 auto;
padding-top: 30px;
width: 1000px;
}
.btn{
display: inline-block;
padding: 0 30px;
width: auto;
height: 35px;
font: 14px/35px 'microsoft yahei';
color: #fff; border: 0;
border-radius: 3px;
text-align: center;
cursor: pointer;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.blueBtn{
background: #5dcbff;
} /*蓝色按钮*/
.blueBtn:hover{
background: #40b6ee;
}
.orangeBtn{
background: #ff5700;
}/*橙色按钮*/
.orangeBtn:hover{
background: #e25d18;
}
.violetBtn{
background: #6680ff;
}/*紫色按钮*/
.violetBtn:hover{
background: #425de0;
}
.grayBtn{
background: #999;
}/*灰色按钮*/
.grayBtn:hover{
background: #7f7f7f;
}
</style>
</head>
<body>
<div class="container">
<span class="btn blueBtn">蓝色按钮</span>
<span class="btn orangeBtn">橙色按钮</span>
<span class="btn violetBtn">紫色按钮</span>
<span class="btn grayBtn">灰色按钮</span>
</div>
</body>
</html>

表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼，国务院今天发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使馆下半旗致哀，全国停止公共娱乐活动，4月4日10点开始，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。

想到以往默哀日访问网站时发现整站会变成全灰，即想到如果立即开始开发、设计图修改等工作也会消耗大量的时间与精力，那会不会有css可以直接处理所有的元素将他们变灰，随即想到了css3的filter（滤镜），并也证实了这一想法的可行性。

filter: grayscale 使用可以调整元素的灰度值

.gray-filter {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
复制代码

实战

以B站为例：

在正常的情况下B站这个导航栏滑到下面之后是fixed在页面的顶部的

但假如你把这段css加到了body上会发生下面这种情况：

你可以发现它不再固定在页面的顶部了，而是超出去了屏幕外面，屏幕左下角的小电视人也跑到了页面上半部分去，为什么会发生这样的情况呢？

我去Google查阅了相关资料，发现:

对于指定了 filter 样式且值不为 none 时，被应用该样式的元素其子元素中如果有 position 为 absolute 或 fixed 的元素，会为这些元素创建一个新的容器，使得这些绝对或固定定位的元素其定位的基准相对于这个新创建的容器。

我们可以联想出fixed是相对于html根容器来定位的，如果在body上设置了filter则会创建一个新的定位基准，而页面滚动时将body滚动出了屏幕外，则body内所有子孙元素的fixed将产生不符合预期的效果。

如何解决呢？

解决方案1

影响全站的方法我们可以将该样式应用到根元素html上，即使创建了新的定位基准元素，也不会对子孙元素产生不符合预期的影响。

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
复制代码

效果：

解决方案2

非全站变灰我们可以将需要使用filter的元素单独加上


<html>
    <body>
        <div class="gray-filter"></div>
    </body>
</html>

<style>
.fixed {
    position: fixed;
    top: 100px;
    left: 100px;
    height: 100px;
    width: 100px;
    background-color: #f00;
}
.gray-filter {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
</style>
复制代码

兼容IE的办法

很多小伙伴评论说IE低版本不支持该怎么办于是我Google搜索了一下是有实现办法的实现办法是引入grayscale.js，Demo下载 grayscale.js Demo

简单查看了该js的源码后发现会将color、background-color、borderColor等属性提取出来后替换成灰色，background-image和图片会使用canvas绘制处理成灰色再替换成处理后的图片源

demo内functions.js则是对判断浏览器userAgent来识别浏览器类型与版本，做出对应的处理

参考资料地址：http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11/

小程序下的问题

微信小程序我尝试加在page上但是fixed还是失效了，只能使用第二种方法去加样式，大家如果有解决方案可以评论提出来大家一起讨论一下~

CSS3 filter MDN 地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

整合营销服务商