深圳龙华网站开发,设计平台建设,营销策划方案的基本内容,太原线上教学1、 初识HTML
HTML:Hyper Text Markup Language(超文本标记语言) 。 超文本包括#xff1a;文字、图片、音频、视频、动画等。
1.1、W3C标准 1.2、HTML基本结构 示例#xff1a;
!-- DOCTYPE:告诉浏览器#xff0c;我们要使用什么规划#xff0c;这里是HTML --
…1、 初识HTML
HTML:Hyper Text Markup Language(超文本标记语言) 。 超文本包括文字、图片、音频、视频、动画等。
1.1、W3C标准 1.2、HTML基本结构 示例
!-- DOCTYPE:告诉浏览器我们要使用什么规划这里是HTML --
!DOCTYPE html
html langen!-- head标签代表网页头部 --
head!-- meta描述性标签它用来描述我们网站的一些信息 --!-- meta一般用来做SEO --meta charsetUTF-8meta namekeywords content我爱编程meta namedescrption content我爱这个世界meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidth , initial-scale1.0title小羊的网站/title
/head
bodyh1Hello world!/h1
/body
/html1.3、网页的基本标签 实例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title基本标签/title
/head
body!-- 标题标签 --h1一级标签/h1h2一级标签/h2h3一级标签/h3h4一级标签/h4h5一级标签/h5h6一级标签/h6!-- 段落标签 --p我喜欢王许哲/pp她很漂亮也很温柔。/p!-- 水平线标签 --
hr/!-- 换行标签 --王许哲很温柔/br我喜欢她。/br!-- 粗体斜体 --h1字体样式标签/h1粗体strongI love you/strong斜铁emI love you/embr/!-- 特殊符号 --空 格br/空nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;格br/gt;br/lt;br/copy;小羊版权所有
/html 1.4、图像标签 实例代码
!DOCTYPE html
html langenheadtitle图像标签/titlemeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefcss/style.css relstylesheet/headbody!-- img学习src : 图片地址必填相对地址推荐使用绝对地址../ 表示上一级目录alt :图片的名字必填--img src../html/resources/image/头像.jpg alt我的头像 title首页 width300 height200/body
/html1.5、链接标签 实例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title链接标签/title
/head
body!-- a标签href : 必填表示要跳转到那个页面target: 表示窗口在哪里打开 _blank 在新标签中打开_self 在当前页打开--a nametop头部/aa hrefhttps://www.baidu.com target_blank 百度首页/abr/a hrefhttps://www.baidu.com target_selfimg src../html/resources/image/百度.png alt我的头像 title首页/a!-- 锚链接 1.需要一个锚标记2.跳转到标记#name --br/a href#top回到头部/a!-- 功能性链接邮件链接mailto--br/a hrefmailto:1763108660qq.com点击联系我/a /body
/html1.6、行内元素和块元素 1.7、列表 实例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title列表学习/title
/head
body!-- 有序列表 --
olliGO/liliJAVA/liliPython/lili前端/liliC/C/li
/olhr/
!-- 无序列表 应用导航侧边栏
--
ulliGO/liliJAVA/liliPython/lili前端/liliC/C/li
/ul!-- 自定义列表
dl : 标签
dt : 列表名称
dd : 列表内容
公司网站底部
--
dldt学科/dtddJAVA/ddddPython/ddddLinux/ddddC/dddt位置/dtdd北京/dddd上海/dddd广州/dddd深圳/dd
/dl
/body
/html1.8、表格 实例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title表格/title
/head
body!-- 表格table
行 tr
列 td
--
table border1pxtr!-- colspan 跨列--td colspan51-1/td/trtr!-- rowspan 跨行 --td rowspan22-1/tdtd2-2/tdtd2-3/tdtd2-4/tdtd2-5/tdtd2-6/td/trtrtd3-1/tdtd3-2/tdtd3-3/td/tr
/table
/body
/html1.9、媒体元素 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title媒体元素/title
/head
body!-- 音频和视频 src 资源路径controls 控制条autoplay 自动播放--video src../html/resources/video/欧文.mp4 controls autoplay/videobr/audio src../html/resources/audio/bgm.mp3 controls autoplay/audio
/body
/html1.10、页面结构分析 实例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title网页结构/title
/head
bodyheaderh2网页头部/h2/headersectionh2网页主体/h2/sectionfooterh2网页脚部/h2/footer
/body
/html1.11、iframe内联框架 !DOCTYPE html
html langen
headmeta charsetUTF-8titleiframe/title
/head
body!-- iframe内联框架src :地址w-h :宽度和高度--iframe srchttps://wwww.baidu.com frameborder0 width200px height200px/iframe
/body
/html1.12、表单 表单元素格式 表单的应用 表单的初级验证 实例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title表单/title
/head
bodyh1注册/h1 !-- 表单formaction :表单提交的位置--form actionmyFirstNet.html methodpostp姓名input typetext nameusername value王许哲 readonly/pp密码input typepassword namepwd placeholder请输入密码 required/p!-- 单选框标签input typeradiovalue: 单选框的值name:表示组--p性别input typeradio valueboy namesex checked男input typeradio valuegirl namesex女/p!-- 多选框input typecheckbox--p爱好input typecheckbox valuesleep namehobby checked编程input typecheckbox valuesleep namehobby聊天input typecheckbox valuesleep namehobby旅游/p!-- 按钮typebutton 普通按钮typeimage 图片按钮typesubmit 提交按钮typereset 重置按钮--pinput typebutton namebtn1 value点击input typeimage src../html/resources/image/头像.jpg/p!-- 下拉框列表框 --p国家下拉框select name列表名称option valuechina中国/optionoption valueusa美国/optionoption valueeth selected瑞士/optionoption valueyingdu印度/option/select/p!-- 文本域--p反馈textarea nametextarea cols20 rows20文本内容/textarea/p!-- 文件域 --pinput typefile namefilesinput typebutton value上传 nameupload/p!-- 邮件验证 --p邮箱input typeemail nameemail/p!-- URL --pURLinput typeurl nameurl/p!-- 数字 --p商品数量input typenumber namenum max100 min0 step1/p!-- 滑块input typerange--p音量input typerange namevoice max100 min0 step2/p!-- 搜索 --p搜索input typesearch nameser/p!-- 增强鼠标可用性 --plabel formark点我/labelinput typetext idmark/p!-- 自定义邮箱--p自定义邮箱input typetext namediymail pattern[\\w!#$%*/?^_{|}~-](?:\\.[\\w!#$%*/?^_{|}~-])*(?:[\\w](?:[\\w-]*[\\w])?\\.)[\\w](?:[\\w-]*[\\w])?/pbr/Pinput typesubmitinput typereset disabled/P/form
/body
/html2、CSS3
2.1、什么是CSS
Cascading Style Sheet 层叠级联样式表。 美化网页
2.2、发展史
CSS1.0 CSS2.0 DIV(块)CSSHTML与CSS结构分离的思想网页变得简单SEO。 CSS2.1 浮动定位 CSS3.0 圆角阴影动画… 浏览器兼容性~
2.3、基本语法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 规范 style 可以编写css代码语法选择器{声明1;声明2;声明3;} --styleh1{color: cyan;}/style !-- link relstylesheet href../html/css/style.css --
/head
bodyh1我是标题/h1
/body
/html 2.4、css的优势
1、内容和表现分离 2、网页结构表现统一。可以实现复用 3、样式十分的丰富 4、建议使用独立于html的css文件 5、利用SEO容易被搜索引擎收录
2.5、四种css导入方式
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 2.内部样式 --styleh1{color: green;}/style!-- 3.外部样式--link relstylesheet href../css/style.css
/head
body
!-- 优先级行内样式内部样式外部样式--
!--1.行内样式在标签元素中编写一个style属性编写样式即可 --
h1 stylecolor:red我是标题/h1
/body
/html拓展外部样式两种写法 链接式html
!-- 3.外部样式--
link relstylesheet href../css/style.css导入式css2.1特有的 !-- 4.导式 --styleimport url(css/style.css);/style
/head2.6、三种选择器重要
作用选择页面上的某一个或者某一类元素
2.6.1、基本选择器
标签选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/* 标签选择器会选择到页面上所有的这个标签的元素 */h1{color: #ce5050;}p{font-size: 80px;}/style
/head
bodyh1学Java/h1h1学散打/h1p小羊小羊/p
/body
/html类选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle/*类选择器的格式 .class的名称{}优点可以多个标签归类是同一个class*/.title1{color: aquamarine;}.title2{color: blue;}/style/head
bodyh1 classtitle1标题1/h1h1 classtitle2标题2/h1h1 classtitle1标题3/h1p classtitle1啦啦啦啦/p
/body
/htmlid选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/* id选择器 : id必须保证全局唯一格式#id名称{}不遵循就近原则固定的id选择器class类选择器标签选择器*/#title{color: chartreuse;}.style{color: aqua;}h1{color: brown;}/style
/head
bodyh1 classstyle idtitle标题1/h1
/body
/html2.6.2、层次选择器
后代选择器在某个元素的后面祖爷爷 爷爷 爸爸 儿子都会改变 /* 后代选择器 */body p{background: #f45606;}子选择器一代儿子 /* 子选择器 */bodyp{background: #3cbda6;}相邻兄弟选择器同辈 /* 相邻兄弟选择器只有一个相邻向下 */.activep{background: #3cbda6;}通用选择器 /* 通用兄弟选择器当前选中元素的向下的所有兄弟元素 */.active~p{background: #3cbda6;}2.6.2、结构伪类选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title!-- 避免使用class类选择器、id选择器 --style/* ul的第一个子元素 */ul li:first-child{background: aqua;}/* ul的最后一个子元素 */ul li:last-child{background: #c65e5e;}/* 选中p1:定位到父元素选择当前的第一个元素选中当前p元素的f父级元素再选中父级元素的第一个并且是当前元素才生效按顺序*/p:nth-child(2){background: #e3c3c3;}/* 选中父元素下的p元素的第二个按类型 */p:nth-of-type(1){background: yellow;}/style
/head
bodyh1h1/h1pp1/ppp2/ppp3/pullili1/lilili2/lilili3/li/ul
/body
/html2.6.2、属性选择器重要、常用 idclass 结合~
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.demo a{float: left;display: block;height: 90px;width: 90px;background: red;text-align: center;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/* 属性名属性名属性值正则 绝对等于* 包含这个元素^ 以这个开头$ 以这个结尾*//* 存在id属性的元素: a[]{} *//* a[id]{background: yellow;} *//* a[idfirst]{background: yellow;} *//* class 中有links的元素 *//* a[class *links]{background: yellow;} *//* 选中href中以http开头的元素 *//* a[href^http]{background: yellow;} *//* 选中以pdf结尾的元素 */a[href$pdf]{background: yellow;}/style
/head
bodyp classdemoa hrefhttps://www.baidu.com classlinks item first idfirst1/aa href classlinks item active target_blank titletest idsecond2/aa hrefimages/1 classlinks item3/aa hrefimages/2 classlinks item4/aa hrefimages/3 classlinks item5/aa hrefabc classlinks item6/aa href/a.pdf classlinks item7/aa href/abc.pdf classlinks item8/aa href/abc.doc classlinks item9/aa href/abcd.doc classlinks item last10/a/p
/body
/html2.7、CSS的作用及字体样式
1、span标签重点要突出的字使用span套起来
2.7.1、字体样式
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- font-family: 字体font-size: 字体大小font-weight: 字体粗细color:字体颜色--stylebody{font-family: Arial Black,楷体;color: red;}h1{font-size: 50px;}.p1{font-weight: bold;}/style
/head
bodyh1故事介绍/h1p classp1为天地立心、为生民立命、为往圣继绝学、为万世开太平/pp说天亲天也不算亲天有日月和星辰。日月穿梭催人老带走世上多少的人。说地亲地也不算亲地长万物似黄金。争名夺利有多少载看罢新坟看旧坟。说爹妈亲不算个亲二老不能永生/ppWhen We Two Parted George Gordon Byron!/p
/body
/html2.7.2、文本样式
1、颜色 color rgb rgba 2、文本对齐方式 3、首行缩进 4、行高 5、装饰 6 、文本图片水平对齐
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- font-family: 字体font-size: 字体大小font-weight: 字体粗细color:字体颜色--stylebody{font-family: Arial Black,楷体;color: red;}h1{font-size: 50px;}.p1{font-weight: bold;}/* a标签超链接去下划线 */a{text-decoration: none; }/style
/head
bodya href1234/ah1故事介绍/h1p classp1为天地立心、为生民立命、为往圣继绝学、为万世开太平/pp说天亲天也不算亲天有日月和星辰。日月穿梭催人老带走世上多少的人。说地亲地也不算亲地长万物似黄金。争名夺利有多少载看罢新坟看旧坟。说爹妈亲不算个亲二老不能永生/ppWhen We Two Parted George Gordon Byron!/p
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 水平对齐需要参照物--styleimg,span{vertical-align: middle;}/* a标签超链接去下划线 */a{text-decoration: none; }/style
/head
bodya href111113/apimg src../resources/image/头像.jpg altspan1561656/span/p/body
/html2.8、文本阴影和超链接伪类
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titletitle/titlestyle/* 默认的状态 */a{text-decoration: none;color: aquamarine;}/* 鼠标悬浮的状态 */a:hover{color: blueviolet;}/* 鼠标单击没有释放的状态 */a:active{color: chartreuse;}/* 未访问链接的状态 *//* a:link{color: black;} *//* 已访问链接的状态 *//* a:visited{color: cornflowerblue;} *//* text-shadow: 阴影颜色水平偏移垂直偏移阴影半径 */#price{text-shadow: rgb(14, 239, 134) 15px 0px 2px ;}/style
/head
bodya hrefhttps:www.baidu.comimg src../resources/image/头像.jpg alt/apa hrefhttps:www.baidu.com码出高效:JAVA开发手册/a/p pa hrefhttps:www.baidu.com作者:孤尽老师/a/p p idpricea href99.00/a/p
/body
/html2.9、列表
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titletitle/titlelink hrefcss/style.css relstylesheet typetext/css
/head
bodydiv idnavh2/h2h2 classtitle全部商品分类/h2ullia href#图书/anbsp;nbsp;a href#音像/anbsp;nbsp;a href#数字商品/a/lilia href#家用电器/anbsp;nbsp;a href#手机/anbsp;nbsp;a href#数码/a/lilia href#电脑/anbsp;nbsp;a href#办公/a/lilia href#家居/anbsp;nbsp;a href#家装/anbsp;nbsp;a href#厨具/a/lilia href#服饰鞋帽/anbsp;nbsp;a href#化妆品/a/lilia href#礼品箱包/anbsp;nbsp;a href#钟表/anbsp;nbsp;a href#珠宝/a/lilia href#食品饮料/anbsp;nbsp;a href#保健食品/a/lilia href#彩票/anbsp;nbsp;a href#旅行/anbsp;nbsp;a href#充值/anbsp;nbsp;a href#票务/a/li/ul
/div
/body
/html#nav{width: 300px;background: rgb(165, 141, 190);
}
.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 30px;background: greenyellow;
}
/* ul li*/
/* list-style: none 去掉圆点;circle 空心圆decimal 数字square 正方形*/
ul li{height: 30px;list-style: none;text-indent: 1em;
}ul{background: rgb(165, 141, 190);
}a{text-decoration: none;font-size: 14px;color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}2.10、背景图像应用及渐变
2.10.1、背景图片
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 1000px;height: 700px;border: 1ex solid greenyellow;/* 默认是全部平铺的 */background-image: url(../resources/image/头像.jpg);}.div1{background-repeat: repeat-x;}.div2{background-repeat: repeat-y;}.div3{background-repeat: no-repeat;}/style
/head
bodydiv classdiv1/divdiv classdiv2/divdiv classdiv3/div
/body
/html.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 30px;/* 颜色图片图片位置平铺方式 */background: greenyellow url(../../resources/image/下箭头.gif) 200px 10px no-repeat;
}2.10.2、渐变
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 径向渐变圆形渐变 --stylebody{background-color: #8EC5FC;background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);}/style
/head
body/body
/html渐变色CSS代码取样
2.11、盒子模型及边框使用
1、什么是盒子模型 margin:外边距 border:边距 padding:内边距
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* body总有一个默认的外边距margin0 */body{margin: 0;padding: 0;text-decoration: none;}h2{font-size: 16px;background-color: aquamarine;line-height: 30px;}/* border:粗细样式颜色 */#box{width: 300px;border: 1px solid red;}form{background: greenyellow;}div:nth-of-type(1)input{border: 3px solid black;}div:nth-of-type(2)input{border: 3px dashed rgb(212, 44, 44);}div:nth-of-type(3)input{border: 3px solid rgb(227, 198, 198);}/style
/head
bodydiv idboxh2会员登录/h2formdivspan用户名/spaninput typetext/divdivspan密码/spaninput typetext/divdivspan邮箱/spaninput typetext/div/form/div
/body
/html2、内外边距及div居中
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* body总有一个默认的外边距margin0要求块元素块元素有固定的宽度*/body{padding: 0;text-decoration: none;}/* 边距的参数顺时针旋转margin:0 上下左右都是0margin: 0 1px 上下是0 左右是1margin: 0 1px 2px 3px; 上下左右各自有唯一的参数*//* 内边距也是一样的规则 */h2{font-size: 16px;background-color: aquamarine;line-height: 30px;margin: 0 1px 2px 3px;}/* border:粗细样式颜色 *//* 外边距的妙用居中元素margin: 0 auto;*/#box{width: 300px;border: 1px solid red;margin: 0 auto;}form{background: greenyellow;}input{border: 1px solid black;}/style
/head
bodydiv idboxh2会员登录/h2formdivspan用户名/spaninput typetext/divdivspan密码/spaninput typetext/divdivspan邮箱/spaninput typetext/div/form/div
/body
/html盒子的计算方式你这个元素到底多大 marginborderpadding内容宽度 3、圆角边框
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* border-radius: 10px 20px 30px 40px;顺时针规则左上右上右下左下*/div{width: 100px;height: 200px;border: 10px solid red;border-radius: 10px 20px 30px 40px;}/style
/head
bodydiv/div
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* border-radius: 100px;顺时针规则左上右上右下左下*/div{width: 100px;height: 100px;border: 10px solid red;border-radius: 100px;}img{border-radius: 25px;}/style
/head
bodydiv/divimg src../resources//image/头像.jpg
/body
/html4、阴影
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titletitle/title!-- 阴影 box-shadow: 10px 10px 100px yellow; --stylediv{width: 100px;height: 200px;border: 10px solid red;box-shadow: 10px 10px 100px yellow;}/style
/head
bodydiv/div
/body
/html2.12、display和浮动
1、简介 块级元素独占一行 h1~h6 p div 列表 行内元素不独占一行 span a img strong… 行内元素可以被包含在块级元素中反之则不可以~ 2、display
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleTitle/title!-- block 块元素display: inline;行内元素display: inline-block; 是块元素但是可以内联在一行display: none; 消失--stylediv{width: 100px;height: 100px;border: 1px solid red;display: inline;}span{width: 100px;height: 100px;border: 1px solid red;display: inline-block;}/style
/head
bodydivdiv块元素/divspanspan行内元素/span
/body
/html这个也是一种实现行内元素排列的方式但是我们很多情况都是用float 3、浮动 左右浮动 float
div{margin: 10px;padding: 5px;
}
#father{border: 1px #000 solid;
}
.layer01{border:1px #F00 dashed;display: inline-block;/* 左浮 */float: left;
}
.layer02{border:1px #00F dashed;display: inline-block;/* 右浮 */float: right;
}
.layer03{border:1px #060 dashed;display: inline-block;
}
.layer04{border:1px #666 dashed;display: inline-block;font-size: 12px;line-height: 23px;display: inline-block;
}2.13、overflow及父级边框塌陷问题
/* clear:right; 左侧不允许有浮动元素 clear:right; 右侧不允许有浮动元素 clear:both; 两侧不允许有浮动元素 */ 解决方案 1、增加父级元素的高度
#father{border: 1px #000 solid;height: 800px;
}2、增将一个空的div标签清除浮动
.clear{clear: both;margin: 0;padding: 0;
}3、overflow 在父级元素中增加一个 overflow: hidden;
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- overflow: hidden;隐藏滚动条-overflow: scroll; 以滚动条的形式展示--style#content{width: 200px;height: 100px;overflow: scroll;}/style
/head
bodydiv idcontentimg src../resources/image/头像.jpg altp因为Java是全球排名第一的编程语言Java工程师也是市场需求最大的软件工程师选择Java就是选择了高薪。/p/div
/body
/html4、父类添加一个伪类after
#father{border: 1px #000 solid;height: 800px;
}
#father:after{content: ;display: block;clear: both;
}小结
浮动元素后面增加空div:简单代码中尽量避免空div设置父元素的高度简单元素假设有了固定的高度就会被限制overflow:简单下拉的一些场景避免使用父类添加一个伪类after(推荐)没有作用推荐使用 5、display和float对比display:方向不可以控制float:浮动起来的话会脱离标准文档流所以要解决父级边框塌陷的问题~
2.14、定位
1、相对定位:position: relative; 相对于原来的位置进行指定的偏移相对定位后任然在标准文档流中原来的位置会被保留 top: -20px;left: 20px;bottom: -10px;right: 10px;!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titletitle/title!-- 相对定位相对于自己原来的位置进行偏移~--stylediv{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#first{background-color: rgb(18, 227, 175);border: 1px solid #666;position: relative; /* 相对定位 上下左右*/top: -20px;left: 20px;}#second{background-color: rgb(90, 241, 52);border: 1px solid rgb(208, 49, 49);}#third{background-color: rgb(128, 17, 226);border: 1px solid rgb(20, 179, 207);position: relative; /* 相对定位 上下左右*/bottom: -10px;right: 10px;}/style
/head
bodydiv idfatherdiv idfirst第一个盒子/divdiv idsecond第二个盒子/divdiv idthird第三个盒子/div/div
/body
/html2、绝对定位 定位基于xxx定位上下左右~ 相对于父级或浏览器的位置进行指定的偏移绝对定位后它不在标准文档流中原来的位置不会被保留
没有父级元素的前提下按浏览器的位置定位假设父级元素存在定位我们通常会相对于父级元素进行偏移在父级元素范围内移动
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titletitle/title!-- 相对定位相对于自己原来的位置进行偏移~--stylediv{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father{border: 1px solid #666;padding: 0;position: relative;}#first{background-color: rgb(18, 227, 175);border: 1px solid #666;}#second{background-color: rgb(90, 241, 52);border: 1px solid rgb(208, 49, 49);position: absolute;right: 30px;}#third{background-color: rgb(128, 17, 226);border: 1px dashed rgb(20, 179, 207);}/style
/head
bodydiv idfatherdiv idfirst第一个盒子/divdiv idsecond第二个盒子/divdiv idthird第三个盒子/div/div
/body
/html3、固定定位fixed
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleTitle/titlestylebody{height: 1000px;}div:nth-of-type(1){width: 100px;height: 100px;background: red;position: absolute;right: 0;bottom: 0;}/* position: fixed; 固定定位*/div:nth-of-type(2){ width: 100px;height: 100px;background: yellow;position: fixed;right: 0;bottom: 0;}/style
/head
bodydivdiv1/divdivdiv2/divdivdiv3/div
/body
/html4、z-index及透明度 图层~ z-index: 默认是0最高无限~999
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title123/titlelink hrefcss/style.css relstylesheet
/head
bodydiv idcontentulliimg src../../resources/image/头像.jpg/lili classtipText学微服务/lili classtipBg/lili2099-1-1/lili地点月球/li/ul/div
/body
/html#content{width: 380px;padding: 0px;margin: 0px;overflow: hidden;line-height:25px;border: 1px #000 solid;
}
ul,li{padding: 0px;margin: 0px;list-style: none;
}
/* 父级元素相对定位 */
#content ul{position: relative;
}
.tipText,.tipBg{position: absolute;width: 380px;height: 25px;top: 200px;
}
.tipText{color: white;/* 层级 */z-index: 888;
}
.tipBg{background: black;/* 背景透明度 */opacity: 0.5;
}3、JavaScript
3.1、引入javaScript
内部标签
scriptalert(script标签内弹窗)/script外部引入 引入js文件的位置必须要准确。
script src../javascript/hello.js/script示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title第一个javascript程序/title!-- scriptalert(script标签内弹窗)/script --!-- 外部引入 --script src../javascript/hello.js/script
/head
body/body
/html
