HTML+CSS网页设计，企业网站服务项目布局样式

家好，本篇文章分享企业网站服务项目的布局样式，这种布局样式通常用于企业网站首页，企业可以向客户提供的服务内容，不同类型的企业服务项目样式也不同，这只是其中一种。

效果图：

服务项目

HTML代码：

<div class="tui-005">
 <div class="tui-wp">
 <ul>
 <li>
 <img src="a96.png">
 <h3>设计简约</h3>
 <p>没有多余的功能与复杂的样式，设计简约而又不失便捷实用，让用户拥有良好的视觉体验和操作习惯。</p>
 </li>
 <li>
 <img src="b96.png">
 <h3>简单实用</h3>
 <p>程序以简单、实用为主，采用标准HTML5响应式开发，让网站自动适应用户终端设备如：PC、手机、平板等。</p>
 </li>
 <li>
 <img src="c96.png">
 <h3>定制开发</h3>
 <p>提供一站式开发服务，从网站前端制作、视觉设计、到程序开发、运营维护，让我们的工作能够顺利进行。</p>
 </li>
 </ul>
 </div>
</div>

CSS代码分析：

首先定义整个布局的宽度为1200像素，并居中显示

.tui-005 .tui-w {
	width: 1200px;
	margin: 0 auto;
}

板块使用flex布局,让板块位于各行之间留有空白的容器内

.tui-005 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

让每个板块宽度为360px，居中显示，并配置边框阴影

.tui-005 li {
	position: relative;
	background: #fff;
	padding: 80px 60px;
	cursor: pointer;
	width: 360px;
	box-sizing: border-box;
	text-align: center;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, .1);
}

最后配置服务项目的标题、简介和图片

.tui-005 h3 {
	font-size: 20px;
	color: #333;
	font-weight: 700;
	margin: 25px 0;
}
.tui-005 p {
	font-size: 13px;
	color: #999;
	line-height: 25px;
}
.tui-005 img {
	width: 96px;
	border-radius: 100%;
}

当然，布局的方式有很多种，这只是其中一个方法，也欢迎大家留言分享一下其他的布局方式，一起学习HTML+CSS网页设计。

每一个特定或者特殊的日子里，几乎所有的网站都变成了灰色，那么这种效果是怎么实现的呢？

今天就来简单的实现一下这样的效果。

添加以下全局CSS样式，可以实现此效果：

代码一：

html {
  -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
} 
<!-- 可以是整个网站变成灰色的  -->

实现网页颜色变灰这个效果，非常简单：

filter: grayscale(100%);

这样一段代码即可实现，放在html和body的css属性里即可实现。

意思是修改所有的颜色为黑白 (100% 灰度):

灰色网站会加入这段代码，你可以按F12，把这段源码删除，即可变成彩色

代码二：

html { 
   filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); 
}

使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。

如果网站没有使用CSS，可以在网页/模板的HTML代码<head>和</head> 之间插入：

<style>
   html{
     filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1);
  }
</style>

有一些站长的网站可能使用这个css 不能生效，是因为网站没有使用最新的网页标准协议：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

请将网页最头部的<html>替换为以上代码。

有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的<object …>和</object>之间插入：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

最简单的把页面变成灰色的代码是在head 之间加

<style type="text/css"> 
html {
   FILTER: gray
}
</style>

代码三：

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,#grayscale"); 
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
-webkit-filter: grayscale(1);
}

总结：

以上几种代码（方法），都是通过CSS的滤镜来控制页面的显示而已，唯一不同的就CSS代码及调用的方式。在css的修饰时还有权重问题，所以有时候css代码不生效的时候可以考虑一下代码的权重问题。

欢迎关注第一山，今后将有更多前端开发技术与大家共同交流学习。

字是网页展示的重要内容之一，所以对文字的修饰也是CSS重点关注的一部分， CSS提供了以下常用的样式属性来修饰文字。

color 属性

color 用来设置文字颜色。

设置方式支持以下几种格式

英语颜色单词形式，如: red（红）、black（黑）、orange（橙色）等。

<style>
  .box {
    color: red;
  }
</style>


<div class="box">文字颜色</div>

十六进制表示法，设计软件中通用的表示方法。
例如：ff00000; ff 即为十进制255；每种颜色分为 0~255的数字。
如果表示颜色值重复例如：#ffaabb 可以简写为#fab.。
黑色为 #000 ，白色为 #fff。
以#ff0000为例，两两分组，分别表示三原色：红、绿、蓝。

