border | 易学教程

小程序页面排版样式例子

阅读更多关于小程序页面排版样式例子

在网上下载一个小程序源码，排版样式挺好看的，参照着写了几个例子。 1、例子1效果图代码实现（1）全局样式app.wxss @import 'style/weui.wxss'; page{ background-color: #F8F8F8; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; } .text-center{text-align: center;} /* 字体大小规范 */ .font-lv1{font-size: 36rpx !important;} .font-lv2{font-size: 32rpx !important;} .font-lv3{font-size: 28rpx !important;} .font-lv4{font-size: 24rpx !important;} .font-lv5{font-size: 20rpx !important;} .strong{font-weight: bold;} /* margin */ .mgt-15rpx{margin-top: 15rpx;} .mgb-15rpx{margin-bottom: 15rpx;} .mgl-15rpx{margin-left: 15rpx;} .mgr-15rpx{margin

HTML 表格

阅读更多关于 HTML 表格

HTML 表格表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 HTML 表格表头表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本： HTML 表格标题、表格的表头使用 <caption>标签进行定义。大多数浏览器会把表头显示为居中的文本： <table border="1"> <caption>Monthly savings</caption> <tr> 　　　　<th>Header 1</th> 　　　　<th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 跨行或跨列的表格单元格 <body> <h4>单元格跨两格:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="3">Telephone</th> 表头下面有三列 </tr

C# WPF聊天界面（3/3）

阅读更多关于 C# WPF聊天界面（3/3）

微信公众号： Dotnet9 ，网站： Dotnet9 ，问题或建议：请网站留言，如果对您有所帮助：欢迎赞赏。 C# WPF聊天界面（3/3）阅读导航本文背景代码实现本文参考 1.本文背景系列文章最后一篇，一个完整的聊天界面。当然只看效果，具体的项目需要将左侧好友列表、中间会话列表、右侧联系人简况做成MVVM绑定的形式，做成模板才是一个完整的项目，本系列只是对界面的一个设计参考。前面两篇文章： C# WPF联系人列表（1/3） C# WPF简况（2/3）三篇文章最终效果如下： 2.代码实现使用 .Net CORE 3.1 创建名为 “Chat” 的WPF项目，添加 MaterialDesignThemes(3.0.1)、MaterialDesignColors(1.2.2)两个Nuget库，文中图片已全部替换为站长网站logo图片外链，直接Copy文中代码即可运行，大家亦可下载原作者源码研究学习，文末会给出源码下载链接。 2.1 引入MD控件样式文件使用MD控件的常规操作，需要在App.xaml中引入4个样式文件： <Application x:Class="Chat.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas

[css]我要用css画幅画(四)

阅读更多关于 [css]我要用css画幅画(四)

接着之前的 [css]我要用css画幅画(三) ，今天，我画了两朵云，并给小明介绍了个朋友：静静。 github： https://github.com/bee0060/Css-Paint ，完整代码在pages/sun-house-4.html和相关的css中可以找到 demo： http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-4.html 完整html如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css Paint</title> 6 <link rel="stylesheet" type="text/css" href="../css/sun.css" /> 7 <link rel="stylesheet" type="text/css" href="../css/house.css" /> 8 <link rel="stylesheet" type="text/css" href="../css/human.css" /> 9 <link rel="stylesheet" type="text/css" href="../css/cloud.css" /> 10 </head>

纯CSS实现各类气球泡泡对话框效果

阅读更多关于纯CSS实现各类气球泡泡对话框效果

抄自 http://www.zhangxinxu.com/wordpress/?p=651 边框法我们首先来看下面一段样式代码： .test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;} 当某个div应用了上面这个样式后，结果会如何？见下图（截自Firefox3.5，IE浏览器有细节上的差异）：仔细观察边框色的交界处，四个角落有4个45°的斜边，将整个边框分成了四个等腰梯形。现在，设想一下，如果我们现在只保留一个一个上边框，其余边框均transparent透明（或与背景色同色），那么是不是就只显示一个上面红色的边框了，我们测试下，与上面类似的代码，只是修改下其余三个边框的颜色。 .test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;} 结果如下图（截自Firefox3.5）：可见显示结果正如我们预想的。现在，再次开动脑筋，试想下，如果上面样式中的宽度和高度都是0，也就是 width:10px; height:10px; 变成了 width:0; height:0; 。对了，那么显示的将不会是个等腰梯形了

纯CSS气泡框实现方法探究

阅读更多关于纯CSS气泡框实现方法探究

气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。首先我们来看一下border这个属性，当我们把一个div的border-color设为不同值的时候，可以看到四边都成了一个梯形。 1 # test{ width : 50px ; height : 50px ; border-width : 50px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;} 如果我们继续把这个div的width和height都设为0，可以看到四边都成了一个三角形。 1 # test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;} 在主流浏览器中检测一下

css实现有边框的三角形

阅读更多关于 css实现有边框的三角形

1、html  <div class="border-up"> <span></span> </div>  <div class="border-down"> <span></span> </div>  <div class="border-left"> <span></span> </div>  <div class="border-right"> <span></span> </div> 2、css .border-up { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #333; position: relative; margin: 50px auto; } .border-up span { display: block; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 28px solid

css实现有边框有出口的三角形

阅读更多关于 css实现有边框有出口的三角形

1、html   <div class="border-up-empty"> <span></span> </div>  <div class="border-down-empty"> <span></span> </div>  <div class="border-left-empty"> <span></span> </div>  <div class="border-right-empty"> <span></span> </div> 2、css .border-up-empty { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #333; position: relative; margin: 50px auto; } .border-up-empty span { display: block; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px

用css3实现各种图标效果

阅读更多关于用css3实现各种图标效果

原文: 用css3实现各种图标效果公共样式应该说现在绝大多数公司的项目前端都是一团乱，不仅仅是js写的没有任何框架而言，css同样也是如此，导致项目如果要升级或者说有新的变更维护起来就特别困难。最近领导决定花大时间整理一下css样式，用他的一句话来说就是为后来者造福。首先我们在整理样式之前，必须得有一个自己团队的规范。思考真的很重要，所谓的磨刀不误砍柴工，事实上也就是说你在做任何事情之前都要把大致的流程，大致的思路想清楚之后再动手，否则就可能做到一半发现这样不对，然后前面的工夫全白费了，这样启不是。。。前面说了一堆费话，下面就简单点来介绍一下我整理的图标（全部用css来实现的）。 css没有继承、多态等，所以为了write less ,do more就不得不想尽各种方法（我们自己规定凡是公共的、组件级别的样式全部以u-开头）。我这里因为写所有标签的样式名都是以u-icon开头，所以写了如下样式，这样的话所有的以u-icon开头的全部都应用了如下三个样式，你想如果你有100个u-icon的样式那就省去了你300行代码呀！ [class^="u-icon"] { display: inline-block; color: #fff; vertical-align: middle; } 手机上的切换标签 css样式代码： /*手机上的切换标签*/ .u-icon

用css3实现各种图标效果（2）

阅读更多关于用css3实现各种图标效果（2）

原文: 用css3实现各种图标效果（2）写在前面写的一模一样的css样式，结果却导致原来出来不一样的效果图。用chrome的开发者工具查看，比较起来还是一模一样的css样式，可为什么会出现不一样的placeholder效果呢？一个白色粗体，一个灰色正常字体。找了老半天找不到原因后来才发现是我同事写的框架css里面代码的一句话影响到了 ::-webkit-input-placeholder { color: #a4afc6; } 可是为什么在chrome控制台看不到这句代码呢？请教了一番同事，原来是这样的。 1、点击控制台“设置”按钮 2、按如下所示设置，选中“Show user agent shadow DOM” 3、你就会在elements控制面板里面能看到如下所示回归正题，继续我的css各种图标。。。。当然在开始之前，还是加上如下这段公共样式吧！ [class^="u-icon"] { display: inline-block; color: #fff; vertical-align: middle; } 各种删除按钮（不用图标只能css来实现） html代码如下： <span class="u-icon-radioDelete"></span> <span class="u-icon-deleteToggle Orange"> <span class="u

订阅 border