簡單的CSS布局

<style? typle="text/css">? ? ? //設(shè)置文本樣式為CSS樣式

#one{? ? ? ?// 以選擇器來選擇元素的id、選擇器有兩種：class和id、class選擇器前面是一個點號、id選擇器前面是#號

? ? ? ? border: 5px? solid? red;? ? ? // 設(shè)置元素的邊框?qū)挾群皖伾order邊框、solid邊框顏色

? ? ? ? border-radius: 10px;? ? ?// 設(shè)置邊框四角的圓角、radius圓角半徑

? ? ? ??position: relative;? ? // 相對定位、相對于最近的父元素進行定位，如果沒有父元素則相對于整個HTML，position位置、relative相對

? ? ? ??top: 5%;? ? ?// 頂邊距、該元素頂部距離父元素頂部之間的距離為父元素高度的5%，top頂端

? ? ? ??left: 5%;? ? ?// 左邊距、該元素左邊框與父元素左邊框之間的距離為父元素寬度的5%、設(shè)置了左邊距和寬度后可以不用設(shè)置右邊距，left左邊

? ? ? ?width: 90%;?? ? // 元素寬度、該元素的寬度是父元素寬度的90%，width寬度

? ? ? ?height: 20%;? ? ?// 元素高度、該元素的高度是父元素高度的20%、height高度

//百分比是相對值、相對值會隨瀏覽器窗口縮小對該元素進行百分比縮小，px是絕對值，絕對值不會瀏覽器隨窗口縮小而縮小

? ? ? ?background-image: url (圖片路徑)；? ? //把圖片設(shè)置成元素的背景、background背景—image圖像、url路徑

? ? ? ?background-size：100%? 100%;? ? ? //背景圖片寬度和高度100%填充滿該元素、background背景—size大小

? ? ? ?font-size: 2.em;? ? ?//設(shè)置該元素的字體大小、font字體—size大小

? ? ? ?text-align: center;? ? ?//設(shè)置該元素文本的對齊方式、text文本—align對齊

? ? ? ?color: white;?? ? //設(shè)置該元素字體的顏色、color字體顏色

? ? ? ?font-family:"楷體";? ? ? ?//設(shè)置該元素字體的樣式 、font-family指定字體?

? ? }

</style>

<div? id="one">此處可添加<h>和<p>標簽或者直接輸入想要的內(nèi)容</div>?? ?