<style>
  .box {
    color: #ff0000;
  }
  .box1 {
    color: #f00;
  }
</style>


<div class="box">文字颜色</div>
<div class="box1">简写形式</div>

RGB 表示法
例如: color: rgb(255,0,0); rgb 内部的三个值，依次代表三原色红、绿、蓝。
其中 rgb(0,0,0) 代表黑色， rgb(255,255,255) 表示白色。

<style>
  .box {
    color: rgb(255, 0, 0);
  }
</style>
<div class="box">文字颜色</div>

RGBA 表示法，在RGB的表示方法的基础上增加了透明度（最后一个参数代表透明度）。0-表示透明 1-表示实心。透明度是介于[0,1]之间的值。
RGBA 从 IE9开始兼容。

<style>
.box {
  color: rgba(255, 0, 0, 0.5);
}
</style>




<div class="box">文字颜色</div>

font-size 属性

font-size 属性用来设置字体大小，单位通常为px 也可以为em,rem

单位的解释

px：像素
em: 相对元素字体的倍数
rem：相对html字体的倍数，例如：html标签设置为font-size为100px ， div 设置font-size为1.5 rem 实际表现为：150px。

<style>
  .box {
    font-size: 30px;
  }
</style>


<div class="box">文字大小</div>

font-weight 属性

设置字体的粗细程度，常用的属性有 normal 和 bold 两个值。

可以用以下值表示，也可以用数字表示。

值	意义
normal	正常粗细，和400值相等
bold	加粗，与700数值相等
lighter	比正常粗细还细，不常用
bolder	比加粗还粗，不常用
100 200 300 400 500 600 700 800 900	使用数字定义字体粗细
inherit	从父元素继承字体粗细

<style>
.box_normal {
  font-weight: normal;
}
.box_bold {
  font-weight: bold;
}


.box_lighter {
  font-weight: lighter;
}


.box_bolder {
  font-weight: bolder;
}


.box_number {
  font-weight: 600;
}
</style>


<body>
  <div class="box_normal">font-weight演示：正常粗细</div>
  <div class="box_bold">font-weight演示，加粗</div>
  <div class="box_lighter">font-weight演示，更细</div>
  <div class="box_bolder">font-weight演示， 更粗</div>
  <div class="box_number">font-weight演示， 数字</div>
</body>

font-style 属性

设置字体的倾斜程度

值	意义
normal	正常字体，不带倾斜效果
italic	倾斜字体（常用，使用倾斜字体）
oblique	倾斜字体（用常规字体模拟倾斜，不常用）

<style>
  .box1 {
    font-style: normal;
  }
  .box2 {
    font-style: italic;
  }
  .box3 {
    font-style: oblique;
  }
</style>
<body>
  <div class="box1">正常字体</div>
  <div class="box2">倾斜字体</div>
  <div class="box3">倾斜字体2</div>
</body>

text-decoration 属性

设置文本的修饰线的样式

示例	意义
none	无线(a标签去除下划线会用到)
underline;	下划线
line-through;	删除线
…等等	还有很多，可自行百度

<style>
  .decoration-none {
    text-decoration: none;
  }
  .decoration-underline {
    text-decoration: underline;
  }
  .decoration-line-through {
    text-decoration: line-through;
  }
</style>
<body>
  <div class="decoration-none">无线修饰</div>
  <div class="decoration-underline">下划线</div>
  <div class="decoration-line-through">删除线</div>
</body>

font-family 属性

指定使用的字体族，操作系统一般自带很多字体；

例如：window操作系统中的 ‘微软雅黑’ ，黑体等。

字体文件的格式有很多，比如 eot,woff2,woff,ttf,svg等。

font-family 可以一次指定多个字体，后面的字体属于后备字体，只有前面的字体没有找到，才会使用后面的字体。

<style>
  div {
      font-family: serif, "Time New Roman", "微软雅黑"
  }
</style>
<body>
  <div>字体</div>
</body>

自定义字体

某些时候，我们的字体比较个性化，或者我们的字体是一个图标字体（一种用符号表示图片的方式）。那么此时，需要我们使用 @font-face 自定义字体

自定义的字体一般是随着网页发布在服务器端，操作系统中并没有。

推荐一个比较好用的字体库网站：https://www.iconfont.cn/（具体使用方式请自行百度）。

在线咨询

上一篇：PC端与移动端网站优化的侧重点有什么相同与不同
下一篇：项目上线流程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商