整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
三部分 附錄（因為暫時不支持插入超鏈接所以部分內容無法顯示）
附錄一 DIV命名規范
附錄二 CSS精靈
a {
display:block;
width:200px;
height:65px;
line-height:65px; /*定義狀態*/
text-indent:-2015px; /*隱藏文字*/
background-image:url(button.png); /*定義背景圖片*/
background-position:0 0;
/*定義鏈接的普通狀態，此時圖像顯示的是頂上的部分*/
}
a:hover {
background-position:0 -66px;
/*定義鏈接的滑過狀態，此時顯示的為中間部分，向下取負值*/
}
a:active {
background-position:0 -132px;
/*定 義鏈接的普通狀態，此時顯示的是底部的部分，向下取負值*/
}
附錄三 一些tips解決方案
頁面優化實踐
寫DIV+CSS 的一些常識
常用代碼片段
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin:0; padding:0;
}
body {
background:#fff;
color:#555;
font-size:14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td,
th,
caption {
font-size:14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:normal;
font-size:100%;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style:normal;
font-weight:normal;
}
a {
color:#555;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
img {
border:none;
}
ol,ul,li {
list-style:none;
}
input,
textarea,
select,
button {
font:14px Verdana,Helvetica,Arial,sans-serif;
}
table {
border-collapse:collapse;
}
html {
overflow-y: scroll;
}
.clearfix:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {
*zoom:1;
}
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
table-layout: fixed; word-break: break-all;;border-collapse: collapse
<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”> <span style=”background:#f00; display:table-cell; vertical-align:middle;”> <input type=”button” value=”item1″ /> </span> </div>
filter:alpha(opacity=50); /*1-100*/ -moz-opacity:0.5; /*0-1.0*/ -khtml-opacity:0.5; /*0-1.0*/ opacity:0.5; /*0-1.0*/
white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
.fix{zoom:1;}
.fix:after{
display:block;
content:'clear';
clear:both;
line-height:0;
visibility:hidden;
}
一些總結
一些概念
學習從來不是一個人的事情，要有個相互監督的伙伴，想要學習或交流前端問題的小伙伴可以私信“學習”小明加群獲取2019web前端最新入門資料，一起學習，一起成長！
ss聲明順序優先級
默認缺省
外聯樣式
內聯樣式
行內樣式
缺省<外聯樣式<內聯樣式<行內樣式
id>class
多類情況下屬性越靠后優先級越高
缺省設置就是瀏覽器的缺省設置，不同的瀏覽器對元素的默認規則是不一樣的
外部樣式就是在head內部引用的樣式文件，比如：
<link type=”text/css” rel=”sheetstyle” href=”xxx.css”/>
行內樣式指的在元素標簽內直接指定樣式，比如:
<div style=”background-color:red”></div>
要在行內對一個元素同時指定多個樣式屬性的時候，我們可以把指定的屬性用“：”隔開，比如：
<div style=”background-color:red;width:100px;heigth:50px”></div>
最后一個元素值的”;”可有可無
比如：
<div class=”fl fr”></div>
Css文件中寫:
div{
width:100px;
weight:50px;
background-color:red;
}
.fl{
float:left;
}
.fr{
float:right;
}
那么這個div到底向右浮動還是向左浮動？
答案是向右浮動，為什么是向右浮動？新手一般會認為，class=”fl fr”,fr在后面嘛，但事實是：在多個類指定的屬性的時候，屬性生效的優先級不跟指定屬性的類名先后順序有關，而是跟css文件里面的.fl和.fr先后順序有關，我們把css里面的.fl屬性聲明和.fr屬性聲明調換一下位置,div的浮動屬性就變成左浮動了!
我們得出的答案是:屬性聲明越靠后面，它的優先級越高！
我們把css文件里面的fl和fr里面都加上font-size屬性:
.fl{
Float:left;
Font-size:24px;
}
.fr{
Float:right;
Font-size:12px;
}
效果是:里面的字體是12px，再次驗證了屬性聲明越靠后，優先級越高!
比如:
.fl{
Font-size:24px
Font-size:12px;
}
結果是:
比如：
<div id=”myid” class=”fr”></div>
我們在css文件里面指定:
#myid{
Float:left;
}
.fr{
Float:right;
}
雖然fr的float聲明靠后，但是id屬性優先啊，所以，這個div打死都不會向右浮動！
例如：
<div id=”myid” class=”fl lr”style=”float:right”></div>
那么這個div是向左浮動還是向右浮動?
答案是向右，因為不管是id和class，都是內聯樣式，行內樣式優先級是高于內聯樣式的
關于css樣式優先級順序到此結束
你們的關注是我持續更新的動力，求個關注！
先，我們一般都是通過各種app，瀏覽器上各大平臺制作我們的內容，這些內容最后一般都是通過html，css以及javascript處理，并且最終通過瀏覽器的渲染進程來展示出來。那這個背后的邏輯和原理是怎么樣的呢？
瀏覽器開始加載 HTML 文檔，并按照從上到下的順序解析文檔內容。
遇到 <script> 標簽時，可能會暫停 HTML 解析，開始 JavaScript 解析。
瀏覽器引擎解析 JavaScript 代碼，將其轉換為可執行的機器碼。
JavaScript 可以直接修改 DOM（文檔對象模型）和 CSSOM（CSS 對象模型）。
HTML 解析器構建 DOM 樹，表示文檔的層次結構，即文檔對象模型。
JavaScript 可以在這個階段修改 DOM 樹的結構。
瀏覽器解析 CSS 樣式表，構建 CSS 對象模型（CSSOM）。
CSSOM 描述了文檔中所有元素的樣式信息。
DOM 樹和 CSSOM 樹結合，形成渲染樹（Render Tree）。
渲染樹只包含需要顯示的節點和其樣式信息。
瀏覽器根據渲染樹的信息，計算每個節點在屏幕上的確切位置和大小。
瀏覽器使用繪制命令將每個節點繪制到屏幕上。
當 DOM 樹或 CSSOM 樹發生變化時，可能觸發布局和繪制的重新計算，這就是重排（Reflow）和重繪（Repaint）。
重排涉及到重新計算布局，而重繪只涉及到樣式的更新。
瀏覽器會盡量優化回流和重繪的開銷，例如通過合并多次的操作、使用異步更新等方式。
在整個過程中，JavaScript、CSS 和 HTML 相互作用，而瀏覽器通過這些步驟最終將網頁呈現給用戶。這個過程是即時的，用戶可以在不同階段看到頁面的渲染效果。因此，為了提高性能，開發人員需要注意減少不必要的回流和重繪，以及合理使用異步操作等策略。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
