weixin_47295886的博客

行内元素在页面中自左向右水平排列，如果一行容纳不了所有元素，元素会自动换到第二行继续排列。多次的网页中，最底下的一层叫做文档流，文档流是网页的基础，我们所创建的元素默认在文档流中。在页面独占一行（无论宽度如何），自上而下垂直排列。元素主要有两个状态：在文档流中 脱离文档流（不在文档流）默认宽度是父元素的全部（会把父元素撑满）网页是一个多层的结构，一层接着一层，通过CSS可以分别为每一层来设置。默认高度是被内容撑开，被子元素撑开。不会独占一行，只占自身大小。默认宽度，高度是被内容撑开。

audio,video,embed,iframe嵌入另外的html,source

iframe src="指定网页的路径" frameborder="0">——出现一个框，会出现引入的网页内容，但是比较小。frameborder：周围绘制边框。值0删除了帧周围的边框。内联框架引入的网站不会被搜索引擎爬取——很少使用。可以通过指定大小，让网页显示变大——宽和高。iframe：向当前页面引入其他页面。frameborder=1表示有边框。如果src是内部路径——变成内部页面。在一个网页中嵌入了另外的网页。不写的话，默认有一个边框。img：向页面引入图片。

其中用到了background-color: 背景色;color字体颜色font-size字体大小text-align水平方向字体对齐方式list-style-type设置有序列表的序号表示font-weight字体加粗font-style字体倾斜font-family设置字体text-indent设置缩进text-align文本对齐方式font-size字号text-decoration是否有下划线...

block（设置元素为块元素 可以将行元素转化成块元素 然后进行width的设置，元素前后带有换行符。column-rule:设置列之间的竖线宽度、样式和颜色规则——2px solid green;width属性：设置内容显示区域的宽度-----只是对块元素（h1,p,）和img元素有效。column-count:规定元素应该被分割的列数——一个整数;默认值、元素被显示为行内元素，可以显示在一行，元素前后没有换行符。column-span: 规定元素应跨多少列——1 all;...

CSS的行内、内嵌、链接三引入方式+属性:color\font\text\backgroun\list\样式的继承\id#锚点

全局属性+一些事件

styletable tr td p imgmargin: 5px auto;水平居中text-align: center;垂直居中

行内元素：影响少量内容粗体、文代码段、图像浏览器允许多个行内元素出现在同一行行内元素必须嵌套在块元素内图像img 绝对路径是ipd地址加路径实现 相对路径是使用本地图片 alt描述 height图片的高度链接a href链接的地方换行br强调em,strong 倾斜 加粗 --————————————————嵌套标签要注意一个结束标签必须匹配最近打开的标签实现效果一个结束标记必须匹配最近的打开的标签。...

使用链接的方式=-----------锚点的使用

页面的插件引用（animate.css）--d动画的使用--滚轮或鼠标到该位置时，才有动画的切换---所以我们需要用jquery监听鼠标滚轮的滚动事件-------------------页面的动画效果

swiper.css swiper.jss插件的引入 实现页面的自动切换 和鼠标进入切换

和前面有些许的差异 进行整体的调整

*/有一个父子样式的跟随子样式的背景图片的样式跟随父样式一同变化----鼠标触发。实现父子样式一起变化但是变化的内容不同

每一个列表里面都有图片和文字------图文混排----使用dl-----dt图片dd文字。分析五个部分形式相同除了内容不同---------------使用列表做-ul-li。

样式相同的可以放在列表里面。

代码】综合设计一个OPPE主页--页面的精选配件的设计。

上下分两块第二块分成四个部分的相似元素，所以整体可以使用列表来做li里面有图片型号价格文字等。

先进行内容框分析在样式设置。

头部查看要求--观察页面头部是上下分还是左右分，明显是左右分。左边分为3小部分右边分5小部分。

建立样式（每一个部分（一共10个部分）设计共同的样式）id做页面的布局class做页面的样式。首先建立一个站点文件夹--保存网页的所有信息。

实现了菜单页面

语义化：让人和机器更好理解网页（自定义列表：dl、列表项dt（名词）、描述dd（关于列表项的描述）---针对上一层，）

！+tab健--生成基本框ctrl+/--选中的区域生成注释代码ctrl+shift+/--撤销注释 或者重复ctrl+/也可以标签[属性1=”属性值1“ [属性2=”属性值2“]{标签内容填放区域}标签嵌套：p>img标签同级：p+a标签分组：（div>a）+(div>p)快速生成多个元素：使用*数字快速生成文本内容：lorem +tab lorem+4+tab-----------生成4个单词组成的文本...

alt+shift+1-------------------单屏幕alt+shift+2--------------------分双屏幕3是3屏幕ctrl和”+“,-“或者鼠标滚动轮实现屏幕的放大缩小折叠代码单击标签的箭头会出现折叠展开选择： ctrl+d 选中一个单词 ctrl+l选中一行 ctrl+a全部选择多次选择： ctrl+多次单击 缩进：选中代码：ctrl+]-----

表单标签：form--------是一个区域，采集用户信息 action:收集的信息给什么页面处理表单元素：用户名文本框 text/密码文本框password(里面的内容用*显示)、密码框，按钮，复选，下拉列表、文本域

简单使用（div、ul ol li 、table tr td th）---外加注释标签 align(区域内部所有元素的对齐操作)

标签及简单使用（a）---外加注释标签

HTML-1标签及简单使用（h1-h6、span 、p、hr、pre、br）---外加注释标签