如何用html制作给人网页 源代码

如何用html制作给人网页 源代码,第1张

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>给人网页</title>

    </head>

    <body>

        <h1>给人网页</h1>

    </body>

</html>

制作一个网页起码要用到HTML、CSS、JavaScript,PHP(ASP)等语言,如果你只是要静态无装饰页面,这就可以了

123456789<!DOCTYPE html><html><head> <title></title></head><body></body></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/8336364.html

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

发表评论

登录后才能评论

评论列表(0条)

保存