- 博客(12)
- 收藏
- 关注
原创 小米官网静态网页项目实战6
最底下图标字体与广告栏 部分结构代码: <!-- 创建广告容器 --> <div class="ad w"> <ul class="shortcut"> <li> <a href="#"> <i class="fas fa-clock"></i> 小米秒杀
2021-04-29 17:11:05 313
原创 小米官网静态网页项目实战5
商品分类导航条以及中间广告栏 结构: <!DOCTYPE html> <html lang="en"> <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">
2021-04-27 19:19:37 315
原创 小米官网静态网页项目实战4
中间导航条 结构: <!DOCTYPE html> <html lang="en"> <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"> <ti
2021-04-23 12:43:55 267
原创 小米官网静态网页项目实战3
小米商城APP二维码下拉以及过渡效果 结构 <!DOCTYPE html> <html lang="en"> <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">
2021-04-22 11:33:01 453
原创 小米官网静态网页项目实战2
顶部导航条 结构:最外围的容器(最大) 三个div块 左右两侧各一块,购物车独占一块(样式需设置) css下的文档(样式) /* 主页index1.html的样式表 */ /* 顶部导航条的样式 */ .topbar-wrapper{ /* 设置宽度全屏 */ width: 100%; /* 设置高度和行高 */ height: 40px; line-height: 40px; /* 设
2021-04-21 17:37:50 343
原创 小米官网静态页面项目实战教学1
项目的搭建 为了让代码更有条理,也方便修改。我们新建一个mi的文件夹,在其目录下分别再新建三个文件夹:css、fa、img,css文件夹用来存放重置样式表、公共样式表、页面样式表等文档,文件夹fa用来存放图标字体,文件夹img用来存放素材图片。 结构的划分:将整个页面进行一块块的拆分,一块一块的来写。 ...
2021-04-21 17:24:06 241
原创 再导航条练习
CSS浮动,图标字体以及盒模型的运用 <!DOCTYPE html> <html lang="en"> <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">
2021-04-17 16:37:29 174
原创 轮播图练习
CSS浮动的运用 <!DOCTYPE html> <html lang="en"> <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"> <tit
2021-04-17 16:12:08 143
原创 导航条练习
CSS浮动的运用 <!DOCTYPE html> <html lang="en"> <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"> <tit
2021-04-17 16:05:29 120
原创 新闻练习
CSS盒模型的运用,选择器,超链接 <!DOCTYPE html> <html lang="en"> <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">
2021-04-10 15:43:23 177
原创 购物导航条练习
class选择器,超链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <
2021-04-09 20:15:41 150 1
原创 图片的列表练习
图片列表 <!-- <div> <a href="javascript:;"><img src="" alt=""></a> <a href="javascript:;"><img src="" alt=""></a> <a href="javascript:;"><img src="" alt="">&l...
2021-04-09 17:32:14 100
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人