css学习任务二：切图写代码

今天的任务是根据UI给的图进行切图，然后写出相应的页面，UI如下：

收获：学习前端知识一年有余，却因为老是找不到实战项目而得不到实际的提高，直到今天的学习我才知道切图是怎么一回事，明白了你看到一张漂亮的图片，你想拿其中一部分来当图标之类的，是可以通过切图的方式进行的，用Photoshop进行切图并将图片保存为html格式，可以得到相应切图后图片的html代码，不过代码只是简单的用表格方式呈现出来，具体实战还是得自己动脑用灵活的css样式来进行编码；

遇到的问题：再进行该页面的编码时，一开始完成后整个页面效果是出来了，但是纵向、横向都出现了滚动条，这是我预期之外的，所以我决定要把滚动条去掉，在body里面增加scroll=“no"语句、overflow="hidden"语句、rightmargin="0" leftmargin="0" topmargin="0" bottommargin="0"语句均没有效果，最后在css样式中增加html{scroll：no；}样式后才最终实现。

代码如下：

 1 <!DOCTYPE HTML>
 2 <meta charset="UTF-8">
 3 <html>
 4 <head>
 5     <title>
 6         葡萄藤首页
 7     </title>
 8     <style type="text/css">
 9         #grape{
10             position:relative;
11             left:43%;
12             top:20%;
13         }
14         .bottom{
15             position:absolute;
16             bottom: 5%;
17         }
18         #group{
19             left:33%;
20         }
21         #teng{
22             left:58%;
23         }
24         #word{
25             position:relative;
26             top:20%;
27             left:32%;
28             color:#fff;
29             font-size: 2.5em;
30         }
31         html{
32             overflow: hidden;
33         }
34     </style>
35 </head>
36 <body bgcolor="#68cdd5">
37 <img src="./images/1.jpg">
38 </br>
39 <img id="grape" src="./images/2.jpg">
40 </br>
41 <pre id="word">
42 葡萄藤轻游戏专注于桌游领域，提
43 供在线杀人游戏、捉鬼、炸狼堡等
44 多种聚会游戏,以及线下聚会桌游
45 道具。
46 </pre>
47 <img id="group" class="bottom" src="./images/4.jpg">
48 <img id="teng" class="bottom" src="./images/3.jpg">
49 </body>
50 </html>

效果如图：

转载于:https://www.cnblogs.com/zxpp/p/5275707.html

css学习任务二：切图写代码相关推荐

在学习js的然后写代码的过程中我老是找不到思路怎么办？
在学习js的然后写代码的过程中我老是找不到思路怎么办? 写的少了,边写边思考: 刚刚学习的阶段,还是要多写,多借鉴别人的代码. 转载于:https://www.cnblogs.com/helloy/p ...
在学习计算机编程不写代码_使用代码创建：通过制作游戏来学习和教授计算机编程
在学习计算机编程不写代码 Create with Code is Unity Education's new, free program for teaching and learning compu ...
DIV+CSS 之网页切图过程中div+css命名规则
网页切图过程中div+css命名规则内容:content/container 导航:nav 侧栏:sidebar 栏目:column 标志:logo 页面主体:main 广告:banner 热点:h ...
打游戏学习人工智能！不写代码|湾区人工智能
栗子乾明发自凹非寺量子位报道 | 公众号 QbitAI 撸猫.咖啡,玩游戏. 但我其实是在入门机器学习. 2019年最简单有趣的入门方式,就在这里: Steam高赞游戏,极度易上手. 现在 ...
css hat,论切图仔的自我修养
编者按:作者糯米是个工具控,让我们来看看他都私藏了哪些好用的工具吧. 不过,据说都挺贵. Adobe Photoshop CC 2015 Adobe Photoshop 是设计师的必备,所以也是前端切 ...
【CSS】PhotoShop 切图 ② ( PhotoShop 切片选择工具 | 清除切片 | 新建基于图层的切片 | 透明背景图片切图 | 根据参考线选择切片 )
文章目录一. PhotoShop 切片选择工具二.清除切片三.新建基于图层的切片四.透明背景图片切图五.根据参考线选择切片一. PhotoShop 切片选择工具如果之前使用切片工具设 ...
【CSS】PhotoShop 切图 ③ ( PhotoShop 切图插件 - Cutterman | 下载、安装、启动、注册、登录 Cutterman - 切图神奇插件 | 使用插件进行切图 )
文章目录一. PhotoShop 切图插件 - Cutterman 1.下载 Cutterman 插件 2.安装 Cutterman 插件 3.启动 Cutterman 插件 4.注册 Cutter ...
【CSS】PhotoShop 切图 ① ( 常见的图片格式 - jpeg、gif、png、psd | PhotoShop 切片工具 )
文章目录一.常见的图片格式 - jpeg.gif.png.psd 二.PhotoShop 切片工具 1.导入素材 2.选择切片工具 3.选择切片工具样式 4.改变切片大小 5.改变切片位置一.常见 ...
原生js+css 实现轮播图完整代码
利用原生的js实现轮播图,可以添加到自己的UI库中,在以后的项目中对其进行修改然后添加到已有项目中. 先写出css部分和html部分,直接上代码 <!DOCTYPE html> <h ...

css学习任务二：切图写代码

css学习任务二：切图写代码相关推荐

最新文章

热门文章