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小時內與您取得聯系。

整合營銷服務商