border | 易学教程

前端学习(8)~css学习(二)：背景属性

阅读更多关于前端学习(8)~css学习(二)：背景属性

background 的常见背景属性 css2.1 中，常见的背景属性有以下几种：（经常用到，要记住） background-color:#ff99ff; 设置元素的背景颜色。 background-image:url(images/2.gif); 将图像设置为背景。 background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要） no-repeat 不要平铺； repeat-x 横向平铺； repeat-y 纵向平铺。 background-position:center top; 设置背景图片在当前容器中的位置。 background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。属性值可以是： scroll （与fixed属性相反，默认属性）、 fixed （背景就会被固定住，不会被滚动条滚走）。另外还有一个综合属性叫做 background ，它的作用是：将上面的多个属性写在一个声明中。 CSS3 中，新增了一些background属性： background-origin background-clip 背景裁切 background-size 调整尺寸多重背景上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。 background-color：背景颜色的表示方法 css2.1

复大官网总结

阅读更多关于复大官网总结

一、使用到的技术 html5 css3 javascript jquery bootstrap 第三方jquery插件 @media实现响应式布局二、根据设计稿设计内容的宽度　　PC端设计稿宽度是1920px的，这是在设计的时候根据电脑的浏览器分辨率来定的。　　　　　　页面主体宽度（内容宽度）设置为1200px，1200px是一个比较适合PC端显示器浏览的安全内容宽度，保证在宽度大于1200px分辨率的设备下浏览页面不会出现横向滚动条，页面有banner地方的宽度就设置为100%，设置百分比的好处是可以根据屏幕分辨率的大小自动缩放。　　移动端设计稿宽度为750px,750px是iphone6的物理像素，也叫屏幕分辨率。移动端设计稿是按照设备的物理像素所给。物理像素：　　　　顾名思义，就是设备屏幕上的实际像素，也就是说这个手机被出厂造出来的时候，这个屏幕上有多少个像素点，它的物理像素就是多少；设备独立像素：　　　　也叫做逻辑像素（对于前端来说，和css像素是一样的），这个不同的设备是不一样的，在viewport为ideal-viewport模式时，如iphone6此时的viewport为375px，代表着我们在css中写375px就可以达到全屏的效果；三、布局编写 3.1、页面整体结构 1 <!DOCTYPE html> 2 <html> 3 <head> 4

巧妙实现带圆角的渐变边框

阅读更多关于巧妙实现带圆角的渐变边框

如何实现下面这个渐变的边框效果：这个问题本身不难，实现的方法也有一些，主要是有一些细节需要注意。 border-image border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。顾名思义，我们可以给 border 元素添加 image，类似于 background-image ，可以是图片也可以是渐变，不再局限于纯色。使用 border-image 实现渐变边框有了 border-image 之后，实现渐变边框变得很方便不过多介绍 border-image 的语法，读者需要自行了解一下。实现如下： <div class="border-image"></div> .border-image { width: 200px; height: 100px; border-radius: 10px; border-image-source: linear-gradient(45deg, gold, deeppink); border-image-slice: 1; border-image-repeat: stretch; } 上面关于 border-image 的三个属性可以简写为 border-image:

JavaFX第三弹

阅读更多关于 JavaFX第三弹

JavaFX学习笔记本文素材大多数来源于: https://code.makery.ch/zh-cn/library/javafx-tutorial 为界面添加CSS 例如，有这样的一个DarkTheme.css .background { -fx-background-color: #1d1d1d; } .label { -fx-font-size: 11pt; -fx-font-family: "Segoe UI Semibold"; -fx-text-fill: white; -fx-opacity: 0.6; } .label-bright { -fx-font-size: 11pt; -fx-font-family: "Segoe UI Semibold"; -fx-text-fill: white; -fx-opacity: 1; } .label-header { -fx-font-size: 32pt; -fx-font-family: "Segoe UI Light"; -fx-text-fill: white; -fx-opacity: 1; } .table-view { -fx-base: #1d1d1d; -fx-control-inner-background: #1d1d1d; -fx-background-color: #1d1d1d; -fx

下拉筛选组件

