前端學習筆記--CSS布局--定位
阿新 • • 發佈：2019-04-28
筆記 span tle -h ref utf-8 png inf range
1.概述
2.文檔流定位：從上到下，從左到右
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0;/* 去掉默認樣式*/ }#nav{ width: 300px; margin: 100px auto;/*自動居中*/ font-size: 0; /* 去掉導航之間的空隙*/ } a{ display: inline-block;/*修改a的定位方式*/ width: 80px; height: 30px; font-size: 14px; text-align: center; line-height: 30px;/*行高 垂直居中*/ text-decoration: none;/* 去掉超鏈接的下劃線*/ border-bottom: 1px solid #ccc;/* 設置底部邊框的樣式*/ } a:hover{ color: white; background-color: #ccc; border: 1px solid; border-top-color: orange; border-right-color: orange; border-left-color: orange; } </style> </head> <body> <div id="nav"> <a href="#">鏈接1</a> <a href="#">鏈接2</a> <a href="#">鏈接3</a> </div> </body> </html>
前端學習筆記--CSS布局--定位