搜索到
2
篇与
float
的结果
-
pc端小米官网首页部分练习 目录：参考图index.html 代码<!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>小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./fa/css/all.css"> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/index.css"> <!-- 设置网站的图标(在标题栏和收藏栏) -网站图片一般存储在网站的跟目录下，名字一般叫做favicon.ico --> <link rel="icon" href="./favicon.ico"> </head> <body> <!-- 外部容器，顶部导航条 --> <div class="top-bar-outer"> <!-- 内部容器 --> <div class="top-bar w clearfix"> <ul class="top-list"> <li><a href="javascript:;">小米商城</a></li> <li class="line">|</li> <li><a href="javascript:;">MIUI</a></li> <li class="line">|</li> <li><a href="javascript:;">IOT</a></li> <li class="line">|</li> <li><a href="javascript:;">云服务</a></li> <li class="line">|</li> <li><a href="javascript:;">金融</a></li> <li class="line">|</li> <li><a href="javascript:;">有品</a></li> <li class="line">|</li> <li><a href="javascript:;">小爱开发平台</a></li> <li class="line">|</li> <li><a href="javascript:;">企业团购</a></li> <li class="line">|</li> <li><a href="javascript:;">协议规则</a></li> <li class="line">|</li> <li class="app-download"> <a class="app" href="javascript:;">下载app <div class="download"> <img src="./img/mi.app.png"> <span>小米商城app</span> </div> </a> </li> <li class="line">|</li> <li><a href="javascript:;">智能生活</a></li> <li class="line">|</li> <li><a href="javascript:;"> Select Location</a></li> </ul> <ul class="shop-cart"> <li><a href="javascript:;"> <i class="fas fa-shopping-cart"></i> 购物车（0） </a></li> </ul> <ul class="user-info"> <li><a href="javascript:;">消息通知</a></li> <li class="line">|</li> <li><a href="javascript:;">注册</a></li> <li class="line">|</li> <li><a href="javascript:;">登录</a></li> </ul> </div> </div> <!-- 头部导航，外部容器--> <div class="header-list"> <div class="header w clearfix"> <h1 class="logo"> <a href="/"></a> </h1> <!-- 创建中间部分的导航条 --> <div class="nav-wrapper"> <ul class="nav"> <li class="all-wrapper"> <a class="all" href="#">全部商品分类</a> <!-- 创建左侧菜单 --> <div class="left-menu"> <nav class="menu"> <a href="javaScript:;">手机 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">电视 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">笔记本 平板 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">家电 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">出行 穿戴 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">智能 路由器 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">电源 配件 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">健康 儿童 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">耳机 音响 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">生活 箱包 <i class="fas fa-angle-right"></i> </a> </nav> </div> </li> <li class="goods-show"><a href="#">小米手机</a></li> <li class="goods-show"><a href="#">Redmi 红米</a></li> <li class="goods-show"><a href="#">电视</a></li> <li class="goods-show"><a href="#">笔记本</a></li> <li class="goods-show"><a href="#">家电</a></li> <li class="goods-show"><a href="#">路由器</a></li> <li class="goods-show"><a href="#">智能硬件</a></li> <li><a href="#">服务</a></li> <li><a href="#">社区</a></li> <!--创建商品隐藏层 --> <div class="goods-info"> </div> </ul> </div> <!-- 搜素框外部容器 --> <div class="search-for"> <form class="search" action="#"> <input class="search-inp" type="text"> <button class="search-btn" type="button"> <i class="fas fa-search"></i> </button> </form> </div> </div> </div> <!-- 创建banner 容器--> <div class="banner-wrapper"> <!-- 创建内容部 --> <div class="banner w"> <ul class="banner-img"> <li> <a href="javaScript:;"> <img src="./img/banner2.png" alt=""> </a> <li> <a href="javaScript:;"> <img src="./img/banner1.png" alt=""> </a> </li> <li> <a> <img src="./img/banner3.png" alt=""> </a> </li> <li> <a href="javaScript:;"> <img src="./img/banner4.png" alt=""> </a> </li> </li> </ul> <div class="drop"> <a class="active" href="javaScript:;"></a> <a href="javaScript:;"></a> <a href="javaScript:;"></a> <a href="javaScript:;"></a> </div> <div class="previous-next"> <a class="previous" href="javaScript:;"></a> <a class="next" href="javaScript:;"></a> </div> </div> </div> <!-- 创建banner下的容器 --> <div class="span1 w"> <ul class="special-list"> <li> <a href=""> <img src="./img/1.png" alt="保障服务">保障服务 </a> </li> <li> <a href=""> <img src="./img/2.png" alt="企业团购">企业团购 </a> </li> <li> <a href=""> <img src="./img/3.png" alt="F码通道">F码通道 </a> </li> <li> <a href=""> <img src="./img/4.png" alt="米粉卡">米粉卡 </a> </li> <li> <a href=""> <img src="./img/6.png" alt="依旧换新">依旧换新 </a> </li> <li> <a href=""> <img src="./img/5.png" alt="话费充值">话费充值 </a> </li> </ul> <!-- 图片 --> <ul class="span1-imgs"> <li> <a href=""> <img src="./img/7.jpg" alt=""> </a> </li> <li> <a href=""> <img src="./img/8.jpg" alt=""> </a> </li> <li> <a href=""> <img src="./img/9.jpg" alt=""> </a> </li> </ul> </div> </body> </html>index.css/*设置外部容器*/ .top-bar-outer{ background-color: #333; line-height: 40px; } /*设置字体*/ .top-bar a { color: #b0b0b0; font-size: 12px; display: block; } /*设置鼠标移入时候文字颜色*/ .top-bar a:hover{ color: #fff; } /*设置左侧导航*/ .top-bar .top-list li{ float: left; } /*给li设置鼠标移入*/ .app-download:hover .download, .app-download .app:hover::after { display: block; height: 148px; } /*给下载app超链接开启相对定位，这样三角会父元素进行定位*/ .app{ position: relative; } /*设置小三角样式，利用border，去除top，left+right的color为透明transparent*/ .app-download .app::after{ display: none; content: ''; border: 8px solid transparent; border-top: none; border-bottom-color: #fff; width: 0px; height: 0px; /*开启绝对定位*/ position: absolute; /*让小三角相对于父元素居中，根据绝对定位水平居中公式条件，right:0 left:0 margin:auto*/ bottom: 0px; left: 0px; right: 0px; margin: auto; } /*设置下载app下拉框*/ .app .download{ /* display: none; */ width: 124px; /* height: 148px; */ height: 0px; overflow: hidden; background-color: #fff; line-height: 1px; text-align: center; position: absolute; z-index: 999; left: -40px; box-shadow: 0px 0px 10px rgba(0, 0,0 , .3); /* transition:用于为样式设置过渡效果，样式高度必须发现变化才有效果*/ transition: height 0.5s; } /*这是二维码*/ .app .download img{ width: 90px; height: 90px; margin: 17px; } /*设置二维码下拉框*/ .app .download span{ color: #000; font-size: 14px; } /*设置右侧user*/ .top-bar .user-info li{ float: right; } /*设置右侧购物*/ .top-bar .shop-cart li{ float: right; } .shop-cart a{ width: 120px; background-color: #424242; text-align: center; margin-left: 23px; } .shop-cart:hover a{ color: #FF6B00; background-color: #fff; } /*设置分割线*/ .line{ color: #424242; font-size: 12px; margin: 0px 8px; } /* 头部布局样式*/ .header-list{ position: relative; } /* 内部容器*/ .header{ height: 100px; } .header .logo{ float: left; width: 55px; height: 55px; margin-top: 22px; /*隐藏小米官网文字*/ /* text-indent: -999px; */ } /*logo设置*/ .header .logo a{ position: absolute; width: 55px; height: 55px; background-color: #FE6700; background-image: url(../img/logo-mi2.png); background-size: contain; } /*头部中间导航条样式*/ .header .nav-wrapper{ float: left; margin-left: 7px; } /*设置导航条*/ .nav{ height: 100px; line-height: 100px; padding-left: 58px; } .header .nav-wrapper li{ float: left; } /*设置字体样式*/ .nav-wrapper li a{ font-size: 16px; margin-right: 20px; display: block; color: #333; } .nav-wrapper li a:hover{ color: #FF6700; } /*设置商品下拉框*/ .goods-info{ width: 100%; /* height: 228px; */ height: 0px; overflow: hidden; /* border-top: 1px solid rgb(224, 224, 224); box-shadow: 0px 5px 3px rgba(0, 0,0 , .2); */ background-color: #fff; position: absolute; z-index: 9999; left: 0px; top: 100px; transition: height 0.3s; } /*设置鼠标移入出来*/ .nav .goods-show:hover ~ .goods-info, .goods-info:hover{ height: 228px; border-top: 1px solid rgb(224, 224, 224); box-shadow: 0px 5px 3px rgba(0, 0,0 , .2); } /*隐藏全部商品*/ .all{ visibility: hidden; } /*设置左侧导航菜单*/ .all-wrapper{ position: relative; } .left-menu{ width: 234px; height: 420px; background-color: rgba(0, 0,0 , .6); padding: 20px 0 ; line-height: 1; position: absolute; z-index: 999; left: -120px; } .left-menu .menu a{ display: block; height: 42px; line-height: 42px; margin-right: 0px; padding: 0 30px; color: white; font-size: 14px; } .left-menu .menu i{ float: right; line-height: 42px; } .left-menu .menu a:hover{ color: white; background-color: #FE6700; } /*设置搜素框*/ .search-for{ width: 296px; height: 50px; float: right; margin-top: 25px; } .search-for .search-inp{ box-sizing: border-box; width: 244px; height: 50px; padding: 0px; float: left; border: none; padding: 0 10px; border: 1px solid rgb(224, 224, 224); outline: none; } .search-for .search-btn{ height: 50px; width: 52px; float: left; /* padding: 0px; border: none; */ background-color: #fff; color: #616161; font-size: 16px; border: 1px solid rgb(224, 224, 224); border-left: none; } /*获取焦点*/ .search-for .search-inp:focus, .search-for .search-inp:focus + button{ border-color: #FF6700; } .search-for .search-btn:hover{ background-color: #FF6700; color: white; border: 0px; } /*banner的布局*/ .banner { height: 460px; position: relative; } .banner .banner-img li { position: absolute; } .banner .banner-img img{ width: 100%; vertical-align: top; } /*设置4个导航点*/ .drop{ position: absolute; bottom: 22px; right: 35px; } .drop a{ float: left; width: 6px; height: 6px; border: 2px solid rgba(255, 255,255,.4); border-radius: 50%; background-color:rgba(0, 0,0 ,.4); margin-right: 6px; } .drop a:hover, .drop a.active{ border: 2px solid rgba(0, 0,0 ,.4); background-color: rgba(255, 255,255,.4); } /*设置图片上箭头*/ .previous-next a{ width: 41px; height: 69px; background-image: url(../img/icon-slides.png); position: absolute; top: 0px; bottom: 0px; margin: auto 0; } .previous-next .previous{ left: 234px; background-position: -86px 0; } .previous-next .next{ right: 0px; background-position: -125px 0; } .previous-next .previous:hover{ background-position: 0 0; } .previous-next .next:hover{ background-position: -42px 0; } /* 设置banner下*/ /*设置左侧快捷方式*/ .span1{ height: 170px; margin-top: 14px; } .span1 .special-list, .span1-imgs, .span1 li{ float: left; } .special-list{ width: 234px; height: 170px; background-color: #5F574E; margin-right: 14px; padding-top: 2px; } .span1 .special-list a{ display: block; width: 75px; height: 66px; text-align: center; padding-top: 18px; font-size: 12px; color: #CFCAC1; margin: 0px; } .span1 .special-list a:hover{ color: #fff; } /*快捷方式图片*/ .special-list img { display: block; width: 24px; height: 24px; margin: 0 auto 4px; border: 0px; } .span1 .special-list li{ position: relative; } /*设置上边框*/ .span1 .special-list li::before{ content: ''; width: 64px; height: 1px; background-color: #665E57; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; } /*设置左边框*/ .span1 .special-list li::after{ content: ''; position: absolute; width: 1px; height: 70px; background-color: #665E57; top: 0; bottom: 0; margin: auto 0; } /*设置右侧图片*/ .span1 .span1-imgs li{ float: left; width: 316px; margin-right: 15px; } .span1 .span1-imgs li:last-child{ margin: 0; } .span1 .span1-imgs img{ width: 100%; vertical-align: top; } base.css.clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; } body{ font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif; color: #333; min-width: 1226px; } a{text-decoration: none; /* color: #b0b0b0; font: 12px; */} .w{ width:1226px ; margin: 0 auto; }其他cssreset.css 这个为去除浏览器默认样式all.css 这个为图标字体图片的使用http://www.wxly.cc/usr/uploads/2021/12/2237414842.pnghttp://www.wxly.cc/usr/uploads/2021/12/2635064497.pnghttp://www.wxly.cc/usr/uploads/2021/12/1419879778.pnghttp://www.wxly.cc/usr/uploads/2021/12/1332906518.pnghttp://www.wxly.cc/usr/uploads/2021/12/1779354082.pnghttp://www.wxly.cc/usr/uploads/2021/12/1608171574.pnghttp://www.wxly.cc/usr/uploads/2021/12/647259256.pnghttp://www.wxly.cc/usr/uploads/2021/12/1500518471.pnghttp://www.wxly.cc/usr/uploads/2021/12/3454991676.pnghttp://www.wxly.cc/usr/uploads/2021/12/2893227666.jpghttp://www.wxly.cc/usr/uploads/2021/12/2873788110.jpghttp://www.wxly.cc/usr/uploads/2021/12/3121258918.jpghttp://www.wxly.cc/usr/uploads/2021/12/2875614189.pnghttp://www.wxly.cc/usr/uploads/2021/12/3159512756.pnghttp://www.wxly.cc/usr/uploads/2021/12/4168604913.pnghttp://www.wxly.cc/usr/uploads/2021/12/1225035722.pnghttp://www.wxly.cc/usr/uploads/2021/12/4267209792.pnghttp://www.wxly.cc/usr/uploads/2021/12/4267209792.png效果图 -
float属性（浮动） clear 以及after伪元素 float通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用float属性来设置于元素的浮动 可选值： none 默认值，不浮动 left 元素向左浮动 right 元素向右浮动 注意： 元素设置浮动后，水平居中的等式便不需要强制成立 元素浮动以后，会完全从文档刘中脱离，不在占用文档流的位置，所以元素下边的还在文档流的元素会自动向上移动浮动的特点 1.浮动元素会脱离文档里，不会占据文档流的位置 2.设置浮动以后元素会向父元素的左侧或右侧移动 3.浮动元素默认不会从父元素中移动 4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素 5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移 6.浮动元素不会超过它上边的浮动的兄弟元素，最多和它一样高clear 作用：清除浮动元素对当前元素所产生的影响可选值： left 清除左侧浮动元素对当前元素所产生的影响 right 清除右侧浮动元素对当前元素所产生的影响 both 清除两侧中最大影响的那侧原理：设置清除浮动以后，浏览器会自动为元素添加一个外边框以使其位置不受其他元素的影响after伪元素来让子元素 在悬浮撑开父元素 脱离文档流的特点块元素： 1.块元素不在独占页面的一行 2.脱离文档流以后，块元素的宽度和高度默认都被内容撑开行内元素：行内元素脱离文档流以后会变成块元素，特点和块元素一样脱离文档流以后，不需要再区分块和行内了网页布局：代码：<!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>网页布局</title> <style> header,main,footer{ margin: 0px auto; } header{ width: 1000px; height: 150px; background-color:#b9b9b9; } main{ width: 1000px; height: 400px; background-color: #bfa; margin: 10px auto; } nav,article,aside{ float: left; height: 100%; } nav,aside{ width: 190px; } nav{ background-color: yellow; } article{ width: 600px; margin: 0 10px; background-color: orange; } aside{ background-color: pink; } footer{ width: 1000px; height: 150px; background-color: #b9b9b9; } </style> </head> <body> <header></header> <main> <nav></nav> <article></article> <aside></aside> </main> <footer></footer> </body> </html>clear 练习效果：<!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>Document</title> </head> <style> .box1{ width: 200px; height: 200px; background-color: pink; float: left; } .box2{ width: 400px; height: 400px; background-color: yellow; float: right; } .box3{ width: 200px; height: 200px; background-color: orange; clear: both; } /* 由于box1的浮动，导致box3位置上移 也就是box3受到box1的影响，位置发生了改变 如果不想因为某个元素因为其他元素浮动而受到影响而改变位置 可以通过clear属性来清除浮动元素对当前元素所产生的影响 clear 作用：清除浮动元素对当前元素所产生的影响 可选值： left 清除左侧浮动元素对当前元素所产生的影响 right 清除右侧浮动元素对当前元素所产生的影响 both 清除两侧中最大影响的那侧 原理： 设置清除浮动以后，浏览器会自动为元素添加一个外边框 以使其位置不受其他元素的影响 */ </style> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </body> </html>after伪元素使用 <style> .box1{ border: 10px red solid; } .box2{ width: 100px; height: 100px; background-color: pink; float: left; } /*利用after伪元素来让子元素在悬浮撑开父元素*/ .box1::after{ content: ''; /*转换成块级*/ display: block; /*清除*/ clear: both; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body>
