切图做网站

最新推荐文章于 2021-06-05 07:32:48 发布
最新推荐文章于 2021-06-05 07:32:48 发布
阅读量402 收藏 1
点赞数
分类专栏： 织梦 配置 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37634735/article/details/106960328
版权

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>

 

飞龙王
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用Photoshop切图做网站的思路
武汉产品经理
03-23 853
1.规划　　不管是乔客joekoe，还是用动易powereasy、风讯foosun，我们都应该考虑两个问题：　　a、版面要分出头、中、底三个部分。　　b、中间部分要考虑两种情况，一是两栏（乔客左窄右宽，动易左宽右窄），二是一栏，两种情况显示不能变形。有些朋友想每个板块的头部不一样，这也是可以的，你可以在程序代码中做文章，那是编程的问题，按下不表。　　如果我看到别人的版面想拿下来，那就做个截图，建立
3.8 使用切片工具制作网页 [Ps教程]
互动教程网[www.hdjc8.com]
04-14 779
原文：http://coolketang.com/staticPhotoshop/5a98d38317d009003595e985.html1. 本节课将为您演示[切片工具]的使用。此工具可以把图片切成若干个小图片并直接输出为网页格式，非常实用！首先长按[裁剪工具]，显示隐藏的工具列表。 2. 然后选择列表中的[切片工具]。 3. 根据工作需求，可以把图像切割成若干个区域，在左上方的圆点处按下鼠标...
html psd设计图,根据PSD登陆页面设计稿切图制作HTML网页全过程
weixin_35942678的博客
06-05 1175
切图的目的是把PSD设计稿转换为HTML页面。记得自己当时学习切图时，网上切图相关的文章是不少，但是大都是讲怎么使用切片工具把一张图片分割成多张图片，然后存储为Web使用格式，并且都比较简单和零碎，并不能满足我的要求。因此只能自己不断尝试，今天分享给大家“如何根据PSD设计稿通过PS切图和DIV+CSS布实现HTML页面”，希望能帮助到大家。实例:下面通过一个简单的登陆页面PSD设计稿来演示转化为...
网页切片
SylviaChang的博客
05-01 2805
1.切片的目的 提高网站性能：网页的打开速度与服务器的响应速度和网页的大小有关，如果图片太大，加载时间太长。所以在此情况下，如果用网页切片，会提高网页的加载速度，增强了用户体验。 2.使用的工具 个人喜欢用ps做切片，也可以用fireworks 3.步骤 将需要做切片的图片导入ps打开（视图-->标尺），然后设置切片的参考线（这一步视个人情况而定）选择切片工具设置切片选项（鼠标右
根据PSD登陆页面设计稿切图制作HTML网页全过程
热门推荐
遇见更好的自己
02-16 2万+
切图的目的是把PSD设计稿转换为HTML页面。记得自己当时学习切图时，网上切图相关的文章是不少，但是大都是讲怎么使用切片工具把一张图片分割成多张图片，然后存储为Web使用格式，并且都比较简单和零碎，并不能满足我的要求。因此只能自己不断尝试，今天分享给大家“如何根据PSD设计稿通过PS切图和DIV+CSS布实现HTML页面”，希望能帮助到大家。 实例: 下面通过一个简单的登陆页面PSD设计稿
切图工具rar
01-05
切图工具，通常指的是用于将大图像分割成多个小图像的软件或应用程序。在这个场景中，"切图工具rar" 提供的是一个名为 "ImageSlicer.exe" 的可执行文件，这很可能是一款小巧且易于使用的切图软件。下面将详细讨论...
切图MarkMan
12-31
**切图MarkMan详解** 在数字产品设计领域，切图是一项至关重要的工作，它涉及到将设计师的原型图或UI设计稿转化为开发人员可以使用的精确尺寸和格式的图像资源。"MarkMan"是一款专为此目的而设计的专业切图工具，...
前端切图工具
06-29
在IT行业中，前端开发是一项至关重要的任务，而“前端切图工具”是这一领域不可或缺的辅助软件。切图，即网页设计完成后将设计稿分割成各个独立的图像元素，以便于前端开发者更好地实现视觉效果与交互功能。标题提到...
切图工具cutterman
03-20
《Cutterman：设计师的切图利器》 在数字化设计领域，切图是将设计稿转化为前端可开发资源的关键步骤。对于设计师来说，拥有一款高效、易用的切图工具至关重要。Cutterman，这款被誉为“切图神器”的插件，正是专为...
免费切图工具
10-09
网页切图是网页设计过程中的一个重要环节，它涉及到将设计师在图形编辑软件中创建的高分辨率图像分割成适合网页显示的小块，以便于浏览器加载和优化网页性能。在这个过程中，一款优秀的切图工具能极大地提高工作效率...
用photoshop分切页面的过程
06-22
最主要的切片方法，做网站分模块，切片方法很重要，关系到你的网站布局和美工，好好学习
完整的切图页面代码编写-案例
m0_37634735的博客
06-30 565
这个页面只有3个点需要注意，我用红框标出了，我把内容部分分为4块，第一块的幻灯片滚动展示js实现需要注意一下；第二块的公告通知列表向上滚动js实现需要注意一下；第四块的图片新闻从右向左滚动js实现需要注意一下。 ps取色时的rgb值，获取网站：https://tool.css-js.com/rgba.html 完整完成页面如下 代码实现如下： 比较简单 <!DOCTYPE html> <html lang="en"> <head> <me..
切图html 在线,网页制作/前端开发/网页切图/网站切图/PSD转html
weixin_33267354的博客
05-31 554
竭诚合作 成就客户案例：前端开发专业切图服务：1、常规切图——企业、电商、门户等网站常规页面制作；2、快速仿站——提供仿站网址，网站前端全功能模仿；3、响应式页面——网页兼容不同设备，手机、平板、电脑；4、js动画效果——网站局部或全页面动画制作(html5、CSS3、js等技术实现)；价格：1.前端切图div css基础排版，普通功能150每页2.响应式切图200每页(不包含多种动画制作，基础排...
网页切图的技巧及经验总结
CRPER
12-10 1万+
工具这里使用Photoshop ,当然你可以用firework这些，就是操作有些区别；技巧一，直接复制新建裁切这种适合用于有单独图层的图片，可以很快的生成切图出来的效果；技巧二，参考图+切图工具这种就是各位小伙伴基本都用的，先划好参考线，再用切图工具切，然后导出；这里选择部分区域来演示这种技巧比较强大，可以更加细致的定制 先用参考下圈出你要切图的区域 然后用选区工具建立选区，防止切出外面 若是需要编
切图具体需要切什么内容_网页制作中的切图是什么？什么是切图
weixin_39828338的博客
12-19 620
原标题：网页制作中的切图是什么？什么是切图在网站制作中我们经常会听到定稿后我们就好进行了，那么到底是一个什么样子的工作，让我们专业的前端工程师告诉您。是网站制作过程中的一个专业术语、是前端工程师必备的一个基础技能，是将设计文稿转化为HTML的过程。在网站制作的过程中，切图是指讲设计好的PSD文稿转化成html的工作，利用DIV+CSS将设计文稿以网页的形式表现出来，切图的切指的是将设计文稿中的图片...
织梦5.7登陆注册实现
m0_37634735的博客
07-03 1122
正常注册登陆的会员中心 如果提示禁用，必须点击开启会员功能 验证码不显示： 禁用php删除即可 改完之后效果如下： 源码如下：亲测，正确 注意验证吗不能输入大写值，小写才可以登录 在templets/muban下面新建login.htm <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>login</ti...
本地搭建网站以及织梦环境配置
m0_37634735的博客
06-25 964
1下载网站文件：使用仿站小工具。 输入网址即可下载网页文件，非常好用。 如果不用织梦做，可以选择选对路径，那么下载的html文件直接点击就可以查看，如果使用织梦做，最好点击绝对路径，还要区分手机端和pc端网站 2 启动phpstudy的apache, 网站配置： 然后点击此处的管理-打开网站即可。 3 织梦文件放到自己本地网站的根目录 打开自己本地网站进行安装： http://127.0.0.1:8000/install，即可进入安装界面。 数据库不是localh.
网站后台管理工具---推荐
m0_37634735的博客
07-03 938
极其简单好用 网站后台管理工具：独立控制面板 登陆之后的面板：
织梦手机端制作
m0_37634735的博客
06-30 755
栏目跳转 <aclass="moreBtn"href="list.php?tid={dede:fieldname='id'/}">查看更多>></a> 手机站： 首页：index_m.htm 频道栏目页：index_article_m.htm 6 手机端栏目链接：/m/list.php?tid=[field:id/]不是typeurl 手机端文章链接：/m/view.php?aid=[field:id/]不是arcu...
用b站视频做网站背景 代码
最新发布
05-02
要用B站视频作为网站的背景，需要运用一些技巧和代码来实现。首先，需要确保你已经拥有了想要作为背景的B站视频的URL。然后，可以使用一些代码来将视频嵌入到网站背景中。 一种常见的方法是使用HTML5视频标记。需要在代码中添加一个容器元素，比如 div，然后将视频嵌入到容器中。代码示例如下： <div id="bg-video"> <video autoplay loop muted poster="poster.jpg"> <source src="bilibili-video.mp4" type="video/mp4"> </video> </div> 在这个示例中，div元素的ID被设置为“bg-video”，这将成为容器元素。视频被嵌入到video元素中，其中autoplay表示视频会自动播放，loop表示视频循环播放，muted表示视频播放时静音，poster表示视频预览图像。另外，还需要指定视频的URL。 如果你想自定义视频的大小和位置，可以使用CSS样式。例如，示例代码中的“bg-video”可以使用以下样式来设置宽度、高度和位置： #bg-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } 这些代码确保视频扩展到整个窗口大小并被放置在最底层，以充当整个站点的背景。使用这些技巧和代码，可以轻松地将B站视频作为网站背景，增加网站的吸引力和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值