web开发：css总结与应用
本文目录:
一、常用标签的使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用标签的使用</title> <!-- SEO --> <!-- <meta name="keywords" content="8-12个以英文逗号隔开的单词或词语"> --> <!-- <meta name="description" content="80字以内的一段话，与网站内容相关"> --> <!-- 移动适配 --> <!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> --> <link rel="icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico"> <style type="text/css"> .img { /*根据需求,是指定高还是指定宽,设置一个,另一个会等比缩放*/ /*width: 200px;*/ height: 100px; } /*四个伪类*/ /*reset操作*/ a { color: #333; text-decoration: none; } /*ul的reset操作*/ ul { margin: 0; padding: 0; list-style: none; /*margin-left: 40px;*/ } </style> </head> <body> <!-- 1.设置锚点: 锚点名page_top --> <a href="" name="page_top"></a> <img class="img" src="./img/timg.jpg" alt=""> <a href="00_复习预习.html">前往00页面</a> <!-- 前往本页面中个某个位置: Top => 锚点 --> <!-- 1.设置锚点 2.设置前往锚点的a转跳 --> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <!-- 通配标签页可以设置锚点 --> <!-- <a href="" name="t_123"></a> --> <div id="t_123">123</div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <!-- 2.设置前往锚点的a转跳: #锚点名 --> <a href="#page_top">Top</a> <a href="#t_123">123</a> <a href="00_复习预习.html#md">前往锚点</a> </body> </html>
二、边界圆角
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边界圆角</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; } .box { /*边界圆角*/ /*百分比控制*/ /*border-radius: 50%;*/ /*实际像素控制*/ /*border-radius: 20px;*/ /*横纵分离 横 / 纵*/ /*border-radius: 20px / 50%;*/ /*左上为第一个角, 顺时针赋值, 无值找对角*/ /*左上横30px 右上横100px 右下横=左上横 左下横=右上横, 四角纵向全是50%*/ /*border-radius: 30px 100px / 50%;*/ /*单独设置时, 横向 纵向*/ /*border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%;*/ border-radius: 50% 50% 0 0 / 100% 100% 0 0; } </style> </head> <body> <div class="box"></div> </body> </html>
三、背景样式
<!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=""> <div class="box"></div> <div class="wrap"></div> </body> </html>
四、精灵图
<!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>
