时间：2023-09-09 21:24:01 | 来源：网站运营
时间：2023-09-09 21:24:01 来源：网站运营
手把手教你切图（DIV+CSS）：~~~~1、你会使用ps切图~~~~
2、你已学到浮动布局板块《CSS入门选》
开始之前我们选简单介绍几个知识点~~~~
1、网页有内容区，不能完全按设计稿的走。如图，导航的内容就叫内容区，两边的空白是设计的美感。
2、一般网页的宽度为：960，980，1001，1280，1380。我说的是px像素哈。
3、网页的字体正常只有宋体与微软雅黑。
4、网页的字体大小：早期是12px 14px 16px 16是导航部分，最大的字体
5、现在的字体大小：14px 16px 18px
6、块间距为10px 15px 20px 30px
当然还有很多，网页是有标准的，行业大概是27，28左右。但也要看设计了。
在线咨询
/*** @author 象天* 2010-09-07***////5b8b/4f53//$yh:'Microsoft Yahei';body, textarea, input, select, option { font-size: 12px; color: #333; font-family: "Microsoft Yahei","Hiragino Sans GB", tahoma, arial, sans-serif; -webkit-font-smoothing: antialiased;}h1, h2, h3, h4, h5, h6 { font-size: 100%;}body, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, dl, dd, p, textarea, input, select, option, form { margin: 0;}ol, ul, textarea, input, option, th, td { padding: 0;}table { border-collapse: collapse;}li { list-style-type: none;}article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block;}.clearfix:after {content:'.';display:block;height:0;clear:both;visibility:hidden;}.clearfix {*zoom:1;}.clear { clear: both; height: 0; overflow: hidden;}a { text-decoration: none; color: #333;}a, textarea, input, select { outline: none;}textarea { overflow: auto; resize: none;}.img img { display: block;}a img { border: none;}//.z-index {// position: fixed;// _position: absolute;// z-index: 999;// display: none;// overflow: hidden;//}.pr { position: relative;}.pa { position: absolute;}.fl { float: left;}.fr { float: right;}a:hover { text-decoration: underline;}.m { margin: 0 auto; width: 960px;}.t10 { margin-top: 10px;}.hide { display: none;}.show { display: block;}/**去ie10 小X*/::-ms-clear { display: none;}::-ms-reveal { display: none;}/** placeholder color更改*/::-webkit-input-placeholder { /* WebKit browsers */ color:#ccc;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#ccc;}::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#ccc;}:-ms-input-placeholder { /* Internet Explorer 10+ */ color:#ccc;}HTML标准结构<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>切图</title> <link rel="stylesheet" type="" href="css/index.css"></head><body></body></html>以上是一个标准结构<div class="nav clearfix"> <a href="#" class="sp">首页</a> <a href="#">学校概况</a> <a href="#">新闻公告</a> <a href="#">课程设置</a> <a href="#">师资力量</a> <a href="#">学子风采</a> <a href="#">资料中心</a> <a href="#">招贤纳士</a> <a href="#">联系我们</a> <a href="#">留言咨询</a></div>CSS样式.nav { width:967px; height:40px; background:blue; margin:50px auto;}.nav a { float:left; height:40px; line-height:36px; width:94px; text-align:center; font-size:16px; color:#fff;}.nav a:hover { text-decoration:none;}.nav .sp { margin-left:36px; width:59px;}<div class="box2"> <div class="pub-nav"> <div class="pub-l"> <div class="pub-r clearfix nav2"> <a href="#" class="sp">首页</a> <a href="#">学校概况</a> <a href="#">新闻公告</a> <a href="#">课程设置</a> <a href="#">师资力量</a> <a href="#">学子风采</a> <a href="#">资料中心</a> <a href="#">招贤纳士</a> <a href="#">联系我们</a> <a href="#">留言咨询</a> </div> </div> </div></div>CSS代码.box2 { width:967px; height:40px; margin: 50px auto;}.pub-nav { height:40px; background:url(i/pub-nav.png) repeat-x 0 0;}.pub-nav .pub-l { height:40px; background:url(i/pub-l.png) no-repeat 0 0;}.pub-nav .pub-l .pub-r{ height:40px; background:url(i/pub-r.png) no-repeat right 0;}.nav2 a { float:left; height:40px; line-height:36px; width:94px; text-align:center; font-size:16px; color:#fff;}.nav2 a:hover { text-decoration:none;}.nav2 .sp { margin-left:36px; width:59px;}版本三（浮动的形式，为了方式两边是半透明）<div class="box3 clearfix"> <div class="pub-left"> </div> <div class="pub-right"> </div> <div class="pub-center nav3"> <a href="#" class="sp">首页</a> <a href="#">学校概况</a> <a href="#">新闻公告</a> <a href="#">课程设置</a> <a href="#">师资力量</a> <a href="#">学子风采</a> <a href="#">资料中心</a> <a href="#">招贤纳士</a> <a href="#">联系我们</a> <a href="#">留言咨询</a> </div></div>CSS代码.box3 { width:967px; height:40px; margin: 50px auto;}.pub-left { float:left; width:24px; height:40px; background:url(i/pub-l.png) no-repeat 0 0;}.pub-right { float:right; width:24px; height:40px; background:url(i/pub-r.png) no-repeat 0 0;}.pub-center { margin:0 24px; height:40px; background:url(i/pub-nav.png) repeat-x 0 0;}.nav3 a { float:left; height:40px; line-height:36px; width:94px; text-align:center; font-size:16px; color:#fff;}.nav3 a:hover { text-decoration:none;}.nav3 .sp{ margin-left:12px; width:59px;}关键词：把手
