响应式实例

来源：互联网发布：淘宝代购网店怎么开编辑：程序博客网时间：2024/06/16 18:51
效果展示：

效果1：（屏幕>800px）

效果2：(屏幕<800px&&屏幕>545px)

效果3:(屏幕<545px)

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" /><title></title><style>body{background-color: #000;padding: 15px;width: 95%;}*{margin: 0;padding: 0;}.a{width: 100%;height: 50px;background-color: #666633;border-radius: 7px;}.top{font-size: 2rem;color: #FF9900;margin-top: 20px;font-family: "微软雅黑";}.one,.two,.three{float: left;list-style: none;margin-left: 20%;margin-top: 15px;color: white;}.one2,.two2,.three2{float: left;list-style: none;margin-left: 20%;margin-top: 15px;color: white;}.picture{max-width:100%;}.right-picture{max-width:100%;}.article{width: 55%;padding: 1%;float: left;background-color: white;margin-top: 15px;border-radius: 7px;}.right-article{width: 39%;padding: 1%;margin: 2% 0 2% 2%;float: left;background-color: white;margin-top: 15px;border-radius: 7px;}.right-picture-kuang{width: 39%;padding: 1%;margin: 0 0 0 2%;float: left;background-color: white;border-radius: 7px;}.down{width: 100%;height: 35px;background-color: #666699;float: left;border-radius: 7px;margin-top: 5%;}@media only screen and (max-width:800px ){body{background-color: #000;width: 100%;padding: 0px;}*{margin: 0;padding: 0;}.one,.two,.three{width: 30%;height: 30px;float: left;list-style: none;margin-left: 3%;margin-top: 5px;padding-top: 12px;border-radius: 7px;text-align: center;color: white;background-color: #666633;}.one2,.two2,.three2{width: 30%;height: 30px;float: left;list-style: none;margin-left: 3%;margin-top: 5px;padding-top: 12px;border-radius: 7px;text-align: center;color: white;background-color: #666699;}.a{width: 100%;height: 50px;margin: 0;background-color: black;}.top{width: 100%;height: 40px;font-size: 1.6rem;color: #FF9900;text-align: center;font-family: arial;}.article{width: 50%;float: left;background-color: white;margin-left: 15px;border-radius: 7px;}.right-article{width: 41%;padding: 1%;float: left;background-color: white;margin-top: 15px;border-radius: 7px;}.right-picture{max-width:100%;}.right-picture-kuang{width: 95%;padding: 1%;margin: 15px;background-color: white;margin-top: 15px;border-radius: 7px;}.down{width: 100%;height: 25px;background-color: black;float: left;margin-top: 5%;}}@media only screen and (max-width:545px ){body{background-color: #000;width: 100%;min-width: 260px;}*{margin: 0;padding: 0;}.a{width: 100%;height: 100px;}.top{width: 100%;height: 40px;font-size: 1.3rem;color: #FF9900;text-align: center;font-family: arial;}.one,.two,.three{float: left;width: 100%;height: 20px;background-color: #666633;list-style: none;margin-left: 0;margin-top: 5px;padding-top: 8px;text-align: center;color: white;}.one2,.two2,.three2{float: left;width: 100%;height: 20px;background-color: #666699;list-style: none;margin-left: 0;margin-top: 5px;padding-top: 8px;text-align: center;color: white;}.article{width: 98%;background-color: white;margin: 15px 0 0 0;border-radius: 7px;}.right-article{width: 98%;padding: 1%;margin: 0;background-color: white;margin-top: 15px;border-radius: 7px;}.right-picture{max-width:100%;}.right-picture-kuang{width: 98%;padding: 1%;margin:15px 0 0 0;background-color: white;border-radius: 7px;}.down{width: 100%;height: 15px;background-color: black;float: left;margin-top: 5%;}}</style></head><body><div class="top">假如人生不曾相遇</div><div class="a"><ul><li class="one">相遇·依旧</li><li class="two">相聚·禅意</li><li class="three">相约·漂泊</li></ul></div><div class="all"><div class="article"><img src="4.jpg" class="picture"><p>        相遇，是一个多么动人的名词啊！在这个世界上，两个人相遇的可能性是千万分之一，成为朋友的可能性是两亿分之一，而成为终生伴侣的可能性却只有五十亿分之一。人与人的相遇，都是那么难得，那么偶然，又是那么美好的事。</p><p>        假如人生不曾相遇，我还是我，你还是你。行走在孤独而陌生的城市里，每天看日出日落，听虫鸣鸟叫，与自己的影子彼此安慰，冷暖自知。遇到便是缘分，碰到就会有福分。我们这一生总会遇到各种各样的人，不论遇上谁，碰上谁，遇到了就要以诚相待，用心关怀，彼此温暖，彼此珍惜。</p><p>        假如人生不曾相遇，我不会知道有一个知心的朋友是多么的幸福。漫长的岁月里，我们彼此依靠，彼此鼓励。在倾诉和聆听之中，感知朋友身形；在交流和接触之中，不断握手和感激。你能理解我失意彷徨时的酸楚，我来安慰你心灰意冷时的痛苦。</p><p>        忙碌的生活，无法让我们遗忘对彼此的牵挂；遥远的距离，也隔不断我们真挚的情谊。即便过了十年，二十年，我们饱经沧桑，满脸皱纹，当我们的手握在一起的时候，依然能感受到那份对彼此的赤诚之心。</p></div><div class="right-article"><p>        假如人生不曾相遇，我不会懂得爱情存在的真正意义。在人海茫茫，众生芸芸之中遇见你，就像是在偶然中赴那个必然的约定，没有早一步，也没有晚一步，一切都是那么的自然，自然到不知不觉你已经住进到了我的心灵深处。</p><p>        假如人生不曾相遇，我不会知道有一种思念让人魂牵梦绕；有一种眷恋让人一往情深；有一种目光不远不近，却一直在守望着。假如人生不曾相遇，就不会拥有相拥的欢喜，也不会产生分离的孤寂。那些被称为爱的感觉，还在四处游荡；那些轻声呼唤过的柔情，也在四处漂泊；那些梦里的眼神，将被琐碎的日子收藏；那些点滴流过的眼泪，也不会汇聚成海。</p><p>        生活原是一潭死水，有了与你的相遇，才泛起点点涟漪。你是我一生中最美的相遇，此生有你，足以。相逢何必曾相识，遇上了便是缘分。我们也不必去奢求永远，只要曾经拥有过，温馨的往昔都会留存在记忆中。感谢上苍，使我与你相遇。愿上苍保佑你的善良和真诚，愿我们常相聚，相遇是最美好的事。感谢上苍让我们在人生之中相遇，无论是擦肩而过，还是相扶相持，都十分珍贵，永远珍惜这份美好吧。这篇美文送给与我相遇的你，相遇很美，更是因为相遇，我们才变成更好的彼此。</p></div><div class="right-picture-kuang"><img src="01.jpg" class="right-picture"><img src="02.jpg" class="right-picture"></div></div><div class="down"><ul><li class="one2">相遇·依旧</li><li class="two2">相聚·禅意</li><li class="three2">相约·漂泊</li></ul></div></body></html>
阅读全文
1 0