第二篇、css尺寸和边框

css 尺寸、边框、内边距、背景以及css Sprite

上节课回顾: HTML标签: 格式排版 p 段落双br 换行单hr 分隔线单h1~h6 标题双pre 原样格式化输出双div 标签,无任何特殊意义 HTML标签 :文本 强调倾斜双<ruby></ruby> 加拼音 <rt></rt> 加粗强调双 标记选中双 下标<…

一.尺寸和标签图二.尺寸单位 %:百分比 in:英寸 cm:厘米 mm:毫米 pt:磅(点)(1pt等于1/72英寸) px:像素(计算机屏幕上的一个点) em:1em等于当前的字体尺寸,2em等于当前字体尺寸的两倍 (相对单位) 三.颜色单位 rgb(x,x,x):RGB值,如rgb(,,) rgb(x%,x%,x%):RGB百分比值,如rgb(%,%,%) #rrggbb:十六进制数,如#ff0000 #rgb:简写的十六进制数,如#f00 表示颜色的英文单词,如red 四.尺寸尺寸属性…

前端开发【第二篇: css】

css概述层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力. 一 css的四种引入方式 1.行内式行内式是在标记的style属性中设定CS…

第二篇 CSS快速入门

学CSS 和 JS的路线: 1. 首先,学会怎么找到标签.只有找到标签,才能操作标签——CSS通过选择器去找标签 2. 其次,学会怎么操作标签对象. CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,功能是用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一 css的四种引入方式 1. 行内式行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <!DOCTYPE html> <html lang…

前端第二篇---前端基础之CSS

