整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          hTML 樣式

          設計網頁中,錨點滾動是不可或缺的,現在分享給大家,好好看看。

          jq代碼

          為了好復制,插入整個demo源碼

          <!DOCTYPE html>

          <html>

          <head>

          <metacharset="UTF-8">

          <metaname="viewport"content="width=device-width, initial-scale=1.0">

          <metahttp-equiv="X-UA-Compatible"content="ie=edge">

          <title>js錨點滾動效果</title>

          <style>

          ul>li{float: left;margin: 10px ;}

          .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0}

          .clearfix{zoom:1}

          .step{width:80%;height:1300px;border:10pxsolidred;margin:0auto;}

          </style>

          </head>

          <body>

          <ulclass="clearfix">

          <li><ahref="#step1">#step1</a></li>

          <li><ahref="#step2">#step2</a></li>

          <li><ahref="#step3">#step3</a></li>

          </ul>

          <div>

          <divid="step1"class="step">step1</div>

          <divid="step2"class="step">step2</div>

          <divid="step3"class="step">step3</div>

          </div>

          </body>

          <scriptsrc="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

          <script>

          //頁面錨點滾動js

          $('a[href*=#],area[href*=#]').click(function {

          if (location.pathname.replace(/^//, '') ==this.pathname.replace(/^//, '') &&location.hostname ==this.hostname) {

          var$target=$(this.hash);

          $target=$target.length &&$target||$('[name='+this.hash.slice(1) +']');

          if ($target.length) {

          vartargetOffset=$target.offset.top;

          $('html,body').animate({

          scrollTop: targetOffset

          },

          1000);

          returnfalse;

          }

          }

          });

          //頁面錨點滾動js結束

          </script>

          </html>

          ps:希望喜歡我的朋友點贊,關注,轉發一下。

          網站開發,程序設計,UI等相關問題,編程技巧以及其他你想向我問的問題,來者不拒。

          、CSS的起源

          當web開發還是一項新技術的時候,無論定義網頁內容還是定義網頁樣式,都是使用的HTML語言,HTML的內容和樣式沒有區分開,如古老的HTML樣式:

          <H3 COLOR=RED><CENTER>樣式</CENTER></H3>
          

          其中color表示顏色,center讓文字居中,不是目前規范的書寫形式,而且舊的HTML標簽都是大寫的,web開發人員還需要來回切換大小寫,所以很多人認識到了這種開發方式并不理想。

          Web開發人員想開發一種新的語言,把表示樣式的代碼從HTML中分離出來,并且創建一種規則來定義HTML標簽要顯示成什么樣子,這門語言叫做CSS,CSS是用來描述HTML標簽應該如何顯示的一個代碼。如:

          <h3>樣式</h3> 
          

          用CSS可以讓h3標簽顯示成綠色,讓h3字體在大一點,讓h3有一個下劃線,可以統一字體的顯示樣式等。

          CSS樣式

          二、CSS的工作方式

          CSS的全稱叫做 Cascading Style Sheets 級聯樣式表,CSS的工作方式依賴于"選擇器"可以選擇HTML標簽,并且修改這些標簽的樣子。

          選擇器的類型有:

          1、類型選擇器:不帶尖括號的標簽名,最簡單的選擇器

          類型選擇器

          定義了一個P標簽,如果想在CSS中選擇這個標簽,首先寫上字母P,然后選擇要定的屬性如text-decoration,并設置這個屬性的屬性值為underline下劃線,在瀏覽器中這個段落就會顯示下劃線。

          類型選擇器

          使用選擇器的時候我們必須要遵守選擇器的特殊語法規則:

          選擇器名字后面是一個開始的大括號,屬性和屬性值中間是冒號,屬性值后面是分號,這里面任何一部分都不能丟掉,否則CSS無法正常工作,并且要注意標點符號全部是英文半角的,最后在所有的屬性列表后面是一個結束的大括號,大括號的作用就是可以在里面寫很多屬性,如圖:

          類型選擇器

          顯示結果為帶下劃線的紅色字體段落:

          類型選擇器

          在CSS中使用標簽名選擇標簽的時候,類型選擇器會作用在所有同名標簽中。所以這里只定義額一CSS樣式,它會作用在所有的P標簽中。

          2、派生選擇器

          可以讓CSS標簽作用在很小的范圍內,如下圖,只讓CSS作用在li標簽中,所以選擇ul標簽中的li標簽即可。

          派生選擇器

          3、偽類選擇器

          1)在原有選擇器的基礎上添加一個限定條件,當某種情況發生時在選擇這個標簽。如下圖,首先定義個a的類型選擇器,讓頁面中所有的超鏈接下劃線都不顯示,然后通過派生選擇器控制鼠標的動作,當鼠標移上去的時候,超鏈接文字顯示下劃線并顯示為深藍色。

          偽類選擇器

          偽類選擇器

          這條規則只有當鼠標放到超鏈接上停留的時候才會被應用,因此當某種情況發生時候偽類選擇器才會被應用在某個標簽上。

          a的偽類選擇器一共有四種:

          :link 未被訪問的鏈接的樣式;和a標簽相同時,并且同時存在的時候會覆蓋a標簽

          :hover 鼠標移動到超鏈接上的時候

          :active 選擇器用于活動鏈接,被選定的超鏈接。

          :visited 已被訪問的超鏈接,

          注釋:在 CSS 定義中,:hover 必須位于 :link 和 :visited 之后(如果存在的話),這樣樣式才能生效。

          2)使用偽類選擇器縮小選擇范圍

          :first-child 縮小標簽的選擇范圍,如圖:

          如果一個標簽后面還接了一個子標簽,在子標簽后面冒號:first-child,說明這里只選擇了子標簽中的第一個標簽,可以看到瀏覽器中有序列表中的第一個li子元素"北京"顏色為紫色。

          偽類選擇器

          偽類選擇器

          CSS樣式

          三、CSS樣式表放在什么地方

          在head標簽中添加style子標簽,在style標簽里寫一個屬性type="text/css",這樣瀏覽器就知道當頁面顯示出來的時候,需要把style中的CSS代碼應用到HTML中,因此可以在style標簽中創建CSS規則。

          css樣式

          每天進步一點點,跟著教頭學開發。

          ss是一種用來為Html文檔添加樣式(字體、間距、位置、顏色、角度等顯示效果)的計算機語言。學習網站W3school。

          css的引用樣式:

          一:style標簽(內聯樣式)


          通過在head標簽中間新建一個style標簽,該標簽內部存放的就是網頁文件中的css代碼。

          二:外部引用css文件(外聯樣式)



          新建一個css文件

          在head標簽中間新建一個link標簽,通過href屬性設置外部的css文件地址。rel=“stylesheet”表示我們引用的一個樣式表(css文件)。

          三:標簽內部style屬性(行內樣式)

          在開始標簽的內部可以設置一個叫做style的屬性,屬性的雙引號存放該元素代碼的css樣式(不推薦使用)。


          一般用的就是通過link標簽來引入外部css文件來修改樣式,一般修改樣式有字體,顏色,大小,文本居中,間距等。


          主站蜘蛛池模板: 国产精品视频免费一区二区三区| 亚洲国产一区明星换脸| 成人精品视频一区二区| 五十路熟女人妻一区二区| 日韩一区二区三区在线精品| 精品一区二区三区东京热 | 51视频国产精品一区二区| 免费无码一区二区| 无码国产伦一区二区三区视频| 国产一区二区三区不卡在线看 | 国产视频福利一区| 日本一区二区三区爆乳| 国产一区二区电影| 精品久久国产一区二区三区香蕉 | 国产91大片精品一区在线观看| 老熟妇高潮一区二区三区| 国产经典一区二区三区蜜芽| 亚洲综合一区二区国产精品| 中文字幕精品无码一区二区三区| 亚洲AV日韩精品一区二区三区| 国产精品亚洲一区二区三区久久 | 国产丝袜美女一区二区三区| 亚洲av高清在线观看一区二区| 无码日韩精品一区二区人妻| 日本一区二区在线免费观看| 能在线观看的一区二区三区| 中文字幕在线一区二区在线| 美女视频免费看一区二区| 国产乱码精品一区三上| 无码人妻精品一区二区三区99不卡 | 免费无码一区二区三区| 午夜DV内射一区二区| 国产免费播放一区二区| 久久久人妻精品无码一区| 国产午夜精品一区理论片飘花| 一区二区三区四区在线观看视频| 国产激情一区二区三区| 成人无码AV一区二区| 亚洲AV成人一区二区三区AV| 久久99精品国产一区二区三区| 国产成人无码一区二区在线播放|