本周开始了网页界面的设计与编写,学习了HTML,JavaScript,css的基础语言。
主要是主页和操作界面的编写:
首先先看一下效果图:
首页:
最上面的图片是用CSS写的背景图片:
background-image: url(image/3.jpg); background-repeat: no-repeat; background-size: 100% 400px; background-attachment:scroll;
repeat:设置是否重复;size:水平方向填充到100%,竖直方向为400像素;attachment:设置背景图片随着滚动条移动。
图片上为标题。
<h1 style="color:white;font-size:100px;font-weight:bold;"> IMAGE STYLE TRANSFER</h1>
用CSS设置其居上边40px。
下面的使用说明部分为段落:
<p style="font-family: Segoe Script; font-size:20px;"> upload your image<br/> to the left frame<br/> then chohis program<br/> if you are saose the style you like<br/> click the button to run ttidfied with the output<br/> you can download it<br/> deal with more image<br/> just repeat </p>
设置格式为居中,在word中挑选的字体。
最下面的是一个enter的按钮:
<button style=" display:inline-block; padding:10px; width:130px; height:50px; top:240px; border:1px solid; -moz-border-radius: 45px; -webkit-border-radius: 45px; border-radius:15px; text-decoration:none; color:#ffffff; font-family:MV Boli; font-weight:bold; font-size:40px; line-height:2px; background:url(image/2.jpg); position:relative; ">Enter</button>
下面是我写的操作界面:
其基本结构与首页基本相同,最上面是一张背景图,中间一共7个button,左右两边是两个img,最终作为输入与输出图片的框。