内边距 外边距 和元素浮动 清除浮动

1.内边距:是控制 盒子与内容之间的距离 2.外边距:是调整相邻表标签之间的距离如果外边距重叠时,取margin值的最大值3.外边距塌陷(合并)问题:如果一个元素里面有一个元素,设置里面元素的外边距,其外面的元素也随着里面的元素的外边距变化解决方法: 1.设置父元素的边框 border: 2.设置父元素 float 3.设置父元素 overflow:hidden 4.设置父元素 posit
阅读本文

纯CSS3实现小圆盘无限loading效果

继续mark百度前端技术学院上的题目,这次要攻克的是如何纯用CSS3来实现饼状的loading效果,下面我会讲解关键技术点和思路,并在文末给出源代码和实际运行的demo。 效果图 最终实现的效果图如下: 整体设计思路和要点 整体流程: - 设计3/4圆环 - 制作左侧和右侧的底座半圆 - 设计左侧和右侧的旋转半圆,且令左侧的旋转圆逆时针转到右侧,右侧的旋转圆逆时针转到左侧 对
阅读本文

动手 - 修改更多CSS样式

动手 - 修改更多CSS样式 在 css 文件夹中添加一个新文件 custom.css, 并在 index.html 文件中的元素引用,如下图 使用 类选择器、 id选择器 、 派生选择器 给 index.html 中的元素添加样式: 如下图,下面会通过一个小栗子来带大家认识各种选择器的用法: 先观察html中的元素(仅截取body标签中的内容): 图中黑色大框的对应代码中的外层d
阅读本文

天气预报静态页面代码

<!DOCTYPE html> <html lang=“en“> <head> <meta charset=“UTF-8“> <title>天气预报</title> </head> <style> html { height: 100%; } body { /*background-color: blue;*/
阅读本文

元素标签分类

1.行内元素  特点:1)不独占一行        2)宽度根据内容尽可能的少的占用空间例如:span     a2.块元素特点:1)独占一行       2)可以修改宽高例如:div   main   section3.行内块元素特点:1)不会独占一行     2)可以修改宽高例如:img
阅读本文

html5 css选择器。 井号,句号的区别

、理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1、选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响;2、属性(如实例中的font-family、color等),规定了布局的什么方面被设置了;3、值(如实例中的Arial,sans-serif,#333333等),给出了式样属性的值。 二、CSS式样中不同符号的区别 #是ID选择器 .是cl
阅读本文

html中文乱码之我见

html中文乱码应该算是前端从业者都曾遇到的问题,我们最容易想到的就是通过下面的设置来解决:<head> <meta http-equiv=“Content-Type“ content=“text/html; charset=UTF-8“></head> 然而其实并不是所有的中文乱码都是由这个问题产生的,也有可能是你保存文件格式不对,比如应该保存为UTF-8格式,而你选择了ANSI。windows
阅读本文

html5 css选择器 井号, 句点的区别

一、理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1、选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响;2、属性(如实例中的font-family、color等),规定了布局的什么方面被设置了;3、值(如实例中的Arial,sans-serif,#333333等),给出了式样属性的值。 二、CSS式样中不同符号的区别 #是ID选择器 .是c
阅读本文

html5 css选择器 井号, 句点的区别

一、理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1、选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响;2、属性(如实例中的font-family、color等),规定了布局的什么方面被设置了;3、值(如实例中的Arial,sans-serif,#333333等),给出了式样属性的值。 二、CSS式样中不同符号的区别 #是ID选择器 .是c
阅读本文

清除浮动的方法和优缺点

清除浮动的方法以及各自的优缺点1、父级div定义height<style> ul li { list-style: none; } .box1 ul li { float: left; width: 100px; height: 50px; background-color: brown;
阅读本文

前端之HTML简介<一>

我们知道,用所谓的网页三剑客(Dreamweaver+Fireworks+Flash)已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最主要由3部分组成:结构、表现和行为。网页现在新的标准是W3C,目前模式是HTML、CSS和JavaScript。HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门
阅读本文

CSS实现文字环绕图片效果

实现文字环绕图片效果 文字环绕图片,在Word里只要click一下右键,调一下属性就可以了。但在HTML文档里就没有直接属性了。因此我们可以借助CSS来实现这一效果。 我们先设定float的参数,如果图片需要左对齐设为left,若右对齐则为:right。此外,我们还可以根据需要设置图片和文字间隔的空间,同样适用CSS的padding。 例: 复制代码 代码如下: <img style
阅读本文

html和jQuery常用的选择器

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN“> <html> <head> <title>css.html</title> <meta http-equiv=“keywords“ content=“keyword1,keyword2,keyword3“> <meta http-equiv
阅读本文

HTML+CSS编写静态网站-18 开发手机网站

视频教程观看地址:http://study.163.com/course/courseMain.htm?courseId=1003879015 这节课,我们将首先构建我们移动版本的网站。这可能看起来有点不合理,但现在做网站基本上从一开始就必须考虑到移动设备。有两个原因。首先,建立一个手机网站要加容易,因为它简单得多。你不必担心复杂的功能,比如广告以及复杂的布局等。然后,当您从手机平台移动到更
阅读本文

详解CSS中:nth-child的用法

详解CSS中:nth-child的用法2011-06-17 分类:HTML/CSS 阅读(121511) 评论(31)  前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”。下面我将用几个典型的实例来给大家讲解:nth-child的实际用途:Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(
阅读本文

Css基础(1)

Day03 Css基础1一、Css基础知识什么是css? 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML 或XML(标准通用标记语言的一个子集)。等文件样式的计算机语言。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素 进行格式化。层叠样式表 --- 核心关键词样式表:负责美化层叠:样式不会被干掉而只会被覆盖二、Css的使用方式C
阅读本文

css的各种选择器

一、基本选择器1. * 通用元素选择器,匹配任何元素2. E 标签选择器,匹配所有使用E标签的元素3. .info class选择器,匹配所有class属性中包含info的元素4. #footer id选择器,匹配所有id属性等于footer的元素 二、多元素的组合选择器5. E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔6. E F 后代元素选择器,匹配所有属于E元素后代
阅读本文

Web Essentials 2015--html

如果您编写CSS,HTML,JavaScript,TypeScript,CoffeeScript或LESS,那么您会发现许多有用的功能,使您的生活更轻松。直接在vs扩展工具就可以下载这个工具。 HTML 1.当你鼠标移动到img标签上面 ,图片就可以显示出来。 2.将光标定于class属性 按f12 将可以跳转过去; 3.将光标定于class属性 按shift+ f12 将可以找到所有引用; 4.
阅读本文

css3上下翻页效果

翻页效果显示当前时间<!DOCTYPE html> <html> <head> <meta charset=“UTF-8“> <title>Document</title> <link rel=“stylesheet“ type=“text/css“ href=“css/test.css“ /> <script type=“t
阅读本文