border | 易学教程

实现图片放大并且点击打开后可以单独查看。

阅读更多关于实现图片放大并且点击打开后可以单独查看。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery.min.js"></script> <style> *{ margin:0; padding:0; } li{ list-style:none; } .wrap{ width:1200px; height:244px; margin:0 auto; position:relative; /*可以先对div进行设置边框便于查看等确定了再去掉*/ } .tt{ width:200px; height:200px; float:left; margin:20px; } img{ width:200px; height:210px; } .tt:hover img{ margin-left:10px; transform:scale(1.2); transition:all 0.3 ease; } .bg,.diag{ display:none; } .bg{ width:100%; height:100%; top:0; left:0; background:#000000; opacity:0.6; z-index:10; position:absolute; } .diag{ width:500px

盒模型、文档流

阅读更多关于盒模型、文档流

盒模型一、盒子中的区域一个盒子中主要的属性就5个：width、height、padding、border、margin。 width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。 height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度 padding是“内边距”的意思 border是“边框” margin是“外边距” 二、认识padding 背景色会填充到padding中去，padding区域有背景颜色，background-color将填充所有boder以内的区域。 Padding有两种写法，一种小属性写法，另一种是综合性写法，综合写法时要用空格隔开。顺序是上右下左在写padding时，要用小属性层叠大属性例如：padding: 20px; padding-left: 30px; 三、border border就是边框。边框有三要素：粗细、线型、颜色。颜色如果不写，默认是黑色。粗细和线型不写显示不出来边框。（颜色、线型缺一不可） Border属性能够被拆开，有两大拆开方式： 1）按3要素拆开 border-width :10px; → 边框宽度 border-style :solid; → 线型 border-color :red; → 颜色。等价于：border:10px solid red; 2）按方向拆：

WPF 自定义CheckBox样式

阅读更多关于 WPF 自定义CheckBox样式

一、Checkbox基本样式下面的样式包含了CheckBox三种状态的显示，这里CheckBox的三种状态是使用图片代替的。当然你也可以使用字体图标或者Path绘制。先看效果：代码如下： <Style x:Key="chkBase" TargetType="CheckBox"> <Setter Property="IsChecked" Value="False"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Foreground" Value="#999"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="CheckBox"> <DockPanel Background="{TemplateBinding Background}" ToolTip="{TemplateBinding Content}" LastChildFill="False" Width="{TemplateBinding Width}"> <Image Margin="2 0 0 0" DockPanel.Dock="Left" x:Name="_img" Stretch="None" Source="

使用Vue实现一个树组件

阅读更多关于使用Vue实现一个树组件

HTML代码： <!DOCTYPE html> <html> <head> <title>Vue Demo</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> /* span样式 */ .treeviewitem-span { font-size: 14px; } /* 箭头样式 */ .treeviewitem-arrow-icon { margin-top: 3px; margin-left: 3px; margin-right: 3px; float: left; width: 0; height: 0; border-top-width: 6px; border-right-width: 0px; border-bottom-width: 6px; border-left-width: 6px; border-style: solid; border-color: transparent transparent transparent #666666; transform

订单页面布局

阅读更多关于订单页面布局

html <view class="consignee"> <view class="consignee-title"> 收件信息 </view> <view class="consignee-address"> <image class="right-arrow" src="/images/order/sub/you.png" /> <image class="bottom-stripe" src="/images/order/sub/xiushi.png" /> <view class="line-one"> <view class="name"> 动感超人 </view> <view class="tel"> 185****9875 </view> </view> <view class="line-two"> 北京朝阳区四环到五环之间878东区12层 </view> </view> </view> <!-- <view class="consignee"> <view class="consignee-title"> 收件信息 </view> <view class="consignee-address"> <image class="right-arrow" src="/images/order/sub/you.png" /> <image class="bottom

【实战】恶搞图片生成器

阅读更多关于【实战】恶搞图片生成器

我们要做什么随着“微信朋友圈”的日益火爆，朋友圈晒图已成为越来越多的人放松娱乐的休闲方式。本实例我们就来开发一个“恶搞图片生成器”，生成一张有意思的图片，发布到“朋友圈”，让你成为“霸屏小达人”。在本实例中，我们使用HTML5响应式设计（兼容手机），利用PHP的强大的图形图像处理技术——GD库，开发一个“恶搞图片生成器”。首页运行效果如图1.1所示。图1.1 首页运行效果部分恶搞图片生成器效果如图1.2、1.3、1.4和1.5所示。可以这样来思考通过对运行效果图的分析，不难发现，我们主要是应用GD库在图片上添加文字的功能。首先，准备一张缺少关键字的图片。然后，设置一个表单，添加表单内容（即图片中缺失的关键字）。最后，提交表单，将关键字写在图片的对应位置上。实现流程如图1.5所示。放手去做吧！ 1.3.1 首页设计我们先来创建一个项目，命名为“FunPic”。接下来，开始创建首页index.php文件。为实现响应式效果，我们使用Frozen UI ( https://frozenui.github.io )框架设计首页样式。将“光盘/01/FunPic/Public/”目录复制到根目录下，此时目录结构如图1.6所示。图1.6 新增Public文件后的目录结构编写index.php文件，具体代码如下： <代码位置：FunPic\index.php> 01 <

Border over borders CSS List <ul>

阅读更多关于 Border over borders CSS List

问题 I am facing a problem with edges in a css list ( <ul> , <li> ). The problem that when I set the left edge with a color and a different thickness, the lower edge of overlapping ends as shown in the screenshot below: In the picture there to see the right, so here I leave the fiddle to anyone who can give me help in this situation. http://jsfiddle.net/Igaojsfiddle/T6KrE/31/ #contactList > li { font-weight: bold; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); background-image:

Java web前端（CSS）

阅读更多关于 Java web前端（CSS）

CSS的简述 1.什么是CSS Cascading Style Sheet 层叠级联样式表 CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的,应用优先级高的，不冲突的样式规则共同作用。 2.CSS的优势内容和表现分离网页结构表现统一，可以实现复用外样式十分的丰富建议使用独立于html的css文件利用SEO，容易被搜索引擎收录！ 3.CSS的发展史 CSS1.0 CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO CSS2.1 浮动，定位 CSS3.0 圆角，阴影，动画…. 浏览器兼容性~ CSS的使用方式 1.内联样式：把CSS样式嵌入到html标签当中，类似属性的用法 <h1 style= "color:red;" >我是标题</h1> 好处:可以单独什么某个元素样式，缺点：不利于样式重用 2.内部样式：在head标签中使用style标签引入css <style> h1 { color : green ; } <

WebSocket

阅读更多关于 WebSocket

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebSocket测试</title> <style> * { box-sizing: border-box; } h1 { font-size: 26px; } #app { padding: 0 15px; } .text-1 { display: inline-block; width: 400px; height: 34px; line-height: 34px; padding: 0 12px; font-size: 14px; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o

Make an arrow shape with responsive width and only CSS

阅读更多关于 Make an arrow shape with responsive width and only CSS

问题 I'm trying to make a container that has an upward arrow attached to it. I am familiar with the border drawing trick and think that's a likely solution, but it only works for known sizes I think, since you have to specify border in em or px. The shape I would like to make is this: . / \ / \ / \ | flex | | | Where the content area can flex to different sizes as a percentage of a parent container. Here is the CSS, with the problem area flagged: .metric { display: inline-block; position: relative

订阅 border