Chrome工具
- f12
- ctrl+shift+l
- 檢查
Chrome結構布局
- 1号為html結構
- 2号為css樣式
- 3号為行數
Chrome調試資料
- 上箭頭 數值增大
- 下箭頭 資料變小
css常見的錯誤
- css單詞書寫錯誤
- css無顯示
- html 結構不比對(重要)
- 中文的冒号
- 少寫花括号
子元素的寬度允許大于父元素
在某些情況下 子元素的寬度可以大于父元素的寬度
ul的寬度大于版心的寬度 且不受影響
側邊廣告欄問題
如何讓一個側邊欄靠近版心對齊呢，使用固定定位，走浏覽器視口的一半，再走版心的一半+自身的寬度
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>側邊廣告欄對齊版心的方法</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 1200px;
height: 1000px;
background-color: pink;
margin: 200px auto;
}
.aside {
position: fixed;
top: 50px;
left: 50%;
margin-left: -1000px;
width: 400px;
height: 400px;
background-color: purple;
}
</style>
</head>
<body>
<div class="container"></div>
<div class="aside"></div>
</body>
</html>