CSS流式布局

最新推荐文章于 2024-05-14 18:25:49 发布
最新推荐文章于 2024-05-14 18:25:49 发布
阅读量114 收藏
点赞数
分类专栏： HTML 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48669897/article/details/114145017
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,
maximum-scale=1.0,minimum-scale=1.0">
    <!-- 引入CSS初始化文件-->
    <link rel="stylesheet" href="CSS/normalize.css">
    <!-- 引入首页CSS-->
    <link rel="stylesheet" href="CSS/index.css">
    <title>流式布局</title>
</head>
<body>
<header class="app">
    <ul>
        <li>
            <img src="" alt="">
        </li>
        <li>
            <img src="" alt="">
        </li>
        <li>****,****</li>
        <li>####</li>
    </ul>
</header>
<div class="search-wrap">
    <div class="search-btn">**</div>
    <div class="search">
        <div class="icon"></div>
        <div class="sou"></div>
    </div>
    <div class="search-login">##</div>
</div>
<div class="slider">
    <img src="" alt="">
</div>
<div class="brand">
    <div>
        <a href="#"><img src="" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="" alt=""></a>
    </div>
</div>
<nav>
    <a href="#">
        <img src="" alt="">
        <span>&&&&</span>
    </a>
    <a href="#">
        <img src="" alt="">
        <span>&&&&</span>
    </a>
    <a href="#">
        <img src="" alt="">
        <span>&&&&</span>
    </a>
    <a href="#">
        <img src="" alt="">
        <span>&&&&</span>
    </a>
    <a href="#">
        <img src="" alt="">
        <span>&&&&</span>
    </a>
    <a href="#">
        <img src="" alt="">
        <span>&&&&</span>
    </a>
    <a href="#">
        <img src="" alt="">
        <span>&&&&</span>
    </a>
    <a href="#">
        <img src="" alt="">
        <span>&&&&</span>
    </a>
    <a href="#">
        <img src="" alt="">
        <span>&&&&</span>
    </a>
    <a href="#">
        <img src="" alt="">
        <span>&&&&</span>
    </a>
</nav>
<div class="news">
    <a href="#">
        <img src="#" alt="">
    </a>
    <a href="#">
        <img src="#" alt="">
    </a>
    <a href="#">
        <img src="#" alt="">
    </a>
</div>

</body>
</html>

 

 

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
    background-color: #666666;
}

a {
    color: black;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    vertical-align: top;
}

* {
    -webkit-tap-highlight-color: transparent;
}

input {
    -webkit-appearance: none;
}

img,
a {
    -webkit-touch-callout: none;
}

.app {
    height: 45px;
}

.app ul li {
    float: left;
    height: 45px;
    background-color: #333333;
    text-align: center;
    line-height: 45px;
    color: #ffffff;
}

.app ul li:nth-child(1) {
    width: 8%;
}

.app ul li:nth-child(1) img {
    width: 10px;
}

.app ul li:nth-child(2) {
    width: 10%;
    background-color: chartreuse;
}

.app ul li:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
}

.app ul li:nth-child(3) {
    width: 57%;
}

.app ul li:nth-child(4) {
    width: 25%;
    background-color: purple;
}

.search-wrap {
    position: fixed;
    overflow: hidden;
    height: 44px;
    min-width: 320px;
    max-width: 640px;
    width: 100%;
}

.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
}

.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    /* background: url("") no-repeat;*/
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}

.search-login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    color: black;
    line-height: 44px;
}

.search {
    height: 30px;
    background-color: #ffffff;
    margin: 0 50px;
    border-radius: 15px;
    margin-top: 7px;
}

.icon {
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    /* background: url("") no-repeat;*/
    background-size: 20px 15px;
}

.icon::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #cccccc;
}

/*搜索图标使用精灵图*/
.sou {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    /*background: url(精灵图) no-repeat -81px 0;*/
    background-size: 200px auto;
}

