实现这样的卡片 上节课我们创建了 _TravelItem。一个TravelItem就代表了一个卡片。 卡片可以点击跳转到详情页面 所以最外层我们放一个手势的检测器 满足这种情况，我们才让他跳转到详情页 实现卡片的布局 带有圆角底部阴影的卡片 裁切效果 封装一个ItemImage生成上面的图片 底部是 ...
分类：
其他好文 时间：
2020-02-15 13:47:12
阅读次数：
90
文字需要设置成单行显示，这样才不会换行 设置文字显示的形式，和样式 运行测试看效果 实现图片下的描述信息 底部放一个方法 _infoText用来封装最下面的左右布局 希望最左边和最右边，中间是空白的 左边头像圆角，用PhysicalModel。裁切的行为clipBehavior 图片的直径要是裁切的 ...
分类：
其他好文 时间：
2020-02-15 13:34:13
阅读次数：
57
属性选择器 css3语法（类似于正则） 属性选择器：属性是相对于标签而言。 所谓属性选择器就是根据指定名称的属性的值来查找元素 /*1.E[attr]:查找指定的拥有attr属性的E标签。如查找拥有style属性的li标签*/ li[style]{ text-decoration: underlin ...
分类：
Web程序 时间：
2020-02-13 15:06:30
阅读次数：
151
伪元素：::before ::after *必须添加content属性，否则后期不可见 content: ""; *默认是行级元素，如果想设置宽高，就必须转换为块级元素 position: absolute; *行内元素，需要转换成块:display:block float:** position: ...
分类：
Web程序 时间：
2020-02-13 14:45:56
阅读次数：
204
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>w3c</title> 6 <link rel="stylesheet" type="text/css" href="css/reset.css"> 7 <li ...
分类：
其他好文 时间：
2020-02-12 18:06:47
阅读次数：
92
使用弹性盒子兼容低端适配有时需要： display:flex 和 display:-webkit-box display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit ...
分类：
Web程序 时间：
2020-02-12 12:55:03
阅读次数：
91
position（transform css3 有些浏览器不兼容） <article id="one"> <section id="section"></section> </article> <style> #one { position: relative; //此处不设置的话 会一直往上找 找 ...
分类：
Web程序 时间：
2020-02-11 19:13:29
阅读次数：
87
NanUI是一个开放源代码的.NET项目，它适用于希望使用HTML5 / CSS3等前端技术来构建Windows窗体应用用户界面的.NET / .NET Core开发人员。这是NanUI 0.7版本的发布公告。 ...
分类：
其他好文 时间：
2020-02-10 17:41:05
阅读次数：
205
咖啡店案例效果图 （一）页面的布局 1. 最上方的header：右下角是四个小图标，像图层一样附加在当前的header部分上。 2. 超链接构成的导航栏，鼠标悬浮的时候字体颜色发生变化。 3. 主体分为左右两栏：边栏 和右侧的主要内容。边栏有一个table ,table下方是图片（圆角阴影），还有倾 ...
分类：
Web程序 时间：
2020-02-10 13:55:15
阅读次数：
128
chapter5 CSS3 新性能 （一）圆角边框与阴影 1.border-radius属性 例1 border-top-left-radius:40px 20px ; 两个值分别表示水平方向、垂直方向，内部一个椭圆。 如果只有一个值，就是一个圆。 例2 注意这里的height为50px. bord ...
分类：
Web程序 时间：
2020-02-09 20:04:29
阅读次数：
74
