切图做网站
1? 瀏覽選定的網頁，使用360瀏覽器的，網頁快照即可把網頁保存為jpg等格式的一張圖片。然后使用adobe photoshop cs5 打開。
其中的切片工具是切出網頁的某些圖片如logo等圖片，切片選擇工具只是調整切片。
2整個網頁的背景獲取，使用的是仿制圖章工具，右擊空白處修改此工具的大小。
?
按住alt+左鍵吸取需要的顏色，然后松開alt,左鍵左滑即可使用吸取的背景色，覆蓋圖片直到只剩下背景色。
3 顏色吸取工具，吸取網頁某部分特定顏色，然后使用https://tool.css-js.com/rgba.html網站上的rgb轉換值，作為css中樣式背景色
圖片切割好后，圖片存儲為web格式即可。
?
至此圖片處理基本完成。
4 接下來就是html編寫：
html要注意body部分分為3塊的大致思維，head：網頁頂部導航，logo等信息；content：網頁中間內容；foot：網頁底部備案號等信息
最終效果圖如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: #EFEFEF;}#logo {margin-left: 460px;width: 977px;height: 80px;}#aa {font-size: 30px;}#bb {margin-left: 40px;color: #278C00;font-size: 30px;font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}#cc {width: 960px;height: 35px;background-color: #32A404;margin-left: 470px;margin-top: 23px;}li {list-style: none;float: left;margin-left: 60px;color: white;font-size: 20px;}a {text-decoration: none;color: white;font-size: 20px;}#dd {width: 970px;height: 498px;margin-left: 460px;}.swiper-container {margin: auto;}.swiper-slide {margin: auto;}.swiper-wrapper {margin: auto;}#foot {width: 970px;height: 91px;background-color: #D7D7D7;margin-left: 460px;}#ban {position: absolute;margin-top: 40px;margin-left: 380px;font-size: 10px;}#dz {position: absolute;margin-top: 70px;margin-left: 300px;font-size: 10px;}#body {width: 970px;height: 286px;}#left {width: 330px;height: 245px;margin-left: 467px;border: 1px solid #ccc;box-shadow: 2px 2px 3px #999;padding: 2px;}#bt {margin-top: 26px;width: 339px;height: 48px;margin-left: 10px;}#bt span {font-size: 15px;}#slt {margin-top: -10px;}#slt p {font-size: 14px;}#right {position: absolute;width: 602px;height: 220px;margin-left: 820px;margin-top: -225px;border: 1px solid #ccc;box-shadow: 2px 2px 3px #999;padding: 2px;}#bt1 {height: 55px;}#nnn {float: right;}#marquePic1f img{margin-top: -30px;margin-left: 10px;}#marquePic1f a{color: black;}</style><link rel="stylesheet" href="css/swiper.min.css"><script src="js/swiper.min.js"></script></head><body><div id='head'><div id='logo'><img src="images/1_03.jpg" alt=""><span id='aa'>山東益民垃圾處理有限公司</span><span id='bb'>環保、科學、專業的建筑垃圾處理</span></div><div id='cc'><ul><li> <a href="">首頁 </a> </li><li> <a href="">關于我們</a> </li><li> <a href="">環保產品</a> </li><li> <a href="">投資報告</a> </li><li> <a href="">人才招聘</a> </li><li><a href="">聯系我們</a></li></ul></div><div id='dd'><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="images/1_15.jpg" alt=""></div><div class="swiper-slide"><img src="images/1_15.jpg" alt=""></div><div class="swiper-slide"><img src="images/1_15.jpg" alt=""></div></div><div class="swiper-pagination"></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></div></div><div id='body'><div id='left'><div id='bt'><img src="images/8_03.jpg" alt=""><span>歡迎來到垃圾處理專家</span></div><div id='slt'><img src="images/2_03.jpg" alt="" style="float: left;"><p>其實，詞典給出的幸福答案是不大準確的。即使同一境遇，人們對幸福的理解也是錢差萬別的。生活在大體相似的環境里，一百個人眼中的幸福觀，或許還不止一百個呢，有時同一個人，不同的時期就有不同的幸福觀。幸福觀的模糊，對幸福理解的個性化，這大概也告訴我們：幸福，沒有模式；幸福，沒有榜樣。</p></div></div><div id='right'><div id='bt1'><img src="images/8_03.jpg" alt=""><span>產品展示</span><span id='nnn'> 更多>></span></div><div id='lb' style="OVERFLOW: hidden;width: 602px;"><table cellspacing=0 cellpadding=0 align=center border=0><tbody><tr><td id='marquePic1f' valign=top align=middle height=100%><table cellspacing=1 cellpadding=0 border=0><tbody><tr align=middle><td valign="top" ><ul><li><a href="#"><img src="images/6_06.jpg" /></a></li><!--產品圖片--><li><a href="#" >機壓水泥磚</a></li><!--產品標題--></ul></td><td valign="top"><ul><li><a href="#"><img src="images/6_06.jpg" /></a></li><!--產品圖片--><li><a href="#">機壓水泥磚</a></li><!--產品標題--></ul></td><td valign="top"><ul><li><a href="#"><img src="images/6_06.jpg" /></a></li><!--產品圖片--><li><a href="#">機壓水泥磚</a></li><!--產品標題--></ul></td><td valign="top"><ul><li><a href="#"><img src="images/6_06.jpg" /></a></li><!--產品圖片--><li><a href="#">機壓水泥磚</a></li><!--產品標題--></ul></td></tbody></table></td><td id='marquePic2f' valign=top></td></tr></tbody></table></div><script type="text/javascript">var speed = 15;var FGDemof = document.getElementById('lb');var FGDemo1f = document.getElementById('marquePic1f');var FGDemo2f = document.getElementById('marquePic2f');FGDemo2f.innerHTML = FGDemo1f.innerHTML;function Marquee1f() {if (FGDemof.scrollLeft >= FGDemo1f.scrollWidth) {FGDemof.scrollLeft = 0;} else {FGDemof.scrollLeft++;}}var MyMar1f = setInterval(Marquee1f, speed)FGDemof.onmouseover = function () { clearInterval(MyMar1f) }FGDemof.onmouseout = function () {MyMar1f = setInterval(Marquee1f, speed)}</script></div></div><div id='foot'><span id='ban'>版權所有：廣東易立明垃圾處理有限公司</span><span id='dz'>地址：深圳市天安數碼區A樓 電話：1998882233 Email:ylimy@aaa.com</span></div> </body><script>var swiper = new Swiper('.swiper-container', {spaceBetween: 30,centeredSlides: true,autoplay: {delay: 2500,disableOnInteraction: false,},pagination: {el: '.swiper-pagination',clickable: true,},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},}); </script></html>?
總結
- 上一篇： 买服务器做网站 镜像选什么,如何做网站
- 下一篇： 服务器做网站空间,用服务器做网站空间