.border-x { position: relative; .line { position: absolute; position: absolute; left: 0; top: 0; width: 200%; //注意这个宽度，不要为200%，不然会出现有的边框边缘显示不全问题 height: 200%; border: 1px solid #EEEEEE; border-radius: 8px;
外边距的妙用：居中元素 margin: 0 auto div盒子居中 margin:0 auto; margin:0 margin:0 1px margin:0 1px 2px 3px 顺时针 上 右 下 左 完整代码 #box{ width:300px; border:1px solid black; margin:0 auto; } h2{ font-siz
引言： Django如何调用HTML前端页面呢？ Django怎样去调用漂亮的HTML前端页面呢? 就直接使用render方法即可！ render方法是django封装好用来调用HTML前端模板的方法！ 1.模板放在哪？ 在主目录下创建一个templates目录用来存放所有的html的模板文件。（如果是使用pycharm创建dja
灵魂三问： 标签语义化是什么？为什么要标签语义化？标签语义化使用场景有哪些？ 下面让我们跟着这三个问题来展开一下本文的内容。 一、标签语义化是什么？ 标签语义化就是让元素标签做适当的事情。例如 p 标签就是代表文本，button 标签代表按钮，nav 标签代表导航等等。 二、
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>解决父级元素塌陷的问题</title> <link rel="stylesheet" href="../css/020.css"> </head> &l
// 变量 @width: 10px; @height: @width + 10px; #header { width: @width; height: @height; } // ------------------------------ .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } // 混合（Mixin）是一种将一组属性从一个规则集包含（
官网链接：https://material.angular.io/cdk/drag-drop/overview 使用示例： import {Component} from '@angular/core'; @Component({ selector: 'app-drag-drop-drop', template: ` <div class="dragParent" style="width: 5
目的： 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，这是厂商在出厂时就设置好的，比如苹果6/7/8是750*1334 我们开发的时候1px不是一定等于一个物理像素的 PC端页面，1个px等于一个1个物理像素，但是移动端就不尽相同 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素
<!DOCTYPE html> <html> <head> <!--网页中小窗口的代码1.0今天学到这里。每个标签都设置了自己的hight和line-height--> <meta charset="utf-8"> <title>document</title> <style type="text/css"> body{
内联元素的水平居中设置 内联元素的水平居中设置，是通过给其父元素设置 text-align: center 来实现的。示例如下： HTML代码 <body> <div><span>水平居中显示</span></div> </body> CSS代码 <style type="text/css"> div { /*为了使显示效果明显，设置了边框和宽高*/
初识 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范，<style> 可以编写css的代码，每一个声明，最好用分号结尾 语法： 选择器{ 声明1； 声明
初识 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范，<style> 可以编写css的代码，每一个声明，最好用分号结尾 语法： 选择器{ 声明1； 声明2；
px 、 rem 、 vw 1px = 0.1 rem; 1px = (1/当前窗口宽度)*100 vm; vw单位的兼容性： 绝大多数的浏览器支持vw单位，但是ie9-11不支持，vw单位在绝大部分高版本浏览器内的支持性很好，但是opera浏览器整体不支持vw单位，如果需要兼容opera浏览器的布局，不推荐使用vw。 环境：1980px 1080px
用户登录界面 新建project ctrl+shift+alt+s弹出Project Structure 在web-WEB-INF下New Folder两个文件夹classes，lib 设置输入输出path 选择1.jars or directories 2.library，Apply应用 运行tomcat 在index.jsp的同级目录下新建login.jsp 、login.css 输入网址http://loca
column-width指定每一栏的宽度（这是多列布局的第一种分法） column-count指定要多少栏（这是多列布局的第二种分法） column-gap栏目间的距离 column-rule栏目间隔线 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &
需求：为数字加上正六边形边框 分解一：正六边形，可视为三个同样的长方形，经过不同角度旋转后叠加形成 分解二：根据数学公式可以算出，一个长方形旋转60度，一个长方形旋转120度，重叠形成 分解三：根据数学公式可以算出，长方形长宽比为√3:1 <html> <head> <style>
一、css部分(mixin.scss)： $browser-default-font-size: 16px !default; @function pxTorem($px) { //$px为需要转换的字号 @if (unitless($px)) { @return pxTorem($px + 0px); } @else if (unit($px)==em) { @return $px; } @return ($px / $browser-de
提示： 本文为移动端开发学习栏目：移动端开发学习01： viewport视口的概念02——1px问题 移动端开发学习01： viewport视口的概念02——1px问题 # 视口的概念 ## 1px的问题 但是我们需要明白一件事：css不支持小数！ 所以UI设计的设计图如果设计了1px的边框，在手机上缩小呈现时，由于
* { outline: 1px solid #0000ff; } 通过全局设置outline样式查看所有样式边框，非常方便！！！ outline属性详细介绍
今天介绍一个通过svg来实现移动端1px效果的小技巧 svg的描边方式 通常我们在使用一些设计软件时，描边会有三种选择，分别是内描边、居中描边和外描边，比如 photoshop 那么，svg 中的描边是哪种方式呢？ 答案是居中描边，并且无法更改，如下 <svg height="100px" viewBox="0 0 100 100">
布局管理 1.1盒子布局 首先了解盒子的结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{widt
<!DOCTYPE html> <html> <head> <title>多个div高度保持一致</title> <style type="text/css"> #parent { color: #fff; width: 1140px; margin: 0px auto; border:
网页标准化:CSS代码缩写精简实例 一些CSS属性允许使用一串值代替许多属性，值使用空格分开。 margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等，形式像这样：property:top right bottom left;逆时针顺序。 所以下面的
定位 相对定位 相对定位 ： position: relative; 相对于原来的位置，进行指定的偏移，相对定位的话，他仍然在文档流中 top ： 10px； 距离上方移动10px （向下） left bottom right ：-20px； 距离右方移动-20px （向右） html ： <!DOCTYPE html> <html lang="en"> <head> <meta
此博客仅为个人开发整理笔记。 IOS手机测试时会发现加了margin-bottom的属性无效。解决：替换为padding-bottom或者放个空盒子有高度宽度占位即可。 IOS手机的输入框出现未知的内阴影。解决：input: {-webkit-appearance: none;} 控制手机上方的标题：document.title； canvas画出来的内
