学习案例
文章平均质量分 63
一只小白657
学习才是王道
展开
-
CSS课堂案例15-进度条案例
进度条案例进度条如何布局过渡的使用分析首先外面是一个大盒子,有边框,里面的盒子通过宽度的变大添加过渡,从而实现进度条的效果代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>CSS3案例-进度条</title> <style> div { width原创 2021-10-31 22:28:52 · 258 阅读 · 0 评论 -
CSS课堂案例14-三角
模拟实现京东页面上小三角分析可以划分为以下两个部分此次我们采用定位的方法,用两个块级盒子也能做,但是占据的空间会更大代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>三角制作</title> <style> * { padding: 0;原创 2021-10-25 21:41:56 · 58 阅读 · 0 评论 -
CSS课堂案例13-精灵图
利用精灵图拼出自己的名字精灵图代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>利用精灵图拼出自己的名字</title> <style> * { padding: 0; margin: 0; } sp原创 2021-10-25 19:55:34 · 155 阅读 · 0 评论 -
CSS课堂案例12-土豆网鼠标经过显示遮罩
案例鼠标经过时,显示一个黑色半透明的遮罩目的练习元素的显示和隐藏练习元素的定位核心原理: 原先半透明的黑色遮罩看不见,鼠标经过大盒子,就显示出来遮罩的盒子不占有位置,就需要用绝对定位和display配合使用代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con原创 2021-10-24 22:24:01 · 369 阅读 · 0 评论 -
CSS课堂案例11-淘宝焦点图布局
淘宝焦点图布局结构步骤代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>淘宝焦点图布局</title> <style> /* 初始化 */ * { margin: 0; padding: 0;原创 2021-10-24 20:55:11 · 1784 阅读 · 0 评论 -
CSS课堂案例10-学成在线案例
1.1准备素材和工具学成在线PSD源文件开发工具= PS(切图)+vscode(代码)+chrome(测试)1.2案例准备工作采取结构与样式相分离的思想创建study目录文件夹,用于存放整个页面的相关内容vscode打开这个目录文件夹study目录内新建images文件夹,存放图片素材新建首页文件index.html(以后首页文件同意这样命名)新建style.css文件,采用外链样式表将样式引入到HTML页面文件中样式表写入清楚内外边距的样式,用于检测样式表是否引入成功如下图所原创 2021-10-22 22:51:22 · 108 阅读 · 0 评论 -
CSS课堂案例9-小米布局案例2
浮动元素经常和标准流父级搭配使用小米布局案例分析大盒子里包括了四个盒子,盒子之间的距离相等如下所示过程中出现的问题:由于每个盒子之间有距离,一开始采用的是给每个盒子设置右外边距的方法,但是第四个盒子并不需要右外边距,导致了父盒子装不下 解决方法:给第四个盒子单独设置,外边距为0,考虑到权重问题,应该设置为.box .last<style> .box li { float: left; width: 29原创 2021-10-20 19:01:14 · 1359 阅读 · 0 评论 -
CSS课堂案例8-小米布局
浮动布局练习利用浮动初步实现页面布局的效果如图所示,可知可将改布局分成三部分,外面的大盒子作为标准流父级,约束浮动元素,内部分成左右两个浮动标签,中间无空隙<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>小米布局案例</title> <style> * {原创 2021-10-19 22:50:34 · 757 阅读 · 0 评论 -
CSS课堂案例7-小米产品模块
小米产品模块栏实现要求可以将整个页面划分为以下几个盒子代码实现<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>产品模块案例</title> <style> /*初始化,清除边距*/ * { margin: 0; p原创 2021-10-19 20:36:19 · 515 阅读 · 0 评论 -
CSS课堂案例6-快报模块列表
品优购快报模块模块可分为以下3个部分外面的大边框,品优购快报这一栏,以及下面的内容又是一部分<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi原创 2021-10-19 20:28:27 · 128 阅读 · 0 评论 -
CSS综合案例5-新浪导航案例
导航栏padding 影响盒子的好处相关取值代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>CSS盒子模型综合案例</title> <style> .nav { /*盒子高度、背景颜色*/ height: 41px;原创 2021-10-18 21:39:55 · 200 阅读 · 0 评论 -
CSS课堂案例4-五彩导航栏
五彩导航练习价值:链接属于行内元素,但此时需要宽度高度,因此需要模式转换里面文字需要水平居中和垂直居中,因此需要单行文字垂直居中的代码链接里面需要设置背景图片,因此需要用到背景的相关属性的设置鼠标经过背景图片,因此需要用到链接伪类选择器代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>CSS课堂案例-五彩导航<原创 2021-10-17 20:23:43 · 2079 阅读 · 0 评论 -
CSS课堂案例3-小米导航栏
简洁版小米侧边栏要求实现的效果,左侧红框部分思路分成两步:把链接a转换为块级元素,这样链接就可以单独占一行,并且可以设置高度和宽度鼠标经过a链接时,设置背景颜色代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>小米</title> <style> a {原创 2021-10-17 15:50:42 · 254 阅读 · 0 评论 -
CSS课堂案例2
新闻页面制作页面整体分成两步搭建HTML结构页面修改CSS样式HTML文件:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>天气预警</title> <link rel="stylesheet" href="14_2-综合案例样式.css"></head><body&g原创 2021-10-16 21:49:34 · 64 阅读 · 0 评论 -
CSS课堂案例1
使用类选择器画盒子类选择器的使用<div></div>就是一个盒子,用来装网页内容的<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>使用类选择器画三个盒子</title> <style> /*修改class属性为red的标签的样式*/ .r原创 2021-10-15 22:00:39 · 64 阅读 · 0 评论 -
HTML综合案例
注册页面使用学过的HTML标签的知识,来实现一个注册页面<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc原创 2021-10-15 20:47:06 · 87 阅读 · 0 评论 -
HTML课堂案例2
表格制作<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2021-10-14 21:49:38 · 129 阅读 · 0 评论