html如何布置网页盒子位置之小米官网实例

最新推荐文章于 2024-07-12 21:49:18 发布
最新推荐文章于 2024-07-12 21:49:18 发布
阅读量291 收藏
点赞数 7
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45419193/article/details/137699319
版权 

<!DOCTYPE html>
<html >
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="font_4488588_9f0ii8zd7cf/iconfont.css">
		<style type="text/css">
		
		
		
		
		
		
		body{
			width: 1264.33px;
			height: 7435.5px;
			margin: 0px;
		}	
		.site-topbar {
			width: 1263.33px;
		    position: relative;
		    z-index: 30;
		    height: 40px;
		    font-size: 12px;
		    color: #b0b0b0;
		    background: #333;
		    
		}
		a.toper-cateage{
			color: #b0b0b0;
			font-size: 12px;
		    line-height: 40px;
		    display: inline-block;
		   	text-decoration: none;
		}	
		
			
			
			
			
			
			
			
			
			
			
			.site-header{
				width:1263.33px ;
				height: 100px;
				background-color: #DDDDDD;
				z-index: 20;
			}
			.container{
				width: 1226px;
				height: 100px;
    			margin-right: auto;
    			margin-left: auto;
				
			}
			.header-logo{
				float: left;
			    width: 62px;
			    margin-top: 22px
			}
			.logo {
    			position: relative;
    			
    			width: 56px;
    			height: 56px;
    			overflow: hidden;
			}
			.header-nav{
				width: 850px;
				height: 100px;
				float: left;
			}
			.nav-category {
			    position: relative;
			    float: left;
			    width: 127px;
			    height: 88px;
			    padding-right: 15px;
		
			}
			.nav-list {
				list-style-type: none;
			    position: relative;
			    z-index: 10;
			    float: left;
			    width: 1100px;
			    height: 88px;
			    margin: 0;
			    padding: 12px 0 0 30px;
			    font-size: 16px;
			    
			}
			.nav-item{
				display: flex;
				
				justify-content: space-around;
				
				
			}
			a.nav-item{
				padding: 26px 10px 38px;
			}
			a:link{
				color:#757575 ;
				text-decoration: none;
			}
			li {
			    float: left;    
			}
			.header-search {
				display: flex;
			    float: right;
				margin-top: 25px;
			}
			.input{
				font-size:1.4em;
				height:2em;
				border:1px solid #c8cccf;
				color:#6a6f77;
				padding: 0px;
 
			}

			.home-hero{
				width: 1263px;
				height: 670px;
			}
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		.hero-top-left{
			display: flex;
			width: 240px;
			height: 460px;
			float: left;
			margin-top:0px ;
			background-color: #C8CCCF;
		}	
		.hero-top-right{
			width: 1000px;
			float:left;
		}	
		
		.home-cateage{
				display: flex;
			 	color:#757575 ;
			    height: 420px;
			    flex-direction: column;
	
		}
		li.nav-item{
			height: 42px;
			
		}
			
		
		
		
		
		
		
		
		.home-bottem{
			
			width: 1263px;
			height: 170px;
			margin-top: 14px ;

		
		}
		
		
		
		.bottem-span{
			float: left;
			margin-left:14px ;
			width: 226px;
			height: 170px;
			background: #5f5750;
		}
		
		

		li.bottem-left-li{
			list-style-type: none;
		}
		
		.bottem-left li {
	
		    position: relative;
		    float: left;
		    width: 47px;
		    height: 70px;
		    padding: 0 3px;
		    padding-top: 18px;
		    
		}
		.bottem-span16{
			float: left;
			margin-left: 14px;
			width: 1006px;
			height: 170px;
			background: #ccc;
		}
		.bottem-right img{
			margin-left: 14px;
			width:316px ;
			height: 170px;
		}	
		</style>
	</head>
	<body>
		
		<div class="site-topbar">
			<div class="site-topbar-nav">
				<a href="" class="toper-cateage">小米官网</a>
				|
				<a href="" class="toper-cateage">小米官网</a>
				|
				<a href="" class="toper-cateage">小米官网</a>
				|
				<a href="" class="toper-cateage">小米官网</a>
				|
				<a href="" class="toper-cateage">小米官网</a>
				|
				<a href="" class="toper-cateage">小米官网</a>
				|
				<a href="" class="toper-cateage">小米官网</a>
				|
				<a href="" class="toper-cateage">小米官网</a>
				
			</div>
			
		</div>
		
		<div class="site-header">
			
			<div class="container">
				<div class="header-logo" >
					<a href="#" class="logo">
						<img src="imag/logo-mi2.png" / width="56px" height="56px">
					</a> 
				</div>
				<div class="header-nav">
					<ul class="nav-list">

						<li class="nav-category"></li>
						<li data-index="0" ><a href="#" class="nav-item">Xiaomi手机</a></li>
						<li data-index="1" ><a href="#" class="nav-item">Redmi手机</a></li>
						<li data-index="2" ><a href="#" class="nav-item">电视</a></li>
						<li data-index="3" ><a href="#" class="nav-item">笔记本</a></li>
						<li data-index="4" ><a href="#" class="nav-item">平板</a></li>
						<li data-index="5" ><a href="#" class="nav-item">家电</a></li>
						<li data-index="6" ><a href="#" class="nav-item">路由器</a></li>
						<li data-index="7" ><a href="#" class="nav-item">服务中心</a></li>
						<li data-index="8" ><a href="#" class="nav-item">社区</a></li>
					</ul>
				</div>
				
				<div class="header-search">
					<form>
						<input type="text"  class="input"/>
						
					  	<span class="iconfont icon-sousuo" ></span>
					</form>
				
				</div>
				
			</div>
		</div>
		
		<div class="home-hero">

			<div class="hero-top" style="width: 1240px; height:460px ;">
				<div class="hero-top-left" >
					<ul class="home-cateage">
						<li data-index="0" class="nav-item"><span class="text">笔记本  平板</span></li>
						<li data-index="1" class="nav-item"><span class="text">笔记本  平板</span></li>
						<li data-index="2" class="nav-item"><span class="text">笔记本  平板</span></li>
						<li data-index="3" class="nav-item"><span class="text">笔记本  平板</span></li>
						<li data-index="4" class="nav-item"><span class="text">笔记本  平板</span></li>
						<li data-index="5" class="nav-item"><span class="text">笔记本  平板</span></li>
						<li data-index="6" class="nav-item"><span class="text">笔记本  平板</span></li>
						<li data-index="7" class="nav-item"><span class="text">笔记本  平板</span></li>
						<li data-index="8" class="nav-item"><span class="text">笔记本  平板</span></li>
						<li data-index="9" class="nav-item"><span class="text">笔记本  平板</span></li>
					</ul>
				</div>
				<div class="hero-top-right">
					<img src="imag/daa8668ce81bc05a5b8a6ef05072047d.jpg" / width="1020px " height="460px">
					
				</div>
			</div>
			
			<div class="home-bottem">
				<div class="bottem-span">
					<ul class="bottem-left">
						<li class="bottem-left-li">小米秒杀</li>
						<li class="bottem-left-li">小米秒杀</li>
						<li class="bottem-left-li">小米秒杀</li>
						<li class="bottem-left-li">小米秒杀</li>
						<li class="bottem-left-li">小米秒杀</li>
						<li class="bottem-left-li">小米秒杀</li>
					</ul>
				</div>
				<div class="bottem-span16">
					<div class="bottem-right">
						<img src="https://i1.mifile.cn/a4/xmad_15645846942857_zGfhK.jpg" />
						<img src="https://i1.mifile.cn/a4/xmad_15645846942857_zGfhK.jpg" />
						<img src="https://i1.mifile.cn/a4/xmad_15645846942857_zGfhK.jpg" />
					</div>
				</div>
				
			</div>
		</div>
	</body>