前端第二篇---前端基础之CSS 目录一.css介绍二.css语法三.css的几种引入方式四.css选择器五.css属性相关六.盒子模型拓展一.css介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二.css语法 2.1css实例每一个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. 2.2 CSS注释 /*这是注释…

2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

盒子模型 Box Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素包括:边距,边框,填充和实际内容盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素 Margin(外边距):清除边框区域.Margin没有背景颜色,完全透明 border(边框):边框周围的填充和内容,受到盒子的背景颜色的影响 Padding(内边距) : 清除内容周围的区域.会受到框中填充的背景颜色影响 content(内容):盒子的内容,显示文本和图像 CSS Bord…

前端总结·基础篇·CSS（二）视觉

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·CSS(四)兼容目录一.动画(animation)(IE10+)(CSS3) 1.1 定义动画 1.2 引用动画 1.3 多个动画 1.4 更多属性二.过渡(transition)(IE10+)(CSS3) 2.1 定义首尾 2.2 应用过渡 2.3 多个过渡 2.4 更多属性三.转换(transform)(IE10+,-ms-,-webkit-,-…

前端工程师技能之photoshop巧用系列第二篇——测量篇

× 目录 [1]测量信息 [2]实战 [3]注意事项前面的话前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇测量信息在网页制作中需要使用photoshop测量的信息分为两类,分别是尺寸信息和颜色信息 [1]尺寸信息尺寸信息主要通过矩形选框工具配合信息面板进行测量,共包括以下项目: 1.宽度.高度 2.内边距.外边距 3.边框 4.定位 5.文字大小 6.行高 7.背景图位置 [注意]测量时,画布放得尽可能大,这样结果才相对更准…

前端总结·基础篇·CSS（一）布局

目录这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) & 块元素(block) 1.3 行内块元素(inline-block IE8+ IE6-7/tools) 1.4 flex(IE11+ IE10/-ms-) 1.5 none 二.位置(position) 三.补充 3.1 浮动(float) 3.2 层叠(z-index) 3.3 溢出(overflow…

前端总结·基础篇·CSS

前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} /* 去除边距 */ul {margin:0;padding-left:0;} /* 去除边距和左填充 */li {list-style-type:none;} /* 去除列表的圆点 */a {text-decoration:none;} /* 去除下划线 */ 2 浏览器前缀 { t…

[转]Android开源项目第二篇——工具库篇

本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他. 最新内容请关注 Android开源项目汇总及搜索.对你有帮助的话,去知乎点个赞让更多人了解:Android 优秀开源项目及特效推荐. Android开源项目系列汇总已完成,包括: Android开源项目第一篇--个性化控件(View)篇Android开源项目第二篇--工具库篇And…

第二篇.Bootstrap起步

第二篇Bootstrap起步我们可以在http://getbootstrap.com下载bootstrap的文件点击左边的download bootstrap可以下载bootstrap的css,javascript和字体库的已编译版本.点击中间的download source可以下载bootstrap的源代码.一般情况下我们使用bootstrap点击左边的已编译版本下载就可以了. 如果下载的是已编译版结构是: 如果下载的是源代码结构是: Dist文件夹里的内容和已编译版本内容一样. 如果需要…

【OpenGL】第二篇 Hello OpenGL

------------------------------------------------------------------------------------------------------------------------------- 就像学习其他编程语言一样,为了顺利写下第一个OpenGL程序我们必须不辞辛苦的先铺好砖块,搭建好环境…… 所以接下来让我先把所需要的库的环境安置好,再开始coding. ------------------------------------…

Android开源项目第二篇——工具库篇

本文为那些不错的Android开源项目第二篇——开发工具库篇,**主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他**. Android开源项目系列汇总已完成,包括: Android开源项目第一篇——个性化控件(View)篇 Android开源项目第二篇——工具库篇 Android开源项目第三篇——优秀项目篇 Android开源项目第四篇——开发及测试工具篇 Android开源项目第五篇——优…

“MVC+Nhibernate+Jquery-EasyUI”信息发布系统第二篇（数据库结构、登录窗口、以及主界面）

“MVC+Nhibernate+Jquery-EasyUI”信息发布系统第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增删改查的地步.测试好之后再来看这篇文章,我的主框架相对来说简答一点,重点还是实现系统的功能,以及对Jquery-EasyUI的使用.先把数据库的结构展示出来,记得是ORM思想,先写Model类和*.hbm.xml,再生成数据库,我这边已经写完,所以直接给大家看看数据库的结构吧! 分别介绍一下各个表的…

前端总结·基础篇·CSS（三）补充

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充目录一.移动端 1.1 视口(viewport) 1.2 媒体查询(media query) 1.3 相对字体大小(rem/em) 二.选择器 2.1 常用 2.2 关系 2.3 伪元素 2.4 伪类 2.5 优先级三.样式重置(reset) 3.1 常用重置 3.2 重置插件(Normalize.css) 四.浏览器前缀 4.1 前缀由来 4.2 解决方案五.兼容性…

webIDE 第二篇博文

这是我做webIDE过程中的第二篇博文,之所以隔了这么长时间没更,因为确实是没有啥进度啊,没什么可写的,现在虽然依然没啥进度,但中途遇到很多坑,这些坑还是有记录下来的必要的. 因个人水平问题,可能有的地方说的不对,或者实现思路有问题,欢迎指正.thanks 经过我们不断地项目迭代.拆分,将其分为三部分,左侧目录树.右侧上部tabs.右侧下部coding区,分别用三个组件实现各自功能. 刚开始,我用elementUI的fileTree做文件树->fi'lder组件.tabs做上部tabs->ta…

第二篇——Struts2的Action搜索顺序

Struts2的Action的搜索顺序: 地址:http://localhost:8080/path1/path2/student.action 1.判断package是否存在,例如:/path1/path2: 2.若存在,判断action是否存在,没有则报错: 3.不存在,检查上一级路径的package是否存在(知道默认的namespace),重复第一步,没有则报错. 项目实例: 1.项目结构 2.pom.xml <project xmlns="http://ma…

ElasticSearch入门第二篇：集群配置

这是ElasticSearch 2.4 版本系列的第二篇: ElasticSearch入门第一篇:Windows下安装ElasticSearch ElasticSearch入门第二篇:集群配置 ElasticSearch入门第三篇:索引 ElasticSearch入门第四篇:使用C#添加和更新文档 ElasticSearch入门第五篇:使用C#查询文档 ElasticSearch入门第六篇:复合数据类型——数组,对象和嵌套 ElasticSearch入门第七篇:分析器 Elasti…

第二篇界面开发 (Android学习笔记)

第二篇界面开发第5章探索界面UI元素 ●The Android View Class ●△Widget设计步骤需要修改三个XML,以及一个class: 1)第一个xml是布局XML文件(如:main.xml),是这个widget的.一般来说如果用这个部件显示时间,那就只在这个布局XML中声明一个textview就OK了. 2)第二个xml是widget_provider.xml,主要是用于声明一个appwidget的.其中,Layout就是指定上面那个main.xml. 3)第三…

使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]

这个效果可是通过代码实现的哦,在不同浏览器下都可以正常显示对于html中使用CSS实现透明边框的效果,主要有以下四种属性设置方法,但由于这些属性兼容性并不是很好,单一使用会造成不同浏览器显示效果不同,或根本就没有效果, 为了能在不同内核的浏览器之间显示效果一致,最好使用组合属性,即同时使用两个或以上. 下面,我们先熟悉下这几种属性,以及使用方式: 1. filter: alpha(opacity=50)—— 1.会使子元素透明. 2.只针对针对所有IE浏览器及以Trident内核…

