CSS渡一教程学习笔记(十六)--CSS要点补充

最新推荐文章于 2022-10-25 11:11:35 发布

zhou_shadow

最新推荐文章于 2022-10-25 11:11:35 发布

阅读量212

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zhou_shadow/article/details/92016952

版权

css 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

这篇博客探讨了CSS在应对页面两端缩放及顶部目录排列需求时的解决方案，通过示例代码展示了如何实现手机APP端横条栏目效果和特定的顶部目录布局。

摘要由CSDN通过智能技术生成

关于页面两端的缩放以及顶部目录排列的需求

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css要点补充</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .wrapper{
            width:auto;
            height:20px;
            background-color:black;
        }
        .content{
            margin:0px auto;
            width:1200px;
            height:20px;
            background-color:red;
        }
        .span-1{
            display:inline-block;
            width:200px;
            height:200px;
            font-size:50px;
            border:1px solid red;
            /*可以通过vertical-align:来改变456的对齐方式*/
            vertical-align:70px;
        }
        .top{
            width:auto;
            height:20px;
            border:1px solid red;
        }
        ul li.left{
            list-style:none;
            float:left;
            padding:0px 5px;
        }
        ul li.right{
            list-style:none;
            float:right;
            padding:0px 5px;
        }
    </style>
</head>
<body>
<!--1、淘宝网页两端留白效果.notice:注意父子都必须是块级元素-->
<div class="wrapper">
    <div class="content"></div>
</div>
<!--2、inline block inline-block
inline inline-block--->
<!--文本类元素。(凡是带有inline属性值的元素都具有
文本类元素的特点，都可以称为文本类元素(具有文字分隔符,且能被文字分隔符分割，也就是
无论空多上空格，实际只有一个空格的效果) )
-->
<!--3、span一旦添加了position:absolute;
或者float:left/right后内部处理器都会默认
将span转成display:inline-block，此时可以设置
witdth和height属性
-->
<!--4、文本元素都是底对齐。
但是如果一个块级元素里面包含文字例如<div>122<div>456
此时456将和123底对齐。但是可以通过
vertical-align来控制456的对齐位置-->
<span class="span-1">123</span>456
<!--5、淘宝顶部的布局样式-->
<div class="top">
    <ul style="float:left">
        <li class="left">亲，请登录</li>
        <li class="left">免费注册</li>
        <li class="left">手机逛淘宝</li>
    </ul>
    <ul style="float:right">
        <li class="right">我的淘宝</li>
        <li class="right">购物车</li>
        <li class="right">收藏夹</li>
        <li class="right">商品分类</li>
        <li class="right">卖家中心</li>
        <li class="right">联系客服</li>
        <li class="right">网站导航</li>
    </ul>
</div>
</body>
</html>

结果：在这里插入图片描述
手机app端类似横条栏目
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心下划线</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        /*方法一*/
        /*.nav-list{*/
        /*    border:1px solid red;*/
        /*    padding:0px 10px;*/
        /*    width:200px;*/
        /*    height:30px;*/
        /*    line-height:30px;*/
        /*    font-size:16px;*/
        /*    background-color:#FFCCEE;*/
        /*    color:rgba(255,255,255,0.8);*/
        /*}*/
        /*.nav-list::before{*/
        /*    content:"";*/
        /*    display:inline-block;*/
        /*    width:30px;*/
        /*    height:31px;*/
        /*    background-image:url("finance.jpg");*/
        /*    background-size:100% 100%;*/
        /*    margin-right:5px;*/
        /*    vertical-align: -10px;*/
        /*}*/
        /*.nav-list::after{*/
        /*    content:"";*/
        /*    display:inline-block;*/
        /*    width:30px;*/
        /*    height:31px;*/
        /*    float:right;*/
        /*    background-image:url("finance.jpg");*/
        /*    background-size:100% 100%;*/
        /*    margin-right:5px;*/
        /*    vertical-align: -10px;*/
        /*}*/
        /*方法二*/
        .nav-list{
            padding:10px 10px;
            width:600px;
            height:30px;
            line-height:90%;
            font-size:30px;
            background-color:#FFCCEE;
            color:rgba(255,255,255,0.8);
        }
        .nav-list::before{
            content:"";
            display:inline-block;
            width:30px;
            height:30px;
            background-image:url("finance.jpg");
            background-size:100% 100%;
            vertical-align:-5px;
        }
        .nav-list::after{
            content:"";
            display:inline-block;
            width:30px;
            height:30px;
            float:right;
            background-image:url("finance.jpg");
            background-size:100% 100%;
            vertical-align:-5px;
        }

    </style>
</head>
<body>
<div class="nav-list">xx贴吧</div>

</body>
</html>

结果：

在这里插入图片描述

zhou_shadow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS渡一教程学习笔记(十六)--CSS要点补充

关于页面两端的缩放以及顶部目录排列的需求代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css要点补充</title> <style> *{ margi...
复制链接

扫一扫

专栏目录