【前端学习笔记-CSS】教程文章相关的互联网学习教程文章

HTML&CSS基础学习笔记1.6-html的文本操作标签【图】

文本也许是HTML里最常见的元素了,所以我们有必要对HTML的文本操作标签做下认识。1. <em>,<i>内的文字呈现为倾斜效果;2. <strong>,<b>内的文字呈现为加粗效果;3. <b>,<i>只是单纯的为了让文本具有某种特殊样式,而<strong>,<em>不仅带有特殊样式,而且也表达了某种语义;4. 在单纯的为了达到某种样式的情况下,建议使用不带有语义的标签。体验如下:http://www.mayacoder.com/lesson/lesson?lesson_id=28&knowledge_id=5原文...

学习笔记 第十一章 CSS3布局基础【代码】

第11章 CSS3布局基础【学习重点】了解CSS2盒模型。设计边框样式。设计边界样式。设计补白样式。了解CSS3盒模型。11.1 CSS盒模型基础页面中所有元素基本显示形态为方形的盒子(Box),根据盒模型规则,网页中所有元素对象都被放在一个盒子里,设计师可以通过CSS来控制这个盒子的显示方式。11.1.1 盒模型结构Box具有如下特点:每个盒子都有:边界、边框、填充、内容4个属性。每个属性都包括4个部分:上、右、下、左。属性的四部分...

html+css学习笔记 5[表格、表单]

表格 —— 默认样式重置表格标签: table 表格 thead 表格头 tbody 表格主体 tfoot 表格尾 tr 表格行 th 元素定义表头 td 元素定义表格单元表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充 单元格合并rowspan 属性规定单元格可横跨的行数。 <td rowspan="2"></td>colspan 属性规定单元格可...

CSS3 实现特殊阴影 (学习笔记)【代码】【图】

学习来源:慕课网http://www.imooc.com/view/240先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ HTML结构 1<body> 2<div class="wrap effect"> 3<!-- effect类:是阴影类,其他元素也可以使用 --> 4<h1>Shadow Effect</h1> 5</div> 6<ul class="box"> 7<li><img src="images/photo1.jpg" alt=""></li> 8<li><img src="images/photo2.jpg" alt=""></li> 9<li><img src="images/photo3.jpg" alt=""></li>10</ul>11</body>CSS样...

前端学习笔记之CSS介绍【代码】【图】

阅读目录一 什么是CSS二 为何要用CSS三 如何使用CSS一 什么是CSSCSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的。样式指的是HTML标签的显示效果,比如换行、宽高、颜色等等层叠属于CSS的三大特性之一,我们将在后续内容中介绍表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里二 为何要用CSS在没有CSS之前,我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性,如下<!DOC...

CSS学习笔记

20150712。CSS学习笔记 1,代码开始结束的时候需要注释 <!— headerEnd -->2,form中要定义好name,穿数据时还是会用name取element。3,为每个li配置单独的class。4,可以在css文件开头使用*{},通配选择器。 /*通配选择器*/*{ margin: 0; padding: 0; color: #000; font-size: 13px; list-style-type: none; text-decoration:none;}5,‘反向浮动’将主要内容在.html中前置,利于网络爬...

html+css学习笔记 4[定位]【图】

如何让图1中的div2移动到如图2上的位置;思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量position:relative; 相对定位 a、不影响元素本身的特性; b、不使元素脱离文档流; c、如果没有定位偏移量,对元素本身没有任何影响;定位元素位置控制 top/right/bottom/left 定位元素偏移量。 absolute绝对定位/定位层级osition:absolute; 绝对定位 a、使元素完全脱离文档...

html5和css3的学习笔记

H5结构知识点一:body,nav,section需要h1-h6; header,div不需要h1-h6. h5结构测试网站:https://gsnedders.html5.org/outliner/移动端么meta格式:移动端要加的标签<meta name="viewport&quot; content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">移动端图片自适应css(配合上述标签使用):img{display:block;max-width:100%;}css3标签:ouline:none 点击无虚线css3内边距和边...

《CSS网站布局实录》学习笔记(四)【代码】【图】

第四章 CSS网站元素设计4.1 网站导航  网站导航是网站中最重要的元素。从形式上看,网站导航主要分横向导航、纵向导航、下拉及多级菜单导航灯3种常见形式。横向导航:作为门户网站的设计而言,主导航一般采用横向导航。纵向导航:纵向导航更倾向于表达产品的分类。下拉导航:主要用于功能复杂的网站。  总的来说,导航的核心目标就是设计一个简单、快捷的操作入口,帮助用户快速地到达网站中的 内容。这里将使用CSS来对这3种常...

CSS学习笔记一 如何清除浮动【代码】

<!<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1,maximun-scale=1,user-scalable=no"><!--清除浮动方法一: .divcss5{border:1px solid #F00;background:#FF0;width:400px;}产生浮动.divcss5{border:1px solid #F00;background:#FF0;width:400px;height:102px;}清除浮动,给父级加高...

CSS3学习笔记-1:CSS样式继承

自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来:所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则,应用的时候容易让人迷惑CSS的一个主要特征就是...

【CSS学习笔记】整齐的表格【图】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>第37课 整齐的表格</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="布尔教育 http://www.itbool.com" /><style type="text/css"> table{ border-collapse: co...

CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案【代码】【图】

一、浏览器兼容1.1、概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异、屏幕分辨率不一样,大小不一样,比例不一样。兼容性主要可以分类为:1)、CSS兼容2)、JavaScript兼容3)、HTML兼容这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解...

Head First Html and CSS学习笔记之HTML【图】

初学前端开发,记录下自己的学习笔记。第一章 认识HTML1:关于HTML  HTML是超文本标记语言(HyperText Markup Language)的缩写,用来建立网页的结构。  它只会根据标记来确定在哪里换行或者分段。所以浏览器会忽略HTML文档中的制表符、回车和空格。  共有六级标题,从<h1>到<h6>,字体由大到小。  HTML注释放在<!--和-->之间,浏览器会把它们完全忽略,可以有多行。  <em>元素表示强调。  <head>的HTML页面的头部,它包...

CSS深入理解学习笔记之line-height【图】

1、line-height的定义  定义:两行文字基线之间的距离。  注:不同字体之间的基线是不同的。2、line-height与行内框盒子模型  行内框盒子模型:  ①内容区域(content area),是一种围绕文字看不见的盒子,大小与font-size有关;  ②内联盒子(inline boxes),不会让内容成块显示,而是排成一行。如果外部含inline水平标签,则属于内联盒子;如果是个光秃秃的文字,则属于”匿名内联盒子“;  ③行框盒子(line boxe...

学习笔记 - 相关标签