html+css网页设计（静态网页）_html+css网页设计资源-CSDN文库

共8个文件

jpg：5个

png：1个

html：1个

html

5星 · 超过95%的资源需积分: 43 193 浏览量 2020-06-20 16:25:51 上传评论 6 收藏 673KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

myweb.zip （8个子文件）

myweb

html

_notes

1.html.mno 401B

1.html 4KB

images

logo.png 5KB

c1.jpg 24KB

c2.jpg 48KB

bg.jpg 214KB

c4.jpg 206KB

c3.jpg 183KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CAT</title> <style> *{ margin: 0px; padding: 0px; } body{ width: 100%; } /*解决高度塌陷问题clearfix*/ .clearfix:before, .clearfix:after{ content: ""; display: table; clear: both; } .header{ width: 100%; background-color:#27D1B5; padding-top: 3px; } .logo{ margin-left: 60px; } .nav{ float: right; } .nav li{ float: left; list-style: none; width: 180px; line-height: 85px; font-size: 25px; } .nav a{ text-decoration: none; color: white; } .nav a:hover{ color: black; } .banner{ position:relative; font-size:0px; } .content h1{ text-align: center; font: bold 30px stkaiti; margin-bottom: 38px; background: #D38F04; } .content .c1,.content .c2,.content .c3,.content .c4{ float: left; width: 21%; //height: 700px; margin: 0 2% 2%; } .content h2{ text-align: center; font: 25px Microsoft YaHei; padding-top: 20px; } .content h3{ //background-color:#E73538; text-align: center; text-decoration: none; } p{ text-align:left; font:15px STSong; color: #A4A4A4; margin: 15px; } .a1{ text-decoration: none; color: #FFFFFF; font: 22px STXingkai; } .footer{ float:left; background-color:#4D2D0E; width:100%; border-top: 10px solid #463B2F; } .w1,.w2,.w3,.w4{ float:left; margin: 0 7%; } .copyright{ background-color:#3A2204; text-align:center; color:#696565; } </style> </head> <body>  <div class="header">  <ul class="nav"> <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 class="logo"> <a href="#"><img src="../images/logo.png" alt="网站logo"></a> <span style="margin-left: 10px;position: absolute;color: white;font-family: STKaiti;font-size: 30px;line-height: 85px"> <div>Cat Life</div> </span> </div> </div>  <div class="banner"> <img src="../images/bg.jpg" alt="banner" width="100%"> </div>  <div class="content clearfix"> <h1>宠物猫行业一站式服务机构</h1> <div class="c1"> <div> <img src="../images/c1.jpg" alt="c1" width="100%"> </div> <h2>宠物美容</h2> <hr color:#A4A4A4/> <p>专业美容师为宠物精心设计，满足个性化需求,让您的爱猫颜值爆表</p> <h3 style="background-color:#F24346"><a class="a1" href="#">查看更多</a></h3> </div> <div class="c2"> <div> <img src="../images/c2.jpg" alt="c2" width="100%"> </div> <h2>宠物医疗</h2> <hr color:#A4A4A4/> <p>先进的医疗设备，多位资深专家，对一些疑难杂症有独到的见解</p> <h3 style="background-color: #1CC0E4"><a class="a1" href="#">查看更多</a></h3> </div> <div class="c3"> <div> <img src="../images/c3.jpg" alt="c3" width="100%"> </div> <h2>宠物寄养</h2> <hr color:#A4A4A4/> <p>每只猫咪享有单独宿舍，空调房间，餐具喵宠专用，专人管理与呵护</p> <h3 style="background-color: #54F275"><a class="a1" href="#">查看更多</a></h3> </div> <div class="c4"> <div> <img src="../images/c4.jpg" alt="c4" width="100%"> </div> <h2>宠物姻缘</h2> <hr color:#A4A4A4/> <p>建立猫咪档案，登记详细信息，挑选合适伴侣，提高宠物猫婚育质量</p> <h3 style="background-color: #F1A32E"><a class="a1" href="#">查看更多</a></h3> </div> </div>  <div class="footer"> <div class="w1"> <p>联系我们</p> </div> <div class="w2"> <p>地址：江苏省xxx</p> </div> <div class="w3"> <p>QQ ：76662064</p> </div> <div class="w4"> <p>电话：4006-200-200</p> </div> </div> <div class="copyright">版权所有 © 2020 萌宠医院,美容,寄养,婚配尽在XXX猫咪乐园</div> </body> </html>

评论收藏

内容反馈