日剧 | 易学教程

HTML5+CSS：02用户注册表单

阅读更多关于 HTML5+CSS：02用户注册表单

新的学期已开始接近两个月了，还记得是在国庆节那几天申请的博客账号，可过了一个月都还没开始写博客，（>_<)有点小偷懒了，不过，学习还是不能落下的，今写一个有点实践运用的关于表单网页的代码，希望能够帮助到跟我一样H5的小白们，也请各位大佬多多指教！！首先，先上我们敲的表单样式（如下）：其次，代码接上吖，Html5代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/User.css"/> </head> <body οnlοad="show()"> <form action="server.html" method="post" name="f1" id="f1" οninput="out.innerHTML=age2.value" target="_blank" enctype="multipart/form-data"> <fieldset> <legend>用户注册</legend> <p> <label for="name1">姓名：</label> <input type="text" required="required" placeholder="输入名字..." name="name1" id=

用样式表美化QTabwidget外观

阅读更多关于用样式表美化QTabwidget外观

没有仔细看是否正确，先保存到这里，以后研究一下一、参考文章： http://bbs.csdn.net/topics/390632657?page=1 setStyleSheet("QTabWidget::pane{border-width:1px;border-color:rgb(48, 104, 151);\ border-style: outset;background-color: rgb(132, 171, 208);\ background: transparent;} \ QTabWidget::tab-bar{border-width:0px;}\ QTabBar::tab{border-bottom-color: #C2C7CB;\ border-top-left-radius: 0px;\ border-top-right-radius: 0px;\ max-width: 75px; min-width:75px; min-height:25px;\ font:14px Times New Roman;\ padding: 0px;\ }\ QTabBar::scroller {\ width:25;\ border:0;\ padding: 0px;\ }\ QTabBar QToolButton::right-arrow {\ background

vue - 动态绑定 class

阅读更多关于 vue - 动态绑定 class

<template> <div class="todo-item" :class="{'is-complete':todo.completed}" > <p> <input type="checkbox" @change="markComplete"> {{todo.title}} </p> </div> </template> <script> export default { name:'todo', props:["todo"], methods:{ markComplete(){ this.todo.completed = !this.todo.completed console.log(this.todo); } } } </script> <style scoped> .todo-item{ background: #f4f4f4; padding: 10px; border-bottom: 1px dotted #ccc ; } .is-complete{ text-decoration: line-through } .del{ background: #ff0000; color: #fff; border: none; padding: 5px 9px; border-radius: 50%; cursor: pointer; float: right; } <

盒子布局浮动定位

阅读更多关于盒子布局浮动定位

1，布局页面的时候大色块小色块小色块。。。内容 2，布局：浮动，定位，显示，盒子模型，层级 3，浮动：float：left right 　　　　设一个父标签设定宽高，里面随便浮，　超出部分：overflow：hidden scorll 　　　　　　　　　overflow-x：　　　　　　　　　overflow-y：盒子模型：从里到外：内容->内边距->边框->外边框　对应样式：内容->padding->border->margin 盒子模型的样式分上下左右：top right bottom left border-left-width：1px； border-left-style:solid border-left-color:red border-left:1px solid red; border : 1px solie red padding-left:10px 4，盒子自适应：box-sizing：border-box 　　　　　　　　margin 第一个子标签设置margin会作用到父标签　　　　　　　　　　　　　　　　　　　　　　定位绝对定位　　相对定位 postion:　　fixed absolute relative top left right bottom fixed :相对定位窗口通过上下左右调节 absolute

jQuery进阶第三天（2019 10.12）

阅读更多关于 jQuery进阶第三天（2019 10.12）

一、原生JS 快捷的尺寸(属性) clientWidth/clientHeight 　　　　　　=====> 获得元素 content+padding 的宽/高； offsetWidth/offsetHeight　　　　　　=====>获得元素 content+padding+border 的宽/高； clientLeft/clientTop =====>左/上边框的距离； offsetLeft/offsetTop =====>获得距离父元素定位左/上的距离 IE浏览器计算边框 // 高级浏览器不计算边框； offsetParent =====>获得定位的父元素的信息（父元素不一定是parentNode,若没有定位，则往祖 1 <!DOCTYPE html> 　　 1-2的案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ padding: 0; margin: 0; } div{

CSS - 控制最后边框的隐藏或设置为none

阅读更多关于 CSS - 控制最后边框的隐藏或设置为none

div{ width: 20%; border-left: 1px solid $border-color; &:nth-child(5n+1){ border: 0; } } 以上为一行5个的div边框的控制，使最每行的第一个的左边框消失。以此类推。。 div{ width: 20%; border-right: 1px solid $border-color; &:nth-child(5n){ border: 0; } } 以上为一行5个的div边框的控制，使最每行的第 5 个的右边框消失。以此类推。。来源： https://www.cnblogs.com/500m/p/11664369.html

Vue-cli 鼠标监听事件

阅读更多关于 Vue-cli 鼠标监听事件

<template> <div class="scroll"> <div class="scroll-div-outer" id='scrollDiv'> <div class="scroll-div-inner"> </div> </div> </div> </template> <script> export default { name: 'scroll', methods:{ checkDivScroolTop(){ //获取节点 var scrollDiv = document.getElementById('scrollDiv'); //绑定事件 scrollDiv.addEventListener('scroll', function() { console.log(scrollDiv.scrollTop); }); } }, mounted(){ this.checkDivScroolTop(); } } </script>  <style scoped> .scroll-div-outer{ position:fixed; height: 100%; width: 100%; border: 1px solid #ccc;

CSS 边框图像

阅读更多关于 CSS 边框图像

border-image border-image 可以将图像应用到盒子的边框上。 border-image 属性需要3个值同时存在： URL 图片的地址切割图片的位，4个边需要写4个值如何处理边，它又3个种方式 stretch 伸展图片 repeat 重复图片 round 重复图片，同时会处理好边框效果示例： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >盒子边框图像</ title > < style > div{ width:200px; height:50px; border: 2px outset green; margin:20px; } div.one{ -moz-border-image: url("dots.gif") 11 11 11 11 stretch; -webkit-border-image: url("dots.gif") 11 11 11 11 stretch; border-image: url("dots.gif") 11 11 11 11 stretch;

用css绘制三角形

阅读更多关于用css绘制三角形

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; #triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; #triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; } #triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; #triangle-topleft { width

纯CSS绘制三角形

阅读更多关于纯CSS绘制三角形

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。今天给大家带来 CSS 三角形绘制方法复制代码代码如下: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 复制代码代码如下: #triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } 复制代码代码如下: #triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; } 复制代码代码如下:

订阅日剧