HTML+CSS基础学习
文章平均质量分 74
分享本人学习过程的一些知识
步步生花@苏殿主
这个作者很懒,什么都没留下…
展开
-
初识前端HTML
文章目录一、前端初了解1、认识网页2、浏览器3、web标准二、HTML初体验1、HTML的感知2、HTML骨架结构3、开发工具三、语法规范1、HTML的注释2、HTML标签的构成3、HTML标签的关系四、HTML标签学习1、排版标签(1)标题标签(2)段落标签(3)换行标签(4)水平线标签2、文本格式化标签3、媒体标签(1)图片标签(2)路径(3)音频标签(4)视频标签4、链接标签一、前端初了解1、认识网页网页由文字、图片、音频、视频、超链接组成通过浏览器可以将代码转换成网页2、浏览器五原创 2022-03-15 20:29:33 · 324 阅读 · 0 评论 -
初始前端HTNL之综合案例--招聘
用《初始前端HTNL》文章里的内容完成一个招聘案例效果图实现代码 <h1>Web前端工程师</h1> <hr> <h2>职位描述</h2> <p>负责公司网站及产品前端页面开发,根据需求实现功能;</p> <h2>岗位要求</h2> <p>熟悉使用<strong>webpack,gulp,等</strong>.原创 2022-03-16 09:00:03 · 551 阅读 · 0 评论 -
初始前端HTNL之综合案例--跳转
用《初始前端HTNL》文章里的内容完成一个跳转案例效果图index.htmlone.htmltwo.html代码index.html <h1>今日搜索热词</h1> <hr> <h2>1、本轮疫情已波及28省份</h2> <p>国家卫健委公布数据显示,3月1日至14日新增本土感染者超15000例,涉28省份。音频示例:<a href="./one.html" target="_.原创 2022-03-16 09:52:25 · 573 阅读 · 0 评论 -
前端HTML学习
文章目录一、列表标签1、无序列表2、有序列表3、自定义列表二、表格标签三、表单标签1、input系列标签2、button按钮标签3、select下拉菜单标签4、textarea文本域标签5、label标签四、语义化标签五、字符实体一、列表标签1、无序列表列表的每一项默认显示圆点标识ul标签表示无序列表的整体,只允许包含li标签li标签表示无序列表的每一项,可以包含任意内容 <ul> <li>香蕉</li> <l原创 2022-03-16 17:22:58 · 921 阅读 · 0 评论 -
前端HTML学习之案例--学生信息表
用《前端HTML学习》文章里的内容完成一个学生信息表效果图实现代码 <table border="1" width="500" height="500"> <caption><h3>学生信息表</h3></caption> <thead> <tr> <th>年级</th> .原创 2022-03-16 17:39:27 · 3279 阅读 · 0 评论 -
前端HTML学习之案例--表单
用《前端HTML学习》文章里的内容完成一个表单案例效果图实现代码 <h1>好好学习,天天恋爱</h1> <hr> <form action=""> 昵称: <input type="text" placeholder="请输入昵称"> <br><br> 性别: <label><input typ.原创 2022-03-16 18:10:41 · 218 阅读 · 0 评论 -
前端CSS基础
文章目录一、CSS引入方式1、内嵌式2、外联式3、行内式二、基础选择器1、标签选择器2、类选择器3、id选择器4、通配符选择器三、字体和文本样式1、字体样式2、文本样式(1)文本缩进(2)文本水平对齐方式3、line-height行高4、样式的层叠问题一、CSS引入方式1、内嵌式写在style标签中,通常约定写在head标签中常用于小案例<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co原创 2022-03-17 16:50:12 · 207 阅读 · 0 评论 -
前端CSS基础之案例--新闻
用《前端CSS基础》文章里的内容完成一个新闻案例效果图展示代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init.原创 2022-03-18 15:47:17 · 305 阅读 · 0 评论 -
前端CSS基础之案例--图片
用《前端CSS基础》文章里的内容完成一个图片案例效果展示:代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini.原创 2022-03-18 19:16:12 · 99 阅读 · 0 评论 -
前端css进阶
文章目录一、选择器进阶1、后代选择器2、子代选择器3、并集选择器4、交集选择器5、hover伪类选择器二、背景相关属性1、背景颜色2、背景图片3、背景平铺4、背景位置5、背景相关属性连写6、背景图片与img的区别三、元素显示模式1、块级元素2、行内元素3、行内块元素4、元素显示模式转换5、拓展四、CSS特性1、继承性2、层叠性一、选择器进阶1、后代选择器语法选择器1 选择器2 {css}后代包括:儿子、孙子、重孙子······后代选择器中,选择器之间用空格隔开<!DOCTYPE ht原创 2022-03-19 21:41:53 · 395 阅读 · 0 评论 -
前端CSS进阶之案例--导航
用《前端CSS进阶》文章里的内容完成一个导航案例效果展示代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi.原创 2022-03-19 21:59:50 · 94 阅读 · 0 评论 -
CSS盒子模型
文章目录一、CSS三大特性1、继承性2、层叠性3、优先级一、CSS三大特性1、继承性子元素默认继承父元素样式的特点可继承的常见属性(文本控制属性都可以继承):a . colorb . font-style,font-weight,font-size,font-familyc . text-indent,text-alignd . line-heighte . ······巧记:控制字的都可以继承,不是控制字的不能继承a标签的color会继承失效h系列标签的font-si原创 2022-03-24 17:16:19 · 87 阅读 · 0 评论 -
CSS盒子模型之案例--新浪导航
用《CSS盒子模型》文章里的内容完成一个新浪导航案例布局顺序从内向外,从上向下效果图实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d.原创 2022-03-24 17:18:49 · 276 阅读 · 0 评论 -
CSS盒子模型之案例--新闻列表-div布局
用《CSS盒子模型》文章里的内容完成一个新闻列表-div布局案例效果图实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width.原创 2022-03-24 17:19:13 · 1388 阅读 · 0 评论 -
CSS浮动
文章目录一、结构伪类选择器二、伪元素三、标准流四、浮动五、清除浮动1、直接设置父元素高度2、额外标签法3、单伪元素清除法4、双伪元素清除法5、给父元素设置`overflow:hidden`css书写顺序:浏览器执行效率更高1、浮动/display2、盒子模型:margin、border、padding、宽高背景3、文字样式一、结构伪类选择器选择器说明E:first-child{}匹配父元素中第一个子元素,并且是E元素E:last-child{}匹配父元素中最后原创 2022-03-25 14:44:46 · 143 阅读 · 0 评论 -
CSS浮动之案例--布局一
用《CSS浮动》文章里的内容完成布局案例一效果图代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-.原创 2022-03-25 14:46:33 · 465 阅读 · 0 评论 -
CSS浮动之案例--布局二
用《CSS浮动》文章里的内容完成布局案例二效果图代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-.原创 2022-03-25 14:47:11 · 76 阅读 · 0 评论 -
CSS浮动之案例--导航
用《CSS浮动》文章里的内容完成布局导航案例效果图代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial.原创 2022-03-25 14:47:49 · 176 阅读 · 0 评论 -
CSS定位装饰
文章目录一、定位1、常见布局方式(1)标准流(2)浮动(3)定位2、定位的基本使用(1)设置定位方式(2)设置偏移值3、相对定位4、绝对定位(1)父元素为静态定位(2)父元素为非静态定位【子绝父相】(3)子绝父相水平居中(4)位移居中5、固定定位6、元素的层级关系二、装饰1、垂直对齐方式2、光标类型3、边框圆角4、overflow溢出部分显示效果5、元素本身隐藏一、定位1、常见布局方式(1)标准流块级元素:独占一行,垂直布局行内/行内块元素:一行显示多个,水平布局(2)浮动可以让垂直布原创 2022-03-27 01:54:01 · 188 阅读 · 0 评论 -
CSS定位装饰之综合案例
用《CSS定位装饰》文章里的内容完成各定位案例文章目录一、图标定位二、图片定位三、底部半透明遮罩效果一、图标定位效果展示代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport".原创 2022-03-27 10:29:08 · 127 阅读 · 0 评论 -
CSS样式补充
文章目录一、项目样式补充1、精灵图2、背景图片大小3、盒子阴影4、过渡二、项目前置认知1、骨架结构标签2、SEO三大标签3、`.ico`图标一、项目样式补充1、精灵图项目中将多张小图片,合成一张大图片,这张大图片称之为精灵图优点:减少服务器发送次数,减轻服务器压力,提高页面加载速度精灵图的使用:a、创建一个盒子,设置盒子尺寸与小图尺寸相同b、将精灵图设置为盒子的背景图片c、修改背景图位置background-position: x y;2、背景图片大小background-siz原创 2022-04-02 14:13:55 · 433 阅读 · 0 评论