一篇文章带你了解网页框架——Vue简单入门( 九 )

/*css展示页面前置css修改*/body,ul,h1,h2,h3,h4,h5,h6{margin: 0;padding: 0;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}a{text-decoration:none;}ul{list-style:none;}img{border:0px;}/* 清除浮动,解决margin-top塌陷 */.clearfix:before,.clearfix:after{content:'';display:table;}.clearfix:after{clear:both;}.clearfix{zoom:1;}.fl{float:left;}.fr{float:right;}/*css展示页面内部css修改*/body{font-family:'Microsoft YaHei';}.wrap{position: fixed;left:0;top:0;width:100%;height:100%;/* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); *//* background:#8fd5f4; *//* background: linear-gradient(#6bc6ee, #fff); */background:#fff;}.search_form{width:640px;margin:100px auto 0;}.logo img{display:block;margin:0 auto;}.form_group{width:640px;height:40px;margin-top:45px;}.input_txt{width:538px;height:38px;padding:0px;float:left;border:1px solid #41a1cb;outline:none;text-indent:10px;}.input_sub{width:100px;height:40px;border:0px;float: left;background-color: #41a1cb;color:#fff;font-size:16px;outline:none;cursor: pointer;position: relative;}.input_sub.loading::before{content:'';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url('../img/loading.gif');}.hotkey{margin:3px 0 0 2px;}.hotkey a{font-size:14px;color:#666;padding-right:15px;}.weather_list{height:200px;text-align:center;margin-top:50px;font-size:0px;}.weather_list li{display:inline-block;width:140px;height:200px;padding:0 10px;overflow: hidden;position: relative;background:url('../img/line.png') right center no-repeat;background-size: 1px 130px;}.weather_list li:last-child{background:none;}/* .weather_list .col02{background-color: rgba(65, 165, 158, 0.8);}.weather_list .col03{background-color: rgba(94, 194, 237, 0.8);}.weather_list .col04{background-color: rgba(69, 137, 176, 0.8);}.weather_list .col05{background-color: rgba(118, 113, 223, 0.8);} */.info_date{width:100%;height:40px;line-height:40px;color:#999;font-size:14px;left:0px;bottom:0px;margin-top: 15px;}.info_date b{float: left;margin-left:15px;}.info_type span{color:#fda252;font-size:30px;line-height:80px;}.info_temp{font-size:14px;color:#fda252;}.info_temp b{font-size:13px;}.tem .iconfont {font-size: 50px;}结束语好的,关于Vue入门案例的内容就介绍到这里,希望能为你带来帮助!
附录该文章属于学习内容,具体参考B站黑马程序员vue前端基本教程
这里附上链接:01.课程介绍_哔哩哔哩_bilibili
【一篇文章带你了解网页框架——Vue简单入门】

经验总结扩展阅读