CSS樣式案例 2 製作乙個簡單的登入介面

首先來張完工的效果圖。

一、html檔案如下：

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>登入介面
title
>
<
link 
rel="stylesheet"
type
="text/css"
href
="css/login.css"
/>
head
>
<
body
>
<
div 
class
="content"
>
<
div 
class
="panel"
>
<
div 
class
="group"
>
<
ul>
<
li><
label
>賬號
label
>
li>
<
li><
input 
type
="text"
placeholder
=" 請輸入賬號"
/>
li>
ul>
<
ul>
<
li><
label
>密碼
label
>
li>
<
li><
input 
type
="password"
placeholder
=" 請輸入密碼"
/>
li>
ul>
div>
<
div 
class
="login"
>
<
button 
type
="button"
>登入
button
>
div>
div>
<
div 
class
="register"
>
<
button 
type
="button"
>註冊
button
>
<
button 
type
="button"
>找回密碼
button
>
div>
div>
body
>
html
>

*

/*新增乙個淺灰色背景
*/body.content.content .panel.content .panel .group.content .panel .group ul.content .panel .group ul li.content .panel .group ul li input.content .panel .group ul li label.content .panel .login.content button.content .register.content .register button

僅使用HTML元素通過CSS樣式製作乙個小三角

製作小三角有兩種常用的方式，1 是css3種的方法，通過旋轉乙個div元素45度，然後定位到外部div的某一邊，把多餘的用overflow hidden 遮住，來獲取乙個三角形，但是這種方法相容性不是很好，而且之前的瀏覽器也沒有旋轉屬性，2 通過邊框屬性,來製作小三角.我們可以看到,邊框和邊框之間是...

同級css使用乙個樣式 純CSS樣式寫乙個內凹圓

廢話不多說，直接上效果圖！這是html 單元管理 車位管理 商鋪管理 這是css 內凹圓 property left list list one list one before list one after list one after,list one before list one div be...

同級css使用乙個樣式 CSS 核心樣式

css核心樣式 粗細font weight作用 設定文字是否加粗顯示 屬性名 font weight,屬於font屬性的乙個單 屬性 屬性值有兩種方式 單詞型別 數字型別 單詞型別 數字型別100 900之間的整百數字 數字越大，文字顯示越粗 其中400等價於normal,700等價於bold 字型...