如下参考：
1.首先，在您的计算机桌面上创建一个新文件夹，然后在该文件夹中创建一个新的文本文档。
2.然后用记事本双击打开文本文档，如下图所示，然后编写一个简单的HTML代码。
3.点击“另存为”功能选项，显示默认的“另存为”代码为ANSI。
4.我们将把编码和文件名更改回图中所示的图像并保存它。
5.然后回到新创建的文件夹，找到一个额外的HTML文件。
6.最后，使用浏览器打开HTML文件。结果如图所示。
1、源码是使用html编写的,通过IE把它翻译为网页,它是所有网页的核心,但是html 并不是计算机语言,只是网页的另一种描述.源代码是一种语言，组织排版网页上的元素（图片，视频，音乐，文字等）的一种标准语言。2、如果您要制作网页，您可以选用如Frontpage或Dreamwaver等工具，这些工具都是所见即所得性质的，就是说您在工具界而上制作的，就能直接在浏览中原样显示出来。但，这些工具同时还提供了源代码视图，也就是说，如果一些功能没有办法直接通过工具来实现，那你要编辑源代码了。
3、当然，您也可以直接用记事本来编辑网页，直接输入代码，然后另存为.htm或.asp或其他为后缀名的文件。您保存下来的这些文件就是网页了，而您在记事本里编辑的那些，就是源代码。
效果图，图片自己换，
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">￥ 4549</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
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）