网页制作css 第1篇
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。
“版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML页面，CSS文件。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
最普通的，最为常用的结构
比如小米 小米官网
比如锤子 锤子官网
网页制作css 第2篇
CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里。
如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。
其基本样式如图：
这一是个普通的盒子内容区大小：
我们可以看到，通过对盒子width 和 height 属性的修改，改变了盒子内容区大小（蓝色区域），而非整个盒子大小：
通过padding属性进行操作，设置标签的内边距
可以在标签周围创建边框，边框是标签可见框的最外部。
格式：border:1px red solid;（分别指边框的宽度、颜色、样式）
（1）边框样式
dotted （点线） dashed （虚线） solid （实线） double （双线）groove （槽线）
（2）边框圆角
border-radius：5px 设置四个角为圆角边框（px大小可自拟）
border-top-left-radius设置左上为圆角边框
外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置外边距。用法和padding
类似，同样也提供了四个方向的 。
如图，盒子被居中放置：
注：浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设
置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。如下操作：
以上就是web前端有关css样式表语言的内容了，通过这篇文章，相信一些前端小白就已经可以自行编写一些小网页了！当然，最后的盒子模型部分还牵扯到了一些有关文档流，以及解决多个盒子排列时引发的一些异常情况要用到的定位方法，由于篇幅原因，这里不过多赘述。详情请移步至我的下一篇博客，会对此部分内容进行详细说明！
网页制作css 第3篇
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
语法：
参数：
none : 无背景图（默认的） url : 使用绝对或相对地址指定背景图像
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
小技巧： 我们提倡 背景图片后面的地址，url不要加引号。
语法：
参数：
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺 设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
语法：
参数：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 position : top | center | bottom | left | center | right
说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：
实际工作用的最多的，就是背景图片居中对齐了。
语法：
参数：
scroll : 背景图像是随对象内容滚动 fixed : 背景图像固定
说明： 设置或检索背景图像是随对象内容滚动还是固定的。
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
CSS3支持背景半透明的写法语法格式是:
最后一个参数是alpha 透明度 取值范围 0~1之间
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
同样， 可以给 文字和边框透明 都是 rgba 的格式来写。
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
以逗号分隔可以设置多背景，可用于自适应布局
网页制作css 第4篇
所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
鼠标放我身上查看效果哦：
尽量不要用hand 因为 火狐不支持 pointer ie6以上都支持的尽量用
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是 ： outline: 0;
resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。
右下角可以拖拽：
右下角不可以拖拽：
以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;
以前我们还讲过让文字居中对齐，是 text-align: center;
但是我们从来没有讲过有垂直居中的属性， 我们的妈妈一直很担心我们的垂直居中怎么做。
vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气
设置或检索对象内容的垂直对其方式。
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片和表单等。
所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。
有个很重要特性你要记住： 如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。 这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决的方法就是：
给img 添加 display：block; 转换为块级元素就不会存在问题了。
图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为京东网站中的一个精灵图。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。
大部分情况下，精灵图都是网页美工做。
结束语： 小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。
图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的_http请求_，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新_宠幸_啦。。 这就是字体图标（iconfont).
可以做出跟图片一样可以做的事情,改变透明度、旋转度，等… 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等… 本身体积更小，但携带的信息并没有削减。 几乎支持所有的浏览器 移动端设备必备良药…
总体来说，字体图标按照如下流程：
假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作， 他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标， 比如下图：
之后保存为svg格式，然后给我们前端人员就好了。
其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。
当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。
icomoon字库
IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
阿里icon font字库
这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！
fontello
在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。
Font-Awesome
这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。
Glyphicon Halflings
这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。
Icons8
提供PNG免费下载，像素大能到500PX
刚才上传完毕， 网站会给我们把UI做的svg图片转换为我们的字体格式， 然后下载下来就好了
当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了， 直接到刚才的网站上找喜欢的下载使用吧。
最后一步，是最重要的一步了， 就是字体文件已经有了，我们需要引入到我们页面中。
制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。
核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
总结：
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多
2、各属性详解
a、flex-direction调整主轴方向（默认为水平方向）
b、justify-content调整主轴对齐
c、align-items调整侧轴对齐
d、flex-wrap控制是否换行
e、align-content堆栈（由flex-wrap产生的独立行）对齐
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
h、order控制子项目的排列顺序，正序方式排序，从小到大
此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式:
运动曲线示意图：
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
变形转换 transform
translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；
让定位的盒子水平居中
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
scale()的取值默认的值为1，当值设置为到之间的任何值，作用使一个元素缩小；而任何大于或等于的值，作用是让元素放大
可以对元素进行旋转，正值为顺时针，负值为逆时针；
案例旋转扑克牌
倾斜 skew(deg, deg)
该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
可以调整元素转换的原点
案例： 菱形照片 三角盒子
左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图 CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图
就是沿着 x 立体旋转.
沿着y轴进行旋转
沿着z轴进行旋转
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective有两种写法
理解透视距离原理：
仅水平方向移动**（X轴移动）
主要目的实现移动效果
仅垂直方向移动（Y轴移动）
transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。
flat：所有子元素在 2D 平面呈现
preserve-3d：保留3D空间
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。
一般而言，该声明应用在3D变换的兄弟元素们的父元素上。
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r
网页制作css 第5篇
行内样式表,又有人称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置元素
样式，其基本语法格式如下：
<标签名 style=_属性1:属性值1; 属性2:属性值2; 属性3:属性值3;_> 内容 标签名>
我是一个段落
效果如下：
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
我是一个段落
其效果同上，这里需要注意：中的
标签修饰对
标签内容都有效
外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
（其中，href中填写引入的样式文件）
网页制作css 第6篇
提示:要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%。
提示:如果你想了解更多 @media 的规则可以查看 CSS3 多媒体查询。
提示: 现在更高级的方式是使用 CSS Flexbox 来创建列的布局，但 Internet Explorer 10 及更早的版本不支持该方式， IE6-10 可以使用浮动方式。CSS Flexbox 的更多内容可以查看 CSS3 弹性盒子(Flex Box)。
不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。
网页制作css 第7篇
网站制作基础：HTML、CSS、JavaScript
HTML基础
HTML（HyperText Markup Language）是构建网页的基础。无论是简单的文本展示，还是复杂的网页结构，HTML都扮演着至关重要的角色。学习HTML的第一步是理解其基本语法和标签。HTML标签如等是构建网页的基本元素。掌握这些标签的用法和属性，是你迈向网站制作的第一步。
CSS基础
CSS（Cascading Style Sheets）用于控制网页的外观和布局。通过CSS，你可以为HTML元素添加样式，使网页更加美观和用户友好。学习CSS的关键在于理解其选择器、属性和值。你需要掌握如何使用类选择器、ID选择器和属性选择器来精确地控制网页元素的样式。CSS的盒模型、浮动和定位等概念也是必须掌握的内容。
JavaScript基础
JavaScript是网页互动的灵魂。通过JavaScript，你可以实现网页的动态效果，如表单验证、动画、数据交互等。学习JavaScript的第一步是掌握其基本语法和数据类型，如变量、函数、数组和对象。接下来，你需要了解DOM（Document Object Model）操作，通过JavaScript控制和操作HTML元素，实现动态网页效果。
用户体验设计及UI/UX基础
用户体验的核心
用户体验（User Experience, UX）是网站设计中最关键的部分之一。一个优秀的用户体验不仅能够提高用户满意度，还能增加网站的留存率。学习UX设计的第一步是理解用户需求，通过用户调研和数据分析，了解用户的行为和偏好。接下来，你需要掌握信息架构和流程设计，确保网站的内容结构清晰，用户能够快速找到所需信息。
UI设计基础
用户界面（User Interface, UI）设计是用户体验设计的具体实现。UI设计不仅涉及到视觉元素的设计，如颜色、字体、图标等，还包括交互设计，如按钮、表单、导航等。学习UI设计的关键在于掌握设计原则和工具。你需要了解色彩理论、排版规则和设计工具如Photoshop、Sketch等的使用。响应式设计也是UI设计的重要内容，确保网站在不同设备上都能有良好的显示效果。
可用性测试
可用性测试是检验用户体验设计效果的重要手段。通过可用性测试，你可以发现网站设计中的问题和不足，从而进行优化和改进。学习可用性测试的关键在于掌握测试方法和工具。你需要了解如何设计测试任务、选择测试用户、记录测试结果和分析测试数据。通过不断的测试和优化，提升网站的用户体验。
后端开发：服务器、数据库及API
服务器基础
服务器是网站运行的基础。学习服务器的第一步是了解服务器的基本概念和类型，如Web服务器、数据库服务器、文件服务器等。接下来，你需要掌握服务器的配置和管理，如安装和配置Web服务器（如Apache、Nginx）、设置虚拟主机、配置SSL证书等。了解服务器的安全性和性能优化也是必须掌握的内容。
数据库管理
数据库是网站数据存储和管理的重要工具。学习数据库的关键在于掌握数据库的基本概念和操作，如表、字段、记录、查询等。你需要了解如何设计数据库结构、编写SQL查询语句、进行数据的增删改查操作。了解数据库的性能优化和安全性管理也是必须掌握的内容。
API开发
API（Application Programming Interface）是实现前后端数据交互的桥梁。学习API开发的关键在于掌握API的基本概念和设计原则，如RESTful API、GraphQL等。你需要了解如何设计和实现API接口、处理请求和响应、进行数据验证和错误处理等。了解API的安全性和性能优化也是必须掌握的内容。
SEO优化：提升网站流量与排名
关键词研究
关键词是SEO优化的核心。通过关键词研究，你可以了解用户的搜索需求，从而优化网站内容，提高搜索引擎排名。学习关键词研究的关键在于掌握关键词工具的使用，如Google Keyword Planner、Ahrefs、SEMrush等。你需要了解如何选择和分析关键词、确定关键词的搜索量和竞争度、制定关键词策略等。
内容优化
网页制作css 第8篇
层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。
注意：
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
比如的例子：
注意： 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
总结优先级：
网页制作css 第9篇
要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。
语法：标签名{} 通过标签选择器可以选择页面中的所有指定标签
语法：.class属性值{} 通过标签的class属性值选中一组标签
我是一个段落
我也是一个段落
语法：#id属性值 {} 通过标签的id属性值选中唯一的一个标签
我是一个段落
我也是一个段落
语法：*{} 可以用来选中页面中的所有的标签
我是一个段落
我也是一个段落
网页制作css 第10篇
我是一个段落
当鼠标没接触到
标签时： 鼠标移入时：
opacity 属性设置标签的不透明级别 值为1。
规定不透明度：从 （完全透明）到 （完全不透明）。
语法：opacity：; 冒号后面填写0-1之间的数字即可
● 什么是块级标签？
块级标签：无论内容多少 都会独自占据一行的。
例如
● 什么是行级标签？
行级标签：只占自身大小的标签，不会占一行。
例如、、
● 什么是行级块标签？
例如 等
那么我们能否对不同级别标签进行转换呢？答案是肯定的！
通过display样式可以修改标签的类型。 可选值： block ：设置标签为块标签 inline ：设置标签为行级标签 inline-block ：设置标签为行级块标签 none ：隐藏标签（标签将在页面中完全消失）
我是一个段落
没进行display修改前：（可以清晰的观察到，独占一行）
进行修饰后：（只占自身大小）