小高不太行之前端——CSS樣式（基礎）下

提示：還有一篇延申哦，等等我qaq

提示：

文章目錄

小高不太行之前端——CSS樣式（基礎）下
三、重要的修飾物件和屬性
- （一）圖片image
- - 1.基本屬性
  - 2.透明度
  - 3.圖片廊
  - 4.影像拼合
- （二）文本和字體
- - 1.文本text
  - 2.字體font
- （三）背景background
- - 1.顏色color
  - 3.背景影像
- （四）鏈接及導航欄
- - 1.常規的鏈接
  - - 普通鏈接
    - 鏈接框
  - 2.導航欄
  - - 垂直導航欄
    - - 垂直導航條
    - 水平導航欄
    - - 行內串列項
      - 浮動串列項
- （五）表格表單下拉串列
- - 1.表格
  - 2.表單
  - 3.下拉串列
總結
下期預告 CSS延伸

三、重要的修飾物件和屬性

（一）圖片image

1.基本屬性

2.透明度

屬性的透明度是 opacity， Opacity屬性值從0.0 - 1.0，值越小，使得元素更加透明，

<head>
	<meta charset="utf-8">
	<style>
	div.background
	{
	  width:500px;
	  height:250px;
	  background:url(img/back6.png) repeat;
	  border:2px solid black;
	}
	div.transbox
	{
	  width:400px;
	  height:180px;
	  margin:30px 50px;
	  background-color:#ffffff;
	  border:1px solid black;
	  opacity:0.5;
	  filter:alpha(opacity=60); 
	}
	div.transbox p
	{
	  margin:30px 40px;
	  font-weight:bold;
	  color:#000000;
	}
	</style>
	</head>
	 
	<body>
	 
	<div class="background">
	<div class="transbox">
	<p>這是一個透明度為0.5的透明框
	</p>
	</div>
	</div>
	 
	</body>

結果如下：
透明度示例

，

3.圖片廊

通過設定若干個<div>標簽來顯示若干張圖片，采取相同的格式添加不同的路徑和圖片描述
想要呈現相同的style則可以在css統一設定

<div class="img">
    <a target="_blank" href="圖片路徑">
      <img src="圖片路徑" alt="圖片文本描述" width="300" height="200">
    </a>
    <div class="desc">這里添加圖片文本描述</div>
  </div>
</div>

4.影像拼合

影像拼合美化導航欄，效果絕絕子，用圖片或者小圖示代替文字去鏈接是不是瞬間就不枯燥了，我覺得是哈
重要的話說四遍，一定記得加display:block; 詳情見上篇display屬性二更部分，不要太心疼我找錯的程序

<head>
<style>
#nav{position:relative;}
#nav li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#a{left:0px;width:46px;}
#a{background:url('路徑') 0 0;}
#b{left:63px;width:43px;}
#b{background:url('路徑') -47px 0;}
#navlist li, #navlist a{height:44px;display:block;}
//一定記得加display:block;
  一定記得加display:block;
  一定記得加display:block;
</style>
</head>
<body>
<ul id="nav">
  <li id="a"><a href="/"></a></li>
  <li id="b"><a href="/css/"></a></li>、
</ul>
</body>

菜菜小高介紹一下這段代碼的思路：
核心還是一個串列，導航嘛
但是呢要給每一列加背景圖片，賦給這些圖片block的屬性值，讓它們在沒有文字的時候也能獨立顯示，接著設定一下相對定位position讓彼此定位，完美！

（二）文本和字體

1.文本text

文本是在做WEB的時候經常要用到的，所以需要熟練掌握
文本的屬性大家對文本陰影感興趣嗎? 考慮二更哦

2.字體font

小高認為字體相比文本可能屬性就比較少了
最主要的font-size同樣也是通過像素來控制
font-weight控制字體粗細，取值為bolder/bold/normal/lighter,分別對應更粗/粗/正常/更細
寫文章真的好耗時間，嗚，其他不做過多講解

（三）背景background

1.顏色color

小高精簡一下~~偷個懶~~ ，此處對于color做一個統一的介紹，其他用到的地方就不一一贅述了、

CSS中，顏色值通常以以下方式定義:

十六進制 - 如："#ff0000"
RGB - 如：“rgb(紅,綠,藍)” 取值皆在0-255之間
顏色名稱 - 如：“red” 有十七種官方顏色

