纯html5+css能写出什么惊人的效果？

0条评论

微信官网首页，简约干净，能学习写好这个首页，就能掌握HTML网页设计前端盒子的布局、嵌套，及css效果的使用... 微信官网首页主要有以下几个需要关注的点： 1. 通过@media写需要适应PC、手机版的部分盒子的 css，将PC版的固定尺寸改为移动端的宽度百分比从而做到“响应式”； 2. space around的应用，可以使弹性布局盒子内部（横轴）方向上均匀排列每个元素； 3.鼠标划过小手标志，运用cursor: pointer; 4.hover的应用，鼠标滑…

微信官网仿写 ↑

将这个版式换成旅行网站主题后 ↑

移动端响应式效果 ↑

微信官网首页，简约干净，能学习写好这个首页，就能掌握HTML网页设计前端盒子的布局、嵌套，及css效果的使用... 微信官网首页主要有以下几个需要关注的点：

1. 通过@media写需要适应PC、手机版的部分盒子的 css，将PC版的固定尺寸改为移动端的宽度百分比从而做到“响应式”；

2. space around的应用，可以使弹性布局盒子内部（横轴）方向上均匀排列每个元素；

3.鼠标划过小手标志，运用cursor: pointer;

4.hover的应用，鼠标滑过可改变背景色；

5.鼠标划过盒子缩放1.2倍，增加过渡时间让动画缓入更加舒适；

6.本套源码已共享在下方，预览及讲解视频请查看：https://www.zhihu.com/zvideo/1497705066815086592

