前端學習第57天 背景樣式、精靈圖、盒子模型佈局細節、盒子模型案例、w3c主頁
阿新 • • 發佈：2018-12-09
一、背景樣式
背景圖片過大過小處理
圖片過大直接設定寬高
圖片過小會自動平鋪，需求設定不要平鋪
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景樣式</title> <style type="text/css"> .box, .wrap { width: 200px; height: 200px; background-color: orange; } .wrap { /*圖片過大會顯示不全*/ background-image: url('img/timg.jpg'); /*規定背景圖片顯示尺寸*/ background-size: 200px 200px; } .box { /*圖片過小會平鋪*/ background-image: url('img/123.png'); /*平鋪:repeat-x | repeat-y | repeat | no-repeat*/ background-repeat: no-repeat; /*位置(定位): 可以寫具體數值,也可以寫位置單詞*/ /*background-position: 10px center;*/ /*background-position: right bottom;*/ /*background-position: center center;*/ /*設定一個值時,控制的是x軸,y軸取center*/ /*設定;兩個值時,第一個值控制x,第二個值控制y*/ background-position: 10px 40px; /*整體設定*/ background: url('img/123.png') red no-repeat 50px 50px; } /*注: 實際開發中,資源圖片大小一定要與顯示區域等大*/ </style> </head> <body> <img src="img/123.png" alt="">
二、精靈圖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>精靈圖</title> <style type="text/css"> .box { width: 500px; height: 100px; /*height: 300px;*/ border: 5px solid black; } .box { background-image: url('img/bg.png'); background-position: 0 -150px; } .box:hover { cursor: pointer; background-position: 0 -250px; } /*1.顯示區域一定要與精靈圖目標小圖大小一致*/ /*2.通過背景圖片定位方式將目標小圖移至顯示位置*/ </style> <style type="text/css"> .lt1 { width: 155px; height: 48px; background: url('img/bg.png') no-repeat 0 0; } .lt1:hover { cursor: pointer; background: url('img/bg.png') no-repeat 0 -48px; } </style> </head> <body> <!-- 精靈圖: 各種小圖拼接起來的一張大圖 --> <!-- 為什麼使用精靈圖: 減少請求次數, 降低效能的消耗, 二次載入圖片資源時極為迅速(不在需要傳送請求) --> <div class="box"></div> <div class="lt1"></div> </body> </html>
三、盒子模型佈局細節
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型佈局細節</title> <style type="text/css"> .sup { width: 500px; height: 100px; background: orange; } .sub { width: 50px; height: 50px; background-color: red; } /*sub在sup中 水平居中*/ .sub { /*margin-left: auto; margin-right: auto;*/ margin: 0 auto; } /*垂直居中*/ .sub { margin-top: 24px; } /*margin坑: 父子聯動*/ /*.box { width: 1px; height: 1px; }*/ /*解決一: 設定border-top*/ .sup { /*border-top: 1px solid transparent; height: 99px;*/ } /*解決二: 設定padding-top*/ .sup { padding-top: 1px; height: 99px; } /*margin坑: 上兄弟margin-bottom與下兄弟margin-top重合, 取大值*/ /*解決方案: 只設置一個,建議設定下兄弟margin-top*/ /*margin佈局: 下盒子的垂直起始位置決定於同結構中上盒子的margin結束位置;水平起始位置就是父級content最左側*/ </style> </head> <body> <div class="sup"> <!-- <div class="box"></div> --> <div class="sub"></div> </div> </body> </html>
四、盒子模型案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型案例</title> <style type="text/css"> /*reset*/ body, h1, ul { margin: 0; padding: 0 } ul { list-style: none; } a { color: #333; text-decoration: none; } </style> <style type="text/css"> .main { width: 1210px; height: 500px; background: orange; margin: 0 auto; } .nav { width: 1210px; margin: 0 auto; height: 48px; } .nav_a { /*a標籤就支援寬高,並且可以巢狀其他標籤*/ display: block; height: 48px; background: red } li:first-child .nav_a { background: blue; width: 155px; } li:nth-child(2) .nav_a { background: pink; width: 150px; margin-left: 155px; margin-top: -48px; } li:nth-child(3) .nav_a { background: green; width: 100px; margin-left: 305px; margin-top: -48px; } </style> </head> <body> <!-- ul.nav>(li>a.nav_a)*7 --> <ul class="nav"> <li> <a class="nav_a" href=""></a> </li> <li> <a class="nav_a" href=""></a> </li> <li><a class="nav_a" href=""></a></li> <li><a class="nav_a" href=""></a></li> <li><a class="nav_a" href=""></a></li> <li><a class="nav_a" href=""></a></li> <li><a class="nav_a" href=""></a></li> </ul> <div class="main"></div> </body> </html>
五。w3c主頁（部分）
!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>w3c</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <style type="text/css"> .wraper { /*為子級規定寬度, 高度由子級撐開*/ width: 1210px; margin: 0 auto; background-color: #FDFCF6; } </style> <link rel="stylesheet" type="text/css" href="css/header.css"> <link rel="stylesheet" type="text/css" href="css/nav.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div class="wraper"> <!-- header --> <div class="header"> <h1 class="header-h1">w3c主頁</h1> <div class="header-search"> <!-- <div> --> <input type="text"> <button>ok</button> <!-- </div> --> </div> </div> <!-- nav --> <ul class="nav"> <li class="li1"><a href="" title=""></a></li> <li class="li2"><a href="" title=""></a></li> <li class="li3"><a href="" title=""></a></li> <li class="li4"><a href="" title=""></a></li> <li class="li5"><a href="" title=""></a></li> <li class="li6"><a href="" title=""></a></li> <li class="li7"><a href="" title=""></a></li> </ul> <!-- main --> <div class="main"> <div class="main-left"> <div class="hidden"></div> <h2>HTML 教程</h2> <ul> <li><a title="HTML 教程" href="">HTML</a></li> <li><a title="" href="">HTML5</a></li> <li><a title="" href="">XHTML</a></li> <li><a title="" href="">CSS</a></li> <li><a title="" href="">CSS3</a></li> <li><a title="" href="">TCP/IP</a></li> </ul> <h2>HTML 教程</h2> <ul> <li><a title="HTML 教程" href="">HTML</a></li> <li><a title="" href="">HTML5</a></li> <li><a title="" href="">XHTML</a></li> <li><a title="" href="">CSS</a></li> <li><a title="" href="">CSS3</a></li> <li><a title="" href="">TCP/IP</a></li> </ul> </div> <div class="main-center"> <div class="main-box b1"> <h2>領先的 Web 技術教程 - 全部免費</h2> <p>在 w3school，你可以找到你所需要的所有的網站建設教程。</p> <p>從基礎的 HTML 到 CSS，乃至進階的 XML、SQL、JS、PHP 和 ASP.NET。</p> <p> <b>從左側的選單選擇你需要的教程！</b> </p> </div> <div class="main-box b2"> <h2>完整的網站技術參考手冊</h2> <p>我們的參考手冊涵蓋了網站技術的方方面面。</p> <p>其中包括W3C標準技術：HTML、CSS、XML 。以及其他技術，諸如 JavaScript、PHP、SQL 等。</p> </div> <div class="main-box b2"> <h2>完整的網站技術參考手冊</h2> <p>我們的參考手冊涵蓋了網站技術的方方面面。</p> <p>其中包括W3C標準技術：HTML、CSS、XML 。以及其他技術，諸如 JavaScript、PHP、SQL 等。</p> </div> </div> <div class="main-right"> <div class="hidden"></div> </div> </div> <!-- footer --> <div class="footer"></div> </div> </body> </html>