汕头牛肉丸-CSDN博客

原创移动web开发之flex布局

1. flex布局体验1.1 传统布局与flex布局1.2 flex体验 <style> div { display: flex; width: 80%; height: 300px; background-color: pink; justify-content: space-around; } div span {

2021-04-13 22:00:10 55

1. 移动端基础1.1 浏览器现状1.2 手机屏幕现状1.3 常见移动端屏幕尺寸1.4 移动端调试方法· Chrome DevTools（谷歌浏览器）的模拟手机调试· 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器· 使用外网服务器，直接IP或者域名访问1.5 总结· 移动端浏览器我们主要对webkit内核进行兼容· 我们现在开发的移动端主要针对手机端开发· 现在移动端碎片化严重，分辨率和屏幕尺寸大小不一· 学会用谷歌浏览器模拟手机界面以及调试2. 视口

2021-04-03 21:38:57 67

原创前端——HTML5CSS3提高——新增特性（二）

1. 2D转换转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。转换可以简单理解为变形。·移动：translate·旋转：rotate·缩放：scale1.1 二维坐标系2D转换是改变标签在二维平面上的位置和形状的一种技术，先学习二维坐标系。1.2 2D转换之移动translate2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。1.语法transform：translate（x,y）;或者分开写transfor

2021-03-23 22:08:52 60

原创前端——HTML5CSS3提高——新增特性（一）

1. HTML5的新特性1.1 HTML5新增的语义化标签以前布局，我们基本用div来做，div对于搜索引擎来说，是没有语义的。·<header>头部·<nav>导航栏·<article>内容标签·<section>定义文档某个区域·<aside>侧边栏标签·<footer>尾部标签 <style> header, nav { height:

2021-03-01 21:18:56 81

原创项目——品优购项目

1. 品优购项目规划1.1 网站制作流程1.2 品优购项目整体介绍·项目名称：品优购·项目描述：品优购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作。1.3 品优购项目的学习目的1.电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。2.品优购项目能复习、总结、提高基础班所学布局技术3.写完品优购项目。能对实际开发中制作PC端页面流程有一个整体的感知4.为后期学习移动端项目作铺垫1.4 开发工具以及技术栈1.开发工具VScode、Photo

2021-03-01 21:18:23 307

原创前端——CSS（六）——CSS高级技巧

1. 精灵图1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。1.2 精灵图（Sprites）的使用使用精灵图核心：1.精灵图技术主要针对背景图片使

2020-12-16 23:50:10 95

原创前端——CSS（五）

1. 定位1.1 为什么需要定位提问：以下情况使用标准流或者浮动能实现吗？1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的。以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子2.定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子。1.2 定位组成定位：将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方

2020-12-10 23:24:14 65

原创前端——CSS（四）

1. 圆角边框（重点）在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了。boeder-radius属性用于设置元素的外边框圆角语法：border-radius:length;radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果 <style> div { width: 300px; height: 150px; background-color: pink;

2020-12-07 23:15:20 53

原创前端——CSS（三）

1. CSS的三大特性CSS有三个非常重要的三大特性：层叠性、继承性、优先级1.1 层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。层叠性原则：·样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。·样式不冲突，不会层叠 <style> div { color: red; font-size: 18px; }

2020-11-23 23:22:18 50

原创前端——CSS（一）

1.CSS简介CSS的主要使用场景就是美化网页，布局页面。1.1HTML的局限性说起HTML，他只关注内容的语义，比如< h1>表明这是一个大标题，< p>表明这是一个段落，< img>表明这儿有个图片，< a>表明此处有链接。1.2 CSS-网页的美容师CSS是层叠样式表（Cascading Style Sheets）的简称。CSS是一种标记语言。主要用于设置HTML中的文本内容（字体、大小、对齐等）、图片的外形（宽高、边框样式、边距等）以及版面

2020-11-13 22:57:04 158

原创前端——HTML（二）

1.表格标签表格是实际开发中非常常用的标签。1）表格主要作用：表格主要用于显示、展示数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显示很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。2）表格的基本语法<table> <tr> <td>单元格内文字</td> ... </tr> ...</table><table></table&gt

2020-11-13 22:56:52 156

原创前端——HTML5（一）

1.网页1.1什么是网页网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站的一“页”，通常是HTML格式的文件，他要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.html或.htm后缀结尾的文件，因此将其俗称为HTML文件。1.2什么是HTMLHTML指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。HTML不是一种编程

2020-11-13 22:56:36 96

原创前端——CSS（二）

1. Emmet语法Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度，VsCode内部已经集成该语法。1.1 快速生成HTML结构语法1）生成标签直接输入标签名，按tab键即可，比如div，然后tab键2）如果想要生成多个相同标签，加上就可以了，比如，div3，就可以快速生成三个div标签。3）如果有父子级关系的标签，可以用>，比如ul>li，就可以了。4）如果有兄弟关系的标签，用+就可以了，比如div+p5）如果生成带有类名或者id名字的标

2020-11-13 22:56:12 62