個(gè)人音樂(lè)網(wǎng)站建設(shè)武漢seo主管
文章目錄
- 一、常用樣式講解二
- 1.1 元素隱藏
- 1.2 二級(jí)菜單
- 1.3 相對(duì)定位和絕對(duì)定位
- 1.4 定位的特殊情況
- 1.5 表格
- 1.6 表格的css屬性
- 1.7 表格中新增的標(biāo)簽
一、常用樣式講解二
1.1 元素隱藏
如何讓一個(gè)元素隱藏
1、不定義顏色 占用空間
2、display: none 不占用空間
3、visibility: hidden 占用空間
4、opacity: 0 透明度 占用空間
5、height: 0 不占用空間
6、transform: scal(0) 縮放 占用空間，不管縮小還放大，空間還是原來(lái)大小 css3
1.2 二級(jí)菜單
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>H5學(xué)習(xí)</title><style type="text/css">*{margin: 0;padding: 0;}ul li{list-style: none;}.nav{width: 900px;height: 80px;margin: 0 auto;background-color: #0d0e24;}.nav>li{float: left;color: white;font-size: 20px;line-height: 80px;text-align: center;width: 100px;cursor: pointer;}.nav>li:hover>ul{display: block;}.nav>.one:hover{color: orange;}.nav>li>ul{width: 100px;height: 280px;background-color:aquamarine;display: none;}.nav>li>ul>li{color: white;font-size: 14px;text-align: center;line-height: 40px;cursor: pointer;}</style>
</head>
<body><ul class="nav"><li class="one">游戲資料<ul><li>版本介紹</li><li>游戲介紹</li><li>英雄資料</li><li>爆料站</li><li>世界觀體驗(yàn)站</li><li>游戲壁紙</li></ul></li><li class="one">內(nèi)容中心<ul><li>版本介紹</li><li>游戲介紹</li><li>英雄資料</li><li>爆料站</li><li>世界觀體驗(yàn)站</li><li>游戲壁紙</li></ul></li><li class="one">賽事中心<ul><li>版本介紹</li><li>游戲介紹</li><li>英雄資料</li><li>爆料站</li><li>世界觀體驗(yàn)站</li><li>游戲壁紙</li></ul></li><li class="one">百態(tài)王者<ul><li>版本介紹</li><li>游戲介紹</li><li>英雄資料</li><li>爆料站</li><li>世界觀體驗(yàn)站</li><li>游戲壁紙</li></ul></li><li class="one">社區(qū)互動(dòng)<ul><li>版本介紹</li><li>游戲介紹</li><li>英雄資料</li><li>爆料站</li><li>世界觀體驗(yàn)站</li><li>游戲壁紙</li></ul></li><li class="one">玩家支持<ul><li>版本介紹</li><li>游戲介紹</li><li>英雄資料</li><li>爆料站</li><li>世界觀體驗(yàn)站</li><li>游戲壁紙</li></ul></li><li class="one">IP新游<ul><li>版本介紹</li><li>游戲介紹</li><li>英雄資料</li><li>爆料站</li><li>世界觀體驗(yàn)站</li><li>游戲壁紙</li></ul></li></ul></body>
</html>
1.3 相對(duì)定位和絕對(duì)定位
定位(position)：解決一個(gè)元素在頁(yè)面當(dāng)中或者容器當(dāng)中實(shí)現(xiàn)任意一個(gè)位置擺放的問(wèn)題。
屬性: position
值：
position: static 靜態(tài)定位默認(rèn)值
position: relative 相對(duì)定位
相對(duì)定位的特點(diǎn)：
1、添加完相對(duì)定位的元素可以通過(guò)方位值來(lái)進(jìn)行位移。
postion: relative;
top: 100px;
2、相以定位不脫離文檔流它位移的時(shí)候之前的位置還是被占用的狀態(tài)。
3、位置的參照物是自己之前的位置。
position: absolute 絕對(duì)定位
1、絕對(duì)定位會(huì)脫離常規(guī)文檔流。會(huì)出現(xiàn)類(lèi)似浮動(dòng)的效果。
2、絕對(duì)定位參照物是有定位屬性的父容器，如果父容器沒(méi)有則向上找，沒(méi)找到就是瀏覽器。
3、一般我們給子元素設(shè)定絕對(duì)定位，那么父元素設(shè)置相對(duì)定位。
position: fixed 固定定位（瀏覽器定位）
參照物是瀏覽器。
position: sticky 粘性定位
特點(diǎn)：像相對(duì)定位一樣會(huì)占用頁(yè)面空間，當(dāng)進(jìn)行滑動(dòng)時(shí)會(huì)像固定定位一樣按照某個(gè)值來(lái)進(jìn)行定位。
導(dǎo)航吸頂效果：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>H5學(xué)習(xí)</title><style type="text/css">*{margin: 0;padding: 0;}ul li{list-style: none;}.nav{width: 100%;height: 40px;background-color: black;position: fixed;opacity: 0.5;}.nav li{float: left;width: 20%;font-size: 14px;color: white;line-height: 40px;text-align: center;}.nav li:hover{background-color: orange;}.imgbox img{display: block;width: 100%;}</style>
</head>
<body><ul class="nav"><li>加粗</li><li>傾斜</li><li>標(biāo)題</li><li>刪除線(xiàn)</li><li>無(wú)序</li></ul><div class="imgbox"><img src="./images/1.jpeg" alt=""><img src="./images/2.jpeg" alt=""><img src="./images/3.jpg" alt=""><img src="./images/4.jpeg" alt=""></div>
</body>
</html>
1.4 定位的特殊情況
1、給多個(gè)元素添加定位（相對(duì)、絕對(duì)、固定）
a 給相對(duì)定位添加
都有相對(duì)定位的時(shí)候在層級(jí)顯示的關(guān)系上后面的會(huì)蓋住前面
z-index屬性可以來(lái)進(jìn)行元素之間層級(jí)顯示的權(quán)重，值越大越靠前，可以取值為負(fù)，默認(rèn)為0
b 給所有元素添加絕對(duì)定位
添加完后會(huì)脫離文檔流，會(huì)重疊在一起
z-index屬性可以來(lái)進(jìn)行元素之間層級(jí)顯示的權(quán)重，值越大越靠前，可以取值為負(fù)值。
c 固定定位所有元素添加后
像絕對(duì)定位一樣會(huì)疊在一起然后通過(guò)zindex來(lái)進(jìn)行切換
2、絕對(duì)定位和固定定位的區(qū)別
絕對(duì)定位如果超出頁(yè)面可以通過(guò)滾動(dòng)條滑動(dòng)看到，固定定位是基于瀏覽器無(wú)法觀看
3、當(dāng)添加完定位后margin 0 auto 不好使了。
4、當(dāng)設(shè)定絕對(duì)定位后寬度自適應(yīng)填充的效果不能實(shí)現(xiàn)需要定義具體的寬度。
5、定位效果的編寫(xiě)
a、讓一個(gè)盒子寬300 高300，位置為瀏覽器的中心
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>H5學(xué)習(xí)</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 300px;height: 300px;background-color: orange;position: fixed;top: 50%;margin-top: -150px;left: 50%;margin-left: -150px;}</style>
</head>
<body><div class="box"></div>
</body>
</html>
b、讓一個(gè)在一個(gè)盒子的正中心是赤
1、給父容器添加相對(duì)定位
2、四個(gè)方位歸0
top: 0;
left: 0;
right: 0;
bottom: 0;
margin auto;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>H5學(xué)習(xí)</title><style type="text/css">*{margin: 0;padding: 0;}ul li{list-style: none;}.box{width: 1180px;height: 365px;margin: 0 auto;position: relative;}.box .nav{width: 100px;height: 365px;background-color: pink;float: left;}.box .nav li{font-size: 14px;color: white;height: 40px;line-height: 40px;text-align: center;cursor: pointer;}.box .nav li:hover{background-color: orange;}.box .nav li:hover .xmgw,.box .nav li:hover .xmsc,.box .nav li:hover .xmyx,.box .nav li:hover .xmui{display: block;}.box .banner{display: block;float: left;}.xmgw,.xmsc,.xmyx,.xmui{width: 800px;height: 365px;background-color: chartreuse;opacity: 0.5;position: absolute;top: 0;left: 100px;display: none;}</style>
</head>
<body><div class="box"><ul class="nav"><li>小米官網(wǎng)<div class="xmgw"></div></li><li>小米商城<div class="xmsc"></div></li><li>小米影像<div class="xmyx"></div></li><li>MIUI<div class="xmui"></div></li><li>Lot</li><li>云服務(wù)</li></ul><img class="banner" src="./images/小米.png" alt=""></div>
</body>
</html>
注意行級(jí)元素，塊級(jí)元素，行塊級(jí)元素，定位子絕父相。
1.5 表格
表格的作用：用來(lái)顯示數(shù)據(jù)，以前可以用來(lái)進(jìn)行布局
基本語(yǔ)法
table 代表一個(gè)表格
tr 代表行
td 代表列
<table><tr><td>單元格1</td><td>單元格2</td></tr>
</table>
表格的屬性(table tr td)
table的屬性
border=“1” 邊框?qū)傩?br /> width=“300px” 表格的寬度 px可以不加，默認(rèn)就是px,也可以用百分比
height=“200px" 表格的高度 不能使用百分比
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>H5學(xué)習(xí)</title>
</head>
<body><table border="1" width="600px" height="300px" align="center"><tr><td>我是一個(gè)兵</td><td>來(lái)自老百姓</td></tr><tr><td>打倒了日本狗強(qiáng)盜</td><td>消滅了蔣匪軍</td></tr></table>
</body>
</html>
1.6 表格的css屬性
border : 1px solid #008000;
border-spacing: 10px ; 單元格之間的間距
border-collapse: collapse; 細(xì)線(xiàn)邊框
table-layout: auto
單元格跟著內(nèi)容擴(kuò)展，不會(huì)溢出，每次加載要進(jìn)行表格大小計(jì)算，瀏覽器來(lái)重新渲染。
table-layout: fixed
固定寬度，瀏覽器不需要重新計(jì)算，數(shù)據(jù)多單元格裝不下就會(huì)溢出。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>H5學(xué)習(xí)</title><style type="text/css">*{margin: 0;padding: 0;}.tb1,.tb2,.tb3,.tb4,.tb5,.tb6, h2{margin: 0 auto;text-align: center;}.tb1,.tb2,.tb3,.tb4{width: 300px;height: 100px;border-collapse: collapse;}.tb1{border: 1px solid black;}.tb1 td, .tb2 td{border: 1px solid black;}.tb2{border: 2px solid black;}.tb3{/* 線(xiàn)要精一點(diǎn)才能體現(xiàn)出double */border: 5px double black;}.tb3 td{border: 3px double black;}.tb4{/* border-spacing：一個(gè)值；代表水平方向和垂直方向的間距是一樣的 注意：只有在 邊框獨(dú)立border-collapse: separate時(shí)才能用*/border-collapse: separate;border-spacing: 20px;}.tb4 td{border: 1px solid black;}.tb5{width: 300px;height: 100px;margin: 0 auto;border-top: 1px solid black;border-bottom: 1px solid black;}.tb6{width: 300px;height: 300px;border: 3px solid black;border-spacing: 15px;/* 內(nèi)容為空的單元格隱藏 */empty-cells: hide;}.tb6 td{background-color: aqua;}</style>
</head>
<body><h2>細(xì)線(xiàn)表格</h2><table class="tb1"><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr></table><h2>粗線(xiàn)表格</h2><table class="tb2"><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr></table><h2>雙線(xiàn)表格</h2><table class="tb3"><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr></table><h2>宮字格</h2><table class="tb4"><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr></table><h2>單線(xiàn)表格</h2><table class="tb5" rules="rows"><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr></table><h2>日歷表格</h2><table class="tb6"><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td></td></tr></table>
</body>
</html>
1.7 表格中新增的標(biāo)簽
分組標(biāo)簽
thead 表格的頭部
tfoot 表格的底部
tbody 表格的主體
如果我們沒(méi)有創(chuàng)建tbody，瀏覽器會(huì)創(chuàng)建一個(gè)
一個(gè)表格只能有一個(gè)頭部和一個(gè)尾部，但可以有多個(gè)主體。