![](https://img-blog.csdnimg.cn/f8834747afc84124a3f53b671e18ea1f.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML+CSS
文章平均质量分 88
html+css
DantinZhang
学习只是一种习惯
展开
-
flex布局
flex是flexible box的缩写,意为“弹性布局”,用来为和盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。当我们为父盒子设置flex布局后,子元素的float,clear,vertical-align属性将失效总结:就是给父盒子添加flex属性,来控制子盒子的位置和排列方式默认主轴(x轴)水平向右,侧轴(y轴)垂直向下,可以通过下面的属性进行设置如果把y轴设置为主轴,那么x轴就成为了侧轴2.justify-content设置主轴上子元素的排列方式注意是主轴上的子元素,原创 2022-06-15 22:25:11 · 2415 阅读 · 0 评论 -
品优购电商静态页面项目
一、首页制作因为首页的头部和尾部在其他页面中是一样的,所以这两部分我们要把样式写到公共的common.css里比较合适的命名:1.快捷导航栏shortcut原创 2022-06-10 15:46:48 · 1309 阅读 · 0 评论 -
项目前的准备工作:css初始化,favicon图标导入,SEO优化
准备1.css初始化代码:* { margin: 0; padding: 0; /* css3新增,padding不会撑大盒子 */ box-sizing: border-box; /*所有元素的内外边距清除*/}em,i { font-style: normal /*em/i是斜体字 让他变正*/}li { list-style: none /*去掉列表的圆形点装饰*/}img { bor原创 2022-05-25 20:53:52 · 409 阅读 · 0 评论 -
HTML5和CSS3新增的一些属性:伪类选择器,伪元素选择器,过渡
下面的这些东西,用到了可以去菜鸟教程查,不用刻意去记一、HTML5新增标签1.新增语义标签2.新增多媒体标签视频标签:<video src="./images/what.MP4" autoplay="autoplay" muted="muted"></video>音频标签:<audio src="./images/what.MP3" controls="controls"></audio>3.新增的input类型4.新增的input属原创 2022-05-25 14:22:15 · 738 阅读 · 0 评论 -
CSS高级技巧:精灵图、字体图标、三角形制作、布局技巧
一、精灵图精灵图是啥捏,其实说白了就是一个合并的图层,把一个网页里的所有小图标合并成一个大的图,然后某个位置要用某个图的时候,先把这个大的图调用过来,通过挪动位置来定位到里面的小图,比如王者荣耀官网这个图:精灵技术的目的:为了有效减少服务器接收和发送请求的次数,提高页面的加载速度。使用代码试一试:先用PS切图工具量一下宽高和xy轴的偏移距离,然后再去定义盒子.box1 { width: 63px; height: 59px;原创 2022-05-18 22:24:24 · 2383 阅读 · 0 评论 -
CSS学习文档(五)定位、元素的显示和隐藏
一、定位为什么需要定位?浮动和标准流都无法实现的效果,需要定位来是实现。定位是让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置,并且可以压住其他盒子。定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式摆放盒子。定位=定位模式+边偏移定位模式:position属性,有四个值:边偏移:定位的盒子移动的最终位置,有四个属性,很牛B,直接top,bottom,不用-top......原创 2022-05-13 22:28:16 · 693 阅读 · 0 评论 -
CSS学习文档(四):圆角边框、盒子阴影、浮动、学成在线案例
一、圆角边框,盒子阴影1.圆角边框在CSS3中新增了圆角边框的样式,这样盒子就可以变成圆角。语法是border-radius: length; 其中参数length表示圆角的半径,半径越大说明在角上画的⚪越大,那么圆角矩形的边框也就越⚪border-radius: 20px;如何画⚪?前提如果是正方形的盒子,那么length的值是宽高的一半即可,或者直接写50%border-radius: 50%;如果想搞一个圆角矩形,那么length设置成高度的一半就可以了。当然,也可以分别设置四个角原创 2022-05-12 21:03:00 · 1486 阅读 · 0 评论 -
CSS学习文档(三):CSS三大特性、盒子模型、两个案例练习
一、CSS三大特性1.层叠性简单来说就是后设置的样式会覆盖前设置的样式,但是只有冲突的样式会覆盖。像下面这种情况,颜色黑会被红色覆盖掉,但是字体大小却不会有变化。 div { color: black; font-size: 15px; } div { color: red; }2.继承性子标签继承父标签的某些样式,主要是text、font、line等开头的以及color属性原创 2022-03-19 10:33:07 · 1471 阅读 · 0 评论 -
CSS学习文档(二):复合选择器,元素显示样式(行内块元素等),背景的一些属性
CSS部分继续一、Emmet语法这一部分内容实际上就是vscode中的一些快捷键,在我之前html的文章中已经写过了,所以不再详细说明1.快速生成html结构2.快速生成css样式 <style> .div{ text-align: center; /* tac+tab可以快速生成 */ text-indent: 2px; /* ti2+tab可以快速生成 */ width: 100px; /* w100+原创 2022-03-15 21:44:04 · 890 阅读 · 0 评论 -
CSS学习文档(一):语法规范,选择器,字体属性,文本属性,引入方式
今天开启CSS篇章!冲!!!一、CSS语法规范选择器 {属性名: 属性值; 属性名: 属性值;}。1.选择器后面带空格,属性名的冒号后面也带空格,这样比较舒服2.每个属性和属性值最好独占一行,属性值结尾别忘了分号;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I原创 2021-10-24 21:31:11 · 2740 阅读 · 0 评论 -
前端HTML学习笔记整理,在这里立个flag,前端校招进大厂
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-10-03 21:48:52 · 2146 阅读 · 0 评论