.brand {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.brand div {
    float: left;
    width: 33.33px;
}

.brand div img {
    width: 100%;
}

nav {
    padding-top: 10px;
}

nav a {
    float: left;
    width: 20%;
    text-align: center;
}

nav a img {
    width: 40px;
    margin: 10px 0;
}

nav a span {
    display: block;
}

.news {
    margin-top: 20px;
}

.news img {
    width: 100%;
}

.news a {
    float: left;
    box-sizing: border-box;
}

.news a:nth-child(1) {
    width: 50%;
}

.news a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #cccccc;
}

 

旖旎沐心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
流式布局
liyutong12的博客
06-27 121
继承ViewGroup @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); measureChildren(widthMeasureSpec,heightMeasureSpec);...
流式布局总结
LOxia的博客
03-21 1537
流式布局总结
css多种布局方式
最新发布
博哥的二进制世界
05-14 1671
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。
【css】最全布局总结
qq_45406325的博客
08-13 7804
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
CSS布局方式之流动布局、浮动布局、定位布局讲解
weixin_44860226的博客
07-20 4933
css三种常规的布局方式，流动布局、浮动布局、定位布局等讲解
移动端视口、px、rpx
weixin_45985175的博客
07-31 1136
1、现状 移动端设备屏幕尺寸非常多，碎片化严重。Android设备有多种分辨率：480x800, 480x854等。作为开发者无需关注这些分辨率，因为常用的尺寸单位是 px 。 移动端浏览器我们主要对webkit内核进行兼容，我们现在开发的移动端主要针对手机端开发。 2、视口 视口就是浏览器显示页面内容的屏幕区域 视口分为布局视口、视觉视口和理想视口 我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽 想要理想视口，我们需要给我们的移动端页面添加 meta视口标 2.1 布局视口
css布局 之 流式布局-原子风格
12-19
在“css布局 之 流式布局-原子风格”这个主题中，我们将深入探讨如何利用JavaScript来模拟Poki Game官网的流式布局，尽管该官网原版使用了更为灵活但可能更复杂的CSS Grid布局。 首先，我们需要理解流式布局的基本...
不对称的流式布局
06-29
综上所述，这个资源包提供了关于HTML、CSS、jQuery和流式布局的实战示例，对于学习和理解响应式设计以及如何创建吸引人的网页布局具有很高的价值。开发者可以从中学习到如何利用现代Web技术创建适应不同设备的网页，...
CSS Grid布局教程之网格单元格布局
12-13
CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）...
用流式布局实现一个JD.zip
04-18
3. **Flexbox布局**：Flexbox，即弹性盒模型，是现代CSS布局系统之一，非常适合实现流式布局。通过设置容器的`display: flex;`属性，可以实现子元素的自动排列、对齐和分配空间，适应不同屏幕尺寸。 4. **Grid布局*...
js流式布局插件.zip
07-14
这个插件可能包含了JavaScript代码、CSS样式文件以及相关的示例或文档，帮助开发者在他们的项目中轻松地实现流式布局。 流式布局的核心思想是将页面元素以行或列的形式排列，并根据屏幕宽度动态调整元素的宽高和...
理解流式布局和响应式布局
热门推荐
冰雪为融的博客
06-10 2万+
流式布局：流式布局在CSS2时代就有，主要是靠百分比进行排版，可以在不同分辨率下显示相同的版式。流式布局：网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。这种布局方式在Web前端开发的早期历史上，用来...
移动WEB开发之-流式布局
m0_60237095的博客
03-21 2096
目录 移动WEB开发流式布局 1.0 移动端基础 1.1浏览器现状 1.2 ⼿机屏幕的现状 1.3常⻅移动端屏幕尺⼨ 1.4移动端调试⽅法 2.0 视⼝ 2.1 布局视⼝ layout viewport 2.2视觉视⼝ visual viewport 2.3理想视⼝ ideal viewport 2.4meta标签 最标准的viewport设置 3.0⼆倍图 3.1物理像素&物理像素⽐ 3.2背景缩放background-size 4.0 移动开发选择和技术解决⽅
关于前端布局---流式布局
CJB2020818的博客
09-13 1143
@[TOC]关于前端布局 前端的布局按其编写过程复杂程度可以分为传统布局与新式布局； 传统布局 所谓的传统布局就是不依赖与框架，主要是程序员根据CSS与HTML样式属性的运用来写的原生布局，比如dispaly、position、float等。 这种布局方式对程序员的基础知识要求较高，要会使用特定的样式属性，以及了解其使用的注意事项或者后期对布局的影响进行调试。但是，传统布局方式最大的好处就是其兼容性很好，对于IE6、IE7浏览器也能很好的兼容。 现代布局 新式布局，是对传统布局中存在的一些遗留疑难的解
【CSS】布局——三栏布局、两栏布局
小秀的博客
08-11 1161
【代码】【CSS】CSS 布局
前端之移动web开发学习
fujiaxu666的博客
10-10 320
移动端浏览器的现状 移动端的浏览器基本上是由webkit发展而来的，所以只需要采用处理webkit浏览器的方法即可，也就是说移动端的没有pc那么多的兼容性问题。 手机屏幕现状 做为开发人员来说，对于分辨率不予要太多的关注，因为我们常用的单位是px 物理像素比 参考博客 移动端的调试方法 视口 视口(viewport)就是浏览器显示内容的屏幕区域。分为：布局视口、视觉视口和理想视口。 布局视口（layout viewport） 视觉视口（visual viewport） 理想视口（ideal v
css经典4种经典流式布局
lmy233的博客
10-16 4624
左侧固定，右侧自适应 左边写死宽高，并浮动，右边高度写死，但是不能设置宽度，用margin-left去留出左边盒子的宽度，右边盒子会自动内减，右侧盒子不会被撑大。 一个没有width属性的标准流盒子，设置margin和padding并不会撑大盒子的实际宽度，相当于设置了box-sizing：border-box； 左侧自适应，右侧固定 设置第一个盒子右浮动，相当于右侧盒子，第二个盒子高度固定，宽度不写，设置margin-right，盒子自动内减 注意，不可先写左侧的固定盒子，否则，左侧盒子会占一行，右侧盒子
CSS流动布局-页面自适应
qq_20382175的博客
03-11 440
的元素布局是从左往右依次排列，块级元素从上往下排列，我们所说的脱离文档流也就是该元素从流中漂浮起来，与之前的元素不在同一个层级而形成的不占位效果。流的应用除了更改文档的水平流以外，还可以用来做对称布局，例如微信聊天页，更改。有了流这个概念后，我们可以通过更改流的水平流向来更改元素的排列方向。如果是行内元素，只需要更改水平流向即可实现元素的左右对齐。的水平流向，即可实现微信的自身和对方的聊天气泡定位。的概念，这种布局自然自动，像水流一样。属性影响的，如果文档的水平流向为右向左，那么。表示开始位置（左），
36. 流式布局
potato123232的博客
07-11 532
流式布局也叫百分比布局，我们在布局时不适用固定的像素值，我们下面布局一个看一下我像要在页面中放两个盒子，高度一个300px，另一个200px。宽度一个为30%，另一个为70%这样你无论用什么像素的手机显示的样子都是类似的把手机转过来也是一样为了让盒子内的内容正常显示，我们会通过设置最大(小)宽度，最大(小)高度对盒子的大小进行限制一般只对宽度进行约束，最小宽度一般设置为320px，最大宽度一般设置为640px，这个也得具体情况具体分析为了更好的理解流式布局，我们在下面模拟京东移动版的首页我们要注意的一点是，
微信小程序流式布局
05-26
微信小程序的流式布局可以通过使用 flex 布局来实现。使用 flex 布局可以让子元素自适应父容器的宽度，并且可以根据需要自动换行。 下面是一个简单的示例代码： ```html <view class="item">1 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旖旎沐心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值