如何把自己写的HTML代码发布到网上?

如何把自己写的HTML代码发布到网上?,第1张

1、首先,保证电脑上安装有ie类型浏览器,同时有一份php类型源代码,如图。

2、在电脑上有一份php源代码文件后,在该源代码文件里面找到一个名为main的文件件。

3、并在里面找到一个名为**.html格式的文件,然后双击该文件,选择用浏览器打开,如图。

4、待文件打开之后,在浏览器“菜单”里面找到“网页另存为  文件”的选项。

5、然后在打开的窗口中,选项另存网页为html格式,点击保存即可。

效果图,图片自己换,

html代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>泰国</title>

<link rel="stylesheet" type="text/css" href="css/index.css"/>

<script type="text/javascript" src="js/index.js"></script>

</head>

<body>

<div class="box">

  <div class="titles">泰国</div>

  <div class="img-box">

    <img class="auto-img" src="images/a001.jpg"/>

  </div>

  <div class="text-box">

    <div class="text-box-a">

      <a href="#">曼谷、芭提雅(珊瑚岛、金沙岛)5晚7天</a>

    </div>

    <div class="text-box-a">

      东航直飞曼谷客机,入住1晚曼谷国际5星+4晚泰式5星酒店,芭提雅双岛(珊瑚岛+金沙岛)清...

    </div>

    <div class="text-box-a">

      出发日期:星期一,星期二,星期三,星期四,星期五

    </div>

  </div>

  <div class="bottom ovf">

    <div class="fl text-a1">

      班期:每周发团

    </div>

    <div class="fr">

      <div class="price">¥&nbsp4549</div>

      <div class="rush-to-buy">立即抢购</div>

    </div>

  </div>

</div>

</body>

</html>

css样式:

html,body{

padding:0

margin:20px 0 0

}

a{

text-decoration:none

}

.fl{

float:left

}

.fr{

float:right

}

.ovf{

overflow: hidden

}

.box{

width:50%

margin:0 auto

border:1px dashed #000000

padding:4px

}

.titles{

width:100%

text-align: center

color:#ffffff

background-color: #ff0000

}

.img-box{

width:100%

margin-top: 4px

}

.auto-img{

display: block

width:100%

}

.text-box{

width:100%

}

.text-box-a{

width:100%

font-size: 14px

line-height: 20px

letter-spacing: 1px

}

.text-box-a>a{

color:#0089ff

}

.bottom{

margin-top: 30px

}

.text-a1{

font-size: 18px

font-style: italic

font-style:oblique/*为保证斜体效果加一个*/

}

.price{

font-size: 16px

color:#8B3E2F

}

.rush-to-buy{

width:80px

text-align: center

background-color: #ff0000

font-size: 16px

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8169839.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-14
下一篇 2023-04-14

发表评论

登录后才能评论

评论列表(0条)

保存