html5+Css3 做一个婚纱网页
来源:互联网 发布:相片合成软件 编辑:程序博客网 时间:2024/03/29 16:01
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>婚纱</title> <style> *{ margin: 0px; padding: 0px; } .inner{ width: 1100px; margin: 0 auto; } .clear:after{ content: "\200B"; display: block; clear: both; } a{ text-decoration: none; } .logo{ display: block; float: left; margin-top: 19px; margin-bottom: 24px; } .tell{ width: 246px; height: 74px; float: right; padding-left: 20px; background: url("../img/tel.png") no-repeat left top; } .z{ font-size: 15px; color: #666; } .zz{ font-size: 25px; color: #999; } .xia{ margin-top: 15px; margin-left: 5px; } .nav{ } .nav ul li{ width: 125px; height: 18px; margin: 0 2px; float: left; list-style: none; text-align: center; line-height:18px; border-left: 1px dashed #666666; border-right: 1px dashed #666666; } .nav ul li a:link{color: black} .nav ul li a:hover{color: blue} .zui{ position: relative; margin-top: 40px; } .zui p{ width: 100%; height: 1px; background: red; } .huo{ width:360px; height: 40px; line-height: 40px; color: red; font-size: 27px; text-align: center; background: #fff; position: absolute; left: 50%; top:-20px; margin-left:-180px; border-right: 2px solid red; border-left: 2px solid red; } .zi{ position: relative; top: 40px; } .p1{ text-align: center; } .p2{ text-align: center; } .tu1{ width: 1100px; height: 255px; position: relative; top: 69px; } .tuzuo{ float: left; width: 541px; height: 254px; } .tuyou{ float: right; width: 541px; height: 254px; } .tu2{ width: 1100px; height: 290px; position: relative; top: 200px; } .d1{ float: left; } .d2{ float: left; margin-left: 20px; } .d3{ float: left; margin-left: 20px; } .d4{ float: right; } .tai{ position: relative; top: 240px; } .tai p{ width: 100%; height: 2px; background: red; } .dong{ width:360px; height: 40px; line-height: 40px; color: red; font-size: 27px; text-align: center; background: #fff; position: absolute; left: 50%; top:-20px; margin-left:-180px; border-right: 2px solid red; border-left: 2px solid red; } .zi1{ position: relative; top: 280px; } .p3{ text-align: center; } .p4{ text-align: center; } .inner1{ position: absolute; top: 1670px; width: 1100px; height: 363px; } .hui1{ width: 1099px; height: 167px; } .hui1zuo{ float: left; width: 540px; height: 166px; background: #f1f1f1; } .hui1you{ float: right; width: 540px; height: 166px; background: #f1f1f1; } .hui2{ position: relative; top: 28px; width: 1099px; height: 167px; } .hui2zuo{ float: left; width: 540px; height: 166px; background: #f1f1f1; } .hui2you{ float: right; width: 540px; height: 166px; background: #f1f1f1; } .hui1zuo p a:link{color: black} .hui1zuo p a:hover{color: red} .hui1you p a:link{color: black} .hui1you p a:hover{color: red} .hui2zuo p a:link{color: black} .hui2zuo p a:hover{color: red} .hui2you p a:link{color: black} .hui2you p a:hover{color: red} .tai1{ position: relative; top: 727px; } .tai1 p{ width: 100%; height: 2px; background: #999; } .dong1{ width:360px; height: 40px; line-height: 40px; position: absolute; left: 50%; top:-20px; margin-left:-180px; } .ziti{ margin-left: 80px; font-size: 30px; } .inner2{ width: 1100px; height: 120px; position: absolute; top: 2170px; } .san{ height: 33px; } .hang{ margin-top: 10px; height: 78px; } .img1{ margin-left: 528px; } .hang p{ font-size: 15px; line-height: 8px; text-align: center; } </style></head><body><div class="inner"> <header class="clear"> <img src="img/logo.png" class="logo"> <div class="tell"> <p class="z">全国联系电话</p> <p class="xia"><a href="#" class="zz">XXXXXXXXXXXXX</a></p> </div> </header> <div class="nav"> <ul class="clear"> <li> <a href="">网站首页</a> </li> <li><a href="">关于我们</a></li> <li><a href="">作品展示</a></li> <li><a href="">最新活动</a></li> <li><a href="">视频特辑</a></li> <li><a href="">新闻动态</a></li> <li><a href="">联系我们</a></li> <li><a href="">在线留言</a></li> </ul> </div> <div class="tupian"> <img src="img/banner.gif"> </div> <div class="zui"> <p></p> <div class="huo">最新活动 ACTIVITY</div> </div> <div class="zi"> <p class="p1">XX婚纱摄影品牌机构,我们是一群90后的创作团队,致力打造高端外景婚纱品牌。让你的精彩无处不在</p> <p class="p2"> Xiao Rui wedding photography brand institutions, we are a group of 90 creative team, is committed to creating high-end </p> </div> <div class="tu1"> <div class="tuzuo"> <a href="javascript:"><img src="img/responsive_11.gif" ></a> </div> <div class="tuyou"> <a href="javascript:"><img src="img/responsive_13.gif" ></a> </div> </div> <div class="tu2"> <div class="d1"> <dl> <dt><a href="javascript:"><img src="img/responsive_19.gif"></a></dt> <dd><a href="javascript:" style="margin-left: 30px;color: black">套系原价9999元 现价 4999元</a></dd> </dl> </div> <div class="d2"> <dl> <dt><a href="javascript:"><img src="img/responsive_21.gif"></a></dt> <dd><a href="javascript:" style="margin-left: 13px;color: black">套系原价24999元 现价 12900元</a></dd> </dl> </div> <div class="d3"> <dl> <dt><a href="javascript:"><img src="img/responsive_16.gif"></a></dt> <dd><a href="javascript:" style="margin-left: 20px;color: black">套系原价16999元 现价 8888元</a></dd> </dl> </div> <div class="d4"> <dl> <dt><a href="javascript:"><img src="img/responsive_18.gif"></a></dt> <dd><a href="" style="margin-left: 30px;color: black">套系原价9999元 现价 4999元</a></dd> </dl> </div> </div> <div class="tai"> <p></p> <div class="dong">最新动态 NEWS</div> </div> <div class="zi1"> <p class="p3">魅力婚纱摄影会所-通往幸福的大门一辈子的幸福,一开始就幸福无比</p> <p class="p4"> Xiao Rui wedding photography brand institutions, we are a group of 90 creative team, is committed to creating high-end </p> </div> <div class="inner1"> <div class="hui1"> <div class="hui1zuo"> <h1 style="margin: 15px 0px 0px 20px"><a href="javascript:">XXX</a></h1> <p style="margin: 18px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p> <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p> <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p> </div> <div class="hui1you"> <h1 style="margin: 15px 0px 0px 20px"><a href="javascript:">XXX</a></h1> <p style="margin: 18px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p> <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p> <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p> </div> </div> <div class="hui2"> <div class="hui2zuo"> <h1 style="margin: 15px 0px 0px 20px"><a href="javascript:">XXX</a></h1> <p style="margin: 18px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p> <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p> <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p> </div> <div class="hui2you"> <h1 style="margin: 15px 0px 0px 20px"><a href="javascript:">XXX</a></h1> <p style="margin: 18px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p> <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p> <p style="margin: 10px 0px 0px 20px"><a href="javascript:">XXXXXXXXXXXXXXXXXXXXX</a></p> </div> </div> </div> <div class="tai1"> <p></p> <div class="dong1"> <img src="img/bot_03.png"> <font class="ziti" face="苏新诗卵石体">魅力摄影|精心丽质</font> </div> </div> <div class="inner2"> <div class="san"> <img class="img1" src="img/bot_07.png"> <img src="img/bot_09.png"> <img src="img/bot_11.png"> </div> <div class="hang"> <p>版权所有(C)2014-2017XX摄影有限公司 沪ICP备09001000号</p><br> <p>全国免费热线:400-888-6666 海口电话:0898-88*1211 0898-88*12211 QQ:615685472</p><br> <p>地址:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> </div> </div></div></body></html>
阅读全文
0 0
- html5+Css3 做一个婚纱网页
- html5/Css3 做一个网页康宁家具
- HTML5+CSS3网页模板
- html5 加CSS3 做的一个3G站
- HTML5+CSS3 做一个灵动的动画 TAB 切换效果
- 当前位置:主页 > 网页特效 > HTML5+CSS3 > HTML5+CSS3
- 《精通HTML5 + CSS3+JavaScript网页设计》
- html5 css3网页字体的设置
- html5 css3关于网页字体设置
- html5+ css3 +js实现网页计算器
- 【html5和css3】网页导航基础
- 网页设计: CSS3、HTML5、JS和框架
- 精通HTML5+CSS3+JavaScript网页设计pdf
- 运用HTML5+CSS3做的登录页面
- css3做一个滚动条
- HTML5和css3实例:制作HTML5验证的网页表单
- 婚纱
- 婚纱
- Activator
- (运输层)TCP的流量控制
- TensorFlow(五)TensorFlow Python API (nn模块)
- Python入门与实践笔记-02
- Oracle分组查询2-CUBE
- html5+Css3 做一个婚纱网页
- 虚幻4崩溃问题解决方案
- nginx安装不能下载pcre yum更新问题resolve host 'mirrors.vonline.vn'"
- 注意事项!机械行业ERP系统如何选型
- jQuery报错:Uncaught ReferenceError: $ is not defined
- 运行jar包出现问题:java.lang.SecurityException: JCE cannot authenticate the provider BC
- python 对txt中每行内容进行批量替换
- mmc命令
- windows 2012 R2 及 centos 7.X 禁用不必要服务