時間：2023-09-09 21:24:01 | 來源：網(wǎng)站運營
時間：2023-09-09 21:24:01 來源：網(wǎng)站運營
手把手教你切圖（DIV+CSS）：~~~~1、你會使用ps切圖~~~~
2、你已學到浮動布局板塊《CSS入門選》
開始之前我們選簡單介紹幾個知識點~~~~
1、網(wǎng)頁有內(nèi)容區(qū)，不能完全按設(shè)計稿的走。如圖，導(dǎo)航的內(nèi)容就叫內(nèi)容區(qū)，兩邊的空白是設(shè)計的美感。
2、一般網(wǎng)頁的寬度為：960，980，1001，1280，1380。我說的是px像素哈。
3、網(wǎng)頁的字體正常只有宋體與微軟雅黑。
4、網(wǎng)頁的字體大?。涸缙谑?2px 14px 16px 16是導(dǎo)航部分，最大的字體
5、現(xiàn)在的字體大?。?4px 16px 18px
6、塊間距為10px 15px 20px 30px
當然還有很多，網(wǎng)頁是有標準的，行業(yè)大概是27，28左右。但也要看設(shè)計了。
在線咨詢
/*** @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標準結(jié)構(gòu)<!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>以上是一個標準結(jié)構(gòu)<div class="nav clearfix"> <a href="#" class="sp">首頁</a> <a href="#">學校概況</a> <a href="#">新聞公告</a> <a href="#">課程設(shè)置</a> <a href="#">師資力量</a> <a href="#">學子風采</a> <a href="#">資料中心</a> <a href="#">招賢納士</a> <a href="#">聯(lián)系我們</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="#">課程設(shè)置</a> <a href="#">師資力量</a> <a href="#">學子風采</a> <a href="#">資料中心</a> <a href="#">招賢納士</a> <a href="#">聯(lián)系我們</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="#">課程設(shè)置</a> <a href="#">師資力量</a> <a href="#">學子風采</a> <a href="#">資料中心</a> <a href="#">招賢納士</a> <a href="#">聯(lián)系我們</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;}關(guān)鍵詞：把手
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
