建设机械网站方案,网站建设综合实训,如何做好网站建设的设计布局,外贸网站的建设目录前言第1章 写在前面第2章 HTML 语法基础第3章 布局类元素 #xff0c;房子的楼板、柱子和大梁第4章 功能类元素#xff0c;房子的门、窗、水管和电气第5章 CSS基础第6章 选择器#xff0c;确定样式的作用范围选择器类型选择器的组合使用第7章 权重#xff0c;样式发送冲…
目录前言第1章 写在前面第2章 HTML 语法基础第3章 布局类元素 房子的楼板、柱子和大梁第4章 功能类元素房子的门、窗、水管和电气第5章 CSS基础第6章 选择器确定样式的作用范围选择器类型选择器的组合使用第7章 权重样式发送冲突时怎么办第8章 给文字加样式第9章 字体第10章 框模型 所有元素都有四个框第11章 框的其他相关样式第12章 显示方式 元素怎么显示第13章 定位方式元素该显示在什么位置第14章 元素层叠顺序第15章 值和单位第16章 浮动第17章 响应式布局宽和高的范围页面比例规则组合添加媒介查询的常见方式第18章 弹性布局第19章 网格布局第20章 动画前言
《HTML 5与CSS 3核心技法》这本书读起来很顺畅也有效果展示对我学习CSS和页面布局有所帮助特此做个笔记同时也有些是自己实践的理解。
第1章 写在前面
HTML和CSS的关系 HTML是骨架CSS是皮肤 第2章 HTML 语法基础
元素。 构成网页的基本单位 元素的属性。 元素自身携带的功能和特性。 第3章 布局类元素 房子的楼板、柱子和大梁
html 最外层的元素包含网页的全部内容 head 包含给机器看的内容 body 包含给人看的内容用户看到的页面内容 div 结构级别容器 main 用于包裹页面的主体内容 nav 导航栏 header 头部概述 section 用于包裹有明确主题的区域 aside 用于包裹非主体的内容 footer 底部页脚 第4章 功能类元素房子的门、窗、水管和电气
a 超链接 h1 ~ h6 标题 img 图片 p 段落 input 单行文本输入框 textarea 多行文字输入框 select 下拉菜单 button 按钮 form 表单 span 文字级别的容器 / strong 强调 ol 有序列表 ul 无序列表 table、thead、th、tbody、tr、caption 表格类元素 iframe 网页里嵌套的网页 第5章 CSS基础
为什么不直接在HTML代码中写样式 复用 引入CSS的方式。 style标签 link标签 import style属性嵌入行内样式 第6章 选择器确定样式的作用范围
选择器类型 元素(标签)选择器 类选择器class属性定义的 ID选择器 属性选择器 全局选择器比如body * {} 选择器的组合使用
分组选择多个选择一套样式
// a标签和p标签字体都是红色a,p{
color: red;
}多条件选择多个选择同一元素
div classclz1 clz2xxx/divstyle
// 选择同时拥用clz1和clz2的元素
.clz1.clz2{
}/style后代选择通过先人找后人 div spanxxx/span/divstylediv span{
}/style子选择通过爸爸找儿子 div idparentspanxxx/span/divstyle#parent span{
}/style相邻兄弟找弟弟 div idme我/div
div弟弟/divstyle#me div{
}/style通过兄弟选择找所有弟弟 div idme我/div
div弟弟/div
div弟弟/div
div弟弟/divstyle#me ~ div{
}/style伪类按元素状态指定样式 hover 悬停 active 激活状态 focus 聚焦 checked 勾选 disabled 禁用 enabled 可用 empty 空值 first-child 老大第一个 last-child 老末最后一个 nth-child(n) 排行第n个 nth-last-child(n) 倒数排行第n个 first-of-type 同类中老大 last-of-type 同类中老末 nth-of-type(n) 同类排行第n个 nth-last-of-type(n) 同类倒数排行第n个 not() 排除 only-child 独苗选中没有兄弟的元素 伪元素 before 前缀元素 after 后缀元素 first-line 首行 first-letter 首字 placeholder 空白占位 selection 选择范围 第7章 权重样式发送冲突时怎么办
权重级别 加!important最高 行内样式style属性 ID选择器#id 类选择器.class属性选择器[href]伪类:active 元素选择器 div 伪元素 :before 第8章 给文字加样式
块元素占整行一切元素默认情况下统一趋向于文档的左上角。text-indent 文字缩进text-align 文字对齐line-height 行高vertical-align 文字垂直对齐letter-spacing 字距word-spacing 词距text-decoration 文字装饰text-decoration-line 装饰线text-decoration-color 装饰颜色text-decoration-style 装饰风格text-shadow 文字阴影white-space 空白字符word-break 换行和断词
第9章 字体
font-family 声明要使用的字体调用客户端的字体font-face 为文字指定确切的字体从服务器引入font-weight 为字体指定粗细font-size 指定字体大小
第10章 框模型 所有元素都有四个框
内容区padding内边距border 边框margin 外边距
第11章 框的其他相关样式
outline 轮廓color文字颜色background 背景box-sizing 框尺寸指定元素宽度从哪里算起box-shadow 框阴影overflow 溢出
第12章 显示方式 元素怎么显示
none 不显示block 占父元素整个宽inline 宽度由内容决定inline-block 结合inline和block自由伸缩指定宽高。
第13章 定位方式元素该显示在什么位置
static 网页左上角流动默认relative 相对定位相对于之前位置absolute 绝对定位 参照物是父级相对定位或父级绝对定位fixed 固定定位与窗口同步sticky黏滞定位滑动滚动条时会自动挂住
第14章 元素层叠顺序
z-index非static定位才有效值越大显示越前面。还要注意层级关系有时候要让元素的父级的z-index增大才能达到层叠的效果。
第15章 值和单位
calc()计算值颜色 transparent 透明色 currentColor 当前元素的颜色 RGB模式HSL模式 Alpha 通道 不透明通道
第16章 浮动
浮动最初的目的是实现图文混排的效果。
第17章 响应式布局
媒介查询常用类型 all 所有媒介 screen 显示屏。如电脑、手机、电子阅读器。 print: 打印显示 宽和高的范围
// 如果视窗小于450px则加载大括号里的所有样式
media (max-width: 450px){a{color: red;}
}页面比例
// 长大于宽
media (orientation: landscape){a{color: red;}
}规则组合
// 视窗宽度大于800 并且 长大于宽
media (min-width: 800px) and (orientation: landscape) {a{color: red;}
}添加媒介查询的常见方式
importlink
import url(style.css) screen and (orientation: landscape);linkrelstylesheet hrefstyle1.cssmedia/style
style media/style第18章 弹性布局
flex-direction控制主轴方向flex-wrap子项是否可以换行flex-flow同时指定方向和换行模式justify-content主轴方向排列方式align-items交叉轴方向排列方式align-content行列排列方式align-self交叉轴例外排列flex-grow填充容器的剩余空间flex-shrink在空间不足时做出让步 flex-basis弹性子项的基础尺寸
第19章 网格布局
display: grid或inline-grid 定义为网格布局grid-template-rows 定义行宽。grid-template-columns 定义列长。 grid-template-columnsrepeat(4,1fr) 4列每列占一份平均4列 grid-row-gap 行间距grid-column-gap 列间距grid-row-start 调整子项的行起始位置grid-row-start 调整子项的行结束位置grid-column-start 调整子项的列起始位置grid-column-start 调整子项的列结束位置grid-template-areas 调整网格中区域justify-items和align-items 定义网格排列方式 特殊的对齐情况用哪个justify-self和align-self。
第20章 动画
transition 过度animation 动画
