搜索到
4
篇与
的结果
-
无用的代码保存 /*设置首页公告样式*/ .notice { padding: 20px; border: 1px dashed #e6e6e6; color: #969696; position: relative; display: inline-block; width: 100%; /* background: #fbfbfb50; */ border-radius: 10px; background: rgb(255 255 255); } /*设置聚焦图样式*/ .top-feature { width: 100%; height: auto; margin-top: 10px; border-radius: 10px; background: rgb(255 255 255); } /*设置发现样式 h1.fes-title, h1.main-title { transition: color 1s; transition: border 1s; border-radius: 10px; background: rgb(255 255 255); }*/ /*设置首页文章样式*/ .post-list-thumb { float: left; width: 100%; height: 300px; position: relative; margin: 0px 0 20px border-radius: 10px; background-color: rgb(255 255 255); box-shadow: 0 1px 20px -6px rgb(0 0 0 / 50%); opacity: 1; transition: box-shadow .3s ease; } /*设置文章内容背景和边角*/ .entry-content { position: relative; background: rgb(255 255 255); border-radius: 10px; } /*设置文章页尾版权*/ .post-footer { padding: 20px 0; border-bottom: 1px dashed #ddd; border-top: 1px dashed #ddd; margin-top: 5px; height: 82px; border-radius: 10px; background: rgb(255 255 255); } /*设置文章评论博主说明框*/ .author-profile { padding: 30px 12.78%; text-align: center; border-radius: 10px; background: rgb(255 255 255); } /*设置评论框样式*/ .comments { clear: both; overflow: hidden; width: 100%; padding: 60px 0 80px; list-style: none; padding: 0 10px; max-width: 800px; margin-left: auto; margin-right: auto; border-radius: 10px; background: rgb(255 255 255); margin-top: 5px; } /*设置上一篇下一篇的上下间隔*/ .post-squares { overflow: hidden; width: 100%; margin: 10px 0; background: #000; border-radius: 10px; } /*设置页尾样式*/ .site-footer { padding: 2%; background: rgb(255 255 255); max-width: 800px; margin-left: auto; margin-right: auto; border-radius: 10px; } /*设置首页页尾下一页样式*/ #pagination a { padding: 13px 35px; border: 1px solid #d6d6d6; border-radius: 50px; color: #adadad; background: rgb(255 255 255); } /*设置分类页面的文章显示样式*/ .post-list { margin: 0 0 2%; position: relative; margin: 0px 0 20px border-radius: 10px; background-color: rgb(255 255 255); box-shadow: 0 1px 20px -6px rgb(0 0 0 / 50%); opacity: 1; transition: box-shadow .3s ease; border-radius: 10px; } /*设置分类页面文章热度样式*/ .info-meta { margin-top: 10px; position: absolute; top: 20px; opacity: 0; padding-top: 8px; border-top: 1px solid #ddd; transform: translate3d(-150px,0,0); visibility: hidden; transition: .7s all ease; -webkit-transition: .6s all ease; -moz-transition: .6s all linear; -o-transition: .6s all ease; -ms-transition: .6s all ease; background-color: rgb(255 255 255); border-radius: 10px; } /*设置分类页面文章头像样式*/ .feature { position: absolute; margin: 35px 12px; } /*设置分类页面文章发布时间样式*/ .p-time { position: absolute; right: 20px; top: 16px; font-size: 12px; color: #989898; letter-spacing: 0; } /*设置分类页面文章显示框高度样式*/ .post-more { margin-top: 0px; text-align: right; } -
DIV居中的经典方法 实现DIV水平居中设置DIV的宽高，使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。div{ width: 100px; height: 100px; margin: 0 auto; }缺点：需要设置div的宽度实现DIV水平、垂直居中要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。div{ width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; }文本在DIV中水平、垂直居中（text-align + line-height）1）text-align 属性规定（块级）元素内文本的水平对齐方式。2）line-height = height，行高等于元素高度，用来实现垂直居中。
-
-
鼠标放到图片上改变图片 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> //window.onload页面加载完毕以后再执行此代码 window.onload = function () { //1.获取事件源 var img = document.getElementById("box"); //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件) img.onmouseover = function () { //3.书写事件驱动程序(修改src) img.src = "image/jd2.png"; } img.onmouseout = function () { this.src = "image/jd1.png"; } } </script> </head> <body> <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/> </body> </html>
