CSS 入门-图文组合

于 2022-04-21 16:28:34 发布
阅读量329 收藏
点赞数
分类专栏： 前端 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51651340/article/details/124324541
版权
本文介绍了CSS入门级别的图文组合布局，包括图文左右排列和上下排列的方法，强调了区域划分在布局中的关键作用。
摘要由CSDN通过智能技术生成

 对于不同的图文组合，划分好区域最重要，区域划分好，文字图片放进去即可。

一：图文左右排列


<!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>1</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .item {
            width: 643px;
            height: 174px;
            border-bottom: 1px solid lightgray;
            /* background-color: pink; */
        }
        .item .content {
            width: 457px;
            height: 174px;
            /* background-color: gold; */
            float: left;
        }
        .item .content .title{
            height: 24px;
            line-height: 24px;
            overflow: hidden;
            /* background-color: cyan; */
            font-size: 20px;
            font-weight: 900;
            margin-top: 24px;
        }
        .item .content .words {
            height: 78px;
            line-height: 26px;
            font-size: 14px;
            overflow: hidden;
            color: lightgray;
            margin-top: 10px;
            /* background-color: bisque; */
        }
        .item .content .bottom{
            height: 20px;
            /* background-color:aqua; */
            margin-top: 6px;
            font-size: 14px;
            color: lightgray;
        }
        .item .content .bottom p{
            float: left;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
        }
        .item .content .bottom .common{
            float: left;
            height: 20px;
            overflow: hidden;
            margin-left: 10px;
            padding: 0 3px;
        }
        .item .content .bottom img {
            margin-top: 2px;
            height: 16px;
            float: left;
            margin-right: 4px;
        }
        .item .content .bottom .text{
            float: left;
            padding: 0 5px;
        }
        /* .item .content .bottom .b2 img {
            margin-top: 2px;
            height: 16px;
            float: left;
            margin-right: 4px;
        } */
        .item .right {
            width: 148px;
            height: 98px;
            float: right;
最低0.47元/天 解锁文章
Felece
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js案例——实现验证码功能
ICY___的博客
01-17 1402
今天的内容是用js的基本语法实现网页中常见的验证码功能。 大体思想：核心语法为math中随机数的使用 利用随机数字来实现随机的数字 字符 汉字  ，利用字符串的拼接来实现随机字体大小、旋转角度和各种颜色，利用css样式来禁止从网页上复制和粘贴，最后用弹窗来实现验证结果提示。 实现结果： 具体代码及注释： &lt;!DOCTYPE html&gt; &lt;html lang="e...
css-pro-layout：CSS库，用于构建响应式和可自定义的布局
02-03
CSS Pro布局 CSS库，用于构建响应式和可自定义的...import 'css-pro-layout/dist/css/css-pro-layout.css' ; CDN 您也可以使用的CDN链接 < link href =" https://unpkg.com/css-pro-layout/dist/css/css-pro-layout
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2054
<!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>Do
JS验证码
03-16 99
<PREclass=jsname="code"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3....
JS实现验证码
热门推荐
Judev的专栏
07-14 1万+
最近做了一个注册界面，需要有验证码。我以前没有做过，第一个想法就知道要用到js来处理，后来想了一下，就在js里这样写到：第一种想法： function validate(){/*    var str="";    var code = form1.CODE.value; var spans = document.getElementById("divCode").all; for(v
js验证码
dgdisme
08-08 889
非常实用的js验证码,留著,日後由
css入门-绝对经典
02-17
【CSS入门】 CSS，全称Cascading Style Sheets，是一种用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档呈现的样式表语言。CSS的主要作用是分离网页内容（HTML或XML）和表现形式，使得网页设计更加灵活，可...
前端开源库-postcss-css-variables
08-30
Postcss-css-variables是PostCSS的一个插件，专门用于处理CSS Variables，将它们转换为浏览器可识别的静态形式，从而提供更广泛的浏览器支持。 **CSS Variables（自定义属性）**： CSS Variables 提供了一种方式，...
CSS入门教程篇
10-30
### CSS入门教程篇 #### 一、CSS简介与基本语法规范 **CSS**（Cascading Style Sheets）即层叠样式表，它是一种用于增强HTML文档样式的语言，主要用于控制网页内容的外观呈现，如颜色、布局等。CSS使得内容与表现...
bulma-css-starter:Bulma CSS-一页入门| Bulma-css.com
05-24
【标题】"Bulma CSS-一页入门"是关于如何使用Bulma CSS框架构建一个基本的网页的教程。Bulma是一个流行的开源CSS框架，它提供了简洁、现代且响应式的样式，帮助开发者快速创建美观的网页设计。在这个入门指南中，...
块级元素在块级别元素中居中
heartAndthink的博客
08-31 955
引言: 通常情况下块级元素重置居中有两种方式 1.利用margin值 2.利用定位和负边距 但是一次我遇到这种情况(子块级元素高度是自适应的，高度值不确定)，以上方法就不好使了，改怎么解决呢 答案是:父元素属性设置为    display：table-cell  ,  vertical-align:middle; display: 
JS-验证码
weixin_43091563的博客
12-14 144
<html> <head lang="en"> <meta charset="UTF-8"> <title>验证码</title> <style> input,span,i{ border: dashed 1px red; height: ...
js中的验证码
InvisibleMouse的博客
03-25 542
前言 之前也写过一些不同方式的验证码，但是没有保存，之后也不知所踪了。于是就想写一篇关于验证码的文章，到最后用到的时候复制黏贴就OK了（嘿嘿，就是偷懒）。 之前写的验证码是配合着java后端与ajax来实现的；但是这次上网先查了一下有关验证码的文章，貌似直接在前端就可以完成验证码的实现验证功能。so，这次就尝试着纯前端的验证码。 在开始之前先向大家推荐一个有关jQuery的网站:jquery库（...
块级元素在块级元素内部垂直居中
04-18 184
步骤： 1、给父级元素添加相对定位position：relative； 2、子元素设置如下： 　　position: absolute; 　　left: 50%; 　　top: 50%; 　　//设置为子元素width的一半，设置为负值 　　margin-left: -25px; 　　//设置为子元素height的一半，设置为负值 　　margin-top: -25...
JavaScript验证码
吕小威的博客
12-21 1016
验证码在生活中很常见，所以做了个验证码案例： 感觉蛮简单的，就不解释了，代码里有注释，如下： var span = document.getElementsByTagName('span')[0]; var a = document.getElementsByTagName('a')[0]; var input = document.getElementsByTagName('in...
js 获取元素文本_js如何实现验证码功能？
weixin_39753747的博客
11-20 133
#前面是拆解着讲的，不想看可以直接跳过，带注释的完整版代码和效果在后面首先在页面中准备一个输入框，一个显示验证码的盒子和一个提交按钮然后加亿些样式然后大概长这样（有点丑，不过无所谓，主要内容是js）好，那么开始写js首先获取这些元素然后搞一个字符库和一个保存验证码的字符串那个字符库就直接滚键盘就行了~因为验证码要多次用到随机数，所以为了方便就先搞一个随机数的函数因为是验证码，所以不能让生成的文本可...
CSS入门教程-DIV+CSS布局详解
"CSS是层叠样式表的缩写，用于控制网页元素的样式。通过使用CSS，开发者可以将设计和内容分离，使得网页设计更加灵活和易于维护。CSS语言是基于规则的，不需要编译，浏览器可以直接解析执行。样式通常以样式表的形式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值