常用的css将元素垂直居中的方法 1. 使用line-height将单行文本垂直居中 设置line-height等于height，可使单行文本垂直居中 例： div { height: 50px; width: 200px; border: 1px solid #ccc; } 效果如下： 加入line-height属性后
在position:fixed/absolute内加入 -webkit-transform: translateZ(0); 假如有遮罩情况则在内容区域，加入 ： margin-bottom:30px;//margin-top:30px; 抖动情况，则在内容区域，加入 ： overflow-y: auto;
/* 如果设备像素大于等于2，则用2倍图 */ @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2) { .img { background-image: url(../images/arrow@2x.png); background-size: 30px 30px; width: 30px; height:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 186px; height:186px; background: red; border:10px solid #000;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>blog-test</title> <link rel="stylesheet" href="blog-test.css"> </head> <body>
padding padding：就是内边距的意思，它是边框到内容之间的距离 另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域 padding的设置 padding有四个方向，分别描述4个方向的padding。 描述的方法有两种
对盒模型的理解 一.什么是盒模型 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。 从盒子的内部到盒子的外围： 内容（图片、文本、视频、小盒子…） 内填充（补白）【相当于盒子里面的泡沫】 盒子本身（bo
第一种可能性是样式重置导致 去掉list-style:none; 第二种可能性是设置了*{margin:0;padding:0} 可以在需要的位置加上margin-left:10px;(根据自己需要设定) 有序列表需要一定的边距才可以设置的 ul>li{ margin-left:30px; list-style-type: disc
主要是以下三步： <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" con
<!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-Compati
语法： border-radius:length; 其中每一个值可以为 数值或百分比的形式。 技巧： 让一个正方形 变成圆圈 border-radius: 50%; 以上效果图矩形的圆角， 就不要用 百分比了，因为百分比会是表示高度和宽度的一半。 而我们这里矩形就只用 用 高度的一半就好了。精确单位。 demo <
HTML代码 <template> <div class="headernav"> <div class="nav"> <img src="../../static/image/banner4.png" alt="" class="navlogo"> <div class="rightcon"&g
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>元素层级</title></head><style type="text/css"> .con{ width: 400px; height: 400px; border:1px solid #000; mar
今天做测试，遇到一道选择题。 瞬间一脸懵逼，sprites是什么？通过对各选项的分析，大致明白了几点：1、它是css属性。2、它与图片有关。3、它是背景图片。然后就选了一个大概不靠谱的，成功的选错了。 通过查找资料得知，CSS Sprites 也叫雪碧（Sprite）图，将网页中的多个小图标，集合到一整张图中。
原文:用简单的JS代码制作计算器 代码+注释一共不到200行，是练习交流的必备良药 主界面如下： 操作示意图： 以下是代码部分HTML： <div> <table class="window"> <tr> <td class="window_prompt">输入 :</td> <td><div id="u
原文链接：https://www.mk2048.com/blog/blog.php?id=h02a0jhk0c1j&title=%E6%A8%A1%E6%8B%9Fselect%E6%8E%A7%E4%BB%B6%E5%8A%9F%E8%83%BD 直接上代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <me
想使用DIV半透明层时 只需加一个filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5 0.5为半透明系数 使用前 使用后 style="filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;position:absolute;width:297px;height:30px; margin-top:-30px;background-co
在CSS 3中，使用box-sizing属性来指定针对元素的宽度与高度的计算方法。 本文将针对这个属性做详细介绍。 1. box-sizing属性 在CSS中， 使用width属性与height属性来指定元素的宽度与高度。但使用box-sizing属性，可以指定width属性值与height属性值是否包含元素内部的补白区域，
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ displa
对textarea的输入内容进行垂直水平居中 效果图： 代码： 一：面对textarea中输入的内容只有一行的时候，我们直接通过 ·height:30px; line-height:30px; text-align: center; · 二、面对多行输入的时候，就很难达到我们的效果，下面是我的解决方案：
实现效果： HTML部分： <table> <p>请选择月份：</p><input type="month" name="" id="xmonth"> <tr> <td>日</td> <td>一</td>
新增的HTML5标签 语义化标签 ：<header> 头标签 <nav> 导航标签 <section> 表示文档的结构、栏目 <footer> 页脚 <article> 文章标签 <aside> 侧边栏导航 <mark> 凸显文字 网页的组成及标准
一、 一、作业需求： 1、完成商城列表静态页面的抒写 二、博客地址：https://www.cnblogs.com/catepython/p/9205636.html 三、运行环境 操作系统：Win10 Python：3.6.4rcl Pycharm：2017.3.4 四、功能实现 1）按照样式抒写了HTML商城列表页面 五、备注 readme 二、程序结构图 三、核心
代码+注释一共不到200行，是练习交流的必备良药 主界面如下： 操作示意图： 以下是代码部分 HTML： <div> <table class="window"> <tr> <td class="window_prompt">输入 :</td> <td><div id="userIn">&
首先从概念和属性的角度对三者有个初步认识 padding 设置或返回元素的内边距。 该属性可使用 1 到 4 种值： 如果规定一种值，比如：div {padding: 50px} - 所有四个内边距都是 50px。 如果规定两种值，比如：div {padding: 50px 10px} - 上内边距和下内边距是 50px，左内边距和右内边
