前端学习笔记-11盒子模型布局案例-模拟小米网站布局

最新推荐文章于 2024-03-26 10:40:56 发布
最新推荐文章于 2024-03-26 10:40:56 发布
阅读量839 收藏 16
点赞数 1
分类专栏： HTML和CSS布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KathyLJQ/article/details/114393536
版权

小米原网站
在这里插入图片描述模拟布局
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
    
				margin: 0;
				padding: 0;
			}
			body{
    
				background-color: lightgray;
			}
			.outter{
    
				margin: 10px auto;
				width: 1228px;
				height: 614px;
				background-color: white;				
			}
			.outter .left, .outter .right{
    
				float: left;
			}
			.outter .left{
    
				width: 234px;
				height: 100%;
				background-color: darkred;
			}
			.outter .right{
    
				width: 994px ;
				height: 100%;
				background-color: #F5F5F5;
			}
			.right>div{
    
				float: left;
				width: 232px;
				height: 301px;
				background-color:white;
				margin-bottom: 12px;
				margin-left: 12px;
				text-align: center;
			}
			.right>div:hover{
    
				box-shadow: 10px 10px 10px rgba(0,0,0,.1);
			}
			.top .small{
    
				margin: 0 auto;
			}

			.outter .right img{
    
				margin-top: 15px;
				width: 160px;
				height: 160px;
			}
			a{
    
				text-decoration: none;
			}
			body .right .cellphone_type{
    
				margin-top: 10px;
			}
			body .right .cellphone_type a{
    
				font-size: 14px;
				font-weight: 400;
				color: #000000;
				line-height:14px ;
			}
			body .outter .right .cellphone_discrip{
    
				display: block;
				margin-top:2px ;
				margin-bottom: 15px;
				height:15px ;
				text-overflow: ellipsis;
				overflow: hidden;
				text-align: center;
				
			}
			body .outter .right .cellphone_discrip a{
    
				font-size: 11px;
				font-weight: 400;
				color: gray;
				line-height: 11px;
				
			}
			body .outter .right .price{
    
				display:inline-block;				
			}
			body .outter .right .price a{
    
				
				font-size: 13px;
				color: orangered;
			}
			body .outter .right .old_price a{
    
				text-decoration: line-through;
				font-size: 13px;
				color:gray;
最低0.47元/天 解锁文章
KathyLJQ
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Html5+Css实战前端小米官网左侧导航（思路+详解+素材）
叶允恒的博客
06-08 4806
实战后的效果 大家好，我是小叶同学，如今都大二了，跟着学校老师只学到皮毛，不如自己自学，说起来也惭愧，今天实战Html+CSS小米官网左侧导航开发，后面也会一点点对小米官网全部开发，欢迎前来坐坐沙发 布局 首先创建一个大盒子，里面给一个居中盒子，居中盒子给一个相对定位，左侧导航根据居中盒子进行绝对定位，相当于对根据Logo定位比较简单 当看到图片的时候，相信各位有了布局思路，我们看看它的组成部分，分别是轮播图和左侧导航，但是你可以看见因为这两个是重叠在一起的，因此可以知道 轮播图 肯定是使用了 posi
小米商城-产品模块-盒子模型综合练习
soraru的博客
05-31 588
<!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"> <title&gt...
前端项目 仿小米商城
m0_53841989的博客
08-27 1885
html5+css3
浅析小米登录/注册页面（原生）
MoYuP_ENG的博客
08-29 6835
主要介绍了注册页面的整体布局的内容。
综合案例--小米布局-li
qq_51526075的博客
01-11 341
<style> * { margin: 0; padding: 0; box-sizing: border-box; } .banner { margin: 0 auto; width: 1226px; height: 614px; /* background-color: p..
前端学习笔记-ES6-ES11
05-26
ES6-ES11学习笔记
前端学习笔记-黑马程序员
01-09
前端学习笔记-黑马程序员 本篇文章主要介绍了 HTML 基础知识，涵盖了标签的基本概念、HTML 基本结构、文档类型声明、字符集、标签语义、标题标签、段落和换行标签、文本格式化标签、图像标签、路径、超链接标签、...
前端学习笔记-微信小程序学习笔记
01-09
前端学习笔记-微信小程序学习笔记 微信小程序是一种基于微信平台的轻量级应用程序，提供了前端开发的解决方案。本笔记总结了微信小程序的基本组成部分、JSON 配置文件的作用、WXML 模板语法、WXSS 样式语言、JS ...
基础知识学习笔记-MVC（模型-视图-控制器）
12-22
MVC 模型—视图—控制器 一种软件架构模式，把软件系统分为三个基本部分模型（Model），视图（View），控制器（Controller） 用户通过 使用 控制器来 操作 模型 ，模型负责 更新 视图中的内容，用户通过 检视 视图来...
前端响应式布局笔记-flex
最新发布
06-05
在前端开发领域，响应式布局是一项至关重要的技术，它使得网页设计能够适应各种不同尺寸的设备，如桌面、平板电脑和手机。Flex布局，全称为Flexible Box，是CSS3引入的一种布局模型，专为了解决复杂的网页布局问题，...
web前端页面实例
06-17
学习web前端开发中搜集的一些，js、jquery、css实现的web脚本。在需要的时候可以找找借鉴借鉴。
网页设计必备技能：如何用CSS盒子模型打造完美布局？
云端源想的博客
03-26 1087
在网络设计的世界里，盒子模型是构建网页布局的基石，只有理解了盒子模型，我们才能更好的进行网页布局。HTML中的每一个元素都可以看成是一个盒子，拥有盒子一样的外形和平面空间，它不可见、不直观，但无处不在，所以初学者很容易在这上面出问题。今天就让我们来深入了解一下盒子模型。
【CSS3】一文搞懂盒子模型（知识点加案例）
qq_49900295的博客
02-08 3192
看透网页布局本质 行内元素比如文字类似牛奶，需要一个盒子把他们装起来，我们所学过的双标签都是一个盒子。有了盒子，我们就能任意的，自由的摆放位置了。 看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。 比如我们打开小米的官网： 显而易见，他就是由一个个大小不一功能不同的盒子组成。 盒子模型组成 上面的图片说明了盒子模型(Box Model)： Margin(外边距) - 清除边框外的区域，外边距是透明的 Border(边框) - 围绕在内边距和内容外
CSS3盒子模型（FLex弹性布局）实例代码全公开
qq_35658349的博客
08-25 3815
前言 CSS3中的盒子模型（Flex弹性布局），是目前最流行的布局方式，相比于传统的Position，FLoat，Table 布局，盒子模型可以用更少的代码，实现更好的效果（比如：各种居中、对齐等）。 本文将把盒子模型中的各种布局方式，全面展示出来，并且直接提供相关代码，供读者使用。 GitHub项目地址：https://github.com/jiangjiaheng/CSS 项目展示 1. 盒...
CSS--盒子模型(box)--使用/教程/实例
IT利刃出鞘的博客
12-19 4531
说明 本文介绍CSS中的盒子模型的用法。 盒子模型介绍 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
html+css实战123-综合案例-导航
geyaoisnice的博客
06-16 245
html
盒子模型和div布局
热门推荐
Hello World
01-21 1万+
background的覆盖范围是content区域加上padding区域。 许多浏览器都有自己默认的margin和padding值，我们可以通过将元素的margin和padding设置为0来覆盖原本的浏览器样式。 * { margin: 0; padding: 0; } float： 当一个div容器里没有内容且不指明width时，他的宽度默认100%，但是当为这个div设
html布局，小米布局案例练习，填充内容即可
weixin_45077672的博客
04-06 791
小米网站原图： 自己写的布局盒子： 源码： <!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"&
421day(css3盒子模型，小米实例)
orangecloudy的博客
11-29 239
《2018年11月29日》【连续421天】 标题：css3盒子模型，小米实例； 内容： css3盒子模型； div { width: 300px; height: 300px; padding: 30px; border-right: 20px solid red; background-color: blue; box-sizing: border-...
前端Bootstrap+Es6+vue学习笔记
06-10
通过路由来实现单页面应用的页面切换------------前端Bootstrap Es6 vue学习笔记，内容围绕着前端开发的三大核心技术：Bootstrap、Es6和Vue.js展开。 首先，介绍了Bootstrap框架的基础环境配置。通过开发者工具的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值