阅读更多关于下拉筛选组件

这样一个需求，小程序做一个下拉筛选，小程序可以从底部弹出，从上面弹出只能自己写，为了方便，故写成了一个组件。做出来就是这个样子，如图：附上代码，仅供参考，不喜勿喷哦。 <view class="detail"> <view class="screening-wrap"> <view class="screening"> <view class="screening-button {{showScreening=='block' ? 'on' : ''}}" bindtap="screenClick">筛选 <i></i> </view> </view> <swiper class="swiper-item" style='display:{{showScreening}}'> <swiper-item> <view class="time-screening"> <view class="time"> <view class="start"> <picker mode="date" value="{{startTime}}" bindchange="startTimeClick"> <view class="picker"> {{startTime||'开始时间'}} </view> </picker> </view> <p>-</p> <view class="end">

复习CSS3的知识点

阅读更多关于复习CSS3的知识点

目录第一篇、用户交互伪类选择器的用法第二篇、元素状态选择器第三篇、结构伪类选择器的用法第四篇、CSS伪元素的用法第五篇、border-radius画圆第六篇、画三角形和对话框第七篇、画菱形和平行四边形第八篇、画五角星和六角形第九篇、CSS画五边形和六边形第十篇、挑战心形和蛋形第十一篇、太极图的画法第十二篇、透明背景的实现第十三篇、CSS的颜色模式第十四篇、CSS3线性渐变第十五篇、CSS3的径向渐变第十六篇、CSS3的重复性渐变第十七篇、CSS3盒子阴影效果第十八篇、CSS3制作缓慢边长的方形第十九篇、CSS3的transition-timing-function详解第二十篇、制作天猫首页的类别展示效果第二十一篇、仿天猫类别过渡效果第二十二篇、CSS3动画中的@keyframes关键帧第二十三篇、CSS3动画animation复合属性第二十四篇、利用CSS3制作Loading加载动画第二十五篇、Loading动画效果实例2 第二十六篇、CSS3制作发光字、立体字、苹果字体第二十七篇、CSS3用text-overflow解决文字排版问题第二十八篇、CSS3新的字体单位rem 第一篇、用户交互伪类选择器的用法 :hover 鼠标移入 :link 没有交互 :visited 访问过 :active 鼠标按下不放 <a href="

CSS Reset

阅读更多关于 CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5

CSS格式模板

阅读更多关于 CSS格式模板

//GeneralCSS.css View Code /* ########## IE compatible Setting(Copy the following things to the <head> Section) ##########  <link href="GeneralCss.css" rel="stylesheet" type="text/css"/> <!- [if IE]><link href="CssHack/IECssHack.css" rel="stylesheet" type="text/css"/> <!- [if !IE]><link href="CssHack/OthersCssHack.css" rel="stylesheet" type="text/css"/> */ /* ########## Initialize CSS(初始化CSS的设置) ########## http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6

网站怎么布局能解决不同浏览器对CSS解析的差异,使用css reset

阅读更多关于网站怎么布局能解决不同浏览器对CSS解析的差异,使用css reset

很多地方都提到过CSS Reset这个概念，而且细心的朋友会发现，许多大网站的CSS文件中也含有CSS Reset内容。 CSS Reset是什么？在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。为什么要重置它？因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。 CSS Reset的内容是什么？最简单的CSS Reset内容寥寥几行就能完成： * { padding: 0; margin: 0; border: 0; } 这个方法让所有的选择器的padding

normalize.css 中文版

阅读更多关于 normalize.css 中文版

## normalize.css 中文版 normalize.css 原地址： http://necolas.github.io/normalize.css/ reset 太暴力了，这个 normalize 相对要温柔很多。译文与原文中空了一行。 /*! normalize.css v2.1.2 | MIT License | git.io/normalize */ /* /*! 我就是自己看看，然后翻译下下，让大家看看 */ /* ========================================================================== HTML5 display definitions HTML5 新增元素定义 ========================================================================== */ /** * Correct `block` display not defined in IE 8/9. * * 修正IE 8/9 中未定义的块级元素。 */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display:

订阅 border