“扁平化設計”的5大法則，有的界面其實是偽扁平化
扁平化究竟該怎麼實現怎麼應用呢？下文將要做的就是分析扁平化的五個最典型的特徵，同時也介紹一下偽扁平化（不含貶義，只是一種折衷的設計方式）。一 、拒絕特效扁...
本例最終效果如下：
本例最終效果如下：
一、設置整個網頁的背景色
圖1
圖2
二、創建一個盒子，讓其水平居中，距離上邊200像素。
圖3
圖4
三、把盒子設置四個角為圓角，圓10個像素。
圖5
圖6
四、在大盒子裡做一個ding盒子，設置它上面兩個角是圓角，下面兩個角是直角。
圖7
圖8
五、ding盒子裡輸入幾個字，讓這幾個字在盒子裡水平居中，垂直居中，關於盒子內居中問題可參看我寫的文【203】。
圖9
圖10
六、在deng盒子裡面再做三個小盒子，取名為ref，注意如果這三個盒子不用浮動，會有什麼效果，這個你可以試試看。
圖11
圖12
七、往ref盒子裡面添加信息，發下圖，這裡順便學習兩個標籤，一個是input，一個是button。
圖13
圖14
八、去掉背景色，然後用盒子內居中的方法，讓這些元素居中。
圖15
圖16
九、通過樣式，設置按鈕的大小和字的大小，這裡我特地用id來給元素上名字，不同於class，在樣式裡調用的時候，一個是前面加.一個是前面加#。
圖17
圖18
十、最後設置一下密碼輸入框，輸入內容時為密碼隱藏符號。
圖19
圖20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #1f88cb;
}
.deng{
width: 300px;
height: 200px;
background: #d9e3e8;
margin: 200px auto;/*盒子頂部距離200，水平居中*/
border-radius: 10px;/*圓角10個像素*/
}
.ding{
width: 100%;/*百分比指的是父盒子的寬的百分之百*/
height: 50px;
background: #093f63;
float: left;/*浮動是為了讓盒子間發生關係*/
/* 就像水上的多個物體，浮起來後就不會相互穿插 */
border-radius: 10px 10px 0px 0px;
/* 圓角四個參數的寫法分別指左上，右上，右下，左下 */
color: white;/*字的顏色*/
text-align: center;/*水平居中*/
line-height: 50px;/*垂直居中*/
}
.ref{
width: 280px;
height: 40px;
/* 這個背景色後面是要去掉的 */
margin-left: 10px;
margin-top: 5px;
/* 以上兩句可以簡寫為margin:5px 0px 0px 10px; */
float: left;
/*在這裡你可以試著不加浮動，就知道浮動的作用了*/
text-align: center;/*水平居中*/
line-height: 40px;/*垂直居中*/
}
#bt{
width: 80px;
height: 30px;
font-size: 12pt;/*設置字的大小*/
}
</style>
</head>
<body>
<div class="deng">
<div class="ding">方塊登錄窗口</div>
<div class="ref">用戶名：<input type="text"></div>
<div class="ref">密 碼：<input type="password"></div>
<!-- 是空格的意思 input是輸入框標籤 button是按鈕標籤-->
<div class="ref"><button id="bt">確 定</button></div>
</div>
</body>
</html>
相關推薦
'用div+css做一個簡易的計算器，幾行js完成計算功能「217」'
"終於想做一個計算器了，少少幾行js代碼而已。網上有很多的html計算器的實例，大多是用table來做的，但我還是選擇用div來做。這個計算器有基本的運算功能，但一些細的糾錯，就沒再細究了，極簡嘛。更多文章，請關注我的頭條號，我是落筆承冰。一、開始吧，先做一個360*500...
Java框架從入門到裝逼，用EasyUI繪製主界面
1.引入資源包在上一節中，我們把基本的框架都搭好了，用了Spring，SPringMVC。這一節，我們先來畫頁面，前端框架採用EasyUI來實現。 eas...
網站技術乾貨之bootstrap框架實現網站後臺管理界面
利用bootstrap框架製作網站後臺管理界面包括兩個部分，一部分是響應式導航，包括左邊側邊欄，主要包括輸入框組（input-group）；另一部分是右邊...
CSS3增強用戶界面，有關溢出、縮放、輪廓與文本選中的解決方案
本篇文章介紹CSS3中增強用戶界面的關於溢出、縮放、輪廓、鼠標事件、文本選中等屬性的使用。這些屬性基本上得到了大部分瀏覽器的支持，可以在代碼中直接書寫。承接文章：CSS3盒模型尺寸計算方法，box-sizing屬性的使用，你知道嗎？技術等級：中級 | 適合有一定的CSS基礎...
《每日一刻圖形編程篇》-界面編程
C/C++資料視頻素材答疑加群: 491994603閱讀須知:工具：Visual Studio 2013/VC 6.00 (其他版本亦可)+EasyX(圖...
教你如何辨別一個網站是用什麼程序做的
作為一個對網站有一定了解的入門猿友，你一定會想了解一個網站的構成，原理，如何製作等等，你是否和我一樣，碰到一個好的網站，前端頁面做的很好，網站總體都給人一...
神級程序員用CSS代碼畫出一個QQ企鵝Logo，準備去騰訊面試
今天逛論壇，看到了一位大牛寫了一個非常簡單確很討喜的案例，用css畫了一個QQ企業logo，說自己準備去騰訊面試，剛開始看到這個案例，留言板上我垃圾還沒噴...
美女程序員用HTML5寫英雄聯盟官網，打算去騰訊面試
SVG多邊形圖片網格佈局代碼特效是一款通過SVG來將屏幕劃分為多個多邊形，每個多邊形中設置一張背景圖片。其實很簡單就能實現，在找工作中也會相當有優勢！當面...
推薦中...