前端 css && 原型頭像 && 小米商城導航欄
阿新 • • 發佈：2021-07-01
前端部分 day03
內容回顧
- link標籤
- form標籤 表單標籤
- input標籤 輸入框
- css樣式引入方式
- css選擇器
- 基本選擇器
- 元素選擇器
- id選擇器
- 類選擇器
- 基本選擇器
- css樣式相關
- 高度寬度
- 字型相關
- 字型對齊補充
- 顏色設定
- 背景
- 邊框
- 盒子模型
- 內邊距
- 外邊距
- display屬性
- 浮動float
今日內容
偽元素選擇器
css寫法
div{
background-color:pink;
height:100px;
width:200px;
}
div::after{
content:'?';
color:white;
}
偽類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* a標籤沒有被訪問過的時侯設定的樣式*/ a:link{ color: green; } /*a標籤訪問中時設定的樣式,滑鼠點選下去，還沒有抬起來的顏色*/ a:active{ color: orange; } /*a標籤訪問過之後設定的樣式*/ a:visited{ color: red; } /*滑鼠懸浮到a標籤上時設定的樣式*/ a:hover{ color: purple; } #d1{ background-color: aqua; width: 200px; height: 200px; } #d1:hover{ background-color: pink; /*cursor: pointer;*/ cursor: help; } </style> </head> <body> <a href="http://www.baidu.com">學校網站</a> <div id="d1"></div> </body> </html>
文字裝飾
a{
text-decoration: none;去除下劃線
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ text-decoration: none; } </style> </head> <body> <!--href屬性等於#號，點選a標籤就不會重新整理頁面,但是會給位址列後面加個#號--> <a href="#">百度</a> <!--href屬性等於javascript:void(0)；點選a標籤就不會重新整理頁面，也不會加#號，工作中常用--> <a href="javascript:void 0;">京東</a> </body> </html>
定位position
static 靜態定位，也就是標籤預設，html文件的預設效果
relative:相對定位，按照自己原來的位置進行移動
absolute:絕對位置，按照父級標籤或者祖先輩標籤設定了相對定位的標籤位置進行移動，如果沒有找到相對定位標籤，會找到整個文件的位置進行移動
fixed：固定定位，按照瀏覽器視窗的位置進行移動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1,.c2,.c3{ height: 100px; width: 100px; } .c1{ background-color: red; } .c2{ background-color: green; position: relative; /*相對定位：相對於該標籤原來的位置進行移動， 但是定位的元素如果想移動位置，那麼需要給四個方向來設定值top、bottom、left、right*/ /*設定定位元素，也是脫離文件流的*/ left: 50px; top: 100px; } .c3{ background-color: aqua; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1,.c2,.c3{
height: 100px;
width: 100px;
}
.c1{
background-color: red;
}
.c2{
background-color: green;
position: absolute;
top:20px ;
left: 40px;/*距離左邊的距離偉40px，距離上面的距離為20px*/
}
.c3{
background-color: aqua;
width: 200px;
}
</style>
</head>
<body>
<div class="cc">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
</body>
</html>
固定位置和回到頂部示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 500px;
width: 100%;
background-color: red;
}
.c2{
height: 600px;
background-color: purple;
}
span{
position: fixed;/*固定位置，位置是按照瀏覽器視窗進行定位的
也是通過四個方向的值來進行控制*/
left: 40px;
bottom: 40px;
width: 80px;
height: 40px;
background-color: aqua;
line-height: 40px;
text-align: center;
}
span a{
color: black;/* a標籤比較特殊，當給a標籤中的文字內容設定樣式的時候，
必須鎖定到a標籤才能給它進行設定*/
text-decoration: none;
font-size: 12px;
}
</style>
</head>
<body>
<div id="d1">頂部位置</div>
<div class="c1">
</div>
<div class="c2"></div>
<span>
<span>xxx</span>
<a href="#d1">回到頂部</a>
</span>
</body>
</html>
選擇器優先順序
css屬性有幾層的概念 權重0
標籤（元素）選擇器 權重1
類選擇器 權重10
id選擇器 權重100
內聯樣式 權重1000
color:green!import;無敵！
如果優先順序相同，按照後面的為準
class屬性的值可以寫多個
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1:當選擇器的權重相同時，寫在後面的會覆蓋前面的標籤樣式
只限於相同的css屬性，不同的不會覆蓋*/
div{
color: red;
font-size: 20px;
}
/*div{*/
/* color: green;*/
/*}*/
/*類選擇器的權重大於元素選擇的權重，權重越大，對應的效果越優先顯示
與位置無關*/
/*.c1{*/
/* color: purple;*/
/*}*/
#d1{
color: yellow;
}
p{
color: red;
}
span{
color: pink;
}
.c2 .cc2 .ccc2{/*多層選擇器，權重是累加的 10+10+10=30
但是不進位，11個類選擇器加起來還是不會大於一個id選擇器*/
color: red;
}
</style>
</head>
<body>
<div class="c1" id="d2" style="color: blue">
線上發牌
</div>
<p>
p1
<span>span1</span>
</p>
<div class="c2" id="c2">
<div class="cc2">
<div class="ccc2">
divccc2
</div>
</div>
</div>
</body>
</html>
字型補充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 100px;
width: 300px;
border: 1px solid red;
/*text-align: right;*/
font-size: 20px;
font-family: '楷體';
}
</style>
</head>
<body>
<div class="c1">
11個小三也撕不過原配
</div>
</body>
</html>
margin補充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border: 1px solid red;
}
.c2{
height: 60px;
width: 80%;
background-color: pink;
/*margin-left: 10%;!*按照父級標籤寬度的10%作為距離*!*/
margin: 0 auto;/*水平居中，text-align:center，設定的是文字內容居中*/
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>
小米商城導航欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
}
.nav{
background-color: #333;
height: 40px;
}
.nav-content{
width: 90%;
margin-left: 5%;
height: 40px;
line-height: 40px;
}
.nav-left{
float: left;
height: 40px;
}
.nav-right{
float: right;
height: 40px;
}
.nav-right-cart{
position: relative;
width: 120px;
height: 40px;
margin-left: 15px;
line-height: 40px;
text-align: center;
}
.nav-right-cart:hover{
background-color: white;
cursor: pointer;
}
.nav-right-cart:hover a{
color: orange;
}
.nav-content a{
color: #b0b0b0;
font-size: 12px;
text-decoration: none;
}
.nav-content span{
color: #424242;
}
.cart-thing{
height: 100px;
width: 320px;
position: absolute;
background-color: orange;
top: 40px;
right: 0;
display: none;
}
.nav-right-cart:hover .cart-thing{
display: block;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-content">
<div class="nav-left">
<a href="" class="item">小米商城</a> <span class="s1">|</span>
<a href="" class="item">MIUI</a> <span class="s1">|</span>
<a href="" class="item">LoT</a> <span class="s1">|</span>
<a href="" class="item">雲服務</a> <span class="s1">|</span>
<a href="" class="item">金融</a> <span class="s1">|</span>
<a href="" class="item">有品</a> <span class="s1">|</span>
<a href="" class="item">小愛開放平臺</a> <span class="s1">|</span>
<a href="" class="item">小米商城</a> <span class="s1">|</span>
<a href="" class="item">小米商城</a> <span class="s1">|</span>
<a href="" class="item">小米商城</a> <span class="s1">|</span>
<a href="" class="item">下載</a> <span class="s1">|</span>
<a href="" class="item">小米商城</a>
</div>
<div class="nav-right">
<a href="" class="item">登入</a> <span class="s1">|</span>
<a href="" class="item">註冊</a> <span class="s1">|</span>
<a href="" class="item">訊息通知</a>
<span class="nav-right-cart">
<div class="cart-thing">購物車裡面的東西</div>
<a href="" class="item" cart>購物車(0)</a>
</span>
</div>
</div>
</div>
</body>
</html>
原型頭像示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 100px;
width: 100px;
border: 1px solid red;
border-radius: 50%;
overflow: hidden;/*超出部分隱藏*/
/*overflow: auto;!*超出部分隱藏，出現滾動條*!*/
}
img{
/*width: 100%; !*img標籤的寬度按照父級寬度來，高度和寬度*/
/*設定其中一個百分比，另外一個會自動等比例縮放*!*/
}
</style>
</head>
<body>
<div class="c1">
<img src="1.png" alt="">
</div>
</body>
</html>