</html>

                                                                       效果图

qq_45419193
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html+css 简单的静态网页小米官网
犹如菜鸡的博客
09-04 1万+
html+css简单静态小米官网 把之前做的改进了一下，其他的都是一样的布局 效果图： 新增了一些字体文件 不多说上代码 HTML代码： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 网站说明 --> <me
HTML-小米布局
m0_74014745的博客
07-10 172
小米官网-手机布局
HTML + CSS 连载 | 20 - 盒子模型小米（上）
JingnanJia的博客
10-27 270
在前面学习完了 HTML 的盒子模型之后，我们可以尝试实现一些实际的案例，在电商系统的商品展示页面上的商品，我们可以将它们看做一个盒子，比如小米商城官网上的商品列表，我们来实现下面这个耳机的样式。接着我们需要对 img 元素进行样式的设置，原样式中 img 图片在盒子中是居中的，img 作为一个行内级元素，让 img 居中我们可以在 img 的父元素也就是 a 元素中使用。我们知道部分 HTML 元素本身是有一些样式的，比如 a 元素，接下来我们要对 a 元素进行一些样式的重置。
前端基础之小米网页编写（基础）
clover_oreo的博客
12-10 1617
之前犯了没有规划布局的错，版排丑陋、问题一堆，以至于满盘皆输、从头来过，所以重新返工的我老老实实从规划布局开始，观察小米官网，发现其首页可看做四个长方形大盒子排排站，每一个大盒子里又可分为若干小盒子，小盒子里又可嵌套小小盒子……盒子盒子无穷尽也。 html中关于box的类定义真的很多，定义时一定要分清，略作归类区别，以免后期太多混淆。 轮播： Bootstrap官网→v4→快速入门→组件→轮播 Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅
仿小米商城html网页源码
03-31
这个项目是模仿小米商城官方网站创建的HTML源代码，旨在为学习者提供一个实践和理解商城类网站前端设计的实例。 首先，HTML（HyperText Markup Language）是网页内容的基础，它定义了网页的结构。在这个项目中，...
Html5 Geolocation获取地理位置信息实例
09-27
主要介绍了Html5 Geolocation获取地理位置信息实例，具有一定的参考价值，有兴趣的同学可以了解一下。
网页设计项目实例网页设计项目实例
01-04
网页设计项目实例网页设计项目实例网页设计项目实例网页设计项目实例网页设计项目实例网页设计项目实例网页设计项目实例网页设计项目实例网页设计项目实例网页设计项目实例网页设计项目实例网页设计项目实例网页设计...
用Python程序抓取网页的HTML信息的一个小实例
01-21
抓取网页数据的思路有好多种，一般有：直接代码请求http、模拟浏览器请求数据（通常需要登录验证）、控制浏览器实现数据抓取等。这篇不考虑复杂情况，...下面这个片段，从ittf网站上获取指定页面上指定位置的链接。 u
网页设计与开发——HTML、CSS、JavaScript实例教程
07-22
资源名称：网页设计与开发——HTML、CSS、Javaｓｃｒｉｐｔ实例教程内容简介：本书从实用角度出发，详细讲解了HTML、CSS和Javaｓｃｒｉｐｔ的基本语法和设计技巧，通过一个实用的班级网站的规划、设计、实现到发布...
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 821
title>充电效果
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
qq_45831414的博客
07-08 409
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
Web开发 —— 放大镜效果（HTML、CSS、JavaScript）
最新发布
m0_65029152的博客
07-12 967
本文记录一下，使用HTML、CSS、JavaScript实现放大镜效果的过程，以及相关代码；
一文清晰了解HTML——简单实例
weixin_73074505的博客
07-08 325
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
HTML 标签简写及全称:表格内容将通过JavaScript动态生成
lulei5153的博客
07-09 233
【代码】HTML 标签简写及全称:表格内容将通过JavaScript动态生成。
初识HTML
Dxito_的博客
07-09 843
⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等。在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签，p表示一个段落。• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗)," "表⽰没边框.
第一章节：HTML 基础
Toasten
07-08 926
Web（World Wide Web）即全球广域网，也称为万维网。我们常说的 Web端 就是网页端。网页 是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera 等。
vue学习day02-Vue指令-v-html、v-show与v-if、v-else与v-else-if、v-on、v-bind、v-for、v-model
2301_76648183的博客
07-07 726
当表达式值为true时，无显著区别，当值为false时，v-show通过控制css的display：none来控制显示与隐藏。如果不加key，v-for的默认行为会尝试原地修改元素（就地复用）提供一个地址，这里是百度的地址，通过v-html渲染。作用：设置元素的innerHTML。语法：v-html=“表达式”提供一个布尔值和两个盒子。点击“切换显示与隐藏”

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值