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>