整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          「測試開發全棧-HTML」(20)css的引入方式-綜合案例
          
        
           
          
	
	
          
		
                        
          天說完了css的全部引入方式，今天根據一個綜合案例來編寫代碼。
          案例: 新聞頁面

          制作頁面，整體可以分為兩步:
          1.搭建HTML結構頁面
          2.修改CSS樣式

          我們來看下具體的樣式:
          這就是一個普通的網頁展示，對應的代碼為:
          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>CSS樣式-綜合案例</title>
          <style>
          body {
          /* 字號大小和字體，必須要寫 */
          font: 16px/28px 'Microsoft YaHei';
          }

          h1 {
          /* 標題文字不加粗，正常展示 */
          font-weight: 400;
          /* 標題中的文字水平居中 */
          text-align: center;
          }

          .gray {
          /* 顏色為淡灰色，整體居中，字體大小小一些，為12px */
          color: #888888;
          font-size: 12px;
          text-align: center;
          }
          /* 取消下劃線 */
          a {
          text-decoration: none;
          }
          /* 搜索按鈕中搜索兩個字的顏色和寬度 */
          .search {
          color: #666;
          width: 170px;
          }
          /* 按鈕樣式 */
          .btn {
          font-weight: 700;
          }
          /* 對圖片的設置 */
          .pic {
          text-align: center;
          }
          /* 想要圖片居中對齊，需要對圖片的父標簽<p>添加水平居中的代碼 */
          .footer {
          color: blue;
          font-size: 12px;
          font-weight: 700;
          }
          /* 底部展示樣式，也是使用class屬性 */
          </style>
          </head>
          <body>
          <!-- 先寫一個標題，建議使用h1 -->
          <h1>男子嫌銀行服務態度差取走500萬，被銀行證實</h1>
          <!-- 獨自一行展示，可以使用div,單獨使用class屬性來修改 -->
          <div class="gray">來源: <a href="htttps://www.baidu.com">北京日報</a> 2021.10.15
          <input type="text" value="請輸入查詢條件..." class="search"> <button class="btn">搜索</button>
          </div>
          <!-- 還需要將北京日報下面的下劃線去掉 -->
          <!-- 下面是水平線，現在還沒有講，可以使用<hr>來展示水平線。-->
          <hr>

          <p>微博大V@sunwear發文炮轟上海銀行，聲稱由于該行服務態度不好，他準備分批將存在該行的幾千萬元全部取現轉移，目前已取500萬元帶走，所取現金搬上了一輛勞斯萊斯。
          上海銀行工作人員回復稱，的確有這樣的事情發生，但也是個別現象。具體情況不是很清楚，已反饋專員跟進處理。</p>

          <p>對于事件的經過，一位網友發文稱，“該大V疫情期間去網點不愿意戴口罩，所以被保安阻攔。
          網點負責人解釋了很久，沒有用，并且要網點負責人下跪道歉。”sunwear發布回應，否認自己不愿意戴口罩、逼負責人下跪道歉，并建議銀行拿出監控看看保安是如何表現的。</p>
          <p class="pic">
          <img src="011.jpeg" alt="">
          </p>
          <h4>觀察者網表示很贊</h4>

          <p>sunwear表示，自己全程一共三句話：忘帶了，你們這有么？哪有賣的？“我乖乖的去旁邊買了一個口罩回來了。保安全程一句話沒有，第一個手勢指著我嘴，第二個手勢扭著腦袋擺手讓我出去，第三個手勢揮手一指外面。
          我以為他是個啞巴，我沒有任何不愿意戴口罩的表現。</p>

          <p class="footer">明天會有一個好天氣</p>
          </body>
          </html>

          對每一個段落都進行了標注，通過這個案例，將之前學到的HTML和CSS樣式都用了一遍。

          明天就要上班了，時間過的飛快。 
          端必學 40個精選案例實戰 一課吃透HTML5+CSS3+JS(超清完結)
          "夏哉ke"：chaoxingit.com/5056/
          前端必學：40個精選案例實戰，一課吃透HTML5+CSS3+JS
          在現代Web開發中，HTML5、CSS3和JavaScript是前端開發的基石。掌握這些技術，不僅能夠構建出功能豐富、交互性強的網頁，還能夠提升用戶體驗和網站性能。本文將介紹40個精選的實戰案例，幫助讀者深入理解HTML5、CSS3和JavaScript的應用。
          HTML5 實戰案例
          語義化標簽的運用：使用HTML5的語義化標簽（如、、等）優化頁面結構。
          表單驗證：利用HTML5表單元素和屬性（如、required等）進行客戶端表單驗證。
          視頻和音頻播放器：使用和標簽實現網頁上的視頻和音頻播放功能。
          Canvas繪圖：利用Canvas API實現各種繪圖效果，如畫布動畫、游戲等。
          地理位置定位：利用Geolocation API獲取用戶地理位置信息，實現定位功能。
          CSS3 實戰案例
          響應式布局：使用CSS3媒體查詢和Flexbox/Grid布局實現響應式網頁布局。
          動畫效果：利用CSS3動畫（如@keyframes）和過渡效果（transition）制作頁面動畫。
          漸變和陰影：利用CSS3漸變（linear-gradient、radial-gradient）和陰影（box-shadow）美化頁面元素。
          3D變換：使用CSS3的3D變換（transform: translate3d()、rotateX()等）創建立體效果。
          自定義字體：利用@font-face屬性引入自定義字體文件，實現頁面字體的定制化。
          JavaScript 實戰案例
          DOM操作：使用JavaScript操作DOM元素，實現動態內容加載和交互效果。
          事件處理：利用事件處理器（如addEventListener）處理用戶交互事件，實現頁面響應。
          Ajax數據請求：使用XMLHttpRequest對象或Fetch API實現異步數據請求，實現頁面數據的動態更新。
          LocalStorage和SessionStorage：利用localStorage和sessionStorage存儲數據，實現本地數據的持久化存儲。
          表單操作：使用JavaScript處理表單數據，實現表單驗證、提交和重置功能。
          綜合實戰案例
          輪播圖：利用HTML、CSS和JavaScript實現輪播圖組件，展示多張圖片或內容。
          ToDo列表：使用HTML、CSS和JavaScript實現一個簡單的ToDo列表應用，包括添加、刪除和完成任務等功能。
          網頁計算器：利用HTML、CSS和JavaScript實現一個簡單的網頁計算器，支持基本的四則運算。
          圖片懶加載：利用JavaScript實現圖片懶加載，提升頁面加載性能和用戶體驗。
          響應式導航菜單：使用HTML、CSS和JavaScript實現一個響應式導航菜單，適配不同設備和屏幕大小。
          通過這40個實戰案例，讀者可以全面掌握HTML5、CSS3和JavaScript的應用，提升前端開發技能，構建出更加優秀的網頁和應用。
          學習前端必學的40個案例實戰有以下優勢和適合人群：
          優勢：
          全面掌握前端技術：通過實戰案例，能夠全面深入地理解HTML5、CSS3和JavaScript的應用，包括語法、特性和最佳實踐。
          學以致用：案例實戰使學習更具實用性，能夠立即將所學知識應用到實際項目中，加深理解并提升技能。
          豐富經驗：通過解決實際問題的過程，積累豐富的開發經驗，能夠更好地應對復雜項目和挑戰。
          提升創造力：案例涵蓋了各種不同類型的項目，從而激發學習者的創造力和解決問題的能力。
          適應行業需求：掌握HTML5、CSS3和JavaScript等前端技術是當今Web開發行業的基本要求，能夠更好地適應行業發展趨勢。
          適合人群：
          初學者：對前端開發感興趣的初學者可以通過實戰案例系統地學習HTML5、CSS3和JavaScript，并快速上手實踐。
          自學者：自學能力強的人可以通過實戰案例來系統地鞏固和提升前端技能，完善自己的學習路徑。
          職業轉型者：希望轉向前端開發領域的人可以通過學習這些案例，快速掌握所需技能，并為職業轉型做好準備。
          前端開發者：已經從事前端開發工作的人可以通過進階的實戰案例來拓展自己的技能樹，提升職業競爭力。
          項目需求者：有實際項目需求的人可以通過學習這些案例來解決項目中遇到的問題，提高項目的質量和效率。
          總的來說，學習前端必學的40個精選案例實戰能夠幫助各類學習者系統地掌握HTML5、CSS3和JavaScript等前端技術，并快速應用于實際項目中，從而提升自己的技能水平和就業競爭力。
          們來先來分析一下這個案例。
          標題容器左對齊，有固定的寬高。標題文字白色，水平垂直居中。
          正文共四個段落，每個段落都有固定的寬度，右側邊界對齊。
          前三個段落首行空兩個字。每個段落里都有一段高亮的文本，有顏色和下劃線修飾，也有文本斜體和加粗效果。
          段落中的一些文字還有顏色、加粗、下劃線以及傾斜等修飾效果。
          第四個段落起始有個吉他圖標，英文字體有外發光效果。
          下面我們來制作這個網頁。
          創建 007-css-case-1 文件夾，在文件里創建一個 case-text-fonts.html 頁面文件和 case-1.css 樣式文件。
          在 html 文件內創建基礎代碼，在 head 標簽內部引入外部樣式 case-1.css。
          首先來制作標題。
          添加一個 h1 元素，填入標題文本。
          在編寫標題樣式之前，假設 UI 設計師給你的是一篇文章的圖片，你可能就犯難了，如何獲得標題的寬高、背景顏色和文字大小呢？
          大家打開電腦里的QQ，登錄進去，Mac電腦按下鍵盤 Control + Command + A，Windows電腦按下ctrl+alt+a，圈選頁面標題，點擊對號按鈕，完成截屏。
          在瀏覽器中輸入 ps.gaoding.com，打開在線版 PS。點擊文件，新建，再點擊創建按鈕。最后，Control + V，將截屏的圖片粘貼過來。
          應用選框工具，發現標題選區的寬度和高度分別為 200 和 50 像素，文字的大小為 24 像素。
          應用吸管工具，點擊標題框吸取背景色，點擊前景色按鈕，得到十六進制顏色值 #a52a2a。
          有了這三個值，就可以定義標題的樣式了。
          h1 {
  width: 200px;
  height: 50px;
  background-color: #a52a2a;
  color: white;
  line-height: 50px;
  font-size: 24px;
  text-align: center;
}
          定義 h1 選擇器，聲明樣式 width: 200px，height: 50px，background-color: #a52a2a，color: white，font-size: 24px,text-align:center
          在瀏覽器中查看頁面，標題的效果基本上都實現了。接下來完成文本的垂直居中對齊。
          可以通過給文本聲明 line-height 行高屬性，來間接實現文本的垂直居中，那行高的值設置為多少呢？根據前面學習的行高知識，將行高的值設置為 50px，也就是文本所在容器的高度。這樣，文本在容器中恰好就垂直居中了。
          接下來制作四個段落。
          在 HTML里添加四個 p 元素，填入一些文本。下面給這些段落添加樣式。
          p {
  width: 500px;
  text-indent: 2em;
  text-align: justify;
  word-spacing: 10px;
  text-transform: capitalize;
  line-height: 28px;
}
          定義 p 選擇器，聲明樣式：width: 500px，讓每一個段落都有固定的寬度。text-indent: 2em，每個段首空兩格。text-align: justify，實現段落右側邊界對齊。給最后一段英文添加樣式：word-spacing: 10px，添加單詞間距。text-transform: capitalize，每個單詞首字母大寫。最后再添加 line-height: 28px，給段落設置一個行間距。
          四個段落基本上制作完畢了。接下來裝飾個別段落和文字。
          分別使用三個 span 元素將這三部分文字包裹起來。給第一個和第三個 span 元素定義 class 屬性，值為 mark1。(第一個段落里面的帶有下滑劃線區域,和第三個段落中的下劃線區域)
          在CSS中定義 mark1 選擇器，聲明樣式 color: red，text-decoration-line: underline，text-decoration-style: double。
          我們看，這兩部分文本被紅色、雙下劃線修飾了。
          實際效果第三部分文本還帶有一個波浪線。需要再定義一個樣式覆蓋一下。
          給這個 span 的樣式類再添加一個 mark2。
          定義選擇器 mark2，聲明樣式 text-decoration-style: wavy。
          效果實現了。
          給第二個 span 添加 class 屬性，值為 mark3。
          定義選擇器 mark3，聲明樣式 color: orange。
          第二部分文本變成了橙色。
          案例還要求這兩部分文字為傾斜效果。使用 span 元素把他們包裹起來，定義 class 等于 mark4。
          定義選擇器 mark4，聲明樣式 font-style: italic。
          文本傾斜效果實現了。
          實際上，千鋒全部學科的名稱和被特殊修飾的文本都有加粗效果，給全部學科再添加一個 span元素包裹在外層。給所有需要加粗的 span 都添加 mark0 樣式類名。
          定義選擇器 mark0，聲明樣式 font-weight: bold。
          文本加粗效果實現了。
          .mark0 {
  font-weight:bold
}

