HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)，企業(yè)網(wǎng)站服務(wù)項(xiàng)目布局樣式

家好，本篇文章分享企業(yè)網(wǎng)站服務(wù)項(xiàng)目的布局樣式，這種布局樣式通常用于企業(yè)網(wǎng)站首頁(yè)，企業(yè)可以向客戶提供的服務(wù)內(nèi)容，不同類型的企業(yè)服務(wù)項(xiàng)目樣式也不同，這只是其中一種。

效果圖：

服務(wù)項(xiàng)目

HTML代碼：

<div class="tui-005">
 <div class="tui-wp">
 <ul>
 <li>
 <img src="a96.png">
 <h3>設(shè)計(jì)簡(jiǎn)約</h3>
 <p>沒(méi)有多余的功能與復(fù)雜的樣式，設(shè)計(jì)簡(jiǎn)約而又不失便捷實(shí)用，讓用戶擁有良好的視覺(jué)體驗(yàn)和操作習(xí)慣。</p>
 </li>
 <li>
 <img src="b96.png">
 <h3>簡(jiǎn)單實(shí)用</h3>
 <p>程序以簡(jiǎn)單、實(shí)用為主，采用標(biāo)準(zhǔn)HTML5響應(yīng)式開(kāi)發(fā)，讓網(wǎng)站自動(dòng)適應(yīng)用戶終端設(shè)備如：PC、手機(jī)、平板等。</p>
 </li>
 <li>
 <img src="c96.png">
 <h3>定制開(kāi)發(fā)</h3>
 <p>提供一站式開(kāi)發(fā)服務(wù)，從網(wǎng)站前端制作、視覺(jué)設(shè)計(jì)、到程序開(kāi)發(fā)、運(yùn)營(yíng)維護(hù)，讓我們的工作能夠順利進(jìn)行。</p>
 </li>
 </ul>
 </div>
</div>

CSS代碼分析：

首先定義整個(gè)布局的寬度為1200像素，并居中顯示

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

板塊使用flex布局,讓板塊位于各行之間留有空白的容器內(nèi)

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

讓每個(gè)板塊寬度為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);
}

最后配置服務(wù)項(xiàng)目的標(biāo)題、簡(jiǎn)介和圖片

.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%;
}

當(dāng)然，布局的方式有很多種，這只是其中一個(gè)方法，也歡迎大家留言分享一下其他的布局方式，一起學(xué)習(xí)HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)。

每一個(gè)特定或者特殊的日子里，幾乎所有的網(wǎng)站都變成了灰色，那么這種效果是怎么實(shí)現(xiàn)的呢？

今天就來(lái)簡(jiǎn)單的實(shí)現(xiàn)一下這樣的效果。

添加以下全局CSS樣式，可以實(shí)現(xiàn)此效果：

代碼一：

html {
  -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
} 
<!-- 可以是整個(gè)網(wǎng)站變成灰色的  -->

實(shí)現(xiàn)網(wǎng)頁(yè)顏色變灰這個(gè)效果，非常簡(jiǎn)單：

filter: grayscale(100%);

這樣一段代碼即可實(shí)現(xiàn)，放在html和body的css屬性里即可實(shí)現(xiàn)。

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

灰色網(wǎng)站會(huì)加入這段代碼，你可以按F12，把這段源碼刪除，即可變成彩色

代碼二：

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

使用方法：這段代碼可以變網(wǎng)頁(yè)為黑白，將代碼加到CSS最頂端就可以實(shí)現(xiàn)素裝。建議全國(guó)站長(zhǎng)動(dòng)起來(lái)。為在地震中遇難的同胞哀悼。

如果網(wǎng)站沒(méi)有使用CSS，可以在網(wǎng)頁(yè)/模板的HTML代碼<head>和</head> 之間插入：

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

有一些站長(zhǎng)的網(wǎng)站可能使用這個(gè)css 不能生效，是因?yàn)榫W(wǎng)站沒(méi)有使用最新的網(wǎng)頁(yè)標(biāo)準(zhǔn)協(xié)議：

<!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">

請(qǐng)將網(wǎng)頁(yè)最頭部的<html>替換為以上代碼。

有一些網(wǎng)站FLASH動(dòng)畫(huà)的顏色不能被CSS濾鏡控制，可以在FLASH代碼的<object …>和</object>之間插入：

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

最簡(jiǎn)單的把頁(yè)面變成灰色的代碼是在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);
}

總結(jié)：

以上幾種代碼（方法），都是通過(guò)CSS的濾鏡來(lái)控制頁(yè)面的顯示而已，唯一不同的就CSS代碼及調(diào)用的方式。在css的修飾時(shí)還有權(quán)重問(wèn)題，所以有時(shí)候css代碼不生效的時(shí)候可以考慮一下代碼的權(quán)重問(wèn)題。