如何制作一款HTML5 RPG游戏引擎——第二篇，烟雨+飞雪效果

今天我们来实现烟雨+飞雪效果.首先来说,一款经典的RPG游戏难免需要加入天气的变化.那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它. 本文为该系列文章的第二篇,如果想了解以前的文章可以看看下面列表: 如何制作一款HTML5 RPG游戏引擎——第一篇,地图类的实现 http://blog.csdn.net/yorhomwang/article/details/8892305 该引擎是基于lufylegend开发的,学习时请先了解lufylegend. 官方网站地址:http://lu…

jquery jtemplates.js模板渲染引擎的详细用法第二篇

jquery jtemplates.js模板渲染引擎的详细用法第二篇关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个template.html的文件来展示 <!doctype html> <html lang="zh-CN"> <…

EnjoyingSoft之Mule ESB开发教程第二篇：Mule ESB基本概念

目录 1. 使用Anypoint Studio开发 2. Mule ESB Application Structure - Mule ESB应用程序结构 3. Mule ESB Application整体构造 4. Mule ESB构造元素 - Flow 5. Mule ESB构造元素 - Connector 6. Mule ESB构造元素 - Processor Mule ESB在众多开源的ESB中处于领先者的地位,MuleSoft公司也作为独角兽,2017年在纽交所上市.我们作为MuleSo…

VueRouter爬坑第二篇-动态路由

VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送后续VueRouter系列的文章的示例编写均基于该项目环境. VueRouter系列文章链接 <VueRouter爬坑第一篇>-简单实践 <VueRouter爬坑第二篇>-动态路由 <VueRouter爬坑第三篇>-嵌套路由阅读目录一.前言二.动态路由配置 1.配置动态路由 2.配置动态路由映射到的组件 3.编写可跳转的UR…

css美化Div边框的样式实例*（转载）

css美化Div边框的样式实例很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址将这段美化的css代码 border:1px solid #96c2f1;background:#eff7ff 应用到div中, <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> border:1px solid #96c2f1;backgr…

[翻译]Go与C#的比较，第二篇：垃圾回收

Go vs C#, part 2: Garbage Collection | by Alex Yakunin | ServiceTitan - Titan Tech | Medium 目录译者注什么是垃圾回收? 什么是GCBurn? 峰值分配吞吐量("速度测试") GCBurn 测试 GC Burn测试结果结论 .NET Core Go 两者的相同点免责声明和后记译者注本文90%通过机器翻译,另外10%译者按照自己的理解进行翻译,和原文相比有所删减,可能与原文并不是一一对应…

自定义View5 -塔防小游戏：第二篇防御塔随意放置

第一篇:一个防御塔+多个野怪(简易版) 第二篇:防御塔随意放置自定义View,处理事件分发,up,move,down. 第三篇:防御塔随意放置+多组野怪第四篇:多波野怪第五篇:杀死野怪获得金币第六篇:防御塔可升级,增强攻击力,增大射程先上图片,防御塔放置,需要注意的是1.放置后刷新view会导致防御塔回到起点.2.防御塔一旦放置就无法移动,只能拆除,这才符合塔防的规则.问题会在下篇解决 1.创建TowerView,继承View 我这里命名为TowerView4,下面代码为通用继承Vie…

[ 高并发]Java高并发编程系列第二篇--线程同步

高并发,听起来高大上的一个词汇,在身处于互联网潮的社会大趋势下,高并发赋予了更多的传奇色彩.首先,我们可以看到很多招聘中,会提到有高并发项目者优先.高并发,意味着,你的前雇主,有很大的业务层面的需求,而且也能怎么你在整个项目中的一个处理逻辑的能力体现.那么,你真的知道什么是高并发吗?这不是一个很简单的话题.高并发,往往会牵扯到很多的问题,如何才能快速响应,如何处理各个线程之间的交互,如何完成逻辑之间的高负载运转,甚至,一个系统,如果没有做好前期高并发的合理配置,整个产品会遇到瓶颈,以及不可预期的…

从0开始搭建SQL Server AlwaysOn 第二篇（配置故障转移集群）

从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnblogs.com/lyhabc/p/4682028.html第三篇http://www.cnblogs.com/lyhabc/p/4682986.html第四篇http://www.cnblogs.com/lyhabc/p/6136227.html 这一篇是从0开始搭建SQL Server…

【第二篇、css尺寸和边框】的更多相关文章