Ⅰ 前端拿到UI设计的图 如何开始布局设计
前端拿到UI设计的图 开始布局设计的方法
布局是页面构成的前提，是后续展开交互和视觉设计的基础。设计者在选择布局之前，需要注意以下几点原则：
明确用户在此场景中完成的主要任务和需获取的决策信息。
明确决策信息和操作的优先级及内容特点，选择合理布局。
一、常用布局
网站展示页、Dashboard、列表页、表格页、详情页、表单页。在设计前先了解这些模板有助于让用户快速找到适合自己产品的页面布局。
1、网站展示页
网站展示页（即官网页）通常是用户了解网站或产品的第一步。这类页面通常会包含产品展示图，简短的产品介绍信息，以及用户登录入口等。在设计时我们建议：
明确你要传达的内容，保持简短而清晰的文案。
搭配清晰、直观的产品图片，有助于加深用户对产品的理解和记忆。
2、控制台页
控制台页（Dashboard）集合了大量多样化的信息（如数字，图形，文案等），需要一目了然地将关键信息展示给用户。因此，如何将庞大复杂的信息精简清晰地展示出来，是设计此类页面的关键。在设计时要注意以下几点：
按照信息的重要程度来组织页面排版，突出展示关键信息。
将数据可视化，让用户可以直观地了解关键信息及整体情况。
合理地使用颜色及栅格排版，减轻用户的视觉负担。
3、列表页
列表设计是并列式展现信息，方便用户能快速查看基本信息及操作。因此，信息的“可阅读性”及“可操作性”是设计的关键。在设计时要注意以下几点：
根据用户需求来定义信息展示的等级，仅展示关键信息及操作。
当信息内容较为复杂时，可将次要的信息折叠或放到详情页面中，以递进的方式让用户获得更多的信息。
4、表格页
表格作为多维信息展示的载体，使复杂的信息更易于阅读与理解。它的易读性，便捷性，易操作性对产品的体验起着举足轻重的作用。因此，我们在设计时要注意以下几点：
构造清晰的表格布局，有利于提升读者对信息的接收速度和理解程度。
更多地展示用户所必须的信息，通过视觉上的调优突出展示重点信息。
当界面需要在一个很大的多纵行表格中展示数据，或每一横列数据有多行信息时，可以巧妙地运用横向或纵向斑马条，使得信息条目之间更为分明，视觉上更易区分。
5、详情页
详情页面一般会承载大量的基本信息，扩展信息，或者状态信息。对于信息效率和优先级判定的要求会比较高。清晰的布局能帮助快速看到关键信息，提高决策效率。这设计时有以下几点需要注意：
清晰的排版格式，易于阅读的文本大小及间距，都是影响用户获取信息效率的关键因素。
图文搭配比单文本展示信息能更好地提高用户的理解。
6、表单页
表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。因此，舒适的表单设计，可以引导用户高效地完成表单背后的工作流程：
考虑用户的浏览方式，提供清晰的用户视线浏览路径；
内容是表单的核心，保证表单的内容精简（尽量避免多余的输入项）；
标签的命名要易于用户阅读和理解，避免模糊的描述给用户造成困扰；
醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作。
二、栅格
我们通过定义网格、间距来呈现产品布局的最佳效果，设计师在设计时可按（移动：‘页面总宽 750px，内容区 750px’，PC：‘页面总宽 1440px，内容区 1208px’）来设定，并在此基础上以 12等分的栅格来划分整个设计建议区域。
建议横向排列的区块数量最多四个，最少一个，以保证视觉层面的舒适感。
注：图中灰色部分为栅格的列，定义为‘Column’，白色部分为栅格的间隔，定义为‘Gutter’。
栅格公式：
我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
网站展示页和 Dashboard 的 Gutter 宽度为 24px。
列表、表格、详情和表单页面的 Gutter 宽度为 16px。
Ⅱ 前端里面div是一个节点吗
是块，
说白了就是在虚拟空间里画出的二维的一片区域。
如果加了浮动，就变成了三维空间。
Ⅲ 网页前端，在一个中国城市图片上点击后会出现一个墨笔的小圈把城市名字圈起来这种效果怎么实现
首先得有城市的四个角坐标（左上、右上、左下、右下坐标）范围
两种方法：
1、直接img引入该图片，通过监听点击事件得到的坐标（一般需进行计算，计算相对该图片的左上角的位置，方便图片在更换位置的时候无需重新计算）与所有城市坐标范围进行对比，在某城市范围内的时候说明该城市被点击，通过absolute定位一张底色透明的墨笔小圈图片以及各项信息图片放置在对应位置（如果城市范围不同可能还需要通过坐标范围动态调整图片大小）
2、使用canvas把城市图片画出来，通过监听点击事件得到的坐标与所有城市坐标范围进行对比，在某城市范围内的时候说明该城市被点击，可以继续画墨笔小圈图片在上面以及显示对应的各项信息，原理和第一种方法一样（难度较大）
Ⅳ 前端画面都是自己画吗
要有一定的绘画基础，可以自己画，也可以请别人。要用到ps。
引用资料：分享一个移动端页面的制作流程，以及注意事项
一、设计图分析
1、看到设计图首先分析该前端页面包含几部分，大致怎样布局？
该页面包含6部分：标题、机构简介、课程介绍、师资介绍、联系我们、详情页面；采用常规布局方式，自上而下，从左到右；
2、考虑采用哪种方法制作手机端前端页面？
目前常用的方法有：
（1）字体缩放或rem（固定宽度640px或750px，具体根据情况js动态计算font-size的值）；
（2）直接写或aui框架（宽度按320px）；
备注：在不同的移动终端设备中，实现UI设计稿的等比例适配。但使用rem、字体缩放在大屏设备上并没有展示更多的内容，而且大屏手机看到的字也比较大。因为每个浏览器对最小font-size的支持，不尽相同。js动态计算的font-size值太小时，会导致超小屏上UI显示效果比预想中的偏大。比如，font-size计算是10px，但是chrome只支持到12px，他就按照12px去渲染了，这就会导致UI偏大了。
3、切图
根据布局方式、前端页面的写法考虑该怎样切图，使前端页面制作跟设计图更符合。
（1）能用css实现的效果尽量不要切成图片；
（2）对于有规律的图片可以只切一部分，然后根据情况平铺；
二、页面制作：
1、第一部分：标题
这里使用背景图片，然后将标题整体右浮动，背景图片需要写高度，防止标题过长时将背景图片撑开，使图片变形；也可以使用img标签，用position定位来写。
2、第二部分：机构简介
（1）机构简介整体背景可以用css实现： background-color:#76ab5d; border-radius:18px; box-shadow:3px 3px 3px 0 #333;
（2）border-radius圆角
border-radius：10px 10px 10px 10px
左上 右上 右下 左下 （顺时针）
border-radius：10px 10px 左上右下 右上左下
border-radius：10px 四角
(注意：当圆角的值大于元素的宽就会变成圆形)
（3）box-shadow阴影
box-shadow：0 0 1px #000 inset;
水平 垂直 模糊 颜色 ；
[1] inset代表框内阴影,不加inset代表框外阴影
[2]第1个值为0时，代表左右边框阴影为1px范围
第1个值为正整数 代表左边框阴影
第1个值为负整数 代表右边框阴影
同理
第2个值为0 代表上下边框阴影
第2个值为正整数 代表1px阴影距离上边框多少
第1个值为负整数 代表下边框阴影设置
(注意：box-shadow：0 0 10px 颜色 ；四周发光；)
3、第三部分：课程介绍
布局同上，css样式标题p添加背景图片，写margin-top：-48px使标题高于外层div，且覆盖在上面；注意当外层div不写padding值时，此时写margin-top：-48px，外层div和标题会一同向上移动48px；不能实现标题高于外层div的效果。
Ⅳ 网站前端开发惯用的布局方式有哪些
网站布局之“厂”字型
所谓的“厂”字型布局结构，就是指页面顶部为横条网站标识和广告条，下方左面为主菜单，右面显示内容的布局。菜单条与背景，整体效果类似“厂”字。“厂”布局是目前最常见的一种网页布局方式。这种布局的优点是页面结构清晰，主次分明。缺点是由于被使用得过多，显得缺乏创意，略显呆板。
网站布局之“三”字型
这种布局多用于国外站点，通常页面上方横向几条色块，将页面整体分割为若干部分，色块中大多放广告图片或者Flash动画。
网站布局之 “国”字型
“国”字型布局通常上下各有一个广告条或者其他栏目条，左面是主菜单，右面放友情链接或者其他栏目等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面显得比较拥挤和局促，不够灵活。
网站布局之门户型
这类网页通常内容多，信息量大，通常没有时显的线条作为边界，图片用得也比较少，一般通过文字的排列产生视觉上的分区效果。
网站布局之区块型
区块型布局现在出现的越来越多，在网页上各个区域具有封闭的边界，经过合理放置显得清晰美观。其缺点是由于片面固定，各区域很难根据其中的内容的多少而调整大小，因此不适宜用于区域内容的长度经常变化的网页。
网站布局之宣传单型
宣传单型布局页面就像一张宣传海报，以一张精美图片作为页面的设计中心，常用于个性类站点。其优点是漂亮吸引人；缺点就是页面中大面积使用图片，导致浏览速度相对较慢。所以这类页面同是可以作为宣传单使用。
Ⅵ canvas前端动图如何实现
Canvas是HTML5中的重要组成部分，用于绘制简单的图形，定义路径，创建渐变及应用图像变换，如何用Canvas制作动画也是很多人都有的疑问。
01
什么是动画？我们在绘制动画之前必须要弄清楚什么是动画，一个动画最起码需要哪些基本条件呢？我们可以用一个工具展示动画是什么。这是利用PPT绘制出的一个动画效果
这样我们就通过Canvas做出一个简单的动态图形了
如果你想要学习更多的新知识
如果你想要分享自己的心得
如果你热爱前端渴望提升
Ⅶ canvas前端页面中有很多小方格，怎么画
。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在canvas上绘制一系列的横线和竖线即可。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>绘制方格图</title>
</head>
<body>
<canvasid="canvas"width="300"height="300"></canvas>
<scripttype="text/javascript">
//获取上下文
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
//描绘背景
vargradient=ctx.createLinearGradient(0,0,0,300);//createLinearGradient()方法创建线性的渐变对象。
gradient.addColorStop(0,"#e0e0e0");
gradient.addColorStop(1,"#ffffff");
ctx.fillStyle=gradient;
ctx.fillRect=(0,0,canvas.width,canvas.height);
//描绘边框
vargrid_cols=10;
vargrid_rows=10;
varcell_height=canvas.height/grid_rows;
varcell_width=canvas.width/grid_cols;
ctx.lineWidth=1;
ctx.strokeStyle="#a0a0a0";
//结束边框描绘
ctx.beginPath();
//准备画横线
for(varcol=0;col<=grid_cols;col++)
{
varx=col*cell_width;
ctx.moveTo(x,0);
ctx.lineTo(x,canvas.height);
}
//准备画竖线
for(varrow=0;row<=grid_rows;row++)
{
vary=row*cell_height;
ctx.moveTo(0,y);
ctx.lineTo(canvas.width,y);
}
//完成描绘
ctx.stroke();
</script>
</body>
</html>
Ⅷ 前端做一个画布遮挡页面怎么定位页面元素
定位页面元素有很多种方法。
1、通过元素的id属性来定位元素——id是唯一标识（每个id都是不一样的）。
2、通过元素的name属性来定位元素，name属性不是绝对唯一的（一个页面内可能存在多个元素的name属性是相同的）如果name属性的值wd是唯一的，用find_element_by_name定位元素，返回值是一个值，如果name属性的值wd不是唯一的，用find_elements_by_name定位元素，返回符合条件的多个值，保存在列表中，即返回的是列表。
3、通过元素的class属性来定位元素，class属性不是绝对唯一的（一个页面内可能存在多个元素的class属性是相同的），如果class属性的值s_ipt是唯一的，用find_element_by_class_name定位元素，返回值是一个值。如果class属性的值s_ipt不是唯一的，用find_elements_by_class_name定位元素，返回符合条件的多个值，保存在列表中，即返回的是列表。
4、通过元素的标签名tag来定位元素，标签名不是绝对唯一的（一个页面内可能存在多个相同的标签名），如果标签名是唯一的，用find_element_by_tag_name定位元素，返回值是一个值。如果标签名不是唯一的，用find_elements_by_tag_name定位元素，返回符合条件的多个值，保存在列表中，即返回的是列表。