3.背景影像

同樣，單純的圖片皆有的屬性就不啰嗦了，對于背景影像要求還真不少

background-repeat //當背景圖片填不滿背景的時候
repeat-x 只有水平位置會重復背景影像
repeat-y 只有垂直位置會重復背景影像
no-repeat background-image不會重復
難道你想讓你的背景只有左上角被裝飾嗎，你的圖片不想沒有重復的充滿容器嗎？
咳咳咳，再學一個告訴你啊
background-attachment //影像的固定
scroll 背景圖片隨著頁面的滾動而滾動，這是默認的，
fixed 背景圖片不會隨著頁面的滾動而滾動，
local 背景圖片會隨著元素內容的滾動而滾動，
-background- position //背景影像起始位置
表示方式皆由x和y兩個變數控制

由top/bottom/center/left/right組合
（水平取值為左中右；垂直取值為上中下）
百分比（X% Y%）
像素（Xpx Ypx）

【小高秘籍】來聽講了

background-size:100% 100%; background-attachment: fixed;

對，就是它，you can try

（四）鏈接及導航欄

1.常規的鏈接

普通鏈接

可以給它們加你喜歡的顏色哦

a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當用戶滑鼠放在鏈接上時
a:active - 鏈接被點擊的那一刻

鏈接框

話說鏈接框你有沒有想到圖片導航欄呢，我假裝你想到了
其實這二者是由異曲同工之妙的，什么妙？display：block；妙啊
只不過鏈接框是不過設定了1.內邊距padding加上填充2.背景顏色background-color看起來像是一個框框罷了
~~哈哈哈，一副看破錢斷(看破前端)的樣子，不敢不敢~~

2.導航欄

使用CSS你可以轉換成好看的導航欄而不是枯燥的HTML選單
先介紹一波基礎

垂直導航欄

<style>
ul {
  list-style-type: none; //移除串列前小標志
  margin: 0;
  padding: 0; //洗掉邊距，（本身串列和左邊是有點遠的）
  /*設定全屏高度或寬度，一般是位于左面的導航條
  height:100%
  width：100%
  */
}

li a {
  display: block;  //它它它又來了
  width: 66px;     //規定的哦
  background-color: #999AAA;
}
</style>

垂直導航條

在垂直導航欄的基礎上，讓滑鼠移動到某欄的時候變色，就變成垂直導航條，在各大網站應用還是很普及的

li a:hover {
    background-color: #555;
    color: white;
}

水平導航欄

行內串列項

給<li>標簽添加行內顯示，就在水平上展示

li
{
display:inline;
}

浮動串列項

浮動<li>標簽，并指定為 <a> 標簽的元素寬度

li
{
	float:left;
}

ha 主要想講的就是那個圖示導航欄，詳見上【圖片拼合技術】

（五）表格表單下拉串列

1.表格

雖然表格布局不常用，但是對于后臺資料，或者是要呈現給用戶的表格也是有美觀的需求的
表格CSS 其中border和bord-bottom 屬性值的第二項style的取值參考【CSS I/盒子模型/bottom】

2.表單

<style> 
input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('img/searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
</style>

運行結果如下：
seach 從上述對于搜索框的簡單渲染來看，對于表單，CSS是通過input【type=text/button/number/password/……】等等屬性選擇器，增加背景顏色，邊框屬性等

對于這一塊，更豐富的介紹請點擊這里

3.下拉串列

當滑鼠移動到指定元素上時，會出現下拉選單

基本思路：

建立滑鼠要移動到的指定元素class="a"
建立隱藏的資訊區域class="b" 一定要加上display: none;讓它隱藏
建立連接.a:hover .b { display: block; }

在1的基礎上允許用戶選取串列中的某一項
基本思路：
在1.基礎上要給隱藏區域的內容加上鏈接并進行渲染
【注意】此時對于class="a"要定義成button

總結

CSS 2號文呢，主要物件是前端設計經常渲染的一些物件，由共性引入，再對它們的特性進行詳細的介紹，和CSS I篇共同構成了CSS的基礎

下期預告 CSS延伸

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275814.html

標籤：其他

上一篇：用 JavaScript 實作三次貝塞爾影片庫 - 前端組件化

下一篇：PMP 結合代碼報名經驗總結

小高不太行之前端——CSS樣式 II