一、背景样式
背景图片过大过小处理
图片过大直接设置宽高
图片过小会自动平铺，需求设置不要平铺
<!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 { 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>