border

CSS 构造表格

我只是一个虾纸丫 提交于 2020-01-03 15:35:11
表格边框 CSS 中设置表格边框,请使用 border 属性: <style type="text/css"> table{ border:1px solid red; } th,td{ border:1px solid red; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th> </tr> <tr> <td>小白</td> <td>小白是个猥琐但不下流的人</td> </tr> <tr> <td>小黑</td> <td>小白是个下流但不猥琐的人</td> </tr> <tr> <td>小红</td> <td>小白是个好学但不下流的人</td> </tr> </table> </body> 上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。 如果需要把表格显示为单线条边框,请使用 border-collapse 属性。( 细线表格 ) <style type="text/css"> table{ border:1px solid red; border-collapse:collapse;/*该属性加在table中*/ } th,td{ border:1px solid red; } </style> </head> <body> <table> <tr> <th>姓名

css小技巧

梦想与她 提交于 2020-01-03 14:04:04
最近工作收集的一些css的小技巧: 一、黑白图像 当你需要让一张彩色的图片显示为黑白照片的时候,你可以用下面的一段代码。 img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } 二、使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 .nav li{ border-right: 1px solid #666; } 然后再除去最后一个元素 .nav li:last-child{ border-right: none; } 也可以直接使用 :not() 伪类来应用元素 .nav li:not(:last-child){ border-right: 1px solid #666 } 如果你的元素有兄弟元素的话,也可以使用通用的熊年底选择符( ~ ) .nav li:first-child ~ li{ border-left: 1px solid #666 } 三、页面顶部阴影 给网页加上漂亮的顶部阴影效果 body:before{ content: ''; position: fixed; top:

纯css实现的三级水平导航菜单

試著忘記壹切 提交于 2020-01-03 14:03:52
vscode练习使用开发纯css的三级水平导航菜单。先上图: 1、html5布局 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>水平导航菜单</title> 6 <link rel="stylesheet" href="reset.css"> 7 <link rel="stylesheet" href="style.css"> 8 </head> 9 10 <body> 11 <header class="header"> 12 <nav class="menu radius"> 13 <ul class="nav"> 14 <li><a href="#">首页</a></li> 15 <li> 16 <a href="#">菜单项</a> 17 <ul> 18 <li> 19 <a href="#">二级菜单项</a> 20 <ul> 21 <li><a href="#">三级菜单项</a></li> 22 <li><a href="#">三级菜单项</a></li> 23 <li><a href="#">三级菜单项</a></li> 24 <li><a href="#">三级菜单项</a></li> 25 <li><a href="#">三级菜单项</a></li> 26 </ul> 27 </li> 28 <li>

CSS3 弹性盒模型与流式布局

跟風遠走 提交于 2020-01-03 13:50:06
  这是一个常见的页面布局,Header→Body→Footer,中间Body包含两到三列,重要内容放置在html靠前位置,优先加载,html代码如下: <div class="wrapper"> <header>Header</header> <article> <div class="main">Main</div> <aside class="aside">Aside</aside> <aside class="sub">Sub</aside> </article> <footer>Footer</footer></div>   如果使用传统的CSS来实现,比较麻烦,得使用float,margin负值,但是采用CSS3一个新增属性——display:box后,一切问题,迎刃而解。我们先看相关文档( 飘零雾雨 CSS3手册 ):   实现的CSS代码,左右定宽,中间自适应的流式布局,html、css代码量极少。 header{ height:100px; margin-top: 10px; border: 1px solid #000;}article{ height:300px; margin-top: 10px;}footer{ height:50px; margin-top: 10px; border: 1px solid #000;}article{ display:

CSS全局样式中需要注意的细节

≯℡__Kan透↙ 提交于 2020-01-03 13:18:39
在网上看到篇文章讲全球很多高手的CSS全局样式(reset.css),再一次体会到了什么叫“细节决定成败”。原文: http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/ 。 原文是借着翻译插件看下来的,大概意思就是讲什么是Css,以及各浏览器的css规则的不同,而制定"Css Reset"也是为了兼容与统一,正确有效的使用"Css Reset"可以在某种程度上节约时间与金钱。我的理解是:CSS reset的意义,不是让你全部去掉,而是让各种浏览器尽量起点一样。 牛顿是站在巨人伽利略的肩膀上的,我们也可以这么做。通过高手们的经 验,下面两个细节需要注意。你可以检查一下你设计网站或者博客的全局CSS。 不建议用:*{margin:0;padding:0;} 不建议用:* {margin:0;padding:0;}的原因: *这个感觉不是很好,肯定会影响效率的,尽管不能被肉眼察觉 性能的消耗是其中一个因素,个人认为会带来的最大弊端还是对表单元素的影响。比如checkbox、radio、button之类的标 签,被定义后在浏览器上的显示很别扭,需要针对性重写代码,消耗的是更多的代码量和代码时间。 但是针对一些简单得页面,标签元 素单一且简单得话,就可以大胆地使用

HTML中 :after和:before的作用及使用方法(转)

走远了吗. 提交于 2020-01-03 11:17:08
1. :before 和 :after 的主要作用是在元素内容前后加上指定内容,示例: HTML代码: <p>你好</p> CSS代码: p:before{ content: 'Hello'; color: red; } p:after{ content: 'Tom'; color: red; } 效果如图: 以上代码是:before和:after的基本用法,但是这两种伪类还有很多更方便的用法。 2. :after清除浮动 元素设置浮动以后,其父元素以及父元素的兄弟元素的布局都会受到影响,如父元素的背景边框不能正常显示,父元素的兄弟元素位置布局错误等, 为了避免这种浮动带来的影响必须要清除浮动,:after就是其中的一种方法。 CSS代码: ul:after{ content: ''; display: block; width: 0; height: 0; clear: both; } 3. :before和:after 用来写小三角形 在日常的工作中会经常遇到小三角形这样的小图标,可以用添加图片的方式实现,但是更方便的是用:after :before伪类来实现。 HTML代码: <div class="demo">这是一个测试</div> CSS代码: .demo:after{ content: ''; display: inline-block; width: 0;

仿iphone日历插件(beta)

巧了我就是萌 提交于 2020-01-03 10:20:00
前言 小伙伴们好,很久不见了。最近工作进入正常期了,所以慢慢的悠闲的时间久没有了,所以不能每天水一篇了。 最近也在听师傅( http://home.cnblogs.com/u/aaronjs/ )的教导开始阅读jquery源码了,怎么说呢,阅读的效果其实不是太好。 一来是时间断断续续的没有接上,今天读完明天又忘了,到第三天再读的话,就很多都忘记了; 二来是jquery其实还是有一定难度,加之篇幅也很长,所以读起来还是有一点吃力(我甚至有时候有种想睡的感觉),过了2星期才陆陆续续把core读完,结果很多都无法理解,再加油吧。 反正今年的目标就是把jquery读懂,时间多,不着急了。 时间比较紧未做兼容处理,请使用手机/或者使用chrome开启touch功能查看,后期补上兼容方案,以及修复BUG 关于工作 最近工作上需要在我们的网页上加入一些动画: ① 页面的切入切出的转场动画 ② 模仿一个iphone的日历控件 转场动画做的时候其实碰到了很多坑,而且最后做出的效果也一般,因为既有的框架与dom结构已经出来了好久了,改不得,而且就算改了效果也不能保证好,所以暂时放下 这里说的仿iphone日历控件,不如说模仿一个单选框来的实在,而且我这里说是 插件 ,完全就算标题党了,各位可以忽视,所以今日正题吧。 iphone的感觉 第一步我们要找到iphone的感觉,那么iphone是个什么感觉呢

CSS

僤鯓⒐⒋嵵緔 提交于 2020-01-03 10:08:11
阅读目录 css介绍 css的引入方式 css选择器 盒模型 标准文档流 块级元素和行内元素 浮动 定位 z-index 文本属性和字体属性 background 回到顶部 CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言。从 语义 的角度描述页面 结构 。 CSS:层叠样式表。从 审美 的角度负责页面 样式 。 JS:JavaScript 。从 交互 的角度描述页面 行为 CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式, 定义网页的显示效果 。简单一句话:CSS将网页 内容和显示样式进行分离 ,提高了显示功能。 css的最新版本是css3, 我们目前学习的是css2.1 接下来我们要讲一下为什么要使用CSS。 HTML的缺陷: 不能够适应多种设备 要求浏览器必须智能化足够庞大 数据和显示没有分开 功能不够强大 CSS 优点: 使数据和显示分开 降低网络流量 使整个网站视觉效果一致 使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css) 比如说,有一个样式需要在一百个页面上显示,如果是html来实现,那要写一百遍,现在有了css,只要写一遍。现在,html只提供数据和一些控件,完全交给css提供各种各样的样式。 回到顶部 CSS的引入方式 行内样式 <div> <p style=

小小border用处多

流过昼夜 提交于 2020-01-03 08:42:43
1.实现梯形 利用边框我们可以得到梯形,首先我们给一个div添加边框,当给边框设置四个不同的颜色时,我们可以得到这样的样式,可以看到这里上边框是一个梯形,那么如果我们给其他边框设置颜色为透明(transparent),就可以得到一个梯形了。梯形的高便是边框的宽度设置。 <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div> </div> </body> </html> div{ width:100px; height:100px; margin:80px auto; /*border-top:50px solid pink; border-left:50px solid grey; border-right:50px solid #FFE767;*/ /*border-top:50px solid transparent; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:50px solid #57BA63;*/ border-top:50px

如何用css画出三角形

十年热恋 提交于 2020-01-03 08:42:27
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色。 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条。 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了。 1 border:100px solid transparent   //边框100px,实线,透明颜色,下面三行代码等同于此句 2 border-width:15px;        //border-width代表所有方向的border 3 border-style:solid; 4 border-color:transparent; 如果你看明白了原理那么现在你应该已经可以自己写出代码了。 1 width: 0; 2 height: 0; 3 border-left: 50px solid transparent;    //左边宽度50px,实线,透明颜色 4 border-right: 50px solid transparent;    //右边同上 5 border-top: 100px solid red;        //上边宽度100px,实线,红色