文章目錄
- 前言
- 一、一個完整網頁的布局方法
- 二、增加頁面布局高級感
- 1.定位
- 2.元素的顯示與隱藏
- 3.巧用精靈圖、字體圖示、CSS三角
- 4.CSS用戶頁面布局樣式
- 5.圖片與文字之間的距離
- 6.常見布局技巧
- 總結
前言
學習了網頁前端中的HTML和CSS也許你的頁面已經有了一定的改善，在現有的技術你的頁面有了一定的雛形一些簡單的效果可以展示出來，但我們為了讓用戶有更好的使用體驗所以我們需要增加一些小技巧來讓頁面更加高級！
一、一個完整網頁的布局方法
- 標準流
可以讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標準流布局， - 浮動
可以讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動布局 - 定位
定位最大的特點是有層疊的概念，就是可以讓多個盒子前后疊壓來顯示，如果元素自由在某個盒子內移動就用定位布局，
二、增加頁面布局高級感
1.定位
定位是指：將盒子定在某一位置，按照定位的方式來移動盒子，
定位的特殊性：
- 行內元素添加絕對或者固定定位，可以設定高度和寬度
- 塊級元素添加絕對或者固定定位，它的高度與寬度就是按內容的大（加了定位的塊級元素就不會有標準流的特性）
定位的型別：
- 相對定位——選擇器{position：relative；}
特點：
1.目標移動的時候是相對自己原來的位置移動的
2.原來在標準流的位置繼續占有，后面的盒子仍然以標準流的方式對待它（不脫離標準流） - 絕對定位——選擇器{position：absolute；}
特點：
1.如果沒有父元素或者祖先元素沒有定位（就是當祖先元素是標準流的話），那子元素的絕對定位是相對于瀏覽器進行移動，
2.a.如果有父元素、祖父元素且有定位（相對、絕對、固定定位），則相對于最近一級的有定位的父元素為參考點移動位置，
b.如果有父元素、祖元素但是父元素沒有定位，而祖元素有定位，那就以祖元素為參考點移動位置，
3.絕對定位不再占有原先的位置（脫離標準流）絕對定位不占位置（下面的元素會填補） - 固定定位——選擇器{position：fixed；right： ；top： ；}
特點：
1.以瀏覽器的可視視窗為參照點移動元素，
跟父元素沒有任何關系，不隨滾動條滾動，
2.固定定位不再占有原先的位置，
3.一般使用情況：固定在版心的右側位置
小演算法：
a.讓固定定位的盒子 left: 50%. 走到瀏覽器可視區（也可以看做版心） 的一半位置，
b.讓固定定位的盒子 margin-left: 版心寬度的一半距離， 多走 版心寬度的一半位置
就可以讓固定定位的盒子貼著版心右側對齊了， - 父子盒子使用定位方法：子絕父相
這個方法的含義：子盒子用絕對定位，父盒子用相對定位，
代碼如下（示例）：
.img {
position: relative;
width: 250px;
height: 152px;
line-height: 152px;
margin-top: 30px;
display: block;
}
.showBox .category {
position: absolute;
display: inline-block;
width: 38px;
height: 22px;
text-align: center;
line-height: 22px;
background: url('./images/label.png') no-repeat;
color: #fff;
position: absolute;
right: 8px;
top: -10px;
}
（效果圖）
這個就是父盒子——position:revative;
這個就是子盒子——position：absolute；
2.元素的顯示與隱藏
display屬性
.box img {
width: 500px;
display: none;
/* display 不再占有原來的位置 */
}
.box:hover img {
display: block;
}
visibility屬性
.box {
width: 800px;
height: 800px;
background-color: pink;
text-align: center;
}
.box img {
visibility: hidden;
/* 雖然看不到了但是還是占有位置 */
}
.box span {
display: block;
width: 300px;
margin: 0 auto;
}
overflow屬性
占據原來的位置
overflow: hidden;
/* 元素隱藏，但是仍占有原來的位置 */
overflow：visible；
/*不減切內容也不添加滾動發條 */
overflow：scroll；
/* 不管超出內容否總是顯示滾動條 */
overflow：auto；
/* 超出自動顯示滾動條，不超出不顯示滾動條 */
opacity屬性
占據原來的位置（它的屬性相當于是給元素添加透明度當opacity：0就是透明了
.box p {
width: 200px;
opacity: 0.5;
}
3.巧用精靈圖、字體圖示、CSS三角
精靈圖核心原理：
將網頁中的一些小背景影像整合到一張大圖中，這樣服務器只需要一次請求就可以了
CSS三角頁面常見應用
可以呈現出如下圖的效果
價格商標顯示效果
代碼如下：
.box {
position: relative;
width: 200px;
height: 400px;
background-color: pink;
}
.box span {
position: absolute;
left: 190px;
top: -10px;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
代碼如下：
.box1 {
width: 0;
height: 0;
/* border-top: 100px solid #000;
border-bottom: 0px solid pink;
border-left: 0px solid blue;
border-right: 50px solid yellow;對其進行簡寫 */
border-color: transparent red transparent transparent;
border-style: solid;
/* 上邊框要長一些 右邊的邊框稍小一些 其余邊框為0 */
border-width: 100px 50px 0 0;
}
4.CSS用戶頁面布局樣式
當滑鼠點擊在不同界面展現出不同的現象：
｛cursor：default｝－－小白 默認形狀
｛cursor：pointer｝－－小手形狀
｛cursor：move｝－－移動
｛cursor：text｝－插入文本時的樣子
｛cursor：not-allowed｝－－禁止符號
當在文本框搜索欄中取消邊框輪廓線：
<style>中表單元素
input{outline:none;}
textarea{resize:none;}
5.圖片與文字之間的距離
在style中使用vertical-align：middle/bottom/top；
在網頁中的圖片與文字之間的對齊原理
不設定任何屬性時是這種效果：
文字與圖片并沒有對齊
<style>
img {
vertical-align: middle;
/* 使用場景：圖片和文字垂直居中 */
}
</style>
<body>
<img src="1.jpg" alt="">hello world!
</body>
這樣圖片和文字就垂直居中了，這個方法還可以讓圖片在一個文本框內沒有縫隙，
6.常見布局技巧
1.在網頁中頁常會出現這種圖示，那他們是如何實作的呢？
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-left: 5px;
}
.pic img {
width: 100%;
}
注意：就不需要給文字添加浮動效果了，只需要給圖片添加浮動效果，
2.ul li中的盒子相鄰會有交叉的邊所以我們需要用margin來解決，
ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
3.當滑鼠點擊盒子時四條邊能夠顯現出來
這種常被使用在商品顯示場景
ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
position: relative;
border: 1px solid blue;
}
總結
以上就是對網頁設計方面的小心思可以讓你的網頁頁面在小細節中讓用戶體驗更加！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/292996.html
標籤：其他