整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS:cascading style sheets层叠样式表 语法:选择符{属性:属性值;属性:属性值;} 外部样式表链接方式 或者 @inport url(路径名) 不常用，没那个好 内联样式表优先级最高 *{margin: 0 ;padding:0;} li{list-style:none;} 去掉无序列表的列表符号 a{text-decoration:none;}去掉超链接下划线，写导航的时候会用到，所以提前写 包含选择器选择符1 选择符2{属性:属性值;} 伪类选择器a:link{属性:属性值;}超链接的初始状态 a:visited{属性:属性值;}超链接被访问后的状态 a:hover{属性:属性值;}鼠标划过超链接时的状态 a:active{属性:属性值;}鼠标按下时超链接的状态
元素选择符权重0001 class选择符权重0010 id选择符权重0100 继承样式权重0000 包含选择符权重为包含选择符权重之和
font属性简写:字号/行高 字体 加粗{font-weight:bolder/bold/normal/100-900;} 倾斜{font-style:normal/italic/obique;} 文本修饰{text-decoration:none/underline/overline/line-through}下划线/上划线/删除线 首行缩进text-indent可以取负值，只对第一行起作用 text-indent:-999px; color:transparent; fong-size:0; 三种方法都可以设置文字不显示/透明
定义列表符号样式list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none去掉列表符号 使用图片作为列表符号：list-style-image:url(所使用图片的路径及全称); 定义列表符号位置：list-style-position:outside/inside; list-style:none;简写 border:5px solid #000;现在很常用 dashed虚线 dotted点状线double双线none没有边框 background: url(路径) no-repeat right top; CSS继承 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text- decoration、text-transform. 块状元素可继承：text-indent和text-align。 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。 表格元素可继承：border-collapse。 ? 版权符号 << >> 溢出（设置滚动条） overflow:visible/hidden/scroll/auto/inherit; visible:默认值，内容不会被修剪，会成现在元素框之外； hidden：内容会被修剪，并且其余内容是不可见的； scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容; auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容; inherit：规定应该从父元素继承overflow属性的值
white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白；
文本溢出:text-overflow:clip/ellipsis clip：不显示省略号（…），而是简单的裁切; ellipsis：当对象内文本溢出时，显示省略标记； 前提是：定义 1、容器宽度：width：value； 2、强制文本在一行内显示:white-space：nowrap; 3、溢出内容为隐藏：overflow：hidden； 4、溢出文本显示省略号：text-overflow：ellipsis;
元素类型分类：块状元素，内联元素，可变元素
常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等； 默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
常见的内联元素如：a,span,i,em,strong,b,del,br,img,input,a,u等
display属性与属性值 (18个属性值) 属性值：block/inline/inline-block/none/list-item/table-header-group/table-footer-group/table-cell/table….
1)Block块状显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。 2)inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示。 3)当元素设置了float属性后，就相当于给该元素加了display:block;属性； 4)Inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。（只有这一个元素类型支持vertical-align属性）img,input。 5)none 此元素不会被显示。 6)list-item:将元素转换成列表。li的默认类型
大部分块元素display属性值默认为block，其中li默认值为list-item。 大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block。
———-定位属性 position：static /absolute/relative/fixed固定定位
absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的祖籍元素进行绝对定位；如果不存在这样的祖籍对象，则依据浏览器窗口，而其层叠通过z-index属性定义
relative ：相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）的属性在正常文档流中偏移位置(相对自己原来的位置偏移)。 包含块 是给绝对定位元素的父元素添加声明position：relative 透明属性 IE8以下浏览器写法：filter:alpha(opacity=value);取值范围 1-100 兼容其他浏览器写法：opacity:.value;(value的取值范围0-1,0.1,0.2,0.3—–0.9) css3新增写法：background:rgba(255,0,0,0.5)
锚点的作用：在同一页面内的不同位置进行跳转 <标记 id=”命名锚记名”>
网络上看到的每个网站都是使用HTML构建的，因为它具有许多有用而强大的功能，作为开发人员，你可以从中受益以创建网页。话虽如此，HTML还具有可以附加到元素或标签的属性，以便向HTML元素添加某些交互功能。
1<html></html>表示文档的开始和结束
2<head></head>表示文档头的开始和结束
3<title></title>文档的标题开始及结束
4<body></body>文档正文的开始及结束
1backgroundcolor背景颜色
2background背景图片
3text正文文字的颜色
4link链接文字的颜色
5alink正被单击链接文字的颜色
6vlink已被单击过链接文字的颜色
7leftmargin网页左边空白
8topmargin网页上边空白
1<ahref=”URL”target=”打开方式”>文字或图片</a>
2“URL”代表网址或本站某页面，
3“打开方式”两个基本选项：1“_blank”在新窗口中打开2“_self在本窗口中打开”
1字号<fontsize=n>n={1——7}
2字体<fontface=X>X=隶书、黑体、楷体_gb2312、仿宋_gb2312、Arial等
3颜色<fontcolor=X>
4文字特殊效果<b></>
5<i>斜体</i>
6<u>下划线</u>
7<s>删除线</s>
8<big>这是大号字体</big>
9<small>这是小号字体</small>
1插入图象<imgsrc=”url”>url=绝对路径或相对路径及文件名
2图像超链接<ahref=”URL”><imgsrc=”url”></a>
3图象与文字对齐<imgsrc=”url”align=”Y”>Y=top(顶部),middle(中部),botton(底部)
4图象与周围文字间距<imgsrc=”url”vspace(垂直)=”像素”hspace（水平）=”像素>
5图象大小及边框宽度<imgsrc=”url”width=”像素”height=“像素”border=”像素”>
1表格
<table>...</table>:定义表格<表格的开始和结束>
<tr>...</tr>定义表行（每一行都需定义）
<th>...</th>定义表头(一般指第一行，因为很多表格没有表头，所以其常常省略)
<td>...</td>定义表元（表格的具体数据）
2跨行列表格
跨多列的表元<thcolspan=#>或<tdcolspan=#>
跨多行的表元<throwspan=#>或<tdrowspan=#>
3表格外观
设置表格边框：<tableborder=#>
设置表格尺寸：<tablewidth=#height=#>
4单元格间距及内容间距
单元格间距<tablecellspacing=#>
内容与单元格间距<tablecellpadding=#>
5表格边框色<tablebordercolor=#>
开课吧广场-人才学习交流平台
css grid 入门：看这一篇就够了
---
**开篇：拥抱CSS Grid，重塑网页布局**
CSS Grid Layout（简称CSS Grid）作为一项革命性的网页布局技术，彻底改变了我们构建网页布局的方式。它为我们提供了精确的二维布局系统，使得复杂的网页布局变得更加容易和灵活。不论你是初学者还是经验丰富的开发者，只要掌握了CSS Grid，就能轻松应对各种复杂的网页布局需求。接下来，本文将带领你从零开始，全面掌握CSS Grid的入门知识，让你在实践中感受其魅力。
---
**【第一部分】初识CSS Grid：基本概念与术语**
**标题：网格容器(Grid Container)与网格项目(Grid Item)**
- **网格容器**：通过在父元素上设置`display: grid;`，将其转变为一个网格容器，以便对其子元素进行网格布局。
```css
.container {
display: grid;
/* 更多grid属性配置 */
}
```
- **网格项目**：网格容器的直接子元素会被视为网格项目，它们会在网格容器内按照指定规则排列。
```html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<!-- 更多网格项目 -->
</div>
```
---
**【第二部分】CSS Grid核心属性解析**
**标题：网格线(Grid Lines)与网格单元格(Grid Cells)**
1. **网格线**：定义网格布局的行和列，可以通过`grid-template-columns`和`grid-template-rows`属性设定。
```css
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 定义三列 */
grid-template-rows: 50px 100px; /* 定义两行 */
}
```
2. **网格单元格**：由网格线交叉形成的区域，网格项目可以放置在其中。
---
**【第三部分】网格项目定位与布局**
**标题：grid-column 和 grid-row 属性**
- **网格线编号**：通过网格线名称或编号来定位网格项目。
```css
.item1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
```
或者使用简写形式：
```css
.item1 {
grid-area: 1 / 1 / 3 / 3;
}
```
- **auto-fit/auto-fill**：自动填充整个网格容器的剩余空间。
```css
.container {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
```
---
**【第四部分】神奇的网格模板区域(Grid Template Areas)**
**标题：通过模板区域布局网格项目**
```css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px 100px;
grid-template-areas:
"header header header"
"main main sidebar";
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
```
---
**【第五部分】动态网格与响应式布局**
**标题：媒体查询与CSS Grid的结合**
```css
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"main"
"sidebar";
}
}
```
通过媒体查询，可以在不同屏幕尺寸下应用不同的网格布局。
---
**结语：**
CSS Grid的出现，无疑为前端开发者带来了前所未有的布局自由度和灵活性。通过深入理解和熟练掌握CSS Grid，你将能够更加轻松、高效地设计和实现各种复杂的网页布局。本文只是CSS Grid世界的冰山一角，但已足够你入门并开始实践。继续深入探索，你会发现CSS Grid的无穷魅力和无限可能。别忘了，实践是最好的老师，动手试试吧，用CSS Grid改变你的网页布局世界！
*请认真填写需求信息，我们会在24小时内与您取得联系。
