HTMLday3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
css
層疊樣式表 修飾網頁的
css的語法
1.行內樣式的語法
2.內部樣式表和外部樣式表的語法
css的使用方式
1.行內樣式
2.內部樣式表
3.外部樣式表
4.外部導入樣式
css選擇器
ID選擇器
class選擇器
標籤選擇器
組合選擇器
子代選擇器
後代選擇器
通用選擇器
僞類選擇器 :hover鼠標懸浮上去的樣式
css樣式的優先級
1.根據權重來肯定
2.若是權重相同，就近原則（後定義原則）
權重：僅僅只是一個參考的值，並無實際的含義
內聯 1000
id 100
class 10
僞類 10
標籤 1
通用 0
!important 只要出現就以這個爲主
注意：計算權重的時候不須要去管子代、後代。直接加起來就OK
顏色的三種表示方法
1.顏色英文單詞
2.16進制
3.rgb 擴展 rgba
文本類樣式
color
line-height 得肯定裏面有幾行
text-align
text-decoration
font-size
font-style
font-family
font-weight
元素的顯示方式
display
inline 行內元素
inline-block
block
none 隱藏
元素的隱藏
visibility:hidden
輪廓
主要用在input標籤中，只須要清空便可
列表
list-style：none 便可
鼠標的樣式
cursor
透明度
opacity: 0.1; 取值：0-1之間 能夠爲0和1 0表示全透，1表示全不透
rgba(255,0,0,0.1)
面試題
visibility:hidden 和 display:none 的區別？
都是隱藏
可是visibility：hidden隱藏之後還會繼續保留位置
display：none 隱藏之後就不會佔位置
opacity和rgba的區別？
opacity針對整個元素的，包括裏面的背景顏色，圖片，文字...
rgba只針對背景顏色
</body>
</html>css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
border: 1px solid #f00;
display: inline-block;
}
.div01{
/*visibility: hidden;*/
display: none;
}
</style>
</head>
<body>
<div>1</div>
<div class="div01">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景類樣式</title>
<link rel="stylesheet" href="css/day03.css" />
</head>
<body>
<!--
今天任務:
1.css背景類樣式
2.框模型
3.css佈局
-->
<!--
background-color 背景顏色
background-image 背景圖片
background-repeat 背景圖片的重複
repeat-y 只容許在y軸重複
repeat-x 只容許在x軸重複
no-repeat 不重複，只顯示一次
background-position 背景圖片的定位
取值： 兩個，分別表示x和y方向。若是隻寫一個，則兩個值相等
例如：京東、淘寶 五星好評
雪碧圖： 各個小圖標的集合，使用的目的是減小http的請求
background 是把上面全部的所有合在一塊兒
background : color image repeat position
background-size 背景圖片的大小
-->
<div class="d03_01">
安防相似飛機來講你們發了時代峻峯老實交代法律手段見風使舵浪費
</div>
五星好評
<div class="d03_bgimg d03_02"></div>
四星
<div class="d03_bgimg d03_03"></div>
三星
<div class="d03_bgimg d03_03"></div>
兩星
<div class="d03_bgimg d03_03"></div>
一星
<div class="d03_bgimg d03_03"></div>
</body>
</html>面試
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框模型</title>
<link rel="stylesheet" type="text/css" href="css/day03.css"/>
</head>
<body>
<!--
任何一個元素，均可以理解成一個盒子
盒子是能夠裝"東西"
裏面東西跟"盒子的包裝"有必定的空間
兩個盒子或者說多個盒子，盒子之間是否是有必定的"距離"(空間)
盒子模型的組成
margin 外邊距 盒子與盒子之間的距離
border 邊框 包裝盒
padding 內邊距 填充物
content 內容 買好的東西
margin 合起來寫的屬性
4個
當你寫一個的時候，四個所有相同
兩個的時候，上右，對邊補齊
三個的時候，上右下，對邊補齊
margin-top margin-right margin-bottom margin-left
這四個屬性能夠單獨的拿出來寫
border 邊框 合寫的屬性
border-color 顏色
border-top-color: ;
border-left-color:
border-style 樣式
也分上下左右
border-width 寬度
也分上下左右
寫的時候不須要區分順序
padding
上右下左
對邊補齊
定義的width和height只是content部分
padding和border會把盒子撐大
盒子的大小 content+padding+border
-->
<div class="d04_01">今天星期三</div>
</body>
</html>瀏覽器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位</title>
<link rel="stylesheet" href="css/day03.css" />
</head>
<body>
<!--css佈局的一種方式-->
<!--
定位 : top,left,right,bottom 只有元素增長定位的狀況下才會使用
相對定位 老大
通常不要去用top,left,right,bottom
絕對定位 老二
元素會脫離文檔流
通常不要去用margin，用top，left，right，bottom
雖然都能達到效果，可是爲了開發的方便，代碼的簡潔。
固定定位 確定不是同一個爹
元素會脫離文檔流
使用場景：回到頂部
側邊欄的廣告
純種的野孩子。只有瀏覽器的窗口能夠管的住
通常的狀況下：相對定位和絕對定位是同時出現的
通常全部的下拉框都是絕對配合着相對定位完成的
position
-->
<div class="d05_01"></div>
</body>
</html>佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>絕對定位和相對定位的使用方法</title>
<style type="text/css">
body{
height: 20000px;
}
.d1{
width: 700px;
height: 700px;
border: 1px solid #000;
}
.d2{
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.d3{
width: 300px;
height: 300px;
border: 1px solid #000;
position: absolute;
}
.d4{
width: 100px;
height: 100px;
/*border: 1px solid #000;*/
background-color: #0f0;
position: absolute;
/*position: fixed;*/
bottom: 0;
right: 0;
/*top: 0;*/
/*尋找他的親哥（relative），纔會去聽親哥的話，在他的親哥眼皮底下活動
找的過程是依次往父元素上面進行查找，找不到就直接認body爲親哥，在body的範圍內活動
相對定位的做用通常是用來管着絕對定位的
* */
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<div class="d3">
<div class="d4"></div>
</div>
</div>
</div>
</body>
</html>網站
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/07.css" />
</head>
<body>
<ul>
<li class="li01">
個人訂單
<ul>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
</ul>
</li>
<li class="li01">
個人京東
<ul>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
</ul>
</li>
<li class="li01">
京東會員
<ul>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
</ul>
</li>
<li class="li01">
客戶服務
<ul>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
</ul>
</li>
<li class="li01">
網站導航
<ul>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
<li>待處理訂單</li>
</ul>
</li>
</ul>
</body>
</html>spa
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.f1,.f2{
position:relative;
}
.d1,.d2,.d3{
width: 100px;
height: 100px;
border: 1px solid #ccc;
position: absolute;
top: 0;
left: 0;
}
.d1{
background: #f00;
z-index: 5; /*表示層級,層級的比較得看爹夠不夠厲害*/
}
.d2{
background: #0f0;
z-index: 10;
}
.d3{
background: #00f;
}
</style>
</head>
<body>
<div class="f1">
<div class="d1">123</div>
<div class="d2">456</div>
<div class="d3">789</div>
</div>
<div class="f2">
<div class="d1">123</div>
<div class="d2">456</div>
<div class="d3">789</div>
</div>
</body>
</html>htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style type="text/css">
.d1,.d2,.d3{
width: 100px;
height: 100px;
border: 1px solid #000;
}
.d1,.d2,.d3{
float: left;
/*clear: both;*/ /*清除全部的浮動*/
}
.d3{
clear: both;
}
</style>
</head>
<body>
<!--浮動
浮動分爲兩種，左浮動和右浮動
浮動會脫離文檔流
難點在於清除浮動
清除浮動： 不是清除自身的浮動，而是清除上一個浮動對自身形成影響
-->
<div class="d1">d1</div>
<div class="d2">d2</div>
<div class="d3">d3</div>
</body>
</html>圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style: none;
border: 1px solid #000;
overflow: hidden; /*溢出隱藏，主要是用於清除浮動*/
}
li{
float: left;
width: 100px;
height: 100px;
border: 1px solid #ccc;
line-height: 100px;
text-align: center;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
overflow: scroll; /*溢出部分以滾動條顯示*/
}
</style>
</head>
<body>
<ul >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<!--增長一個空的標籤，清除全部的浮動，便可解決高度失效的問題-->
<p style="clear: both;"></p>
</ul>
<div>
熬枯受淡話費卡身份卡上的法拉時代峯峻拉絲機法拉盛龍捲風拉絲機地方垃圾的法拉可視對講法拉盛地方
</div>
</body>
</html>ci
-
每一个你不满意的现在，都有一个你没有努力的曾经。