[TOC]
### 1.1環境配置
裝rubyinstaller-2.4.4-1-64ruanjian:
1.在cmd中:
ruby -v
gem install sass
sass -v 查看版本
2.在vccode裝插件
easy sass
### 1.2父div下的子div排版問題(均分)
1.使用最后一個元素的magin-left:-1px;
2.使用偽元素給除最后一個元素div一個右邊的豎線來分隔;
.left-border>div:not(:last-child)::after{
content:"";
display: block;
position:absolute;
width:1px;
height:100%;
/*background:#333;*/
border-right: 1px solid #333;
top:0;
right:0;
}
### 1.3內陰影實現方案:
1.在div盒子的里面建一個空元素(盒子后面有div的話要把a放在后面div的前面不然會影響后面div設置的hover效果)用來實現陰影向內的效果:<a href="javascript: ;"></a>
2.父元素設置相對定位(就是hover的盒子并且hover>a !!!!)
3.然后給盒子相對定位 a元素相對定位當a的寬高百分百給他z-index:5;讓他顯示在盒子的上方:
.contet div{
position: relative;
}
.contet div:hover>a{
width:100%;
height:100%;
display: block;
position: absolute;
z-index: 5;
top:0;
cursor: pointer;
box-shadow: 0 0 20px 3px #e6e6e6 inset;
}
3.給盒子一個hover事件時這個元素實現陰影效果
box-shadow: 0 0 20px 3px #e6e6e6 inset;
水平陰影的位置。允許負值。|垂直陰影的位置。允許負值。|模糊距離。|陰影的尺寸。|陰影的顏色。|將外部陰影 (outset) 改為內部陰影
### 1.3部署網站(域名解析到服務器)
https://www.netlify.com/
免費入門
現在GitHub上創建庫里面要有index.html文件
創建一個新站點(完成三步)
網站設置(左上角左邊的)
向您的網站添加自定義域(自己買的域名) 校驗
域名管理
檢查DNS配置(第二個)
104.198.14.52
在阿里云解析域名 記錄類型A 主機:www
配置子網站可以自定義域名 相當于配置了一個服務器(可以使用cname解析 也可以使用dns解析 在阿里云輸入對應的)
右上角最右邊的
點擊add custom domain
自己定義網站的域名 就是將自己的域名商的www換成自己的名字
綠色的子域名記錄值 (黑色的四五個dns)
在阿里云解析域名 記錄類型cname 主機記錄:自己自定義的域名
記錄值是netlify上綠色的字
### 輪播
<div id="carousel-id" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-id" data-slide-to="0" class=""></li>
<li data-target="#carousel-id" data-slide-to="1" class=""></li>
<li data-target="#carousel-id" data-slide-to="2" class=""></li>
<li data-target="#carousel-id" data-slide-to="3" class=""></li>
<li data-target="#carousel-id" data-slide-to="4" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide" src="images/banner5.png">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="images/banner4.png">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="images/banner3.png">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="images/banner2.png">
</div>
<div class="item active">
<img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide" src="images/banner1.png">
</div>
</div>
<a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
### 文本溢出影藏
語法:
text-overflow:clip | ellipsis
默認值:clip
適用于:所有元素
clip: 當對象內文本溢出時不顯示省略標記(...),而是將溢出的部分裁切掉。
ellipsis: 當對象內文本溢出時顯示省略標記(...)。
在使用的時候,有時候發現不會出現省略標記效果,經過測試發現,使用ellipsis的時候,必須配合overflow:hidden; white-space:nowrap; width:50%;這三個樣式共同使用才會有效果,示例代碼:
<style type="text/css">
.test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}
</style>
<div class="test">關于**產品的推廣關于**產品的推廣關于**產品的推廣</div>
上面的width屬性根據實際需要填寫,其它樣式是固定的。
box-sizing: content-box|border-box|inherit;
### 慕課網:學習資料
### 字體壓縮:
先安裝node-v8.11.2-x86.msi
然后再cmd node -v
然后輸入npm config set registry https://registry.npm.taobao.org
輸入:npm install font-spider -g
font-spider --version
在vccode命令行
font-spider --version(不是內部命令 關掉重開)
font-spider *.html
使用命令行進行壓縮:(不再vccode中在cmd中也行)
先進入盤符(E:)
cd (粘貼字體樣式所在的盤符)回車
font-spider *.html
### 使用方法
將字體文件夾放入vccode中
<style>
.custom-font{
font-family: "IF";
font-size: 40px;
}
/* 自定義字體 */
@font-face{
font-family: "IF";
src: url("caoshu.ttf")
}
</style>
</head>
<body>
<p class="custom-font">小米</p>
</body>
vertical-align: middle; 垂直對齊:中間;
### float問題
~~~
使用float時 是盒子浮動的就給他的父元素給一個類名row
如果是盒子里面的內容浮動時 就直接給盒子一個清除浮動
~~~
### 背景固定
~~~
background-attachment:fixed/scroll
attachment :附著
fixed:固定 (如:網頁滑動的時候背景圖片不會一起動) scroll :滾動(網頁滑動的時候背景圖片會一起動)
~~~
### 背景定位
~~~
background-postion:X,Y
X:left,center right(注意之間為空格)
Y:top,center bottom(底部)
X,Y也可以設置左邊距和右邊距(就是說可以是 如:50px;之類的)
~~~
### 小三角陰影:
.sz i{
z-index: 100;
content: "";
border: 7px solid transparent;
border-bottom-color:#fff;
position: absolute;
right:48px;
top:-14px;
}
.sz em{
content: "";
border: 7px solid transparent;
border-bottom-color: #d8d8d8;;
position: absolute;
right:48px;
top:-15px;
}
### 過渡
transition: all 2s; transition:過渡
transform: translateY(-100%); transform :轉型 translateY:平移
通過 translate() 方法,元素從其當前位置移動,根據給定的 left(x 坐標) 和 top(y 坐標) 位置參數:
值 translate(50px,100px) 把元素從左側移動 50 像素,從頂端移動 100 像素。
通過 rotate() 方法,元素順時針旋轉給定的角度。允許負值,元素將逆時針旋轉。
值 rotate(30deg) 把元素順時針旋轉 30 度。
### 雪碧圖
小米登陸界面的雪碧圖:a標簽里面套i標簽,a裝背景顏色,i放圖片然后使用background-position調整
background-position:x%,y%;
原理:雪碧圖的中心點移動外層div的寬高的百分比
background-position:10px 20px;
原理:以左上角為原點然后移動到(10,20)點
調整字體高度用line-height:
border-box 不會改變元素大小
@keyframes 規則
使一個div元素逐漸移動200像素:
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
### visibility 和 display的區別:
visibility 屬性規定元素是否可見。
提示:即使不可見的元素也會占據頁面上的空間。請使用 "display" 屬性來創建不占據頁面空間的不可見元素。
Emmet的HTML語法(敲代碼的快捷方式)
https://blog.csdn.net/fghsfeyhdf/article/details/78069259
### 解決圖片下間隙
~~~
.img img{
width: 150px;
height: 150px;
vertical-align: bottom;
}
// 解決div里放img時底部有邊框
// .img{
// font-size: 0;
// 第二種解決方案
// }
~~~