日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

1.7Web前端基础笔记

發布時間：2024/3/26 HTML 36 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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一樣。
但輪廓與邊框不同的地方是：輪廓不會影響可見框的大小。（框下有文字，會重疊不會下移）

<style>.box1{width: 200px;height: 200px;background-color: aquamarine;outline: 10px red solid;}</style> </head> <body><div class="box1"></div><span>hello</span> </body>

結果：

2.陰影

box-shadow是用來設置元素的陰影效果，也不會影響頁面布局。
第一個值：水平偏移量，正值向右移動
第二個值：垂直偏移量，正值向下移動
第三個值：陰影的模糊半徑
第四個值：陰影的顏色

box-shadow: 10px 10px 10px yellowgreen;

結果：

3.圓角

border-radius用來設置圓角，指定圓的半徑大小。

border-radius: 30px;

結果：

border-top-left-radius: 60px; border-top-right-radius: 100px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px 80px;

結果：

border-radius: 10px 40px 80px;

結果：

border-radius
四個值 左上 右上 左下 右下
三個值 左上 右上/左下 右下
兩個值 左上/右下 右上/左下
border-radius: 10px/50px;

結果：

三、浮動

浮動可以使一個元素向其父元素的左側或右側移動

float
none 默認值，元素不浮動
left 元素向左浮動
right 元素向右浮動

元素浮動以后會從文檔流中脫離，不在占用文檔流中的位置，所以元組下面還在文檔流中的元素會向上移動。

浮動的特點：

  • 浮動元素完全脫離文檔流，不在占據文檔流中的位置。
  • 設置浮動后元素會向父元素的左側或右側移動。
  • 浮動元素默認不會從父元素中移出
  • 浮動元素左或右移動時，不會超過他們前面的浮動元素
  • 如果浮動元素的前面是一個沒有浮動的塊元素，則浮動元素無法上移
  • 浮動元素不會超過它上面的浮動的兄弟元素，最多最多就是跟他一樣高
  • 主要作用就是讓頁面中的元素水平排列

注：浮動元素不會覆蓋文字。

脫離文檔流后元素特點：

  • 塊元素不在獨占一行
  • 塊元素的寬度和高度都被文字撐開
  • 行內元素脫離文檔流后，特點和塊元素一樣
  • 脫離文檔流之后，不再區分行內元素和塊元素
<!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: 200px;height: 200px;background-color: aquamarine;float: left;}.box2{width: 300px;height: 300px;background-color: yellow;float: left;}</style> </head> <body><div class="box1"></div><div class="box2"></div><span>唧唧復唧唧，木蘭當戶織。不聞機杼聲，唯聞女嘆息。問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。東市買駿馬，西市買鞍韉，南市買轡頭，北市買長鞭。旦辭爺娘去，暮宿黃河邊，不聞爺娘喚女聲，但聞黃河流水鳴濺濺。旦辭黃河去，暮至黑山頭，不聞爺娘喚女聲，但聞燕山胡騎鳴啾啾。萬里赴戎機，關山度若飛。朔氣傳金柝，寒光照鐵衣。將軍百戰死，壯士十年歸。歸來見天子，天子坐明堂。策勛十二轉，賞賜百千強。可汗問所欲，木蘭不用尚書郎，愿馳千里足，送兒還故鄉。爺娘聞女來，出郭相扶將；阿姊聞妹來，當戶理紅妝；小弟聞姊來，磨刀霍霍向豬羊。開我東閣門，坐我西閣床，脫我戰時袍，著我舊時裳。當窗理云鬢，對鏡帖花黃。出門看火伴，火伴皆驚忙：同行十二年，不知木蘭是女郎。雄兔腳撲朔，雌兔眼迷離；雙兔傍地走，安能辨我是雄雌？</span> </body> </html>

結果：

四、導航條練習

<!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前端基础笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。