文章标题

最新推荐文章于 2022-06-12 17:07:04 发布
最新推荐文章于 2022-06-12 17:07:04 发布
阅读量119 收藏
点赞数
分类专栏： 两栏布局-三栏布局 文章标签： 布局 两栏布局-三栏布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_39494847/article/details/75042347
版权

两栏布局

负margin：

效果：

输入图片说明

html

<body>
<div class="left">
    <div>this is left sidebar content</div>
</div>
<div class="right">
    <div>this is right sidebar content</div>
</div>
</body>

css


<style type="text/css">
    .left{
        width:200px;
        float:left;
        background-color:pink;
    }
    .right{
        width:100%;
        float:left;
        margin-left:-200px;
    }
    .right div{
        margin-left:200px;
        background-color:blue;
    }
</style>

此方法也是负margin的一种应用，原理不再赘述，详细参见：[负margin对浮动元素的影响

绝对定位

效果：

输入图片说明

html

<body>
<div class="left">
    <div>this is left sidebar content</div>
</div>
<div class="right">
    <div>this is right sidebar content</div>
</div>
</body>

css

<style type="text/css">
    body{
        margin:0;
    }
    .left{
        width:200px;
        background-color:pink;
        position:absolute;left:0;top:0;
    }
    .right{
        width:100%;
        background-color:blue;
        margin-left:200px;
    }
</style>

浮动定位

效果：

输入图片说明

html


<body>
<div class="left">left</div>
<div class="right">right</div>
</body>

css

<style type="text/css">
    body{
        margin:0;
    }
    .left{
        width:200px;
        background-color:blue;
        float:left;
    }
    .right{
        width:100%;
        margin-left:200px;
        background-color:pink;
    }
</style>
  • 注意：绝对定位和浮动定位原理相同，区别在于：浮动定位可以清除浮动，使其占据位置，而绝对定位依旧是脱离文档流的。

flexbox

效果：

输入图片说明

html

<body>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</body>

css


<style type="text/css">
    body{
        display:flex;
        align-items:stretch;
    }
    .left{
        background-color:pink;
        flex:0 0 200px;
    }
    .right{
        background-color:blue;
        flex:1 1 auto;
    }
</style>

Flex是flex-grow，flex-shrink，flex-basis的缩写

  1. 假设以上三个属性同样取默认值，则flex的默认值为0 1 auto

  2. flex:none，则计算值为0 0 auto

  3. flex:auto，计算值为1 1 auto

  4. flex取值为一个非负数字，则flex-grow，flex-shrink取1，flex-basis取0%

  5. flex取值为一个长度或百分比，则视为flex-basis值，flex-grow取1，flex-shrink取1

  6. flex取值为两个非负数字，则分别视为flex-grow和flex-shrink的值，flex-basis取0%

  7. flex取值为一个非负数字和一个长度或百分比，则分别视为flex-grow和flex-basis的值，flex-shrink取1

三栏布局

负margin

效果：

输入图片说明

html

<body>
<div class="center">
    <div class="center_main">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>

css

<style type="text/css">
    body{
        margin:0;
    }
    .center{
        width:100%;
        float:left;
    }
    .center_main{
        background-color:pink;
        margin:0 220px;
    }
    .left{
        width:200px;
        background-color:blue;
        float:left;
        margin-left:-100%;
    }
    .right{
        width:200px;
        background-color:blue;
        float:left;
        margin-left:-200px;
    }
</style>
  • 注意：center的元素必须在html中写在第一个
  • 基本原理：center，left，right均设置浮动，center_main设置margin-right，margin-left，为left和right留出距离，left，right设置margin-left，值分别为100%，-（right元素的宽度），设置margin-left的原因参见：[负margin对浮动元素的影响]

绝对定位

效果：

输入图片说明

html

<body>
<div class="center">
    <div class="center_main">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>

css

<style type="text/css">
    body{
        margin:0;
    }
    .center{
        width:100%;
    }
    .center_main{
        margin:0 220px;
        background-color:pink;
    }
    .left{
        width:200px;
        background-color:blue;
        position:absolute;left:0;top:0;
    }
    .right{
        width:200px;
        background-color:blue;
        position:absolute;right:0;top:0;
    }
</style>

浮动定位

效果：

输入图片说明

html

<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</body>

css

<style type="text/css">
    html,body{
        margin:0;
        padding:0;
    }
    .left,.right{
        width:200px;
        background-color:blue;
    }
    .left{
        float:left;
    }
    .right{
        float:right;
    }
    .center{
        background-color:pink;
        margin:0 220px;
    }
</style>

flexbox

效果：

输入图片说明

html

<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</body>

css

<style type="text/css">
    body{
        display:flex;
        align-items:stretch;
    }
    .left,.right{
        background-color:blue;
        flex:0 0 100px;
    }
    .center{
        background-color:pink;
        flex:1 1 auto;
    }
</style>

  • flex：0 0 100px；是指设置left，right元素宽度为100px，不随着父元素的宽改变

  • flex：1 1 auto；是指center元素可放大，也可缩小，其尺寸可随着父元素的变化而变化，满足自适应要求。

paopaomo_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python爬虫爬取微信公众号的阅读数、喜爱数、文章标题和链接等信息
weixin_46569877的博客
08-04 1万+
python爬取微信公众号
Java爬虫之爬取多篇含有关键词的文章标题和内容
hell_orld的博客
11-19 2202
Java爬虫之爬取多篇含有关键词的文章标题和内容实现的功能需要用到的jar包需要对html一些标签有一定的了解代码设计思想源代码 实现的功能 该代码针对维科网写的爬虫，具体如果想写其它的可以照着这篇模仿来写！ 输入想要搜索的关键字和输入关键字后的前几页页数（即输入关键字后跳转的网页的页数，如下图） 将包含关键字的文章标题和内容提取出来保存在一个txt文件里面（如下图，输入关键词为智能，前2页） 需要用到的jar包 获取文章信息需要的包：Jsoup； 需要对html一些标签有一定的了解 可以到w3cs
使用POI生成文章标题
Cloud的专栏
09-24 7859
生成文章标题有两种方式，一种是自定义标题，还有一种是使用现有样式来生成，现在网上大部分是第一种方式，但这种方式有很多弊端，我们先来看第一种 第一步，引入依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.9</version> </dependency>
dedecms调用文章标题不能全部显示
我不晓得
05-17 2223
1、进入后台–系统–系统设置–系统基本参数–其他选项–文档标题最大程度改为你要的长度原默认是60（这里改为了200） 2、登陆数据库，改数据库表dede_archives表里面的title字段，原默认是60，（这里改为200）. 解决dedecms UTF-8首页文章标题显示字数太短的办法 原因分析：因为UTF-8编码1个中文汉字占用的是3个字节，GBK占用的是2个字节，所以...
火车头插件：根据文章标题生成图片；标题生成相关配图
qq_26057339的博客
05-12 1823
本插件可以根据文章标题自动配图；根据文章标题生成一张好看的插图； 插件售价200；不限制ip,不限域名。一次购买终身使用。 没有第三方接口的调用不用担心插件失效。 插件效果： 插件优势： 用户可以自定义文字的颜色 用户可以自定义文字的大小 用户可以自定义图片背景 用户可以自定义图片格式 用户可以自定义图片储存的目录 用户可以自定义图片在文章哪个位置插入 插件分为 火车头插件和服务器接口： 服务器接口负责处理图片和储存图片； 火车头插件处理文章内容 服务器插件有运行环境要求 php 版本低于
如何利用Python爬虫爬取博主的全部文章的标题，文章标题的URL。可根据阅读量进行降序输出！
HWP
12-21 3864
步履艰辛呀！自己不会做网络爬虫，只好去找教程例子！ 当然自己也是有点小基础的！只是会读取简单的HTML网页代码！ 对于这么复杂的代码，驾驭不住呦~ 多个代码类型。我会分别列取出来的。 如果是代码的原作者，看到请联系我。我会标明来源地址的！ 前言： 但是无论是谁的主页，都会出现这个人的主页。 已经有好多人都爬取到啦！ 我爬取的所有链接的部分链接： 但是，这个链接：https://blog.csdn...
【Python】简单爬虫抓取知乎专栏文章标题和链接、存储进CSV
memcpy0的博客
08-18 4021
文章目录 今天突发奇想，想要爬取一下知乎专栏文章的标题和链接，看看某个作者到底在这大几百几千篇文章中写了什么。
标题生成图片插件(火车头采集器：根据文章标题生成相关图片)
qq_26057339的博客
06-12 1286
本插件可以根据文章标题自动配图；根据文章标题生成一张好看的插图；根据标题生成图片,文章页自动配标题配图,避免版权问题 插件分为 火车头插件和服务器接口： 下载地址：https://xiaowangtx.cn/post/54.html......
python爬虫之爬取多篇含有关键词的文章标题和内容优化
hell_orld的博客
09-15 3598
python爬虫之爬取多篇含有关键词的文章标题和内容优化需要和前篇联系起来实现的功能代码设计思想源代码 需要和前篇联系起来 python爬虫之爬取多篇含有关键词的文章标题和内容 实现的功能 爬取多个关键字的文章标题和内容（将要爬取的关键词放在一个数组中，通过for进行遍历），并且每个关键字创建一个文件夹，每篇文章放在独自一个txt文件里面，运行结果（自己调试时，只设置页面为2，数组为两个）： 代码设计思想 可以观看前面那篇python爬虫之爬取多篇含有关键词的文章标题和内容 ，因为这篇代码是对上一篇的
Wordpress自定义函数控制文章标题长度
09-29
在WordPress中，文章标题的展示方式对于网站的整体布局和用户体验起着至关重要的作用。当文章标题过长时，可能会导致页面布局混乱或者视觉效果不佳，尤其是标题在首页以列表形式展示时。为了解决这个问题，我们可以...
wordpress文章标题为空时其它内容代替的方法
09-29
在WordPress内容管理系统中，文章标题通常扮演着至关重要的角色，它不仅为用户提供文章的概览，也是搜索引擎优化（SEO）的关键元素。然而，在某些特定情况下，用户可能希望发布无标题的文章，例如个人心情记录或状态...
RiPro主题文章标题美化教程 WordPress美化教程
03-02
/*文章标题优化*/ .sjblog-avatar {  width: 50px;  float: left; } .sjblog-avatar img {  float: left;  width: 50px;  border-radius: 50%;  margin-right: 20px; } .sjblog-tgroup{ ...
Python3 文章标题关键字提取的例子
01-20
1.读取所有文章标题； 2.用“结巴分词”的工具包进行文章标题的词语分割； 3.用“sklearn”的工具包计算Tf-idf（词频-逆文档率）; 4.得到满足关键词权重阈值的词 结巴分词详见：结巴分词Github sklearn详见：文本...
wordpress通过当前文章的ID获取文章标题内容简介的信息
09-29
标题“wordpress通过当前文章的ID获取文章标题内容简介的信息”所涉及的知识点主要集中在如何利用文章ID来提取文章的元数据，如标题、内容摘要以及其他相关信息。下面将详细阐述这一过程。 首先，我们需要获取文章...
PHPCMS内容页文章标题添加页码的方法教程
09-29
如何让PHPCMS的内容页标题显示页码呢？让每篇文章的标题都不一样，这样不但提高了网页体验率，同时也可以达到SEO优化的效果，让百度、谷歌等多收录一些。
10w文章标题数据（仅供学习使用）
02-18
本次上传的资料仅供nlp的学习，博主的博客中也将使用到这些数据，进行文章title的一些基本挖掘。希望大家能来博客转转，互相学习、借鉴，并提出宝贵意见。
emlog文章标题自定义颜色插件.zip
最新发布
05-16
而“emlog文章标题自定义颜色插件”是专为Emlog设计的一款增强型插件，旨在让博客文章的标题更加个性化，提升博客的视觉吸引力。 这款插件的核心功能是允许用户自定义每篇文章的标题颜色，从而打破了传统博客文章...
文章标题的写作技巧
12-17
以下是一些关于文章标题写作技巧的详细讲解： 一、吸引力法则 1. 引人入胜：标题应该足够吸引人，使读者在众多信息中一眼看到并产生阅读兴趣。可以运用疑问句、感叹句或者引人深思的陈述句来引起好奇心。 2. 个性...
wordpress 改写文章标题
03-20
您可以使用以下代码来改写 WordPress 文章标题： function custom_title( $title ) { $new_title = '新标题'; return $new_title; } add_filter( 'the_title', 'custom_title' ); 将“新标题”替换为您想要的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值