歡迎關(guān)注第一山，今后將有更多前端開(kāi)發(fā)技術(shù)與大家共同交流學(xué)習(xí)。

字是網(wǎng)頁(yè)展示的重要內(nèi)容之一，所以對(duì)文字的修飾也是CSS重點(diǎn)關(guān)注的一部分， CSS提供了以下常用的樣式屬性來(lái)修飾文字。

color 屬性

color 用來(lái)設(shè)置文字顏色。

設(shè)置方式支持以下幾種格式

英語(yǔ)顏色單詞形式，如: red（紅）、black（黑）、orange（橙色）等。

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


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

十六進(jìn)制表示法，設(shè)計(jì)軟件中通用的表示方法。
例如：ff00000; ff 即為十進(jìn)制255；每種顏色分為 0~255的數(shù)字。
如果表示顏色值重復(fù) 例如：#ffaabb 可以簡(jiǎn)寫(xiě)為#fab.。
黑色為 #000 ，白色為 #fff。
以#ff0000為例，兩兩分組，分別表示三原色：紅、綠、藍(lán)。

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


<div class="box">文字顏色</div>
<div class="box1">簡(jiǎn)寫(xiě)形式</div>

RGB 表示法
例如: color: rgb(255,0,0); rgb 內(nèi)部的三個(gè)值，依次代表三原色紅、綠、藍(lán)。
其中 rgb(0,0,0) 代表黑色， rgb(255,255,255) 表示白色。

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

RGBA 表示法，在RGB的表示方法的基礎(chǔ)上增加了透明度（最后一個(gè)參數(shù)代表透明度）。0-表示透明 1-表示實(shí)心。透明度是介于[0,1]之間的值。
RGBA 從 IE9開(kāi)始兼容。

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




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

font-size 屬性

font-size 屬性用來(lái)設(shè)置字體大小，單位通常為px 也可以為em,rem

單位的解釋

px：像素
em: 相對(duì)元素字體的倍數(shù)
rem：相對(duì)html字體的倍數(shù)，例如：html標(biāo)簽設(shè)置為font-size為100px ， div 設(shè)置font-size為1.5 rem 實(shí)際表現(xiàn)為：150px。

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


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

font-weight 屬性

設(shè)置字體的粗細(xì)程度，常用的屬性有 normal 和 bold 兩個(gè)值。

可以用以下值表示，也可以用數(shù)字表示。

值	意義
normal	正常粗細(xì)，和400值相等
bold	加粗，與700數(shù)值相等
lighter	比正常粗細(xì)還細(xì)，不常用
bolder	比加粗還粗，不常用
100 200 300 400 500 600 700 800 900	使用數(shù)字定義字體粗細(xì)
inherit	從父元素繼承字體粗細(xì)

<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演示：正常粗細(xì)</div>
  <div class="box_bold">font-weight演示，加粗</div>
  <div class="box_lighter">font-weight演示，更細(xì)</div>
  <div class="box_bolder">font-weight演示， 更粗</div>
  <div class="box_number">font-weight演示， 數(shù)字</div>
</body>

font-style 屬性

設(shè)置字體的傾斜程度

值	意義
normal	正常字體，不帶傾斜效果
italic	傾斜字體（常用，使用傾斜字體）
oblique	傾斜字體（用常規(guī)字體模擬傾斜，不常用）

<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 屬性

設(shè)置文本的修飾線的樣式

示例	意義
none	無(wú)線(a標(biāo)簽去除下劃線會(huì)用到)
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">無(wú)線修飾</div>
  <div class="decoration-underline">下劃線</div>
  <div class="decoration-line-through">刪除線</div>
</body>

font-family 屬性

指定使用的字體族，操作系統(tǒng)一般自帶很多字體；

例如：window操作系統(tǒng)中的 ‘微軟雅黑’ ，黑體等。

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

font-family 可以一次指定多個(gè)字體，后面的字體屬于后備字體，只有前面的字體沒(méi)有找到，才會(huì)使用后面的字體。

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

自定義字體

某些時(shí)候，我們的字體比較個(gè)性化，或者我們的字體是一個(gè)圖標(biāo)字體（一種用符號(hào)表示圖片的方式）。那么此時(shí)，需要我們使用 @font-face 自定義字體

自定義的字體一般是隨著網(wǎng)頁(yè)發(fā)布在服務(wù)器端，操作系統(tǒng)中并沒(méi)有。

推薦一個(gè)比較好用的字體庫(kù)網(wǎng)站：https://www.iconfont.cn/（具體使用方式請(qǐng)自行百度）。

在線咨詢

上一篇：PC端與移動(dòng)端網(wǎng)站優(yōu)化的側(cè)重點(diǎn)有什么相同與不同
下一篇：項(xiàng)目上線流程

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商