![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Web前端入门HTML5+CSS3+前端项目
文章平均质量分 67
Web前端入门HTML5+CSS3+前端项目
厚德载物的陈同学
需要源码的(https://github.com/Chicksqace),B站搜索(厚德载物的陈同学)感谢三连支持!!!
展开
-
表格布局+flex:铁路12306
前言:练习表格布局+弹性布局,设计了一个铁路12306的简单版本界面。原创 2023-03-21 17:43:07 · 64 阅读 · 0 评论 -
css三行代码实现多行文字超出部分省略号代替
就是我们在页面开发的时候有时为了更加美观,让文字在同行显示,超出的部分用省略号替代。超出的文字用省略号替代。让文字在一行显示,不允许换行。而这个效果我们直接实现3行css实现。原创 2023-03-11 14:47:37 · 741 阅读 · 0 评论 -
CSS3提高: 浏览器私有前缀及C3总结
属性选择器 [] 例如[title] [class='dome']结构伪类选择器 nth-child(n) 数字(n从1开始),关键字,公式(n从零开始)就是CSS有点低版本的浏览器不兼容,然后在代码中添加浏览器的私有前缀,使得他们兼容。伪元素选择器 ::before ::after。nth-of-type(n) 根据类型去选择。是为了兼容老版本的写法,比较新版本的浏览器。重点记住我们动画的简写。原创 2022-11-06 01:23:00 · 545 阅读 · 0 评论 -
CSS3提高: CSS3 3D转换
transform:rotate3d(1,0,0,45deg) 就是沿着。transform-style: flat 子元素不开启。模拟人类的视觉位置,可认为安排一只眼睛去看。距离视觉点越近的在电脑平面成像越大,越远成像。元素旋转的方向的判断 我们需要先学习一个左手。产生近大远小视觉立体,但是只是效果二维的。坐标系其实就是指立体空间,立体空间是由。的基础上多加了一个可以移动的方向,就是。轴越大(正值) 我们看到的物体就越。其余手指的弯曲方向就是该元素沿着x。其余手指的弯曲方向就是该元素沿着。原创 2022-11-06 01:22:52 · 1832 阅读 · 0 评论 -
CSS3提高: CSS3 动画
中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。动画跟我们2d转换很相似,但功能更加强大,例如打开页面就实现自动移动,2d转换就实现不了。都是时间,那么写在前面的肯定为持续时间,前面俩个属性一定要写 name duration。这个的原因是3个pulse叠在一起了,所有要用绝对定位,不占位置。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。这代码效果跟上面的是一样的,但是要注意的顺序还有影响的 例如。动画以低速开始,然后加快,在结束前变慢。原创 2022-11-06 01:22:34 · 443 阅读 · 0 评论 -
CSS3提高:CSS3 2D转换
以前是通过top: 50%;里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子。如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的。是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放。这里的 50% 就是 50px 因为盒子的宽度是 100px。translate中的百分比单位是相对于自身元素的。转换里面的一种功能,可以改变元素在页面中的位置,类。最大的优势是不影响其他盒子, 里面参数用。平面上的位置和形状的一种技术,先来。,是相对于自身宽度和高度来计算的。原创 2022-11-06 01:22:15 · 435 阅读 · 0 评论 -
HTML5 和 CSS3 的新特性--域名注册与网站上传
如果想要很多人访问我们的网站,可以把品优购放到服务器上,这样就可以多人访问我们的品优购网站了。在网络环境下,根据服务器提供 的服务类型不同,服务器又分为文件服务器、数据库服务器、应用程序服务器、我们可以把自己的电脑设置为本地服务器, 这样同一个局域网内的同学就可以访问你的品优购网站了。本地服务器主要在局域网中访问,如果想要在互联网中访问,可以把品优购网站上传到远程服务器。4. 我们可以把网站上传到远程服务器里面, 别人就可以通过域名访问我们的网站了。左边的是本地,右边的是远程,直接拉就可以了。原创 2022-11-01 00:14:46 · 74 阅读 · 0 评论 -
HTML5 和 CSS3 的新特性--品优购注册页制作
注册页类名命名注册页面: register.html注意:注册页面比较隐私,为了保护用户信息,我们不需要对当前页面做SEO优化。注册页布局 引入一张图片就可以了 这样会引起外边距合并 registerarea 布局h3标题部分完成 reg_form部分 安全程度模块 同意模块和完成注册模块 完整代码原创 2022-11-01 00:14:09 · 428 阅读 · 0 评论 -
HTML5 和 CSS3 的新特性--品优购列表页制作
上面盒子的问题,nav盒子高度是47px,但是右侧给了49px,有浮动的文字是不会压住它的,只会环绕着它 (就是环绕着它多出来的2px),解决方案就是切掉它就可以了。属性设置文本的粗细。3. 头部和底部的样式也需要,因此 list.html 中还需要引入 common.css。2. 因为列表页的头部和底部基本一致,所以我们需要把首页中的头部和底部的结构复制过来。4. 需要新的 list.css 样式文件,这是列表页专门的样式文件。3 号盒子 sk_bd ,里面包含很多的 ul 和 li。原创 2022-11-01 00:13:04 · 524 阅读 · 0 评论 -
HTML5 和 CSS3 的新特性--品优购推荐模块制作
根据 tab 切换的原理, tab_content 里面包含 内容部分。右边 tab_list ,右浮动,因为用到 tab 切换效果,所以里面要用 ul 和 li 来做。1 号盒子 box_hd,给一个高度,有个下边框,里面分为左右 2 个盒子。注意这个 floor ,不要给高度,内容有多少,算多少。2 号盒子 recom_bd ,注意里面的小竖线。2 号盒子 box_bd,不要给高度。里面包含 2 个盒子, 浮动即可。分为 5 个大列,列的宽度不一致。左边 h3 ,盒子左浮动。有高度可以不用清除浮动。原创 2022-11-01 00:12:42 · 315 阅读 · 0 评论 -
HTML5 和 CSS3 的新特性--品优购main主体模块制作
main 盒子宽度为 980 像素,位置距离左边 220px (margin-left ) ,给高度就不用清除浮动。可以让 lifeservice 里面的 ul 宽度为 252,就可以装的下 4 个 小 li。lifeservice 盒子宽度为 250 ,但是装不开里面的 4 个小 li。2 号盒子 news-bd 新闻主题部分,里面包含 ul 和 li 还有链接。main 里面包含右侧盒子,右浮动,newsflash 新闻快报模块。main 里面包含左侧盒子,左浮动,focus 焦点图模块。原创 2022-10-30 15:45:49 · 434 阅读 · 0 评论 -
HTML5 和 CSS3 的新特性--品优购首页制作
方法1:text-indent 移到盒子外面(text-indent: -9999px) ,然后 overflow:hidden ,淘宝的做法。1. logo 里面首先放一个 h1 标签,目的是为了提权,告诉搜索引擎,这个地方很重要。count 统计部分不要给宽度,因为可能买的件数比较多,让件数撑开就好了,给一个高度。2. h1 里面再放一个链接,可以返回首页的,把 logo 的背景图片给链接即可。版心里面包含 1 号盒子,mod_service 是服务模块,mod 是模块的意思。原创 2022-10-27 18:04:55 · 788 阅读 · 0 评论 -
HTML5 和 CSS3 的新特性--品优购项目开发
项目名称:品优购项目描述:品优购是一个电商网站,我们要完成 PC 端首页、列表页、注册页面的制作。原创 2022-10-22 09:30:42 · 1063 阅读 · 0 评论 -
HTML5 和 CSS3 的新特性--CSS3的新特性
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。如果盒子模型我们改为了box-sizing: border-box , 那padding和border就不会撑大盒子了(前提padding 和border不会超过width宽度)来指定盒模型,有2个值:即可指定为 content-box、border-box,这样我们 计算盒子大小的方式就发生了改变。filter: 函数();原创 2022-10-24 12:13:15 · 119 阅读 · 0 评论 -
HTML5 和 CSS3 的新特性--CSS3的新特性(1. 属性选择器 2. 结构伪类选择器 3. 伪元素选择器)及案例和伪元素清除浮动
n 可以是公式:常见的公式如下 ( 如果n是公式,则从0开始计算,但是第 0 个元素或者超出了元素的个数会被忽略 )用我说来讲,伪元素选择器实际上创建的是元素,类似div这些,但是在文档里面却是找不到的,我们可以通过这个元素设置样式。1. nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配。nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配。属性选择器可以根据元素特定属性的来选择元素。原创 2022-10-24 12:13:03 · 258 阅读 · 0 评论 -
HTML5 和 CSS3 的新特性--HTML5 的新特性
在谷歌是防止用户突然打开一个视频而消耗油量,而把他禁用了,可以通过muted方式静音播放,其中muted="muted"可以缩写为muted。默认是只能选一个的,但是设置了multiple就可以多选了。这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这 些新特性。HTML5 在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式是有限的。原创 2022-10-24 12:11:27 · 2495 阅读 · 2 评论 -
面试官:谈谈你对BFC的理解?
目的是形成一个相对于外界完全独立的空间,让内部的子元素不会影响到外部的元素。原因是元素之间相互的影响,导致了意料之外的情况,这里就涉及到。实际就是页面一个独立的容器,里面的子元素不影响外面的元素。为80的话,两个P之间的距离还是100,以最大的为准。前面讲到,每个元素的左外边距与包含块的左边界相接触。在计算高度时,浮动元素也会参与,所以我们可以触发。重叠(塌陷),以最大的为准,如果第一个P的。,则内部浮动元素计算高度时候也会计算。因此会根据包含块的宽度,和。的左边依然会与包含块的左边相接触。转载 2022-10-01 15:32:43 · 195 阅读 · 0 评论 -
有关a标签link,hover,active失效的问题一点探究
a标签的事件是有顺序的 先默认 后经过 最后按下不放如果要加上a:visited放在a:link 后面 但我在实际的学习上很少使用a:visited这个,因为他会覆盖a:link的样式。其实就一句话,出错就是你顺序错了,调整一下顺序就ok了。a:active就失效了。如果我们不按照这个顺序。原创 2022-10-14 00:03:20 · 709 阅读 · 0 评论 -
在github上将private仓库转为public
change respository visibility.就可以了。找settings, 拉到最下面,点击change visibility。请输入 Chicksqace/天气预报和问候语进行确认。原创 2022-08-30 14:01:53 · 3086 阅读 · 1 评论 -
阿里前端学习笔记:CSS快速掌握(详细2万字)
css层叠样式表主要设置外观和样式选择器{ 属性:值;}选择器 声明块在css中不能出现html标签书写方式分为三种:行内,嵌入,外链嵌入式就是将css代码嵌入到html文件中,嵌入式是通过html中的标签将css代码嵌入到html网页中。语法规则: 书写css代码 选择器{属性:值;} 如果我们使用的是HTML5的文档type属性可以省略不写!...原创 2022-06-18 16:04:44 · 510 阅读 · 0 评论 -
阿里前端学习笔记:3HTML标签
所谓标签语义化,就是指标签的含义标题标签1-6 重要性以此递减标题文本段落标签文本内容文本会根据游览器的大小自动换行水平线标签是单标记原创 2022-06-03 15:15:31 · 93 阅读 · 0 评论 -
阿里前端学习笔记:2HTML入门
4.HTML初始html中文名为超文本标签语言<strong> sss</strong>文本 标签 语言5.HTML骨架<html><head><title></title></head><body></body></html>6.我的第一次页面及其标签简介html标签:根标签head:头标签title:标题标签body:主题原创 2022-06-03 15:15:01 · 117 阅读 · 0 评论 -
阿里前端学习笔记:1web基础
1.常见的游览器网页是如何形成的?源码》游览器渲染》客户中的页面2.常见的游览器介绍IE,edge,safari,火狐,谷歌游览器chrome游览器用的多,好处秒开2.游览器内核(面试用)游览器内核可以分为渲染引擎和js引擎1.Trident(IE内核)现在Edge使用2.Gecko(firefox)开源的特点3.webkit(Safari)以前Chrome也使用webkit,2013年4月3日,谷歌与webkit解除关系,使用bink4.Chromi原创 2022-06-03 15:14:25 · 90 阅读 · 0 评论 -
HTML5+CSS3基础学习笔记:3
21相对路径 Document原创 2022-06-01 23:11:12 · 260 阅读 · 0 评论 -
HTML5+CSS3基础学习笔记:2
文档的使用<!-- 文档的声明,声明当前网页的版本 --><!DOCTYPE html><!-- html的跟标签(元素),网页的所有内容都是写跟元素的里边 --><html> <!-- head是网页的头部,head中的内容不会在网页中直接出现,主要用来帮助游览器或搜索引擎来解析网页 --> <head> <!-- meta标签用来设置网页的元数据,这里meta用来设置网页的字符集,避免...原创 2022-06-01 23:10:16 · 123 阅读 · 0 评论 -
HTML5+CSS3基础学习笔记:1
HTML(Hypertext Markup Language) 超文本标记语言。它负责网页的三个要素之中的结构。HTML使用标签的的形式来标识网页中的不同组成部分。所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面。一个最基本的HTML页面:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title><...原创 2022-05-21 13:09:16 · 149 阅读 · 0 评论 -
web前端学习笔记:帮助中心板块制作
一、HTML标记的语义化使用HTML标记是用于描述网页结构,对页面对象样式进行简单设置。HTML标记的语义化就是让标签在程序运营中发挥功能,执行开发人员让其执行的命令,比如<p>标签代表文本段落,<h1>标签代表标题,<a>标签代表链接。如果我们使用<p>标签来插入一个标题,就可以通过改变P标签内文字的大小、颜色来达到和<h1>标签同样的效果。虽然在实际工作中别人不会在乎开发人员的标签语义...原创 2022-03-03 19:36:25 · 1521 阅读 · 0 评论 -
web前端学习笔记:电商网站结构搭建与基础区块制作
思维导图1.站点结构搭建项目背景前端开发工程师的主要任务就是将UI设计图以网页、app、小程序等前端界面呈现给用户的过程。对于大部分前端初学者来说,直接开始写代码其实是错误的学习步骤,在企业实际的开发项目中,前端工程师在开始写编码之前要完成一些准备工作。工欲善其事,必先利其器,前端工程师在开始编码之前应该先选择一个好用的前端开发工具,虽然记事本也可以进行编码,但是使用开发工具会使其编码速度提升数倍;选择了开发工具后前端开发工程师需要和UI设计师对接设计好的UI效果图,通过对效果图原创 2022-03-03 19:13:58 · 8954 阅读 · 0 评论 -
web前端学习笔记:初识Web前端开发
行业发展与岗位变化Web访问流程网站-----网站与Web应用网页设计师/网页制作员-----Web前端工程师PC端-----移动端Web端产品开发流程相关岗位名称招聘要求例相关理论--万维网万维网(World Wide Web):简称WWW或3W,是目前互联网上最流行的一种基于超文本形式的资源组织形式。 万维网基于三个机制向用户提供资源:(1)协议 协议是一组标准的规则,用于实现通过通信信道发送信息所需的数据表示、信号发送、身份验证及错...原创 2022-03-03 19:16:02 · 320 阅读 · 0 评论