最终效果图如下: 主要功能和学习内容与代码展示 CSS的grid布局按键部分通过一个grid布局,快速完成了相应的样式 .calculator .buttons { display: grid; /* grid-template-columns...

手机访问原图自己设计出来的 美工字体效果差距太大,只是简单看看结构吧. 整体页面结构说明分别引入iconfont,reset,和分结构的CSS.body分为三部分独立完成 其中注意在reset设置好随手机端变化的自适应rem并通过媒体查询确保r...

一周的学习,做个综合使用看看效果,页面效果图如下: 整体大图2.头部设计3.媒体查询,窗口小的时候自动调整fontsize并隐藏相应元素 下面分项说明: 整体页面结构代码折叠显示如下: 注意点有以下: 在CSS代码分为icon,me...

先综合说明一下,再来上代码和效果 页面结构最常见的页面结构就是上中下也即三项,通过分别的CSS来将整个页面做切隔,显示代码如下:

在CSS选择器中,在最基本的标签选择器(div,P等)和属性选择器([],.class,#id)之外,稍微有点难度的就是位置选择器:所谓位置选择器就是根据已经明确的选择内容通过一定的表示方法,选择出其子代,后代,兄弟或后面的同级元素,以此来添加相应显...

今天主要学习的是emmet的使用和简单表单的制作,下课后主要思考点是,如何用emmet快速来写出一个表单代码来,成品效果如下: 基本代码如下:

本文为第一课的核心知识点总结,主要是关于前端开发环境搭建和网页构成的基本认识,前者主要是浏览器chrome和编辑器VSCode 前端开发环境之浏览器chrome配置课上老师只是展示一下其检查功能中的最基本一项,把一个网页的结构让我们看的清清楚楚...

本课主要关于网页基础认识部分 第一部分:页面元素页面为一个二维空间,所有元素的排列只有垂直和水平两种方式,各元素的方式如下: 块元素垂直排列,主要用来当容器,最常见的元素就是DIV 行内元素水平排列,主要为内容项,最常见的元素就是 ...