.mark1 {
  color: red;
  text-decoration-line: underline;
  text-decoration-style: double;
}

.mark2 {
  text-decoration-style: wavy;
}

.mark3 {
  color:orange;
}

.mark4 {
  font-style: italic;
}
          最后，給英文段落定義特殊字體并添加外發光的效果。
          .p1 {
  font-family: "Sofia", sans-serif;
  text-indent: 0;
}
          在 head 里添加引用谷歌字體的 css 鏈接，和自定義 icon 圖標的 js 地址。
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=outline">
          <script src="https://kit.fontawesome.com/772ccfd500.js" crossorigin="anonymous"></script>
          給英文的段落元素定義 class 屬性，值為 p1 font-effect-outline。
          添加 p1 選擇器，聲明樣式：font-family: "Sofia", sans-serif。
          字體效果實現了！在段首還有一個 icon 圖標。
          如何查找自己心儀的圖標呢？大家可以訪問 fontawesome 官網這個地址，海量圖標就任你選擇了。guitar 就在這里。 （https://fontawesome.com/search?p=2&favorites=staff）
          在段落頭部添加 i 元素，定義 class屬性，值為 fas fa-guitar。 （注意中間有空格）。
          我們發現，真正使用這個圖標時，樣式類的值，要求在官網查找到的圖標名字前，加上 fa- (讀作：fa杠)，并且還需要添加 fas。
          圖標添加好了！實際的效果，最后一行沒有縮進。
          在 .p1 (注意這里有點) 選擇器里添加 text-indent: 0，來覆蓋 p 元素的樣式。
          為什么能覆蓋呢？答對了，因為作用的優先級—— class 選擇器要大于元素選擇器。
          這樣，就取消了最后一行的段首縮進！
          文章配套視頻鏈接：https://www.bilibili.com/video/BV1oU4y1278g?p=68
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲男女一区二区三区|
亚洲AV无码片一区二区三区|
少妇特黄A一区二区三区|
国产精品 一区 在线|
激情综合一区二区三区|
无码aⅴ精品一区二区三区浪潮
|
免费在线观看一区|
一区在线免费观看|
国产精品合集一区二区三区
|
国产精品乱码一区二区三|
国产午夜一区二区在线观看|
成人精品一区二区三区不卡免费看|
中文字幕Av一区乱码|
精品视频一区二区三区在线播放|
国产亚洲日韩一区二区三区|
国产成人一区在线不卡|
亚洲av无码不卡一区二区三区|
日本一区二区三区精品视频|
无码一区二区三区视频|
久久无码人妻精品一区二区三区|
射精专区一区二区朝鲜|
国产午夜精品一区二区三区小说
|
日韩人妻无码一区二区三区综合部
|
日本一区二区三区精品视频|
久久久av波多野一区二区|
日本一区二区三区不卡在线视频|
久久综合九九亚洲一区|
日本夜爽爽一区二区三区|
亚洲中文字幕一区精品自拍|
99国产精品一区二区|
免费一区二区无码东京热|
区三区激情福利综合中文字幕在线一区亚洲视频1
|
精品欧洲av无码一区二区三区|
亚洲国产av一区二区三区|
国产精品福利一区|
好爽毛片一区二区三区四无码三飞|
99国产精品一区二区|
狠狠色成人一区二区三区|
中文字幕精品无码一区二区|
亚洲一区二区三区香蕉|
久久婷婷色综合一区二区|