自适应个人主页html源码,哪里下载?

自适应个人主页html源码,哪里下载?,第1张

个人主页可以采用html代码也可以采用cms系统形式,一般以个人博客网站形式存在。你可以在个人博客模板找到自适应的模板程序后,进行源码下载。

每天的进行一些文章更新,相信对于建立个人品牌是非常有帮助的。

效果图,图片自己换,

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

}

宽度自适应吧.不要设置成1300px,width:100%margin:0 autodiv标签里的宽度不超过分辨率可以设置max-width:100%这样就不怕了,不过兼容性不是很好,ie6不认识,你可以搜一搜兼容性的办法


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存