ps制作网站,淘宝关键词指数查询,国际新闻最新消息今天中国,中小型网站建设与管理 唐军民HTML 基础
准备开发环境 1.vscode 使用
新建文件夹 --- 左键拖入 vscode 中
2.安装插件
扩展 → 搜索插件 → 安装打开网页插件#xff1a;open in browser汉化菜单插件#xff1a;Chinese
3.缩放代码字号
放大,缩小#xff1a;Ctrl 加号#xff0c;减号
4.设…
HTML 基础
准备开发环境 1.vscode 使用
新建文件夹 --- 左键拖入 vscode 中
2.安装插件
扩展 → 搜索插件 → 安装打开网页插件open in browser汉化菜单插件Chinese
3.缩放代码字号
放大,缩小Ctrl 加号减号
4.设置默认浏览器 标签基本语法 5.HTML定义 6. vscode 折叠侧边栏 ctrl b
7. HTML 基本骨架 8.标签的关系 向前向后缩进 Tab / Shift Tab
9.注释 10.标题标签 11.段落标签 12.换行与水平线标签 13.文本格式化标签加粗 14.图像标签-基本使用 15.路径--相对路径和绝对路径 16.超链接 16.音频标签 17.视频标签 18.综合案例一 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1尤雨溪/h1hrp尤雨溪前端框架a href#Vue.js/a的作者a href#HTML5/a版Clear的打造人独立开原开发者。曾就职于Google Creative Labs 和 Meteor Development Group。由于工作中大量接触开源的项目a href#JavaScript/a最后自己也走上了开源之路现全职开发和维护a href#Vue.js/a。/pimg srcphoto.jpg alth2学习经历/h2p尤雨溪毕业于上海复旦附中在美国完成大学专业本科毕业于Colgate University后在Parsons设计学院获得Design Technology艺术硕士学位任职于纽约Google Creative Lab。/ph2主要成就/h2p尤雨溪strong大学专业并非是计算机专业/strong在大学期间他学习专业是室内艺术和艺术史后来读了美术设计和技术的硕士u正是在读硕士期间他偶然接触到了JavaScript从此北这门编程语言深深吸引开启了自己的前端生涯/u。/ph2社会任职/h2p2016年9月3日在南京的JSConf上Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队尤雨溪称他将以技术顾问的身份加入Weex团队来做Vue和Weex的JavaScript runtime 整合目标是让大家能用Vue的语法跨三端。/p/body
/html
19.综合案例二
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1Vue.js/h1pVue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用SPA提供驱动。/pp其作者为a href01-标签的写法.html尤雨溪/a/ph2主要功能/h2pVue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层并且非常容易学习非常容易与其它库或已有项目整合。另一方面Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。/ppVue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。/ppVue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习非常容易与其它库或已有项目整合。另一方面在与相关工具和支持库一起使用时 [2] Vue.js 也能驱动复杂的单页应用。/pvideo srcmedia/vue.mp4 controls/video
/body
/html
列表、表格、表单 20.列表 21.无序列表 bodyulli列表条目/lili列表条目/lili列表条目/li/ul
/body 22.有序列表 bodyolli列表条目/lili列表条目/lili列表条目/li/ol
/body 23.定义列表 bodydldt服务中心/dtdd申请售后/dddd售后政策/dddt线下门店/dtdd小米之家/dddd服务网点/dd/dl
/body 24.表格 bodytable border1trth姓名/thth语文/thth数学/thth总分/th/trtrtd张三/tdtd99/tdtd100/tdtd199/td/trtrtd李四/tdtd98/tdtd100/tdtd198/td/trtrtd总结/tdtd全市第一/tdtd全市第一/tdtd全市第一/td/tr/table
/body 25.表格结构标签 bodytable border1theadtrth姓名/thth语文/thth数学/thth总分/th/tr/theadtbodytrtd张三/tdtd99/tdtd100/tdtd199/td/trtrtd李四/tdtd98/tdtd100/tdtd198/td/tr/tbodytfoottrtd总结/tdtd全市第一/tdtd全市第一/tdtd全市第一/td/tr/tfoot/table
26.合并单元格 行合并tbodytrtd张三/tdtd99/tdtd rowspan2100/tdtd199/td/trtrtd李四/tdtd98/tdtd198/td/tr/tbody 列合并tfoottrtd总结/tdtd colspan3全市第一/td/tr/tfoot 27.表单 28.input标签基本使用 文本框单行文本
body文本框input typetext
/body 密码框
body密码框input typepassword
/body 单选框
input typeradio 多选框
input typecheckbox 上传文件
input typefile 29.input标签占位文本 body文本框input typetext placeholder请输入用户名brbr密码框input typepassword placeholder请输入密码
/body 29.单选框radio body单选框input typeradio namegender checked 男input typeradio namegender 女
/body 30. 上传文件 上传文件input typefile multiple 31.多选框默认选中 Checked 兴趣爱好input typecheckbox checked 敲代码input typecheckbox 敲前端代码input typecheckbox 敲前端 HTML代码 32.下拉菜单 城市selectoption北京/optionoption上海/optionoption广州/optionoption深圳/optionoption selected武汉/option/select 33.文本域 bodytextarea请输入评论/textarea
/body 34.label标签 body性别input typeradio namegender idmanlabel forman男/labellabel input typeradio namegender 女/label
/body 35.按钮button 需要用 form 标签 包裹
body!-- form 表单区域 --!-- action“” 发送数据的地址 --form action用户名input typetextbrbr密码input typepasswordbrbr!-- 如果省略 type 属性功能是 提交 --button typesubmit提交/buttonbutton typereset重置/buttonbutton typebutton普通按钮/button/form
/body 36.div 和 span 无语义的布局标签 body!-- div大盒子 --div这是 div 标签/divdiv这是 div 标签/div!-- span小盒子 --span这是 span 标签/spanspan这是 span 标签/span
/body 37.字符实体 body!-- 在代码中敲键盘的空格网页只识别一个 --乾坤未定你我皆是黑nbsp;nbsp;nbsp;马。lt;pgt;
/body 38.综合案例一 bodyulliimg srcmedia/images/1.jpgh4主帅安东尼奥回西班牙休假/h4/liliimg srcmedia/images/2.jpgh4梅州主帅申花有强有力的教练组/h4/liliimg srcmedia/images/3.jpgh4马德兴00后球员将首登亚洲舞台/h4/li/ul
/body 39.综合案例二 body
h1注册信息/h1
form actionh2个人信息/h2label姓名/labelinput typetext placeholder请输入真实姓名brbrlabel密码/labelinput typepassword placeholder请输入密码brbrlabel确认密码/labelinput typepassword placeholder请输入确认密码brbrlabel性别/labellabelinput typeradio namegender男/labellabelinput typeradio namegender女/labelbrbrlabel居住城市/labelselectoption selected北京/optionoption上海/optionoption广州/option/selecth2教育经历/h2label最高学历/labelselectoption selected本科/optionoption硕士/optionoption博士/option/selectbrbrlabel学校名称/labelinput typetextbrbrlabel所学专业/labelinput typetextbrbrlabel在校时间/labelselectoption selected2017/optionoption2018/optionoption2019/option/select--selectoption selected2019/optionoption2020/optionoption2021/option/selecth2工作经历/h2label公司名称/labelinput typetextbrbrlabel工作描述/labeltextarea/textareabrbrlabelinput typecheckbox已阅读并同意以下协议/labelbrbrullia href#《用户服务协议》/a/lilia href#《隐私政策》/a/li/ulbutton typesubmit免费注册/buttonbutton typereset重新填写/button
/form
/body CSS基础
1.css初体验 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* css 代码 *//* 选择器 { css 属性} */p {/* 文字颜色 */color:red;/* 字号 */font-size: 30px;}/style
/head
bodyp体验 css/p
/body
/html 2.css引入样式 rel关系 stylesheet样式表 html文件中
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- link 引入外部样式表 rel关系样式表--link relstylesheet hrefmy.css
/head
bodyp这是 p 标签/pdiv stylecolor:green这是 div 标签/div
/body
/html
my.css中
/* 此处放css代码 */
/* 选择器 {css属性} */
p {color: red;
} 3.选择器 4.标签选择器 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 特点选中同名标签设置相同的样式无法差异化同名标签的样式 */p {color: red;}/style
/head
bodyp这是 p 标签/pp111/pp222/p
/body 5.类选择器 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 定义 */.red {color: red;}.size {font-size: 50px;}/style
/head
body!-- 使用 --!-- 一个类选择器可以给多个标签使用 --p classred111/pp222/p!-- 一个标签可以使用多个类名class属性值写多个类名类名用空格隔开 --div classred sizediv 标签/div
/body
/html 5.id选择器 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 定义 */#red {color: red;}/style
/head
body!-- 使用 --div idreddiv 标签/div
/body
/html 6.通配符选择器 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 定义 */* {color: red;}/style
/head
body!-- 使用 --pp 标签/pdivdiv 标签/divh1h1 标签/h1ullili/lilili/li/ul
/body
/html 7.画盒子 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 定义 */.red {/* 宽度 */width: 100px;/* 高度 */height: 100px;/* 背景色 */background-color: brown;}.orange {width: 200px;height: 200px;background-color: orange;}/style
/head
body!-- 使用 --div classreddiv1/divdiv classorangediv2/div
/body
/html 8.文字控制属性 9.字体大小font-size !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 经验谷歌浏览器文字有默认大小 16px */ p {/* font-size 属性必须有单位否则属性不生效 */font-size: 30px;}/style
/head
bodyp测试字体大小/pdiv测试默认字体大小/div
/body
/html 10.字体粗细:font-weight !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh3 {font-weight: 400;}div {font-weight: 700;}/style
/head
bodyh3h3 标题/h3divdiv 标签/div
/body
/html 11.字体样式是否倾斜font-style !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleem {font-style: normal;}div {font-style: italic;}/style
/head
bodyemem 标签/emdivdiv 标签/div
/body
/html 12.行高line-height 数字 2 代表 2 * font-size 即 2 * 16 px 32px !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep {font-size: 20px;/* line-height: 30px; *//* 行高值是数字表示是当前标签字体大小的倍数 */line-height: 2;}/style
/head
bodyp今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响我国粮食价格整体上扬小麦、玉米、大豆价格高位波动水稻价格运行平稳优质优价特征明显农民择机择时售粮实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为在去年高粮价的刺激下今年土地租金以及化肥、农药、柴油等农资价格大幅上涨种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南旱北涝”等极端天气虽然没有带来灾害性后果但一些农户为抗灾付出更多生产成本种粮农户收益空间进一步收窄。/p
/body
/html 13.行高-垂直居中 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {height: 100px;background-color: skyblue;/* 注意只能是单行文字垂直居中 */line-height: 100px;}/style
/head
bodydiv文字/div
/body
/html 14.字体族 font-family !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {font-family: 楷体;}/style
/head
bodydiv测试文字/div
/body
/html 15.font 复合属性 一般在开发初期使用直接从京东淘宝复制 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {/* 文字倾斜、文字加粗、字体大小是30px、行高2倍、楷体 */font:italic 700 30px/2 楷体;}/style
/head
bodydiv测试 font 属性/div
/body
/html 字号和字体值必须书写否则 font 属性不生效
font:30px 楷体; 16.文本缩进 text-indet 2em !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep {text-indent: 2em;}/style
/head
bodyp今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响我国粮食价格整体上扬小麦、玉米、大豆价格高位波动水稻价格运行平稳优质优价特征明显农民择机择时售粮实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为在去年高粮价的刺激下今年土地租金以及化肥、农药、柴油等农资价格大幅上涨种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南旱北涝”等极端天气虽然没有带来灾害性后果但一些农户为抗灾付出更多生产成本种粮农户收益空间进一步收窄。/p
/body
/html 17.文本对齐方式 text-align !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1 {/* 本质居中的是文字内容不是标签 *//* text-align: left; */text-align: center;/* text-align: right; */}/style
/head
bodyh1标题文字/h1
/body
/html 18.水平对齐方式-图片 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 250px;height: 250px;text-align: center;}.red {color: orange;}/style
/head
bodydivimg src1.jpg h4Xiaomi Buds 4 Pro/h4p48dB智能动态降噪 | 骨声纹通话降噪.../pspan classred999元/spannbsp;nbsp;spandel1099元/del/span/div
/body
/html 19.文本修饰线 text-decoration !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea {text-decoration: none;}div {text-decoration: underline;}p {text-decoration: line-through;}span {text-decoration: overline;}/style
/head
bodya href#a 标签去掉下划线/adivdiv 标签添加下划线/divpp 标签添加删除线/pspanspan 标签添加顶划线/span
/body
/html 20.color 文字颜色 rgba中a越小越透明a越大越清晰。a0.3 和 a0.7 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1 {background-color: aqua;/* color: red; *//* color: rgb(0, 255, 0); *//* color: rgba(0, 0, 0,0.7); *//* color: #0000ff; */color: #00f;}/style
/head
bodyh1h1 标签/h1
/body
/html 21.调试工具-谷歌浏览器 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {/* 调试工具的细节1.如果是错误的属性有黄色叹号2.CSS 属性的前面有多选框如果勾选这个属性生效如果没有勾选这个属性不生效*/color:red;font-size: 66px;}/style
/head
bodydiv测试文字/div
/body
/html 22.综合案例一 - 新闻详情 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {color: #333;}h1 {font-size: 30px;font-weight: 400;text-align: center;}h5 {font-size: 14px;color: #999;}p {text-indent: 2em;font-size: 18px;}div {text-align: center;}/style
/head
bodyh1在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收/h1h5来源央视网 | 2222年12月12日 12:12:12/h5pstrong央视网消息/strong眼下湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成玉米收割七成。湖北省通过大力推广新品种水稻建设高标准农田等一系列措施为秋粮稳产提供有力支撑。/pp中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市370万亩中稻已经收割四成以上。/pdivimg src1.jpg alt/divp王化林说的新品种是湖北省研发的杂交水稻“华夏香丝”不仅产量高还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内像“华夏香丝”这样抗旱节水的品种还有20多个这些水稻新品将在荆门全面推广确保来年增产增收。/pp此外湖北还大力推进高标准农田建设。截至今年6月已建成3980万亩高标准农田。目前湖北全省仍有1800多万亩中稻正在有序收割中预计10月中旬收割完毕。/p
/body
/html 23.综合案例二 - CSS简介 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1 {color: #333;}p {font-size: 14px;line-height: 30px;text-indent: 2em;color: #444;}a {color: #0069c2;}li {font-size: 14px;line-height: 30px;color: #444;}/style
/head
bodyh1CSS层叠样式表/h1p层叠样式表 (Cascading Style Sheets缩写为 CSS是一种 a href#样式表/a 语言用来描述 HTML 或 XML包括如 SVG、MathML、XHTML 之类的 XML 分支语言文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。/ppstrongCSS 是开放网络的核心语言之一/strong由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中同时控制多个网页的布局这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级CSS1 现已废弃 CSS2.1 是推荐标准 CSS3 分成多个小模块且正在标准化中。/pulliCSS 介绍 如果你是 Web 开发的新手请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。/liliCSS 教程 我们的 CSS 学习区 包含了丰富的教程它们覆盖了全部基础知识能使你在 CSS 之路上从初出茅庐到游刃有余。/liliCSS 参考 针对资深 Web 开发者的 a href#详细参考手册/a 描述了 CSS 的各个属性与概念。/li/ul
/body
/html 24.复合选择器 25.后代选择器 div span{} !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* div 里面的 span 文字颜色是红色 *//* 后代选择器选中所有后代包含儿子孙子、重孙子... */div span {color: red;}/style
/head
bodyspanspan 标签/spandivspan这是div 的儿子 span/spanpspan孙子 span/span/p/div
/body
/html 26.子代选择器 divspan{} !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* div 的儿子 span 文字颜色是红色 */div span {color: red;}/style
/head
bodydivspan儿子 span/spanpspan孙子 span/span/p/div
/body
/html 27.并集选择器 div,p,span{} !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* div、p、span 文字颜色是红色 */div,p,span {color: red;}/style
/head
bodydivdiv 标签/divpp 标签/pspanspan 标签/span
/body
/html 28.交集选择器-了解 p.box{} !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 第一个 p 标签文字颜色是红色 *//* 既又的关系既是 p 标签又是有 box 类 */p.box {color: red;}/style
/head
bodyp classboxp 标签使用了类选择器/ppp 标签/pdiv classboxdiv 标签使用了类选择器/div
/body
/html 29.伪类选择器 a:hover{} !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 任何标签都可以设置鼠标悬停的状态 */a:hover {color: red;}.box:hover {color: green;}/style
/head
bodya href#a 标签超链接/adiv classboxdiv 标签/div
/body
/html 30.伪类-超链接拓展 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 任何标签都可以设置鼠标悬停的状态 *//* a:link {color: red;}a:visited {color: green;}a:hover {color: blue;}a:active {color: orange;} *//* 工作中一个 a 标签选择器设置超链接的样式hover状态特殊设置 */a {color: red;}a:hover {color: green;}/style
/head
bodya href#a 标签测试伪类/a
/body
/html 31.CSS特性 32.继承性 将文字属性写给父标签 body 子标签继承文字属性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {font-size: 30px;color: red;font-weight: 700;}/style
/head
bodydivdiv 标签/divpp 标签/pspanspan 标签/span
/body
/html 如果标签自己有样式则生效自己的样式不继承
a标签有自己的颜色h1标签有自己的字号
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {font-size: 30px;color: red;font-weight: 700;}/style
/head
bodydivdiv 标签/divpp 标签/pspanspan 标签/span!-- 如果标签自己有样式则生效自己的样式不继承 --a href#a 标签/ah1h1 标签/h1
/body
/html 33.层叠性 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 覆盖叠加 */div {color: red;font-weight: 700;}div{color: green;font-size: 30px;}/style
/head
bodydivdiv 标签/div
/body
/html 34.优先级 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* !important 提权功能提高权重/优先级到 最高 */* {color: red !important;}div {color: green;}.box {color: blue;}#test {color: orange;}/style
/head
bodydiv classbox idtest stylecolor: purple;div 标签/div
/body
/html 35.优先级-叠加计算规则 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* (行内id类标签) *//* (0,0,2,1) */.c1 .c2 div {color: blue;}/* (0,1,0,1) */div #box3 {color: green;}/* (0,1,1,0) */ #box1 .c3 {color: orange;}/style
/head
bodydiv idbox1 classc1div idbox2 classc2div idbox3 classc3这行文本是什么颜色的/div/div/div
/body
/html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 行内id,类标签 *//* (0,2,0,0) */#father #son {color: blue;}/* (0,1,1,1) */#father p.c2 {color: black;}/* (0,0,2,2) */div.c1 p.c2 {color: red;}/* 继承优先级最低 */#father {color: green !important;}/* 继承优先级最低 */div#father.c1 {color: yellow;}/style
/head
bodydiv idfather classc1p idson classc2这行文本是什么颜色的/p/div
/body
/html 35.Emmet写法 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 500px;height: 200px;background-color: #fff;}/style
/head
bodydiv/divp classbox/pdiv classbox/divp idbox/pdiv/divp/pdivp/p/divspan/spanspan/spanspan/spandiv111/div
/body
/html
36.背景属性 37.背景图 background-image(bgi) !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 盒子是 400 * 400 */div {width: 400px;height: 400px;/* 背景图默认是平铺复制的效果 */background-image: url(1.png);}/style
/head
bodydivdiv 标签/div
/body
/html 38.背景图平铺方式 background-repeatbgr !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 400px;height: 400px;background-color: pink;background-image: url(1.png);/* 不平铺盒子的左上角显示一张背景图 *//* background-repeat: no-repeat; *//* background-repeat: repeat; *//* background-repeat: repeat-x; */background-repeat: repeat-y;}/style
/head
bodydivdiv 标签/div
/body
/html no-repeat 、repeat(默认、repeat-x、repeat-y 38.背景图位置 background-positionbgp !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 400px;height: 400px;background-color: pink;background-image: url(1.png);background-repeat: no-repeat;/* 左上角 *//* background-position: 0 0; *//* background-position: left top; *//* 水平正数向右负数向左 *//* background-position: 50px 0; *//* background-position: -50px 0; *//* 垂直正数向下负数向上 *//* background-position: 0 100px;background-position: 0 -100; *//* background-position: center center; *//* 垂直方向居中 *//* background-position: left; *//* 水平方向居中 */background-position: top;}/style
/head
bodydivdiv 标签/div
/body
/html bgp(0,0) 、bgp(50px,0)、bgp(-50px,0)、bgp(center,center) 39.背景图缩放 background-size(bgz) !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 500px;height: 300px;background-color: pink;background-image: url(1.png);background-repeat: no-repeat;/* contains 如果图的宽高跟盒子尺寸相等停止缩放可能导致盒子有漏白 *//* background-size: contain; *//* cover图片完全覆盖盒子可能导致图片显示不全 *//* 如果盒子和图片比例相同contain和cover效果一样 *//* background-size: cover; *//* 100% 图片的宽度跟盒子的宽度一样图片的高度按照图片比例等比缩放 */background-size: 100%;}/style
/head
bodydivdiv 标签/div
/body
/html contains、cover
39.背景图固定 background-attachmentbga !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {background-image: url(bg.jpg);background-repeat: no-repeat;background-position: center top;background-attachment: fixed;}/style
/head
bodyp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/pp测试文字撑开body让浏览器有滚动条/p
/body
/html 40.背景复合属性 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 400px;height: 400px;background: pink url(1.png) no-repeat center/cover;}/style
/head
bodydivdiv 标签/div
/body
/html 41.显示模式 display !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 块级独占一行宽度默认是父级的100%加宽高生效 */div {width: 100px;height: 100px;}.div1 {background-color: brown;}.div2 {background-color: orange;}/* 行内一行共存多个尺寸由内容撑开 加宽高不生效 */.sapn1 {background-color: brown;}.sapn2 {background-color: orange;}/* 行内快一行共存多个默认尺寸由内容撑开加宽高生效 */img {width: 100px;height: 100px;}/style
/head
body!-- 块元素 --div classdiv1div 标签1/divdiv classdiv2div 标签2/div!-- 行内元素 --span classsapn1span11111/spanspan classsapn2span2/span!-- 行内块元素 --img src1.pngimg src1.png
/body
/html 42.转换显示模式 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 块级独占一行宽度默认是父级的100%加宽高生效 */div {width: 100px;height: 100px;display: inline-block;}.div1 {background-color: brown;}.div2 {background-color: orange;}/* 行内一行共存多个尺寸由内容撑开 加宽高不生效 */.sapn1 {background-color: brown;}.sapn2 {background-color: orange;}/* 行内快一行共存多个默认尺寸由内容撑开加宽高生效 */img {width: 100px;height: 100px;}/style
/head
body!-- 块元素 --div classdiv1div 标签1/divdiv classdiv2div 标签2/div!-- 行内元素 --span classsapn1span11111/spanspan classsapn2span2/span!-- 行内块元素 --img src1.pngimg src1.png
/body
/html div {width: 100px;height: 100px;display: inline-block;}div {width: 100px;height: 100px;display: inline;} !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 块级独占一行宽度默认是父级的100%加宽高生效 */div {width: 100px;height: 100px;display: inline;}.div1 {background-color: brown;}.div2 {background-color: orange;}span {width: 200px;height: 200px;display: block;}/* 行内一行共存多个尺寸由内容撑开 加宽高不生效 */.sapn1 {background-color: brown;}.sapn2 {background-color: orange;}/* 行内快一行共存多个默认尺寸由内容撑开加宽高生效 */img {width: 100px;height: 100px;}/style
/head
body!-- 块元素 --div classdiv1div 标签1/divdiv classdiv2div 标签2/div!-- 行内元素 --span classsapn1span11111/spanspan classsapn2span2/span!-- 行内块元素 --img src1.pngimg src1.png
/body
/html span {width: 200px;height: 200px;display: block;} span {width: 200px;height: 200px;display: inline-block;} 43.综合案例一-热词 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 默认效果 */div {width: 200px;height: 80px;background-color: #3064bb;text-align: center;line-height: 80px;}a {/* 去除下划线 */text-decoration: none;color: #fff;font-size: 18px;}/* 鼠标悬停效果 */div:hover {background-color: #608dd9;}/style
/head
bodydiva href#HTML/a/divdiva href#CSS/a/divdiva href#JavaScript/a/divdiva href#Vue/a/divdiva href#React/a/div
/body
/html 44.综合案例二-banner效果 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.banner {/* 盒子 */height: 500px;background-color: #f3f3f4;/* 背景图 */background-image: url(bk.png);background-repeat: no-repeat;background-position: left bottom;color: #333;text-align: right;}.banner h1 {line-height: 100px; font-weight: 400;font-size: 36px;}.banner p {line-height: 40px;font-size: 20px;}.banner a {display: inline-block;width: 125px;height: 40px;background-color: orange;line-height: 40px;font-size: 16px;text-decoration: none;text-align: center;color: #fff;}/style
/head
bodydiv classbannerh1让创造产生价值/h1p我们希望小游戏平台可以提供无限的可能性让每一个创作者都可以将他们的才华和创意传递给用户。/pa href#我要报名/a/div
/body
/html 45.结构伪类选择器 a:first-child、last-child、nth-child(3) !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleli:first-child {background-color: green;}li:last-child {background-color: green;}li:nth-child(3) {background-color: green;}/style
/head
bodyulli1/lili2/lili3/lili4/lili5/lili6/lili7/lili8/li/ul
/body
/html 46. :nth-child(公式 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* li:nth-child(2n) li:nth-child(2n1) li:nth-child(n2)*/li:nth-child(-n2) {background-color: green;}/style
/head
bodyulli1/lili2/lili3/lili4/lili5/lili6/lili7/lili8/lili9/lili10/li/ul
/body
/html 47.伪元素选择器 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv::before {content: 老鼠;}/* 必须设置 content 属性没有 content伪元素选择器不生效 */div::after {content: 大米;}/style
/head
body!-- 标签内容老鼠爱大米 --div爱/div
/body
/html 48.PxCook 49.盒子模型 padding margin border(bd) !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;background-color: pink;/* 内容与盒子边缘之间 */padding: 20px;border: 1px solid #000;/* 出现在盒子外面拉开两个盒子之间的距离 */margin: 50px;}/style
/head
bodydivdiv 标签/div
/body
/html w200h200 - padding 20px - bd (border) - margin 50px 50.盒子模型-边框线 borderbd 51.盒子模型 - 内边距 padding 52.盒子模型 - 尺寸计算 box-sizing:border-box !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;background-color: pink;/* 内容与盒子边缘之间 */padding: 20px;border: 1px solid #000;/* 出现在盒子外面拉开两个盒子之间的距离 */margin: 50px;/* 内减模式不需要手动减法加padding和border不会撑大盒子 */box-sizing: border-box;}/style
/head
bodydivdiv 标签/div
/body
/html 53.盒子模型 - 外边距 margin 54.版心居中 margin: 0 auto;
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 1000px;height: 200px;background-color: pink;/* 外边距不会撑大盒子 *//* 上下 0 左右居中 */margin: 0 auto;}/style
/head
bodydiv版心内容/div
/body
/html 55.清除默认样式 去除列表符号li{list-style:none} 默认格式 橘色 外边距 绿色 内边距 h1 有上下外边距
p标签有默认上下外边距
li有上下外边距和左内边距 style* {margin:0;padding: 0;box-sizing: border-box;}/* 去掉列表的项目符号 */li {list-style: none}/style
bodyh1标题/h1pppp/pullili/li/ul
/body 56.盒子模型-元素溢出 overflowhidden 57.外边距问题 - 合并现象 58.外边距问题 - 塌陷问题 取消子级margin设置父级padding style.father {width: 300px;height: 300px;background-color: pink;}.son {width: 100px;height: 100px;background-color: orange;}/stylebodydiv classfatherdiv classsonson/div/div
/body style.father {width: 300px;height: 300px;background-color: pink;}.son {width: 100px;height: 100px;background-color: orange;margin-top: 50px;}/style style.father {width: 300px;height: 300px;background-color: pink;padding-top: 50px;/* overflow: hidden; *//* border: 1px solid #000;; */}.son {width: 100px;height: 100px;background-color: orange;/* margin-top: 50px; */}/style 59.行内元素 - 内外边距问题 增加 line-height属性 60.盒子模型 - 圆角border-radius stylediv {width: 200px;height: 200px;background-color: orange;margin: 50px auto;/* border-radius: 50%; */border-radius: 25%;}/stylebodydiv/div
/body border-radius: 50% 25%; stylediv {width: 500px;height: 200px;background-color: orange;margin: 50px auto;border-radius: 100px;/* border-radius: 50%; *//* border-radius: 25%; */}/stylebodydiv/div
/body styleimg {width: 200px;height: 200px;border-radius: 50%;}div {width: 200px;height: 80px;background-color: orange;border-radius: 40px;}/stylebodyimg src1.png altdiv/div
/body 61.盒子模型 - 阴影拓展box-shadow stylediv {width: 200px;height: 80px;background-color: orange;margin: 50px auto;box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5);}/style
/head
bodydiv/div
/body 62.综合案例一 - 产品卡片 bodydiv classproductimg srcliveSDK.svg altp classtitle抖音直播SDK/pp classdesc包含抖音直播看播功能/p/div
/body style* {margin: 0;padding: 0;box-sizing: border-box;}body {background-color: #f1f1f1;}.product {margin: 50px auto;padding-top: 40px;width: 270px;height: 253px;/* 不写背景色会自动继承 */background-color: #fff;text-align: center;border-radius: 10px; }.product .title {margin-top: 20px;margin-bottom: 12px;font-size: 18px;color: #333;}.product .desc {font-size: 12px;color: #555;}/style 63.综合案例二 - 新闻列表 body!-- 新闻区域 包含 标题 内容 --div classnewsdiv classhda href#新闻/a/divdiv classbdullia href#点赞“新农人” 温暖的伸手/a/lilia href#在希望的田野上.../a/lilia href#“中国天眼”又有新发现 已在《自然》杂志发表/a/lilia href#急这个领域缺人月薪4万元还不好招啥情况/a/lilia href#G9“带货”背后亏损面持续扩大竞争环境激烈/a/li lia href#多地力推二手房“带押过户”有什么好处/a/li /ul/div/div
/body style* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}a {text-decoration: none;}.news {margin: 50px auto;width: 360px;height: 200px;/* background-color: pink; */}.news .hd {height: 34px;background-color: #eee;border: 1px solid #dbdee1;border-left: 0;}.news .hd a {margin-top: -1px;display: inline-block;border-top: 3px solid #ff8400;border-right: 1px solid #dbdee1;width: 48px;height: 34px;background-color: #fff;text-align: center;line-height: 32px;font-size: 14px;color: #333;}.news .bd {padding: 5px;}.news .bd li {padding-left: 15px;background-image: url(square.png);background-repeat: no-repeat;background-position: left center;}.news .bd li a {padding-left: 20px;background-image: url(img.gif);background-repeat: no-repeat;background-position: left center;font-size: 12px;color: #666;line-height: 24px;}.news .bd li a:hover {color: orange;}/style 64.标准流 65.浮动 style/* 特点顶对齐具备行内块显示模式特点 浮动的盒子会脱标*/.one {width: 100px;height: 100px;background-color: brown;float: left;}.two {width: 200px;height: 200px;background-color: orange;/* float: left; *//* float: right; */}/style
/head
bodydiv classoneone/divdiv classtwotwo/div
/body 66.浮动 - 产品区域布局 body!-- 版心左右右面8个产品 - 8 个 li --div classproductdiv classleft/divdiv classrightulli/lili/lili/lili/lili/lili/lili/lili/li/ul/div/div
/body style* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}.product {margin: 50px auto;width: 1226px;height: 628px;background-color: pink;}.product .left {float: left;width: 234px;height: 628px;background-color: skyblue; }.product .right {float: right;width: 978px;height: 628px;background-color: brown; }.product .right li {float: left;margin-right: 14px;margin-bottom: 14px;width: 234px;height: 300px;background-color: orange;}/* 第四个li和第八个li 去掉右侧的 margin */.product .right li:nth-child(4n){margin-right:0;}/* 细节如果父级宽度不够浮动的盒子会掉下来 *//style 67.清除浮动 bodydiv classtop clearfixdiv classleft/divdiv classright/div!-- div classclearfix/div --/divdiv classbottom/div
/body style.top {margin: 10px auto;width: 1200px;/* height: 300px; */background-color: pink;overflow: hidden;}.left {float: left;width: 200px;height: 300px;background-color: skyblue;}.right {float: right;width: 950px;height: 300px;background-color: orange;}.bottom {height: 100px;background-color: brown;}.clearfix {clear: both;}/* 单伪元素法.clearfix::after {content: ;display: block;clear: both;} *//* before 解决外边距塌陷问题 *//* 双伪元素法 *//* .clearfix::before,.clearfix::after {content: ;display: table;} *//* after 清除浮动 *//* .clearfix::after {clear:both;} *//style 68.浮动-总结 69.Flex 布局 bodydiv classboxdiv1/divdiv2/divdiv3/div/div
/body style.box {height: 300px;border: 1px solid #000;}.box div {width: 200px;height: 100px;background-color: pink;}/style style.box {display: flex;justify-content: space-between;height: 300px;border: 1px solid #000;}.box div {width: 200px;height: 100px;background-color: pink;}/style 70.Flex-组成 71.Flex 布局 72.主轴对齐方式 justify-content 73. 侧轴对齐方式 align-items align-self style.box {display: flex;align-items: center;height: 300px;border: 1px solid #000;}.box div {width: 200px;height: 100px;background-color: pink;}.box div:nth-child(2){align-self: flex-end;}/style bodydiv classboxdiv1/divdiv2/divdiv3/div/div
/body 74.修改主轴方向flex-direction bodydiv classboximg src1.png altspan媒体/span/div
/body style.box {display: flex;/* 修改主轴方向 垂直方向侧轴自动变换到水平方向 */flex-direction: column;/* 主轴在垂直视觉效果垂直居中 */justify-content: center;/* 侧轴在水平视觉效果水平居中 */align-items: center;width: 250px;height: 250px;/* background-color: pink; */border: 1px solid #000; }img {width: 200px;height: 200px;}/style 75.弹性伸缩比 flex bodydiv classboxdiv1/divdiv2/divdiv3/div/div style.box {height: 300px;border: 1px solid #000;}.box div {height: 100px;background-color: pink;}.box div:nth-child(1){width: 200px;}/style .box {display: flex;height: 300px;border: 1px solid #000;} style.box {display: flex;height: 300px;border: 1px solid #000;}.box div {height: 100px;background-color: pink;}.box div:nth-child(1){width: 200px;}.box div:nth-child(2){flex: 1;}/style 盒子2,3按照1:2。 .box div:nth-child(2){flex: 1;}.box div:nth-child(3){flex: 2;} 主轴水平控制盒子的宽。
主轴垂直控制盒子的高。 style.box {display: flex;flex-direction: column;height: 300px;border: 1px solid #000;}.box div {height: 100px;background-color: pink;}.box div:nth-child(1){width: 200px;}.box div:nth-child(2){flex: 1;}.box div:nth-child(3){flex: 2;}/style 79.弹性盒子换行 flex-wrap bodydiv classboxdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/divdiv9/divdiv10/divdiv11/divdiv12/div/div
/body style.box {display: flex;flex-wrap: wrap;height: 300px;border: 1px solid #000;}.box div {width: 200px;height: 100px;background-color: pink;}/style
flex-wrap 默认 nowrap 不换行 添加 justify-content: space-between
80.行对齐方式 align-content bodydiv classboxdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/div/div
/body style.box {display: flex;flex-wrap: wrap;justify-content: space-between;/* 调整行对齐方式 *//* align-content: flex-start; */width: 900px;height: 400px;border: 1px solid #000;}.box div {width: 200px;height: 100px;background-color: pink;}/style null align-content: flex-start flex-end center space-between space-around space-evenly
81.综合案例 - 抖音解决方案 bodydiv classboxullidiv classleftimg src1.svg alt/divdiv classrighth3一键发布多端/h3p发布视频到抖音短视频、西瓜视频及今日头条/p/div/lilidiv classleftimg src2.svg alt/divdiv classrighth3一键发布多端/h3p发布视频到抖音短视频、西瓜视频及今日头条/p/div/lilidiv classleftimg src3.svg alt/divdiv classrighth3一键发布多端/h3p发布视频到抖音短视频、西瓜视频及今日头条/p/div/lilidiv classleftimg src4.svg alt/divdiv classrighth3一键发布多端/h3p发布视频到抖音短视频、西瓜视频及今日头条/p/div/li/ul/div
/body style/* 清除默认样式 */* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}.box {margin: 50px auto;width: 1200px;height: 418px;border: 1px solid #ddd;border-radius: 10px;}.box ul{ display: flex;flex-wrap: wrap;justify-content: space-between;align-content: space-between;padding: 90px 40px 90px 60px;height: 418px;}.box li {display: flex;align-items: center;width: 500px;height: 88px;}/style 学成在线
1.准备工作 index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title学成在线/title!-- 顺序要求先清除再设置 --link relstylesheet href./css/base.csslink relstylesheet href./css/index.css
/head
body/body
/html
base.css
/* 基础公共样式清除默认样式 设置通用样式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}li {list-style: none;
}body {font: 14px/1.5 Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;color: #333;
}a {color: #333;text-decoration: none;
}2.版心效果 index.html
/* 首页样式 */
/* 版心 */
.wrapper {margin: 0 auto;width: 1200px;
}
3.网页制作思路 4.header 区域-布局 index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title学成在线/title!-- 顺序要求先清除再设置 --link relstylesheet href./css/base.csslink relstylesheet href./css/index.css
/head
body!-- 头部区域 --div classheaderdiv classwrapper!-- logo --div classlogologo/div!-- 导航 --div classnav导航/div!-- 搜索 --div classsearchsearch/div!-- 用户 --div classuser用户/div/div/div
/body
/html
index.css
/* 首页样式 */
/* 版心 */
.wrapper {margin: 0 auto;width: 1200px;
}body {background-color: #f3f5f7;
}/* 头部区域 */
.header {height: 100px;background-color: #fff;
}.header .wrapper {padding-top: 29px;display: flex;align-items: center;
} 5.logo 制作技巧 index.html
body!-- 头部区域 --div classheaderdiv classwrapper!-- logo --div classlogoh1a href#学成在线/a/h1/div!-- 导航 --div classnav导航/div!-- 搜索 --div classsearchsearch/div!-- 用户 --div classuser用户/div/div/div
/body
/* logo */
.logo a {/* a 为 inline 故宽高不生效 */display: block;width: 195px;height: 41px;background-image: url(../images/logo.png);/* 隐藏文字 */font-size: 0;
} 6.导航制作技巧(nav body!-- 头部区域 --div classheaderdiv classwrapper!-- logo --div classlogoh1a href#学成在线/a/h1/div!-- 导航 --div classnavullia href# classactive首页/a/lilia href#课程/a/lilia href#职业规划/a/li/ul/div!-- 搜索 --div classsearchsearch/div!-- 用户 --div classuser用户/div/div/div
/body
/* 导航 */
.header .nav {margin-left: 102px;
}.header .nav ul {display: flex;
}.header .nav ul li {margin-right: 24px;
}.header .nav ul li a {display: block;padding: 6px 8px;line-height: 27px;font-size: 19px;
}/* active 类选择器表示默认选中的a */
.header .nav li .active,
.header .nav li a:hover {border-bottom: 2px solid #00a4ff;
}7.搜索区域(search) body!-- 头部区域 --div classheaderdiv classwrapper!-- logo --div classlogoh1a href#学成在线/a/h1/div!-- 导航 --div classnavullia href# classactive首页/a/lilia href#课程/a/lilia href#职业规划/a/li/ul/div!-- 搜索 --div classsearchinput typetext placeholder请输入关键词a href#/a/div!-- 用户 --div classuser用户/div/div/div
/body
/* 搜索 */
.search {display: flex;margin-left: 64px;padding-left: 19px;padding-right: 12px;width: 412px;height: 40px;background-color: #f3f5f7;border-radius: 20px;
}.search input {flex: 1;border: 0;background-color: transparent;/* 去除焦点框 */outline: none;
}.search input::placeholder {font-size: 14px;color: #999;
}
/* 父级是 flex 布局子级变弹性盒子加宽高生效 */
.search a {display: block;width: 16px;height: 16px;background-image: url(../images/search.png);align-self: center;
} 8.用户区域(user) body!-- 头部区域 --div classheaderdiv classwrapper!-- logo --div classlogoh1a href#学成在线/a/h1/div!-- 导航 --div classnavullia href# classactive首页/a/lilia href#课程/a/lilia href#职业规划/a/li/ul/div!-- 搜索 --div classsearchinput typetext placeholder请输入关键词a href#/a/div!-- 用户 --div classusera href#img srcuploads/user.png altspan播仔学前端/span/a/div/div/div
/body
/* 用户 */
.user {margin-left: 32px;margin-top: 4px;
}.user img {margin-right: 7px;/* vertical-align 行内快和行内垂直方向对齐方式 */vertical-align: middle;
}.user span {font-size: 16px;color: #666;
} 9.banner区域 !-- banner 区域 --div classbannerdiv classwrapperdiv classleftleft/divdiv classrightright/div/div/div
/* banner 区域 */
.banner {height: 420px;background-color: #0092cb;
}.banner .wrapper {display: flex;justify-content: space-between;height: 420px;background-image: url(../uploads/banner.png);
} 10.banner左侧导航栏(left) !-- banner 区域 --div classbannerdiv classwrapperdiv classleftullia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/li/ul/divdiv classrightright/div/div/div
/* 侧导航 */
.banner .left {padding: 3px 20px;width: 191px;height: 420px;background-color: rgba(0, 0, 0, 0.42);
}.banner .left a {display: block;height: 46px;background-image: url(../images/right.png);background-repeat: no-repeat;background-position: right;line-height: 46px;font-size: 16px;color: #fff;
}.banner .left a:hover {background-image: url(../images/right-hover.png);background-repeat: no-repeat;background-position: right;color: #00a4ff;
} 11.右侧课程表(right) !-- banner 区域 --div classbannerdiv classwrapperdiv classleftullia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/li/ul/divdiv classrighth3我的课程表/h3div classcontent1/div/div/div/div
/* 课程表 */
.banner .right {margin-top: 60px;width: 218px;height: 308px;background-color: #209dd5;border-radius: 10px;
}.banner .right h3 {margin-left: 14px;height: 48px;line-height: 48px;font-size: 15px;color: #fff;font-weight: 400;
}.banner .right .content {padding: 14px;height: 257px;background-color: #fff;border-radius: 10px;
} !-- banner 区域 --div classbannerdiv classwrapperdiv classleftullia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/li/ul/divdiv classrighth3我的课程表/h3div classcontentdldt数据可视化课程/dtddspan正在学习/span-strongecharts使用步骤/strong /dd/dldldt数据可视化课程/dtddspan正在学习/span-strongecharts使用步骤/strong /dd/dldldt数据可视化课程/dtddspan正在学习/span-strongecharts使用步骤/strong /dd/dl/div/div/div/div
/* 课程表 */
.banner .right {margin-top: 60px;width: 218px;height: 308px;background-color: #209dd5;border-radius: 10px;
}.banner .right h3 {margin-left: 14px;height: 48px;line-height: 48px;font-size: 15px;color: #fff;font-weight: 400;
}.banner .right .content {padding: 14px;height: 257px;background-color: #fff;border-radius: 10px;
}.banner .right .content dl {margin-bottom: 12px;border-bottom: 1px solid #e0e0e0;
}.banner .right .content dt {margin-bottom: 8px;font-size: 14px;line-height: 20px;font-weight: 700;
}.banner .right .content dd {margin-bottom: 8px;font-size: 12px;line-height: 16px;
}.banner .right .content dd span {color:#00a4ff
}.banner .right .content dd strong {color:#7d7d7d;font-weight: 400;
} 82.定位 83.相对定位 div {position:relative;top: 100px
}
实现图片压在文字上面原来位置下移100px不脱标占位。 div {position:relative;top:100px;left:200px;
}
标签显示模式特点 不变
