css： <div style="width:200px;height:200px;border:10px solid #0000ff;border-radius:110px;-moz-border-radius:110px;margin:auto"></div> 原文：http://www.cnblogs.com/srsheng/p/4719872.html
float:设置浮动 浮动会使元素脱离普通文档流，使元素向左或向右移动，其周围的元素也会重新排布，在布局中非常有用。 html：<p>以下是图片的浮动设置：p> <img src="image/follow-1.png"> <p>图片后文字：注意<p>是块级元素，元素前后有换行符。p> 不设置浮动时浏览器显示如下： 设置左浮动float:left;后浏览器显示如下： 设置右浮动float:right;后浏览器显示如下：clear:清除浮动 当有的元素不需要浮动时，但该...
JQ + CSS实现浪漫表白必备页面 效果图： 图片素材 ： 代码如下，复制即可使用：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>浪漫表白 By：阿杜</title><style type = "text/css">*{margin:0px;padding:0px;}html,body{height:100%;} body{font-family:"微软雅黑"; <!-- 此处需要自己修改图片路径 -->background:url(images/b1j.jpg) no-repeat...
网页设计布局中一直比较流行网格对齐，但只是针对水平的对齐，很少或者没有涉及垂直对齐，这篇文章很详细的讲解了垂直网格，乃至基线对其的相关，而css3中的多列布局的也使其显得更为重要，因此还是很有必要去了解学习，至少也是一种思路。 这或许是因为缺少基线网格的理解和欣赏，更或者是因为基线网格是出了名的难以实现， 迄今为止还没有人拿着蓝图让它成功实现。 有些人甚至认为基线在网络上是多余的，基线作为一种排版术语和网...
本文属于 CSS 绘图技巧其中一篇，系列文章：在 CSS 中使用三角函数绘制曲线图形及展示动画CSS奇思妙想 -- 使用 CSS 创造艺术将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。通过本文，你将会了解到 CSS background 中更为强大的一些用法，并且学会利用 background 相关的一些属性，采用不同的方式，去创造更复杂的背景图案。在这个过程中，你会更好的掌握不同的渐变技巧...
之前，我们想要实现一个完美的宽度自适应的输入框好麻烦，曾经也被作为对前端技术的一个挑战。类似的常见场景还有100%宽+边框的容器等。遇到这些情况，我们不得不分外小心，因为各个浏览器的表现可能不一致。现在，firefox和webkit相继支持calc()功能了，我们也可以学习下了。calc()是干嘛的？calc()是单词calculate(计算)的缩写，是css3的一个新的长度单位功能，可以使用简单的数学运算。嗯，CSS3越来越高级了。运算规则calc()使用...
由于块级元素的高度是可以设置的，所以对于块级元素的垂直居中比较简单。方法一：在不定高的情况下，把元素的上下内边距设为同一个值即可实现，即padding ：10px 0;以上方法针对块级元素和行内元素都可以。方法二：line-height:（只针对行内元素可行)将行高设置成和父元素的高度相等，就可以实现行内元素的垂直居中了。由于行内元素的对其方式是基线对齐，所以当图片和文字位于一列时，呈现出来的效果往往不是我们想要看到的样子...
overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical; text-overflow: -o-ellipsis-lastline;jquery写法：$(".figcaption").each(function(i){var divH = $(this).height();var $p = $("p", $(this)).eq(0);while ($p.outerHeight() > divH) {$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));}; });原文：http://www.cnblogs.com/joy...
[CSS all 属性实例修改所有元素或其父元素的属性为初始值： div{??? background-color: yellow;??? color: red;??? all: initial;}定义和使用all 属性用于重置所有属性，除了 unicode-bidi 和 direction。默认值:none继承:无动画:no。 阅读 animatable 版本:CSS3JavaScript 语法:object.style.all="initial"浏览器支持The numbers in the table specify the first browser version that fully supports the property. 表格中的数字...
1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素<style type="text/css"> .list div:nth-child(2){background-color:red;} </style> ...... <div ><h2>1</h2><div>2</div><div>3</div><div>4</div><div>5</div> </div><!-- 第2个子元素div匹配 --> 2、E:first-child：匹配元素类型为E且是父元素的第一个子元素3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素4、E > F E元素下面第一层子集5、E...
前言当用vue-cli 脚手架 打包压缩时，发现打包出来的css 没有被压缩，所以查阅了些资料，下面用这个方法解决： 1.首先注释掉webpack.prod.conf.js中下面的代码new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),2.然后在utils.js中添加， minimize:true const cssLoader = {loader: ‘css-loader‘,options: {sourceMap: options.sourc...
要求：一个小时仿照博客园的格局，写一个静态的网页，主要采用HTML+CSS+DIV的布局方式，新建两个文件:website.html、website.csswebsite.html代码如下：<!doctype html><html lang="zh-CN"><head><meta charset="ansi"><media name="description" content="this is a website"><media name="keywords" content="website,html,css"><title>这是一个网页website</title><link rel="stylesheet" style="text/css" href="website.css">...
1.基本样式： ————宽 属性：width 属性值：长度值 ————高 属性：height 属性值：长度值 ————块级元素与行内元素之间的转换 属性： display 属性值：block 转换为块级元素 inline 转换为行内元素 inline-block 转换成行内块元素 linline-block可以设置宽高，但是不会换行 2.背景属性： CSS可以用纯色调作为背景，也可以用图片作为背景 ————背...
jq：1、prepend(参数);//将参数内容前置再某元素内部;eg:<div id="div1">奇妙能力歌</div>$("#div1").prepend("<a href=‘#‘>陈粒</a>");//得出结果：<div id="div1"><a href=‘#‘>陈粒</a>奇妙能力歌</div>2、outerHeight(boolean)outerHeight(false);//不计算元素的margin值 计算padding和borderouterHeight(true);//计算元素的margin值3、delay(time);延迟;eg:$("#div1").delay(300).show();//该元素延迟300ms再执行显示;4、设...
?记在前面 人生最大的希望在于：自己值得自己等待 先打开运行项目： 一、less和reset.css的使用1.less的引用： 安装less和less-loader（之前补充过了）传送地址：https://www.cnblogs.com/crystral/p/9117161.html 2.reset.css的引用①去这个网站（https://cssreset.com/）下载一个reset.css文件，然后copy到src目录下：（这个我没有下载下来，点击没反应，所以去老师那里copy了一份，代码我放下面） reset.css/** * E...