简单html5的介绍

来源：互联网发布：gis原生数据的采集方法编辑：程序博客网时间：2024/06/01 20:51

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>影楼</title> <link href="css/stye.css"rel="stylesheet"> </head> <body> <div class="wrap"> <header class="clesr" style="overflow: hidden"> <div class="logo"><imgsrc="img/logo.png"></div> <div class="tel"> <span>全国免费热线</span><br/> <p>400-6666-6666</p> </div> </header> <ul class="nav clear"> <li><ahref="#">网站首页</a></li> <li><ahref="#">关于我们</a></li> <li><ahref="#">作品展示</a></li> <li><ahref="#">最新活动</a></li> <li><ahref="#">商品特辑</a></li> <li><ahref="#">新闻动态</a></li> <li><ahref="#">联系我们</a></li> <li><ahref="#">在线留言</a></li> </ul> <div class="banner"> <img src="img/banner.gif"> </div> <footer> <p>最新活动 ACTIVITY</p> </footer> <div class="xiezi">某某婚纱摄影，庄主品牌20年，我闷骚一群80后的团队，让您的精彩无处不在</div> <div class="xiezi2">Charm wedding photo graphy club-the door to happiness lifetime of happiness very outset</div> <div class="responsive_11"> <img src="img/responsive_11.gif"> <img src="img/responsive_13.gif"> </div> <div class="phone"> <img src="img/responsive_19.gif"> <img src="img/responsive_21.gif"> <img src="img/responsive_16.gif"> <img src="img/responsive_18.gif"> </div> <div class="data"> <p>最新动态 NEWS</p> </div> <div class="des">魅力婚纱摄影会所-通往幸福的大门一辈子的幸福，一开始就幸福无比</div> <div class="des2">Charm wedding photo graphy club-the door to happiness lifetime of happiness very outset</div> <div class="divone"> <div class="big"> <p class="p1">大师在现场:顶级婚礼摄影师抵京</p> <p class="p2">2017-08-30</p> <p class="p3">国际在线8月30日报道今日，李孝利在社交网站以"My wedding"</p> <p class="p4">为主题，公开了和李尚顺于去年9月1号在济州岛完婚</p> </div> <div class="right"> <p class="p1">李孝利公开婚礼照片父亲献唱婚礼现场</p> <p class="p2">2017-08-30</p> <p class="p3">国际在线8月30日报道今日，李孝利在社交网站以"My wedding"</p> <p class="p4">为主题，公开了和李尚顺于去年9月1号在济州岛完婚</p> </div> </div> <div class="divtwo"> <div class="big2"> <p class="p1">第三届“热带天堂杯”全国摄影大赛颁奖</p> <p class="p2">2017-08-30</p> <p class="p3">国际在线8月30日报道今日，李孝利在社交网站以"My wedding"</p> <p class="p4">为主题，公开了和李尚顺于去年9月1号在济州岛完婚</p> </div> <div class="right2"> <p class="p1">2017“百里画廊，养生临安”全省旅游摄影大赛</p> <p class="p2">2017-08-30</p> <p class="p3">国际在线8月30日报道今日，李孝利在社交网站以"My wedding"</p> <p class="p4">为主题，公开了和李尚顺于去年9月1号在济州岛完婚</p> </div> </div> <div class="img2"> <p></p> <img src="img/bot_03.png"class="tupian"> </div> <div class="bt"> <p>魅力摄影 | 精心丽质</p> </div> <div class="pic3"> <img src="img/bot_07.png"class="pp1"> <img src="img/bot_09.png"class="pp2"> <img src="img/bot_11.png"class="pp3"> </div> </div> </body>

</html>

style文件

*{    margin: 0;    padding: 0;}li{    list-style: none;}a{    text-decoration: none;}.clear:after{    content: "\200B";    display: block;    width: 0;    height: 0;    clear: both;}.wrap{    width: 1100px;    margin: 0 auto;}.logo{    float: left;    margin-top: 18px;    margin-bottom: 24px;}.tel{    float: right;    width: 246px;    height: 70px;    padding-left: 20px;    background: url("../img/tel.png") no-repeat;}.tel span{    color: #666;    font-size: 12px;}.tel p{    margin-top: 10px;}.nav li{    float:left;    width: 125px;    height: 18px;    margin: 4px;    border-left: 1px dashed #999;    border-right: 1px dashed #999;    text-align: center;    line-height: 18px;}.nav li a{    color: #999;}.banner{    margin-top: 54px;}footer{    text-align: center;    color: #f00;    line-height: 42px;}.xiezi{    font-size: 15px;    color: #999999;    margin-top: 30px;    text-align: center;}.xiezi2{    font-size: 15px;    color: #999999;    margin-top: 15px;    text-align: center;}.responsive_11{    margin-top: 40px;}.phone{    margin-top: 30px;}.data{    text-align: center;    color: #ff479b;    margin-top: 15px;}.des{    margin-top: 30px;    font-size: 15px;    text-align: center;    color: #999999;}.des2{    margin-top: 15px;    font-size: 15px;    text-align: center;    color: #999999;}.big{    background: gainsboro;    width: 540px;    height: 120px;    display: block;    float: left;    margin-top: 15px;}.p1{    font-size: 15px;}.p2{    font-size: 15px;    margin-top: 5px;    color: #999999;}.p3{    font-size: 15px;    margin-top: 5px;    color: #999999;}.p4{    font-size: 15px;    margin-top: 5px;    color: #999999;}.divone{    width: 1102px;    height: 120px;}.right{    margin-left: 22px;    background: gainsboro;    width: 540px;    height: 120px;    display: block;    float: left;    margin-top: 15px;}.big2{    background: gainsboro;    width: 540px;    height: 120px;    display: block;    float: left;    margin-top: 15px;}.divtwo{    margin-top: 22px;    width: 1102px;    height: 120px;}.right2{    margin-left: 22px;    background: gainsboro;    width: 540px;    height: 120px;    display: block;    float: left;    margin-top: 15px;}.img2{    position: relative;    margin-top: 60px;    text-align: center;}.tupian{    text-align: center;    position: absolute;    left: 50%;    top: -20px;    background: #ffffff;    margin-left: -180px;}.img2 p{    width: 100%;    height:1px;    background: darkgrey;}.bt{    font-size: 17px;    color: #666666;    text-align: center;    margin-top: 35px;}.pic3{    margin-top: 15px;    text-align: center;}.pp2{    margin-left: 20px;}.pp3{    margin-left: 20px;}

阅读全文

0 0