1.7Web前端基础笔记
生活随笔
收集整理的這篇文章主要介紹了
1.7Web前端基础笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 一、盒子的大小
- 二、輪廓的陰影和圓角
- 1.輪廓
- 2.陰影
- 3.圓角
- 三、浮動
- 四、導航條練習
一、盒子的大小
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 100px;height: 100px;background-color: aquamarine;border: 10px red solid;padding: 10px;box-sizing: content-box;}.box2{width: 100px;height: 100px;background-color: aquamarine;border: 10px red solid;padding: 10px;margin-top: 20px;box-sizing: border-box;}</style> </head> <body><div class="box1"></div><div class="box2"></div> </body> </html>結果：
二、輪廓的陰影和圓角
1.輪廓
outline：用來設置元素的輪廓線，用法和border一樣。
但輪廓與邊框不同的地方是：輪廓不會影響可見框的大小。（框下有文字，會重疊不會下移）
結果：
2.陰影
box-shadow是用來設置元素的陰影效果，也不會影響頁面布局。
第一個值：水平偏移量，正值向右移動
第二個值：垂直偏移量，正值向下移動
第三個值：陰影的模糊半徑
第四個值：陰影的顏色
結果：
3.圓角
border-radius用來設置圓角，指定圓的半徑大小。
border-radius: 30px;結果：
結果：
結果：
結果：
三、浮動
浮動可以使一個元素向其父元素的左側或右側移動
float元素浮動以后會從文檔流中脫離，不在占用文檔流中的位置，所以元組下面還在文檔流中的元素會向上移動。
浮動的特點：
- 浮動元素完全脫離文檔流，不在占據文檔流中的位置。
- 設置浮動后元素會向父元素的左側或右側移動。
- 浮動元素默認不會從父元素中移出
- 浮動元素左或右移動時，不會超過他們前面的浮動元素
- 如果浮動元素的前面是一個沒有浮動的塊元素，則浮動元素無法上移
- 浮動元素不會超過它上面的浮動的兄弟元素，最多最多就是跟他一樣高
- 主要作用就是讓頁面中的元素水平排列
注：浮動元素不會覆蓋文字。
脫離文檔流后元素特點：
- 塊元素不在獨占一行
- 塊元素的寬度和高度都被文字撐開
- 行內元素脫離文檔流后，特點和塊元素一樣
- 脫離文檔流之后，不再區分行內元素和塊元素
結果：
四、導航條練習
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>navigation</title><link rel="stylesheet" href="css/reset.css"><style>.nav{width: 1210px;height: 48px;background-color: #E8E7E3;margin: 20px auto;}li{float: left;line-height: 48px;}li a{/* 把a設為塊元素，這樣點在文字的外面超鏈接也生效 */display: block;font-size: 18px;text-decoration: none;color: #777;padding: 0 39px;}.nav li:last-child a{padding: 0 42px 0 41px;}a:hover{background-color: #3f3f3f;color: #E8E7E3;}</style> </head> <body><ul class="nav"><li><a href="#">HTML/CSS</a></li><li><a href="#">Browser Side</a></li><li><a href="#">Server Side</a></li><li><a href="#">Programming</a></li><li><a href="#">XML</a></li><li><a href="#">Web Building</a></li><li><a href="#">Reference</a></li></ul> </body> </html>結果：
總結
以上是生活随笔為你收集整理的1.7Web前端基础笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 博奥智源公司分享麻醉药品管理系统功能设计
- 下一篇： HTML基础学习笔记（All in On