flex 简单案例

 <!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>
    body{
        max-width: 540px;
        min-width: 320px;
        margin: 0 auto;
        font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
        color: #000;
        background: #f2f2f2;
        overflow-x: hidden;
        -webkit-tap-highlight-color: transparent;
    }
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
        color: #222;
    }
    
    div {
        box-sizing: border-box;
    }
    /* 搜索栏 */
    .serch_inex{
        max-width: 540px;
        min-width: 320px;
        position: fixed;
        top: 0;
        left: 50%;
        width: 100%;
        height: 44px;
        transform:translateX(-50%);
        display: flex;
    }
    .serch{
        flex: 1;
        height: 26px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 6px 10px;
        padding-left: 25px;
        color: #ccc;
        cursor: pointer;
    }
    .user{
        width: 44px;
        color: #14a7eb;
        font-size: 12px;
        text-align: center;
    }
    .user::before{
        content: "";
        display: block;
        width: 23px;
        height: 23px;
        background: #000;
        margin:4px  auto 0;
        border-radius: 50%;
    }
    /* 焦点图 */
    .focus{
        margin-top: 45px;
    }
    .focus img{
        width: 100%;
        height: 100px;
    }
 
    /* 局部导航栏 */
    .local-nav{
        height: 64px;
        display: flex;
        background:#fff;
        margin: 3px 4px;
        border-radius: 8px;
    }
    .local-nav li {
        flex: 1;
        background: #ccc;
    }
    .local-nav a{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .local-nav li [class^="local-nav-icon"]{
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-top: 8px;
    }
    .local-nav-icon1{
        background: #000;
    }
    .local-nav-icon2{
        background: rgb(231, 129, 11);
    }
    .local-nav-icon3{
        background: rgb(70, 224, 9);
    }
    .local-nav-icon4{
        background: rgb(223, 12, 135);
    }
    .local-nav-icon5{
        background: rgb(73, 4, 44);
    }
</style>
<body>
    <!-- 搜索栏 -->
    <div class="serch_inex">
        <div class="serch">搜索：-------</div>
        <a href="https://www.cnblogs.com/zxh-bug" class="user">我 的</a>
    </div>
    <!-- 焦点图 -->
    <div class="focus">
        <img src="https://cdn.cnblogs.com/jsDelivr/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.8/dist/images/e58d9f9d0eee6d9b9add.webp" alt="">
    </div>
    <!--局部导航栏  -->
    <ul class="local-nav">
        <li>
            <a href="#">
                <span class="local-nav-icon1"></span>
                <span>1</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon2"></span>
                <span>2</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon3"></span>
                <span>3</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon4"></span>
                <span>4</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon5"></span>
                <span>5</span>
            </a>
        </li>
    </ul>
</body>
</html>

posted @ 2022-09-20 23:22 前端搬运工bug 阅读(29) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· flex 父元素属性

· flex 子元素属性设置

· flex的全部使用

· flex布局

· flex 多行平均分布

flex 简单案例

公告

搜索

常用链接

随笔分类 (107)

阅读排行榜

推荐排行榜

最新评论

	<!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>
	body{
	max-width: 540px;
	min-width: 320px;
	margin: 0 auto;
	font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
	color: #000;
	background: #f2f2f2;
	overflow-x: hidden;
	-webkit-tap-highlight-color: transparent;
	}
	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
	a {
	text-decoration: none;
	color: #222;
	}

	div {
	box-sizing: border-box;
	}
	/* 搜索栏 */
	.serch_inex{
	max-width: 540px;
	min-width: 320px;
	position: fixed;
	top: 0;
	left: 50%;
	width: 100%;
	height: 44px;
	transform:translateX(-50%);
	display: flex;
	}
	.serch{
	flex: 1;
	height: 26px;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 6px 10px;
	padding-left: 25px;
	color: #ccc;
	cursor: pointer;
	}
	.user{
	width: 44px;
	color: #14a7eb;
	font-size: 12px;
	text-align: center;
	}
	.user::before{
	content: "";
	display: block;
	width: 23px;
	height: 23px;
	background: #000;
	margin:4px auto 0;
	border-radius: 50%;
	}
	/* 焦点图 */
	.focus{
	margin-top: 45px;
	}
	.focus img{
	width: 100%;
	height: 100px;
	}

	/* 局部导航栏 */
	.local-nav{
	height: 64px;
	display: flex;
	background:#fff;
	margin: 3px 4px;
	border-radius: 8px;
	}
	.local-nav li {
	flex: 1;
	background: #ccc;
	}
	.local-nav a{
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	.local-nav li [class^="local-nav-icon"]{
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-top: 8px;
	}
	.local-nav-icon1{
	background: #000;
	}
	.local-nav-icon2{
	background: rgb(231, 129, 11);
	}
	.local-nav-icon3{
	background: rgb(70, 224, 9);
	}
	.local-nav-icon4{
	background: rgb(223, 12, 135);
	}
	.local-nav-icon5{
	background: rgb(73, 4, 44);
	}
	</style>
	<body>
	<!-- 搜索栏 -->
	<div class="serch_inex">
	<div class="serch">搜索：-------</div>
	<a href="https://www.cnblogs.com/zxh-bug" class="user">我的</a>
	</div>
	<!-- 焦点图 -->
	<div class="focus">
	<img src="https://cdn.cnblogs.com/jsDelivr/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.8/dist/images/e58d9f9d0eee6d9b9add.webp" alt="">
	</div>
	<!--局部导航栏 -->
	<ul class="local-nav">
	<li>
	<a href="#">
	<span class="local-nav-icon1"></span>
	<span>1</span>
	</a>
	</li>
	<li>
	<a href="#">
	<span class="local-nav-icon2"></span>
	<span>2</span>
	</a>
	</li>
	<li>
	<a href="#">
	<span class="local-nav-icon3"></span>
	<span>3</span>
	</a>
	</li>
	<li>
	<a href="#">
	<span class="local-nav-icon4"></span>
	<span>4</span>
	</a>
	</li>
	<li>
	<a href="#">
	<span class="local-nav-icon5"></span>
	<span>5</span>
	</a>
	</li>
	</ul>
	</body>
	</html>