今天,不知道是谁把我邮箱卖了,收到个国外免费空间的邮件,就点了看看。

首先申请地址:http://www.hostinger.co.uk/order

QQ截图20140722162352.png

记住,要把I agree to the terms of service打勾,然后,点击那个英文按钮,

注册后,必须得激活,几秒钟后,你的邮箱会收到一封含有激活地址的邮件,点击激活地址。

然后点击O元的那个

QQ截图20140722162653.png

点击Subdomain是切换的,默认是免费二级域名,点击Subdomain后,会切换成输入你的顶级域名

一共有6款二级域名后缀,Generate是生产随机密码

QQ截图20140722162736.png

注册后,会发来一封介绍你的空间信息的邮件。

管理面板地址:http://cpanel.hostinger.co.uk/

他们的管理面板感觉小清新


演示(探针)地址:96it.96.lt


bg2012050107.jpg

代码是:


<!doctype html><html lang="en"><head><meta charset="utf-8"><!-- viewport meta to reset iPhone inital scale --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo: Responsive Design in 3 Steps</title><!-- css3-mediaqueries.js for IE8 or older --><!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--><style type="text/css">body {font: 1em/150% Arial, Helvetica, sans-serif;}a {color: #669;text-decoration: none;}a:hover {text-decoration: underline;}h1 {font: bold 36px/100% Arial, Helvetica, sans-serif;}/************************************************************************************STRUCTURE*************************************************************************************/#pagewrap {padding: 5px;width: 960px;margin: 20px auto;}#header {height: 180px;}#content {width: 600px;float: left;}#sidebar {width: 300px;float: right;}#footer {clear: both;}/************************************************************************************MEDIA QUERIES*************************************************************************************//* for 980px or less */@media screen and (max-width: 980px) {#pagewrap {width: 94%;}#content {width: 65%;}#sidebar {width: 30%;}}/* for 700px or less */@media screen and (max-width: 700px) {#content {width: auto;float: none;}#sidebar {width: auto;float: none;}}/* for 480px or less */@media screen and (max-width: 480px) {#header {height: auto;}h1 {font-size: 24px;}#sidebar {display: none;}}/* border & guideline (you can ignore these) */#content {background: #f8f8f8;}#sidebar {background: #f0efef;}#header, #content, #sidebar {margin-bottom: 5px;}#pagewrap, #header, #content, #sidebar, #footer {border: solid 1px #ccc;}</style></head><body><div id="pagewrap"><div id="header"><h1>Header</h1><p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p></div><div id="content"><h2>Content</h2><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p></div><div id="sidebar"><h3>Sidebar</h3><p>textg</p><p>fgs</p><p>fgsg</p><p>dg</p><p>dfgfd</p><p>是否感到反感</p><p>sgrtg</p><p>分公司</p><p>sgf</p><p>text</p></div><div id="footer"><h4>Footer</h4></div></div></body></html>


不用高亮插件展示:





<!doctype html>


<html lang="en">


<head>


<meta charset="utf-8">


<!-- viewport meta to reset iPhone inital scale -->


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Demo: Responsive Design in 3 Steps</title>


<!-- css3-mediaqueries.js for IE8 or older -->


<!--[if lt IE 9]>


<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>


<![endif]-->


<style type="text/css">


body {


font: 1em/150% Arial, Helvetica, sans-serif;


}


a {


color: #669;


text-decoration: none;


}


a:hover {


text-decoration: underline;


}


h1 {


font: bold 36px/100% Arial, Helvetica, sans-serif;


}


/************************************************************************************


STRUCTURE


*************************************************************************************/


#pagewrap {


padding: 5px;


width: 960px;


margin: 20px auto;


}


#header {


height: 180px;


}


#content {


width: 600px;


float: left;


}


#sidebar {


width: 300px;


float: right;


}


#footer {


clear: both;


}


/************************************************************************************


MEDIA QUERIES


*************************************************************************************/


/* for 980px or less */


@media screen and (max-width: 980px) {


#pagewrap {


width: 94%;


}


#content {


width: 65%;


}


#sidebar {


width: 30%;


}


}


/* for 700px or less */


@media screen and (max-width: 700px) {


#content {


width: auto;


float: none;


}


#sidebar {


width: auto;


float: none;


}


}


/* for 480px or less */


@media screen and (max-width: 480px) {


#header {


height: auto;


}


h1 {


font-size: 24px;


}


#sidebar {


display: none;


}


}


/* border & guideline (you can ignore these) */


#content {


background: #f8f8f8;


}


#sidebar {


background: #f0efef;


}


#header, #content, #sidebar {


margin-bottom: 5px;


}


#pagewrap, #header, #content, #sidebar, #footer {


border: solid 1px #ccc;


}


</style>


</head>


<body>


<div id="pagewrap">


<div id="header">


<h1>Header</h1>


<p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p>


</div>


<div id="content">


<h2>Content</h2>


<p>text</p>


<p>text</p>


<p>text</p>


<p>text</p>


<p>text</p>


<p>text</p>


<p>text</p>


<p>text</p>


<p>text</p>


<p>text</p>


</div>


<div id="sidebar">


<h3>Sidebar</h3>


<p>textg</p>


<p>fgs</p>


<p>fgsg</p>


<p>dg</p>


<p>dfgfd</p>


<p>是否感到反感</p>


<p>sgrtg</p>


<p>分公司</p>


<p>sgf</p>


<p>text</p>


</div>


<div id="footer">


<h4>Footer</h4>


</div>


</div>


</body>


</html>



预览地址:http://nimaboke.qiniudn.com/a/1.html

换成1500*500浏览页面,请运行下面的代码




申请地址:http://www.000webhost.com/order.php

QQ截图20140722092857.png

填写域名的框框只能二选一,第一个是填写你的域名然后解析到他们那里去,第二个是使用免费二级域名。

填写完信息,还要把I agree to Terms Of Service打勾,然后点击最后的按钮,然后000会给你发一封邮件,点击邮件中的地址就注册完毕了

接着,他会发一封介绍你空间的邮箱

QQ截图20140722093204.png

他会告诉你,你的管理面板地址,以及ftp。

点击地址,然后输入账号密码。就能看见mysql数据库

默认mysql数据库可以免费创造2个。

对了mysql服务器地址不能填本机地址,要填给你的那个地址。

QQ截图20140722094119.png

演示地址:http://nima.comyr.com/

emlogFinallylijiayan'Blogwings blog天黑's blog弱噢噢私人分享星知宛水冷眸博客王商博客畅想资源肥宅之家记忆角落钱来吧cmp冠军体育天龙八部