更新：【禁止商用】发现有很多开发者拿这套源码去部署建站，在不同的测试服务器、域名中上线测试，再次强调，仅供学习，禁止商用，如造成侵权行为后果自负~ 你都能部署到服务器就不能自己写一套吗？/滑稽

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" id="WebViewport" content="width=100%,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1" />  <title>这是一个首页</title> <style type="text/css"> * { margin:0; padding:0; } /* 通配符删除浏览器默认值 */ ul { list-style:none; /* 取消项目符号样式 */ } body { overflow-x:hidden; background-color:rgba(250,250,250,1); font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;/* 字体集 */ } @media (min-width: 601px){ /* >=601的设备*/ .top_info { width: 100%; height: 600px; position: relative; } .top_info:after { background-color: #2aae67; content: ''; width: 160%; height: 650px; position: absolute; left: -30%; top: 0; z-index: -1; border-radius: 0 0 50% 50%; } .top_info .top-text { height: 130px; width: 620px; margin-top: 40px; margin-right: auto; margin-left: auto; font-size: 0.87em; border-top-width: 1px; border-top-style: solid; border-top-color: #f2f2f2; line-height: 32px; color: #f2f2f2; padding-top: 18px; text-align: justify; } .top_info .round_div_all { height: 120px; width: 700px; margin-right: auto; margin-left: auto; padding-top: 5px; display: -webkit-flex;/* 定义内部为弹性布局 */ display: flex; /* 定义内部为弹性布局 */ flex-wrap: wrap; /* 让弹性盒元素在需要的时候拆列 */ justify-content: space-around; /* （横轴）方向上均匀排列每个元素 */ } .mian01 { width: 850px; margin-top: 40px; margin-right: auto; margin-left: auto; padding-top: 40px; padding-bottom: 40px; overflow: hidden; /* 防止塌陷 */ display: -webkit-flex;/* 定义内部为弹性布局 */ display: flex; /* 定义内部为弹性布局 */ flex-wrap: wrap; /* 让弹性盒元素在需要的时候拆列 */ justify-content: space-around; /* （横轴）方向上均匀排列每个元素 */ } .square_div { float: left; height: 160px; width: 180px; margin-top: 30px; border-radius: 6px; background-color: #ffffff; box-shadow: 0px 0px 5px 5px rgba(152,152,152,0.07);/* 设置一个阴影颜色透明度 */ cursor: pointer; /* 鼠标在此处的效果为“小手”样式 */ margin-right: auto; margin-left: auto; } } @media (max-width: 600px){ /*响应式 <=600的设备使用如下css样式表 */ .top_info { width: 100%; height: 750px; background-color: #2aae67; border-bottom-left-radius: 60% 15%; border-bottom-right-radius: 60% 15%; } .top_info .top-text { height: 130px; width: 80%; margin-top: 40px; margin-right: auto; margin-left: auto; font-size: 0.87em; border-top-width: 1px; border-top-style: solid; border-top-color: #f2f2f2; line-height: 32px; color: #f2f2f2; padding-top: 18px; text-align: justify; } .top_info .round_div_all { width: 80%; margin-right: auto; margin-left: auto; padding-top: 40px; display: -webkit-flex;/* 定义内部为弹性布局 */ display: flex; /* 定义内部为弹性布局 */ flex-wrap: wrap; /* 让弹性盒元素在需要的时候拆列 */ justify-content: space-around; /* （横轴）方向上均匀排列每个元素 */ } .mian01 { width: 90%; margin-right: auto; margin-left: auto; text-align:center; padding-top: 40px; padding-bottom: 40px; overflow: hidden; /* 防止塌陷 */ display: -webkit-flex;/* 定义内部为弹性布局 */ display: flex; /* 定义内部为弹性布局 */ flex-wrap: wrap; /* 让弹性盒元素在需要的时候拆列 */ justify-content: space-around; /* （横轴）方向上均匀排列每个元素 */ } .square_div { float: left; height: 142px; width: 160px; margin-top: 30px; border-radius: 6px; background-color: #ffffff; box-shadow: 0px 0px 5px 5px rgba(152,152,152,0.07);/* 设置一个阴影颜色透明度 */ cursor: pointer; /* 鼠标在此处的效果为“小手”样式 */ margin-right: auto; margin-left: auto; } } .top_info .login { height: 22px; width: 45px; margin-top: 1%; float: left; margin-left: 91%; font-size: 0.9em; letter-spacing:3px; } .top_info .logo { height: 64px; width: 200px; margin-right: auto; margin-left: auto; padding-top: 120px; } .top_info .logo img:hover { opacity : 0.8; } .top_info .round_div_all .round_div { float: left; height: 110px; width: 110px; margin-top: 30px; border-radius: 50%; background-color: #39b472; cursor: pointer; /* 鼠标在此处的效果为“小手”样式 */ margin-left: 25px; margin-right: 25px; } .top_info .round_div_all .round_div:hover { background-color: #4aba7e; transition-duration: 0.3s;/* 缩放的过渡时间 */ } .top_info .round_div_all .round_div .r-s01 { height: 40px; width: 40px; margin-top: 20px; margin-right: auto; margin-left: auto; } .top_info .round_div_all .round_div .r-s02 { height: 25px; width: 90px; margin-top: 10px; margin-right: auto; margin-left: auto; font-size: 0.8em; color: #f2f2f2; text-align: center; } .square_div:hover { -webkit-transform:scale(1.11,1.11); -moz-transform:scale(1.11,1.11); -transform:scale(1.11,1.11); transition-duration: 0.5s;/* 缩放的过渡时间 */ } .square_div .s-s01 { height: 43px; width: 43px; margin-top: 38px; margin-right: auto; margin-left: auto; } .square_div .s-s02 { height: 25px; width: 120px; margin-top: 18px; margin-right: auto; margin-left: auto; font-size: 0.9em; color: #1a1a1a; text-align: center; } .down { background-color: #ffffff; text-align: center; height: 50px; width: 100%; padding-top: 40px; padding-bottom: 40px; margin-top: 40px; } .f82 { font-size: 0.82px; color: #4c4c4c; line-height: 28px; letter-spacing:1px; } .f75 { font-size: 0.75px; color: #a0a2a0; line-height: 30px; letter-spacing:1px; } a:link { color: #ffffff; text-decoration: none; } a:visited { text-decoration: none; color: #ffffff; } a:hover { text-decoration: none; color: #ececec; } a:active { text-decoration: none; } .banquan { height: 36px; width: 1000px; margin-right: auto; margin-left: auto; border-top-width: 1px; border-top-style: solid; border-top-color: #f2f2f2; background-image: url(http://cdn.psdhtml.cn/wx_images/wx_lxidw7.svg); background-color: #FFF; } </style> </head> <body>  <div class="top_info"> <div class="login"><a href="#">登录</a></div> <div class="logo"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/logo.png" width="200" height="64"></a></div> <div class="top-text">我们支持跨通信运营商、跨操作系统平台通过网络快速发送免费（需消耗少量网络流量）语音短信、视频、图片和文字，同时，也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“圈子”、”公众平台“、”语音记事本“等服务插件。</div> <div class="round_div_all"> <div class="round_div"> <div class="r-s01"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/icon01.png" width="40" height="40"></a></div> <div class="r-s02">Android</div> </div> <div class="round_div"> <div class="r-s01"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/icon02.png" width="40" height="40"></a></div> <div class="r-s02">IOS</div> </div> <div class="round_div"> <div class="r-s01"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/icon03.png" width="40" height="40"></a></div> <div class="r-s02">Windows</div> </div> <div class="round_div"> <div class="r-s01"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/icon04.png" width="40" height="40"></a></div> <div class="r-s02">Harmony OS</div> </div> </div> </div> <div class="mian01"> <div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_01.svg" width="43" height="43"></div> <div class="s-s02">We支付</div> </div> <div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_02.svg" width="43" height="43"></div> <div class="s-s02">公Z号</div> </div> <div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_03.svg" width="43" height="43"></div> <div class="s-s02">小程序</div> </div> <div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_04.svg" width="43" height="43"></div> <div class="s-s02">视频号助手</div> </div> <div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_05.svg" width="43" height="43"></div> <div class="s-s02">小游戏</div> </div> <div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_06.svg" width="43" height="43"></div> <div class="s-s02">小商店</div> </div> <div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_07.svg" width="43" height="43"></div> <div class="s-s02">表情开放平台</div> </div> <div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_08.svg" width="43" height="43"></div> <div class="s-s02">搜一搜开放平台</div> </div> <div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_09.svg" width="43" height="43"></div> <div class="s-s02">红包封面</div> </div> <div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_10.svg" width="43" height="43"></div> <div class="s-s02">对话开放</div> </div> <div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_11.svg" width="43" height="43"></div> <div class="s-s02">服务平台</div> </div> <div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_12.svg" width="43" height="43"></div> <div class="s-s02">在线学堂</div> </div> </div> <footer class="down"><span class="f82">We安全 | 服务条款 | 使用规范 | 客服中心 | 隐私保护指引</span><br> <span class="f75">Copyright © 1998-2022 All Rights Reserved.</span></footer> <div class="banquan"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/wx_lxidw7.svg" width="1000" height="36"></a></div> </body>  </html>

【更多相关可以查看下方我的网页设计源码专栏 ↓】

网页作业设计与源码共享

热门问答

网友知识问答

纯html5+css能写出什么惊人的效果？