div+css学习笔记1

今天开始撰写我的学习笔记,今天是第一次写,但是我给自己的目标是坚持写,写给现在的自己,更写给未来的自己,希望围观的各位客官见谅。

今天学习主题是DIV+CSS,其实标准的讲应该称XHTML+CSS。

一:CSS的四种控制HTML的方式

1、行内式。

直接写在标签行内部。

例:<p style=" font:15px; color:green;"></p>

2、内嵌式。

将代码写在在html的头部<head></head>之间。

例:<head>

<style type="text/css">

<!--

#div1{ font:15px;color:blue;}

-->

</style>

3、链接式

使用率最高、最实用的一种。也是将代码在<head></head>

例:<link href="style.css"  type="text/css" rel="stylesheet">,其中style.css文件就是需要编写的CSS文件。

注意事项:在使用链接式的时候,注意CSS文件的位置,如:“./”表示当前文件夹下,“../”表示上一级文件夹下。

4、导入式

采用import导入的方法。

以上四种方式的优先级为(从高到低):行内、内嵌、链接、导入。

二:页面模块常用命名

1:header 头

2:content/container 内容

3:footer 尾

4:nav 导航

5:sidebar 侧栏

6:column 栏目

7:loginbar 登录条

8:banner  广告

9:subnav  子导航

10:submenu 子菜单

11:scroll 滚动

三:盒子模型

四:块元素和内联元素

块元素特点:块元素有点“霸道”,它有独占一行的特性。不过一物降一物,float属性可以化解块元素不与人合群独占一行的“霸道”,使之可以与其他元素同行排列。

内联元素可以通过display:block成为块元素。在这里不得不提的是,clear属性。clear具有消除float的特性,又能恢复float带来的同行。

时间: 2024-10-14 04:06:08

div+css学习笔记1的相关文章

DIV+CSS学习笔记

第十五章 定位 static静态定位(不对它的位置进行改变,在哪里就在那里) 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). fixed固定定位(参照物--浏览器窗口)---做 弹窗广告用到 生成固定定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. rela

div+css学习笔记2

1.blockquote段落缩进 能使整个段落缩进. <blockquote>HTML不同于过去学过的各种面向对象语言, 函数式语言, 它不像其他语言有明确的上下文的逻辑关系. 所以并不像其他语言一样需要有什么特定的基础, 希望这句话能让你远离学习过别的语言的阴影.</blockquote> 2.text-indent属性 让段落首行缩进. p{ text-indent: 5px; } 3.margin:0 auto;居中 这个在IE8.0下会失效,但在其他浏览器下可以正常居中显示

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

css学习笔记.1--以校园资讯平台为例

#id .class 这两个是最先要记住的..id是<a id="Sth">中的Sth,class是<ul class="Oth">中的Oth,挺好记得 margin 老记成marign...看来是align害的,介绍是"层的边框以外留的空白"-以下图片来自 这里 如图: 就是说最外层的是margin,最内层的是padding,是盒模型{主要定义四个区域:内容(content).边框距(padding).边界(border

CSS学习笔记08 浮动

从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法外,还有没有其他方法可以实现这种效果呢,答案是肯定的,那就是下面要介绍的CSS的浮动特性,浮动从字面意思上来看,就是浮起来,动起来,那么是谁浮起来,又是谁动起来呢?往下看,很快就会知道答案了. 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,漂浮在标准流之上.元素浮动后,虽然脱离标准流,但

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里