建设网站内容的策划书,微信h5网站模板下载,vue做直播网站,网站建设常用代码文章目录 1.HTML核心基础知识1.1.编写第一个HTML网页1.2.超链接a标签和路径1.3.图像img标签的用法1.4.表格table标签用法1.5.列表ul、ol、dl标签用法1.6.表单form标签用法1.7.区块标签和行内标签用法 2.CSS核心基础知识2.1.CSS标签选择器viewport布局2.2.CSS样式的几种写法2.3.… 文章目录 1.HTML核心基础知识1.1.编写第一个HTML网页1.2.超链接a标签和路径1.3.图像img标签的用法1.4.表格table标签用法1.5.列表ul、ol、dl标签用法1.6.表单form标签用法1.7.区块标签和行内标签用法 2.CSS核心基础知识2.1.CSS标签选择器viewport布局2.2.CSS样式的几种写法2.3.CSS常⻅选择器的使用2.4.CSS特殊选择器的使用2.5.CSS基本概念之盒⼦模型2.6.CSS中的常⽤属性 3.CSS进阶之布局定位3.1.CSS中布局前置知识3.2.CSS中的float布局3.3.CSS中的flex布局3.4.CSS中的position定位3.5.CSS之三栏布局实现3.6.CSS之⽔平垂直居中3.7.CSS⾼级知识点之BFC 4.CSS3常用属性讲解4.1. CSS3边框样式4.2.CSS3渐变样式4.3.CSS3文本效果4.4.CSS3网格布局 1.HTML核心基础知识
1.1.编写第一个HTML网页
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyspan我是lx我喜欢java/spanbr/span我喜欢唱跳rap篮球/spanbr/
/body
/html快捷键生成html模板
!回车标签含义
标签名定义说明HTML标签页面中最大的标签根标签文档头部注意在head标签中我们必须设置的标签是title文档标题让页面拥有一个属于自己的标题文档主体元素包含文档的所有内容页面内容
1.2.超链接a标签和路径
1a标签用法
a是HTML语言标签。a标签定义超链接用于从一个页面链接到另一个页面。a元素最重要的属性是href属性它指定链接的目标。
跳转a hrefxxx链接文本/a
锚点a href#xxx/a!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya hrefhttps://www.baidu.com百度/a
/body
/html2路径
根据资源的类型判断⼀般站外资源⽤绝对路径站内资源⽤相对路径绝对路径从磁盘开始一直到这个文件的整个路径相对路径相对当前这个文件的路径 ./ 代表当前⽬录…/ 代表的上⼀级⽬录
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya hrefD:\vscodeProject\1.HTML核心基础知识\1.编写第一个html网页.html绝对路径/aa href./1.编写第一个html网页.html相对路径/a
/body
/html它们都可以跳到1的页面。
1.3.图像img标签的用法
常⽤属性 src 图片路径 alt 图⽚加载失败或加载时显示的⽂字 title 悬浮在图片上面显示的文字 图片的来源 本地图片稳定线上图片图片容易丢失Base64图片 优点小图片占用内存小不请求服务器降低服务器资源与访问缺点大图片增大了数据库服务器的压力
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg src./1.png alt 图片显示失败 title图片/
/body
/html将图片放在同级的目录下 1.4.表格table标签用法
表格的基本结构 由⼀⾏或者多⾏的单元格数据组成
姓名性别年龄张三男18李四女18 在HTML中怎么表示 tableHTML 表格 tr元素定义表格行 th数据中的表头单元格 td表示单元格 table元素⾥常⽤的属性 border(边框)cellspacing(规定单元格之间的空白)cellpadding(规定单元边沿与其内容之间的空白)colspan(⽤于合并列)rowspan(⽤于合并⾏) 先初始化一个表格
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytabletrth姓名/thth性别/thth年龄/th/trtrtd李祥/tdtd男/tdtd18/td/trtrtd张三/tdtd男/tdtd18/td/tr/table
/body
/html设置一个边框 table border1trth姓名/thth性别/thth年龄/th/trtrtd李祥/tdtd男/tdtd18/td/trtrtd张三/tdtd男/tdtd18/td/tr/table规定单元格之间的空白 cellspacing table border1 cellspacing 0trth姓名/thth性别/thth年龄/th/trtrtd李祥/tdtd男/tdtd18/td/trtrtd张三/tdtd男/tdtd18/td/tr/table规定单元边沿与其内容之间的空白 cellpadding table border1 cellspacing 0 cellpadding 7trth姓名/thth性别/thth年龄/th/trtrtd李祥/tdtd男/tdtd18/td/trtrtd张三/tdtd男/tdtd18/td/tr/table合并列colspan table border1 cellspacing 0 cellpadding 7trth colspan 2姓名/thth年龄/th/trtrtd李祥/tdtd男/tdtd18/td/trtrtd张三/tdtd男/tdtd18/td/tr/table合并⾏rowspan table border1 cellspacing 0 cellpadding 7trth姓名/thth性别/thth年龄/th/trtrtd rowspan 2李祥/tdtd男/tdtd18/td/trtrtd男/tdtd18/td/tr/table1.5.列表ul、ol、dl标签用法
有序列表
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyolli手机数码/lili生活用品/lili水果生鲜/lili绝味零食/li/ol
/body
/html无序列表
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyulli手机数码/lili生活用品/lili水果生鲜/lili绝味零食/li/ul
/body
/html自定义列表
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydldt手机数码/dtddiphone14/ddddmacbook pro/ddddhuawei 14/dddt生活用品/dtdd米/dddd醋/dddd西红柿/dd/dl
/body
/html1.6.表单form标签用法
核⼼元素input (核⼼元素)
bodyforminput typetext/form
/bodylabel (提⾼交互体验的)
bodyforminput typecheckbox id isagreelabel forisagree同意/label/form
/bodyselect(下拉框)
bodyformselectoption value1男/optionoption value2女/option/select/form
/bodytextarea(⽂本域)
bodyformtextarea文本域/textarea/form
/bodybutton(按钮)
bodyformbutton提交/button/form
/bodyform(表单元素提交每个表单项内容)
1.7.区块标签和行内标签用法 div元素 div 元素是块级元素它可用于组合其他 HTML 元素的容器。div 元素没有特定的含义。除此之外由于它属于块级元素浏览器会在其前后显示折行如果与 CSS 一同使用div 元素可用于对大的内容块设置样式属性。div 元素的另一个常见的用途是文档布局 span元素 span 元素是行内元素可用作文本的容器span 元素也没有特定的含义。当与 CSS 一同使用时span 元素可用于为部分文本设置样式属性。 块级元素 块级元素在浏览器显示时通常会以新行来开始和结束 h1, p, ul, table,div行内元素 行内元素在显示时通常不会以新行开始 b, td, a, img,spanstyle.lixiang{color: blue;}.zhangsan{color: brown;}.wangwu{color: chartreuse;}
/style
bodydivspan classlixiang李祥/span/divdivspan classzhangsan张三/span/divdivspan classwangwu王五/span/div
/body2.CSS核心基础知识
2.1.CSS标签选择器viewport布局
1什么是标签选择器
标签选择器主要针对的是页面中某个标签中的样式设置它的作用范围是这个页面内所有写在该标签内的内容标签选择器可以定义多个标签的样式。语法 style标签名{属性:属性值;}/style案例
stylediv{width: 200px;height: 200px;background-color: burlywood;}/style
bodydiv/div
/body2什么是viewport布局
手机浏览器是把页面放在一个虚拟的“窗口”viewport中通常这个虚拟的“窗口”viewport比屏幕宽。这样就不用把每个网页挤到很小的窗口中也不会破坏没有针对手机浏览器优化的网页的布局用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了viewport 这个 meta tag让网页开发者来控制 viewport 的大小和缩放其他手机浏览器也基本支持。 meta nameviewport contentwidthdevice-width, initial-scale1.02.2.CSS样式的几种写法 写法 内部样式表 写在元素的style标签⾥⾯的 stylediv{width: 200px;height: 200px;background-color: burlywood;}/style
bodydiv/div
/body内联样式表 写在styles属性⾥⾯的 bodydiv stylewidth: 100px; height: 100px; background-color: azure;/div
/body外部样式表 link标签将css资源引⼊ headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./css/index.css
/head
style
/style
bodydiv/div
/body
/htmldiv{width: 200px;height: 200px;background-color: burlywood;
}为什么选择外部样式表 解决⻚⾯当中样式重复的问题代码分离利于代码维护和阅读浏览器会缓存起来提⾼⻚⾯响应速度变快了
2.3.CSS常⻅选择器的使用
1元素标签选择器
最常见的 CSS 选择器是元素选择器。换句话说文档的元素就是最基本的选择器。如果设置 HTML 的样式选择器通常将是某个 HTML 元素比如 p、h1、em、a甚至可以是 html 本身。html {color:black;} h1 {color:blue;} h2 {color:silver;} 可以将某个样式从一个元素切换到另一个元素。
div{width: 200px;height: 200px;background-color: burlywood;
}2组合选择器
页面元素比较复杂存在多个嵌套。为了更加灵活选择页面中的元素CSS中还提供了组合选择器。组合选择器就是将多个基本选择器通过一定的规则连接起来组成一个复杂选择器。
h1,p
{color:red;
}3类选择器
结合标签选择器
h1.lixiang
{color:red;
}多类选择器两个类的样式全部生效
style.lixiang{color:red;}.background{background-color: blueviolet;}
/style
bodydiv classlixiang background/div
/body链接多个类选择器
.xiaodi.background
{color:red; background-color:black
}4id选择器
声明#important{} 属性idimportant注意一个id选择器的属性值在html文档中只能出现一次避免写js获取id时出现混淆style#lixiang{color: greenyellow;background-color: cornsilk;}
/style
bodydiv idlixiang李祥/div
/body5通配符选择器
通配符选择器使用*来定义表示选区页面中所有的标签。优先级最低一般是在页面初始化的时候才使用或者某些特殊情况下例如清除页面内外边距。 *{margin: 0;padding: 0;}6派⽣选择器
后代选择器h1下的p标签才会变成红色
styleh1 p{color: red;}/style
bodyh1p张三/p/h1p李祥/p
/body⼦元素选择器选择h1下的p标签
styleh1p{color: gray;}/style
bodyh1p张三/p/h1
/body相邻选择器兄弟
h1p{background-color:pink;
}2.4.CSS特殊选择器的使用
不改变任何DOM内容。只是插入了一些修饰类的元素
1:first-child {} 第一项
styleli:first-child{color: red;}/style
bodyulli李祥/lili张三/lili王五/li/ul
/body2:last-child {} 最后一项
styleli:last-child{color: red;}/style
bodyulli李祥/lili张三/lili王五/li/ul
/body3:nth-child(n) {} 第n项
styleli:nth-child(2){color: red;}/style
bodyulli李祥/lili张三/lili王五/li/ul
/body4:nth-child(2n1){} 奇数项
styleli:nth-child(2n1){color: red;}/style
bodyulli李祥/lili张三/lili王五/li/ul
/body5:nth-child(2n) {} 偶数项
styleli:nth-child(2n){color: red;}/style
bodyulli李祥/lili张三/lili王五/li/ul
/body6:not() 否定伪类 除了第n项
styleli:not(nth-child(2n)){color: red;}/style
bodyulli李祥/lili张三/lili王五/li/ul
/body7::first-letter 第一个 stylep::first-letter{color: red;}/stylebodyp我是李祥。br/我来自中国。br/我喜欢编程。/p/body8::first-line 第一行 只能用于块级元素
stylep::first-line{color: red;}/stylebodyp我是李祥。br/我来自中国。br/我喜欢编程。/p/body9::before 在开始位置加入内容 stylep::before{content: 开头;color: red;}/stylebodyp我是李祥。br/我来自中国。br/我喜欢编程。/p/body10::after 在结束位置加入内容
stylep::after{content: 结尾;color: red;}/stylebodyp我是李祥。br/我来自中国。br/我喜欢编程。/p/body2.5.CSS基本概念之盒⼦模型
1什么是盒⼦模型
在CSS⾥⾯所有的HTML元素你都可以看成是⼀个盒⼦
2盒⼦的内容(content)
元素的大小
3盒⼦的内边距(padding)
padding-left:10px //左边距10pxpadding-top:10px //上边距10pxpadding-right:10px //右边距10pxpadding-bottom:10px //下边距10%相对于父级元素的widthpadding:10px 10px 10px 10% //等同于上面四行 百分比是对应父标签的大小padding:5px 10px //上下边距5px、左右边距10pxpadding:5px 10px 20px //上边距 左右边距 下边距padding:10px //上下左右边距10px4盒⼦的边框(border)
border-left:3px solid #000 //左边距10px dotted dashedborder-top:3px solid #000 //上边距10pxborder-right:3px solid #000 //右边距10pxborder-bottom:3px solid #000 //下边距10%相对于父级元素的widthborder:3px solid #000 //等同于上面四行5盒⼦的外边距(margin)
margin-left:10px //左边距10pxmargin-top:10px //上边距10pxmargin-right:10px //右边距10pxmargin-bottom:10% //下边距10%相对于父级元素的widthmargin:10px 10px 10px 10% //等同于上面四行margin:5px 10px //上下边距5px、左右边距10pxmargin:10px //上下左右边距10px6盒子怪异模型
W3C标准的盒子模型标准盒模型 )
boxWidthcontentWidthIE标准的盒子模型怪异盒模型
box-sizing:border-box //声明
boxWidthcontentWidthborderpadding7外边距折叠 上下两个兄弟盒子的margin都为正取大都为负取小一正一负相加 父子元素盒子的margin假设没有内边距或边框把外边距分隔开也会合并 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
解决父子边距合并父元素{overflow:auto;}父元素::before{display: table;content: ;}2.6.CSS中的常⽤属性
1盒⼦的位置和⼤⼩
尺寸
宽度 width: ⻓度|百分⽐|auto
⾼度 height
边界 margin padding 上右下左|上下左右布局
浮动float
定位position
弹性布局flex
盒⼦内容超出部分overflowhidden | scroll | auto2外观⻛格
background-image属性设置一个或多个背景图像
background-repeat属性设置如何平铺背景图像
background-size属性规定背景图像的尺寸
background-position属性设置背景图像的起始位置
background-color属性设置元素的背景颜色3⽂字属性
字体⼤⼩font-size
是否加粗font-weight
是不是斜体font-style
字体是什么font-family3.CSS进阶之布局定位
3.1.CSS中布局前置知识
1正常元素怎么布局
默认⼀个块级元素的内容宽度就是其⽗元素的100%他的⾼度和其内容⾼度⼀致⾏内元素它的宽度和⾼度都是根据内容决定的(⽆法设置⾏内元素的宽⾼) 可设置display属性定义元素的类型(css3定义布局)
例如span标签,行级元素
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylespan{width: 20px;height: 20px;}/style
/head
bodyspan我叫李祥。/span我是一名IT工程师。
/body即使我们给他设置了高宽的大小也没有显示。 想要让span标签变成块级元素需设置display属性。 span{width: 100px;height: 100px;display: block;}2元素之间⼜是如何相互影响的呢
正常的⽂档布局流 每个块级元素会在上个元素下⾯另起⼀⾏⾏内元素不会另起⼀⾏
3.2.CSS中的float布局
使用浮动
float: none; //默认值元素不浮动
float: left; //元素像左浮动
float: right; //元素像右浮动特点
浮动元素会脱离文档流不再占据文档流空间浮动元素彼此之间是从左往右排列宽度超过一行自动换行在浮动元素前面元素不浮动时浮动元素无法上移块级元素和行内元素浮动之后都变成行内块级元素浮动元素不会盖住文字可以设置文字环绕效果
清除浮动
clear:both;
content:;
display:block;1两个div让下方的div瓢到上方的右边
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.div1{width: 100px;height: 100px;background-color: blue;float: left;}.div2{width: 100px;height: 100px;background-color: brown;float: left;}/style
/head
bodydiv classdiv1/divdiv classdiv2/div
/body
/html2两个div让下方的div瓢到上方的右边
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.div1{width: 100px;height: 100px;background-color: blue;float: right;}.div2{width: 200px;height: 200px;background-color: brown;float: right;}/style
/head
bodydiv classdiv1/divdiv classdiv2/div
/body
/html3两个div实现图层叠加的效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.div1{width: 100px;height: 100px;background-color: blue;float: left;}.div2{width: 200px;height: 200px;background-color: brown;}/style
/head
bodydiv classdiv1/divdiv classdiv2/div
/body
/html3.3.CSS中的flex布局
W3C提出了一种新的方案—Flex布局可以简便、完整、响应式地实现各种页面布局。目前它已经得到了所有浏览器的支持这意味着现在就能很安全地使用这项功能。
Flex是Flexible Box的缩写意为”弹性布局”用来为盒状模型提供最大的灵活性。
测试代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.f{width: 400px;height: 400px;background-color: blanchedalmond;}.a1{width: 100px;height: 100px;background-color: gold;}.a2{width: 100px;height: 100px;background-color: gray;}.a3{width: 100px;height: 100px;background-color: aqua;}/style
/head
bodydiv classfdiv classa1/divdiv classa2/divdiv classa3/div/div
/body
/html父元素容器的属性
1flex-direction属性
flex-direction属性有4个值
row默认值主轴为水平方向起点在左端项目从左往右排列row-reverse主轴为水平方向起点在右端项目从右往左排列column主轴为垂直方向起点在上沿项目从上往下排列column-reverse主轴为垂直方向起点在下沿项目从下往上排列
/* 决定主轴的方向即项目的排列方向*/
flex-direction: row | row-reverse | column | column-reverse;2flex-wrap属性
默认情况下项目都排在一条线又称”轴线”上。flex-wrap属性定义如果一条轴线排不下如何换行。
flex-wrap属性有3个值
nowrap默认不换行列。wrap主轴为横向时从上到下换行。主轴为纵向时从左到右换列。wrap-reverse主轴为横向时从下到上换行。主轴为纵向时从右到左换列。
测试代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.f{width: 400px;height: 400px;background-color: blanchedalmond;display: flex;flex-direction:row;}.a1{width: 100px;height: 100px;background-color: gold;}.a2{width: 100px;height: 100px;background-color: gray;}.a3{width: 100px;height: 100px;background-color: aqua;}.a4{width: 100px;height: 100px;background-color: green;}.a5{width: 100px;height: 100px;background-color: red;}.a6{width: 100px;height: 100px;background-color: silver;}.a7{width: 100px;height: 100px;background-color: hotpink;}/style
/head
bodydiv classfdiv classa1a1/divdiv classa2a2/divdiv classa3a3/divdiv classa4a4/divdiv classa5a5/divdiv classa6a6/divdiv classa7a7/div/div
/body
/html/* 是否换行 */
flex-wrap: nowrap | wrap | wrap-reverse; 3flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式默认值为row nowrap。
flex-flow: flex-direction flex-wrap;4justify-content属性
ustify-content属性定义了项目在主轴上的对齐方式。
justify-content属性有5个值
flex-start默认与主轴的起点对齐。flex-end与主轴的终点对齐。center与主轴的中点对齐。space-between两端对齐主轴的起点与终点项目之间的间隔都相等。space-around每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。
/* 定义水平方向对齐方式 */
justify-content: flex-start | flex-end | center | space-between | space-around;5align-items属性
align-items属性定义项目在交叉轴上如何对齐。纵向交叉轴始终自上而下横向交叉轴始终自左而右。
align-items属性有5个值
flex-start交叉轴的起点对齐。flex-end交叉轴的终点对齐。center交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch默认值如果项目未设置高度或设为auto项目将占满整个容器的高度。
/* 定义垂直方向对齐方式 */
align-items: flex-start | flex-end | center | baseline | stretch;6align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线该属性不起作用。
align-content属性有6个值
flex-start与交叉轴的起点对齐。flex-end与交叉轴的终点对齐。center与交叉轴的中点对齐。space-between与交叉轴两端对齐轴线之间的间隔平均分布。space-around每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。stretch默认值主轴线占满整个交叉轴。
子元素容器的属性
1order属性
order属性定义项目的排列顺序。数值越小排列越靠前默认为0。
/* 定义子元素的排列顺序默认为0 */
order: -10 | -1 | 0 | 1 | 10;2flex-grow属性
flex-grow属性定义项目的放大比例默认为0即如果存在剩余空间也不放大。
/* 定义子元素的放大比例默认为0 */
flex-grow: 0 | 1 | 2 | 3;3flex-basis属性
flex-basis属性定义了在分配多余空间之前项目占据的主轴空间main size。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto即项目的本来大小。
/* 定义了在分配多余空间之前项目占据的主轴空间 */
flex-basis: length | auto;4flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写默认值为0 1 auto。后两个属性可选。
/* flex-grow, flex-shrink 和 flex-basis的简写 */
flex: 0 1 auto;选择float布局 or flex布局
推荐是使用flex布局flex布局易用布局全面。float的创建初衷只是为了达到文字环绕的效果另外需要清除浮动。现在几乎所有公司的产品使用场景都在浏览器ie9以上。
3.4.CSS中的position定位
1static:默认值静态定位表示没有定位元素会按照正常的位置显示此时 top、bottom、left 和 right 4 个定位属性也不会被应用。 2relative相对定位即相对于元素的正常位置进行定位您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量在此过程中不会对其它元素造成影响。
3absolute绝对定位相对于第一个非 static 定位的父级元素进行定位可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。 4fixed固定定位相对于浏览器的创建进行定位可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
5sticky粘性定位它是 relative 和 fixed 的结合体能够实线类似吸附的效果当滚动页面时它的效果与 relative 相同当要滚动到屏幕之外时则会自动变成 fixed 的效果。
测试代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.a1{width: 200px;height: 200px;background-color: red;}.a2{width: 200px;height: 200px;background-color: green;}.a3{width: 200px;height: 200px;background-color: blue;}.a22{width: 50px;height: 50px;background-color: black;}/style
/head
bodydiv classa1/divdiv classa2div classa22/div/divdiv classa3/div
/body
/html1让黑块跑到绿块的最右边
2设置一个悬浮的窗口
3粘性定位案例 3.5.CSS之三栏布局实现
1float实现
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}
.left {width: 200px;height: 300px;background-color: red;float: left;
}.right {width: 200px;height: 300px;background-color: blue;float: right;
}.center {height: 300px;background-color: green;margin: 0 200px;
}
/style
/headbodydiv classfatherdiv classleft/divdiv classright/divdiv classcenter/div/div
/body
/html2position实现
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}
.left {width: 200px;height: 300px;background-color: red;position: absolute;left: 0;
}.right {width: 200px;height: 300px;background-color: blue;position: absolute;right: 0;
}.center {height: 300px;background-color: green;margin: 0 200px;
}
/style
/headbodydiv classfatherdiv classleft/divdiv classright/divdiv classcenter/div/div
/body/html3flex实现
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}
.left {width: 200px;height: 300px;background-color: red;
}.right {width: 200px;height: 300px;background-color: blue;
}.center {flex: 1;height: 300px;background-color: green;
}
.father {display: flex;
}
/style
/headbodydiv classfatherdiv classleft/divdiv classcenter/divdiv classright/div/div
/body/html效果演示 3.6.CSS之⽔平垂直居中
1⾏内块元素
通过line-height、text-align: center实现。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headstylespan{width: 200px;height: 200px;background-color: cadetblue;display: inline-block;text-align: center;line-height: 200px;font-size: 30px;}
/stylebodyspan李祥/span
/body
/html通过display: flex、 justify-content: center、align-items: center实现。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headstylespan{width: 200px;height: 200px;background-color: cadetblue;display: flex;justify-content: center;align-items: center;font-size: 30px;}
/stylebodyspan李祥/span
/body
/html运行效果 2块级元素
position transform实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.a1 {width: 500px;height: 500px;background-color: cadetblue;position: relative;}.a2 {width: 100px;height: 100px;background-color: brown;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}/style
/head
bodydiv classa1div class a2/div/div
/body
/htmlflex实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.a1 {width: 500px;height: 500px;background-color: cadetblue;display: flex;justify-content: center;align-items: center;}.a2 {width: 100px;height: 100px;background-color: brown;}/style
/head
bodydiv classa1div class a2/div/div
/body
/html运行效果 3.7.CSS⾼级知识点之BFC 定义 块格式化上下⽂Block Formatting ContextBFC是Web⻚⾯的可视化CSS渲染的⼀部分是块盒⼦的布局过程发⽣的区域也是浮动元素与其他元素交互的区域。即形成了⼀块封闭的区域能检测到区域内脱离⽂档流的元素 特点 css中隐含的属性开启后不会被浮动的元素覆盖BFC元素可以包含浮动元素BFC元素的子元素和父元素外边距不重叠 开启都会有副作用 设置元素浮动 floatleft设置为行内块元素 displayinline-blockoverflowhidden推荐 作⽤ 清除浮动带来的影响解决边距塌陷问题(外边距折叠Margin collapsing也只会发⽣在属于同⼀BFC的块级元素之间)
4.CSS3常用属性讲解
4.1. CSS3边框样式
1圆角边框
border-radius:为元素添加圆角边框
四个值时border-radius:30px 20px 30px 10px;(每个数值表示的是圆角的半径值将每个角的水平和垂直半径都设置为对应的数值) 左上10px,右上20px右下30px,左下10px
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{width: 200px;height: 200px;margin: 0 auto;border: 3px solid red;border-radius: 10px;}
/style
bodydiv/div
/body
/html运行效果 2盒阴影 box-shadow 属性接受值最多由五个不同的部分组成。
box-shadow: offset-x offset-y blur spread color position;
对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }
不像其它的属性比如 border它们的接受值可以被拆分为一系列子属性box-shadow 属性没有子属性。这意味着记住这些组成部分的顺序更加重要尤其是那些长度值。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{width: 200px;height: 200px;margin: 0 auto;background-color: cadetblue;box-shadow: 2px 2px 10px black;}
/style
bodydiv/div
/body
/html3边界图片
border-image属性可以通过一些简单的规则将一副图像划分为 9 个单独的部分浏览器会自动使用相应的部分来替换边框的默认样式。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{width: 200px;height: 200px;margin: 0 auto;border: 20px solid red;border-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01iyYdem1GQd1yGgA0a_!!6000000000617-0-tps-2500-600.jpg);}
/style
bodydiv/div
/body
/html4.2.CSS3渐变样式
linear-gradient() 函数用于创建一个线性渐变的图像。
语法 background: linear-gradient(direction, color-stop1, color-stop2, …);
direction 用角度值指定渐变的方向。
方向值常用的是to topto bottomto leftto right,to right top等等。角度值常用的是0deg、180deg等等。
coler 使用关键字red、rgba等颜色值透明也可以设置。
stop 是这个颜色块终止位置换句话说就是这块颜色占的区域。
1从上到下渐变默认情况下
background: linear-gradient(#e66465, #9198e5);
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{width: 200px;height: 200px;margin: 0 auto;background: linear-gradient(#e66465, #9198e5);}
/style
bodydiv/div
/body
/html2从左到右渐变
background: linear-gradient(to right, red , yellow);
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{width: 200px;height: 200px;margin: 0 auto;background: linear-gradient(to right, red , yellow);}
/style
bodydiv/div
/body
/html3对角渐变
background: linear-gradient(to bottom right, red, yellow);
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{width: 200px;height: 200px;margin: 0 auto;background: linear-gradient(to bottom, red , yellow);}
/style
bodydiv/div
/body
/html4角度从上到下
background: linear-gradient(180deg, red, yellow);
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{width: 200px;height: 200px;margin: 0 auto;background: linear-gradient(180deg, red, yellow);}
/style
bodydiv/div
/body
/html5角度从左到右
background: linear-gradient(90deg, red, yellow);
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{width: 200px;height: 200px;margin: 0 auto;background: linear-gradient(90deg, red, yellow);}
/style
bodydiv/div
/body
/html6透明度设置
background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{width: 200px;height: 200px;margin: 0 auto;background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));}
/style
bodydiv/div
/body
/html7设置重复的渐变区域
background: repeating-linear-gradient(red, yellow 10%, green 20%);
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{width: 200px;height: 200px;margin: 0 auto;background: repeating-linear-gradient(red, yellow 10%, green 20%);}
/style
bodydiv/div
/body
/html4.3.CSS3文本效果
1文本阴影
text-shadow: 5px 5px 5px #FF0000;
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylespan{font-size: 50px;text-shadow: 5px 5px 5px #FF0000;}
/style
bodyspan李祥/span
/body
/html2文本溢出超过1行省略
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{width: 100px;height: 100px;font-size: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
/style
bodydiv晚风吹人醒万事藏于心/div
/body
/html3文本溢出超过2行省略
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{width: 100px;height: 100px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
/style
bodydiv晚风吹人醒万事藏于心/div
/body
/html4.4.CSS3网格布局
网格布局顾名思义就是像网一样有一个个格子一样的布局。在一个容器里面我们可以切割成很多行很多列形成一个个网格从而对这些网格进行规则性的排序使用达到我们复杂的页面布局效果。
Grid 布局与 Flex 布局有一定的相似性都可以指定容器内部多个项目的位置。但是它们也存在重大区别。
类似哔哩哔哩首页这种网格状的排版。 直接上代码采用Grid实现。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style.box{width: 800px;height: 400px;background-color: cadetblue;display: grid;grid-template-columns: 25% 25% 25% 25%;grid-template-rows: 50% 50%;}.child{width: 200px;height: 200px;background-color: darkgoldenrod;border: 1px solid yellow;box-sizing: border-box;}
/style
bodydiv classboxdiv classchild/divdiv classchild/divdiv classchild/divdiv classchild/divdiv classchild/divdiv classchild/divdiv classchild/divdiv classchild/div/div
/body
/html运行效果 OK至此HtmlCSS的知识点就整理完成啦觉得博主写的不错的记得给个三连哦
