(个人)基于深度学习的中国传统特色图像的风格迁移创新实训第六周（1）

本周开始了网页界面的设计与编写，学习了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,最终作为输入与输出图片的框。