好诱惑人-8小时学会html+css

1.关于doctype文档

如果浏览器不支持html5,可以添加

2.网页先布局切豆

从大到小,从上往下,从左到右

div占块

3.用css来控制div(css描述html标签样子)

4.因为div总是独占一行,所以要使用浮动,float使它们左右并排。

左右浮动,父级不给高度,父亲的兄弟会上移。

兄弟关系中,如果浮动其他div,普通div会被上面的盖住。(实践证明,父子级也如此)

5.清除浮动clear。

clear:both;clear:left;clear:right;

6.和模型(外边距margin,边border,内边距padding)。

margin:0 0 0 0(上右下左)顺时针来

margin:0 0 (上下,左右)没有的取值对边。

margin:0 0 0 (上,下, 左右)

7.左右浮动,给父级高度,即可显示父级兄弟,不被隐藏。

8.盒模型border:宽border-width 形状(实线,虚线)border-style 颜色border-color

单独设置某个方向的边:border-top:10px solid red;

9. css控制div画三角形

width:0px;height:0px;border-top:50px solid red;border-left:50px solid red;border-right:50px solid pink;border-bottom:50px solid red;10. padding

主要为了控制内在的文字。盒子与文字常用padding。padding与背景,padding会让div变大 。

11. 盒子模型总结

一个盒子有margin,border,padding时,实际占多少空间?

竖直方向:height+padding_top+padding_bottom+border_top+border_bottom+margin_top+margin_bottom。

横向同理。

11. 利用margin让内容居中。

margin:0 auto;

12. margin重叠现象。

相邻的普通元素,上线边距,并非简单的相加,而是取其中较大的边距。

父子div也会发生重叠,不止兄弟。

13. 块状元素与内联元素(文字多大,背景多大,不会因为给高度会宽度而改变)相互转化

内联变块状:display:block;

块状变内联:display:inline;

display:none,div消失不见。

14. css控制锻炼文本。p标签表示一段话。

text-indent:首行缩进

text-align:center;左右居中。

letter-spacing:控制字间距。

15. 文本控制

color:字体颜色; font-style:italic,斜体;font-size;字体大小;font-weight:粗细;line-height,行高;font-family:字体样式。

font:#fff italic  bold 23px/46px “宋体”

16. 文字设计技巧

新闻标题:sans-serif(无衬线字体)黑体,微软雅黑

宋体,seift (有衬线字体)

你设置的字体,客户机器上未必有。

font-family:‘黑体’,‘微软雅黑’,sans-serif; 如果没有黑体,微软雅黑,就从系统中选择无衬线字体。

17. 背景图片

background-image:url(small,jpg);

background-repeat:no-reapeat; (图片不重复)

background-attachment:fixed;(图片固定在浏览器某个位置)

背景图和背景色都设置,显示背景图。

background-position:center center;(水平居中,数值居中)

18. 高级背景图片位置设置

默认情况下div的左上角和背景图的左上角重合。

计算机左上角是原点:0 0。

background-position:x() y(上为负值,下为正值)

background-position:top right bottom left;

19.css选择器

id选择器,class选择器,标签选择器,派生选择器(标签的上下级关系)

20.css优先级

id>class>标签21.css的四种引入方式

1.)外部链接一个css文件,我们再html头部标明:

2.)头部直接写css: div{ margin:0 10px;}

3.)外部多个css文件时:@import url(my.css);

4.)直接在html标签写入

22.css的初始化

相同的元素,li,在不同的浏览器下,效果不同;是因为,浏览器对各元素的margin,border,font-size等略有不同;为了杜绝这种情况,我们通过css强制让所有元素的属性值都一样,这样浏览器显示就一致,减少了不兼容情况的发生。

可以直接查找:网易,淘宝,腾讯的初始化代码。

23.h标签和p标签

h1-6系列,表示1-6号标题,字越来越小。

p表示段落,在新闻网站中,h与p经常一起出现,新闻标题一般用h表示,而新闻的每一个短内容,适合用p标签

24.img图片标签

特殊的内联标签,可以给宽和高。

可以通过:display:block;

24.有序和无序列表

无序:ul前面可以是小圆点,可以是空心圆,还可以是小方块,一般是用背景图

有序:ol 也可以出现罗马数字

25.整齐的表格tr是行,td是列。

border-collapse:collapse;去除表格之间的间隙。

border-collapse:separate;为默认的值。

border-spacing:20px;是每个单元格的相对距离,相当于margin。

以上属性写在table里。

都在td里写。

表格添加描边

表格描边

.table1{background:#C7D0D7;}

.table1 td{background:#ffffff;}

12345

67890

12345

67890

12345

67890

12345

67890

简单说来就是给整个表格一个背景,然后每一个小格子和其他背景一样,那要小格子和整个table的间隙就变成了描边。

26.伪类

css允许我们针对a标签的四种状态设置各自的css特性,叫做css伪类。

a可以作为锚点,有四种状态,默认,鼠标指上去,鼠标点下去,点击过后

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容