css第二课时笔记

1、css、html、js等分类放入一个文件夹

2、<table><caption>表格标题</caption></table>

<tr><th scope="row">行表头</th></tr>

<tr><th scope="col">列表头</th></tr>

不写scope的属性的话默认为行表头

3、按钮代码:<input type="button" value="我是一个按钮"/>

4、

<style>ul{list-style-type:circle}</style>
<ul>
<li>列表列表列表列表</li>
<li>列表列表列表列表</li>
<li>列表列表列表列表</li>
<li>列表列表列表列表</li>
<li>列表列表列表列表</li>

</ul>

list-style-type:square

list-style-type:none

5、重点

div+css布局

块级元素特点:1、块元素里面的内容默认是在块的左上角 2、块元素独占一行,存在于文档流中,

有哪些元素是块元素:1.div 2.p 3.h1~h6 4.ol li ul li (列表)5.body 6.table 7.pre 8.form

行内元素特点:1、height width 不起作用 2、不会单独占满一行

有哪些是行内元素:1.a 2.span 3.input 4,label 5.img 6.textarea 7.select

6、将块级元素变行内元素:display:inline

将行内元素变块级元素:display:block

既有行内元素又有块级元素特点的:display:inline-block

7、重点

浮动 float 浮动之后要清除浮动才能不影响后面的div布局

clear:left/right/both(清除左、右、左右的浮动)

8、重点

盒子模型(针对块级元素)

内间距:padding:10px 以内容为中心、上下左右都撑开10px;

padding:10px 20px;上下撑开10.左右撑开20

padding:10px 2px 2px;上撑开10px,左右撑开2px;下撑开2px

padding:10px 2px 2px 10px;上撑开10px,右撑开2px;下撑开2px 左撑开10px(顺时针)撑开代表div的高度或宽度增加了

9、外间距和内间距方位一样,属性名为:margin

10、由于浏览器兼容性问题,导致div上和左与浏览器有缝隙,所以定义一个全局通用的效果

*{padding:0;margin:0;}

11、学会调试(审查元素找问题、分析、思考!!!)

12、行内元素同样对padding、margin也有作用

时间: 2024-12-15 14:07:29

css第二课时笔记的相关文章

css通用小笔记02——浮动、清除(三个例子)

css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果  2.多个div并排显示 3.清除浮动(默认显示) 一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: left;padding: 10px;border: 1px solid red;} 5 #big span {font-size: 2

HTML&CSS基础学习笔记15-合并单元格

合并单元格 之前的文章中,我们已经能够创建一个简单地表格了,如果我们需要把横向的某两个相邻单元格<td>或者纵向的某两个相邻单元格<td>合并,我们该怎么做呢?我们要知道的知识点如下: 1.标签<td>的[colspan]属性规定单元格可横跨的列数,即横向合并的单元格数: 2.标签<td>的[rowspan] 属性规定单元格可横跨的行数,即纵向合并的单元格数: 3.这2个标签也可以同时使用. 样式示例: 现在就来试试合并单元格吧: <!DOCTYPE 

css 选择器 (学习笔记)

参考 http://zachary-guo.iteye.com/blog/605116 1. div+p  选择紧接在 <div> 元素之后的所有 <p> 元素.解释 : find p , p.prev = div 就ok! 2. [class~=flower] 选择 title 属性包含单词 "flower" 的所有元素.解释 : 注意是单词哦 class="abc xyz" abc这个算一个单词 3. [lang|=en] 选择 lang

css通用小笔记03——浏览器窗口变小 div错位的问题

我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充. 一.使用min-width属性: 我们先看看下面这段代码(html): 1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 2 <head> 3 <title>无标题文档</

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

安卓第二天笔记-数据保存

安卓第二天笔记--数据保存 1.保存数据私有文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent&

第二次笔记

第二次笔记整理 ----man---命令 解释:帮助指令,通过man可以查看linux中指令帮助,配置文件帮助和编程帮助等信息 man+命令 man的手册页一共有九部分 1  系统命令(echo mkdir) 用户命令的使用方法.可以使用的参数等 2  系统接口    系统调用只有系统才能执行的函数 3  函数库 4  与设备有关的信息 设备和特殊文件 5  文件   文件的格式  如:etc/passwd 6  游戏 7  系统的软件包 8  系统管理命令  多数只能root执行 9  内核

IOS阶段学习第二天笔记

                                   IOS学习(C语言)知识点整理笔记 ———————————————第二天笔记—————————————————— 1.C语言32个关键字 一.存储相关 1)auto 声明自动变量 2)register 声明寄存器变量 3)volatile 声明的变量在程序执行过程中可能被隐含的改变 4)const  声明只读变量 5)extern 声明变量是在其他文件正声明 6)static  声明静态变量 7)signed 声明有符号类型变