样式与特效(2)——新闻列表

news2024/11/14 15:05:51

1.盒子模型的边距概念   )

Margin-top    上面

Margin-bottom  底部

Margin-right   右边

Margin-left    左边

Margin : 10px  (上下左右都是10px)

Margin :10px,20px (上下边距10px 左右20px)

CSS里面最重要的属性之一 将页面理解成一个一个子模块构成  网页可以理解为N个模块构成的整体.。 同外边距对应的是内边距对应的padding 一个是对外的显示控局  一个是对内的显示控距

2.background 系列概念

为了测试边框的对比度  一般使用  background-color:XXX 颜色检查对应模块的显示效果 。如果是仿站  需要用到浏览器的取色工具 #ffffff 类似这种格式的颜色码。偶尔的时候,为了使用方便,我们可以设置成red  blue 这样直接区分。

Background-image.

3.font 系列概念  网页里面主要是字体概念
font-szie 样式内部 字体的大小 一般16px 是我们常看的大字 14px是我们网页默认的标准大小格式。如果不做特殊说明,字体默认都是14px  符合我们默认看网页的习惯

Font-weight 字的粗细 这个地方可以填数字700,也可以填bold ,如果只是要普通的效果,忽略该值。该值对数字的变化不明显, 按照区间变化,也就是549和400 没区别 550和700也没区别 前者是普通 后者就是黑体字里面

Font-family 这个是字体风格样式 如果没有特殊指定,使用浏览器默认字体即可,如果有指定,需要在全局里面声明对应的字体样式

4.边框概念  border

只要有盒子,就会有边框,有边框就会有各种属性。目前比较热门的几个属性

Border-radios:10px 盒子边上的四个角的锐化程度 基本现在盒子模型都是柔和有个弯曲的渐变,所以该属性非常重要

Border-style 边框线的风格控制  实线/虚线之类的控制。

有了上述四个背景知识,已经可以制作简单的手机屏幕网页,正常的CMS里面的新闻列表页面还有通知页面。特殊的属性 height width 属性 auto的时候,只自动填充100%,可以自动伸缩,如果写了具体的数字,就是控制对应的缩放,这点在自适应里面不是很常用。

 


简单思路:

整体一个大div 模块,设置对应的背景。然后每个列表里面都有小的div 会自动换行。以新闻列表为例子复习:
.xinwena {

    margin-top: 20px;

    padding-top: 10px;

    height: auto;

    width: auto;

    padding: 20px;

}

.xw_list {

    margin-bottom: 10px;

    margin-right: 20px;

    padding: 5px;

    background-color: #ffffff;

    border-radius: 10px;

    .title {

        font-size: 16px;

        font-weight: bold;

        text-align: left;

    }

}

      (2)样式之外

1.样式的种类 外部样式(引入一个外部文件,加载到页面,方便维护)通用的推荐做法

  内部样式 (写在body外 以<style>标签里面的样式 有时候为了方便会写点)

  内联样式 直接在模块地方 style=”” 开始的  如果样式相同情况下 会覆盖掉其他的样式,很少使用

 在普通的HTML开发里面 引用外部css
<link rel="stylesheet" href="xxx.css"/> 这样完成对外部的引用,在vue里面

@import '../../assets/css/xxx.css'; 这样就将CSS引入到了页面里面

外部样式的主要好处:css的统一管理,可以节省掉大量重复的元素代码,更换页面统一风格的时候,直接修改统一文件就完成了修改。

2.样式的嵌套相关逻辑

 理论上 .home{.nav{ .img{}}} 可以这样无限嵌套下去,但是嵌套有个很大的问题,就是你写的这个样式无法被你写的这个分支复用,如果其他分支需要用到你这个模块的样式,需要重新写一份。

而且有时候为了方便区分  使用的是

.home  .nav  .img  {} 这样的格式书写,非常容易区分 在简单的项目开发里面,循环嵌套,很容易导致自己看不清自己的定义的结构标记到哪个地方了。

3.图片或者模块并列排序的说明  在很多情况下,我们需要将A|B模块并列处理

使用display:flex布局 很容易居中对齐 (在前一节也实现过)这里是再次复习居中对其概念,非常好用。而且还支持
居中对齐:无论是水平还是垂直方向,Flexbox 都可以很容易地实现居中对齐

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1973268.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++ | Leetcode C++题解之第316题去除重复字母

题目&#xff1a; 题解&#xff1a; class Solution { public:string removeDuplicateLetters(string s) {vector<int> vis(26), num(26);for (char ch : s) {num[ch - a];}string stk;for (char ch : s) {if (!vis[ch - a]) {while (!stk.empty() && stk.back(…

C#值类型和引用类型,类和结构体

1、类class是引用类型&#xff0c;多个引用类型变量的值会互相影响。存储在堆&#xff08;heap&#xff09;上 2、结构体struct是值类型&#xff0c;多个值类型变量的值不会互相影响。存储在栈&#xff08;stack&#xff09;上 using System; using System.Collections.Generi…

PTA题目|象限的判断(python)

题目要求 输入一对坐标&#xff0c;输出它在直角坐标系中的象限。 输入格式: 输入坐标(x,y)&#xff0c;&#xff08;假设输入的x或y坐标值一定不会为0&#xff09;如&#xff1a;(3.5,-2)。 输出格式: 输出对应的象限&#xff0c;如&#xff1a;第四象限 输入样例: 在这…

Python | Leetcode Python题解之第315题计算右侧小于当前元素的个数

题目&#xff1a; 题解&#xff1a; import numpy as np from bisect import bisect_leftclass Solution:max_len 10000c []buckets []def countSmaller(self, nums: List[int]) -> List[int]:self.c [0 for _ in range(len(nums) 5)]counts [0 for _ in range(len(…

Sentinel-1 Level 1数据处理的详细算法定义(五)

《Sentinel-1 Level 1数据处理的详细算法定义》文档定义和描述了Sentinel-1实现的Level 1处理算法和方程,以便生成Level 1产品。这些算法适用于Sentinel-1的Stripmap、Interferometric Wide-swath (IW)、Extra-wide-swath (EW)和Wave模式。 今天介绍的内容如下: Sentinel-1 L…

前端怎么做一个验证码和JWT,使用mockjs模拟后端

流程图 创建一个发起请求 创建一个方法 getCaptchaImg() {this.$axios.get(/captcha).then(res > {console.log(res);this.loginForm.token res.data.data.tokenthis.captchaImg res.data.data.captchaImgconsole.log(this.captchaImg)})}, captchaImg: "", 创…

钡铼技术M12双通道防水分线盒稳定可靠

钡铼技术的DB系列M12双通道防水分线盒是一款专为工业自动化环境设计的高性能产品。其采用耐酸碱腐蚀材料制成的壳体&#xff0c;能够达到IP67防护等级&#xff0c;并通过灌胶工艺进一步提升到IP69K防护等级&#xff0c;确保在恶劣的工业条件下仍然能稳定可靠地运行。 技术特点…

小怡分享之Java的继承和多态

前言&#xff1a; &#x1f308;✨小怡给大家分享了Java的类和对象&#xff0c;今天小怡给大家分享的是继承和多态。 1.继承 1.1 为什么需要继承 Java中使用类对现实世界中实体来进行描述&#xff0c;类经过实例化之后的产物对象&#xff0c;则可以用来表示现实中的实体&…

无人机之环境监测篇

无人机在各个领域的应用越来越广泛&#xff0c;环境监测便是其中之一&#xff0c;它们能够提供高效、安全、经济的监测手段&#xff0c;帮助科学家和管理者更好的理解环境状况并采取相应措施。 一、污染监测 无人机可以搭载各种传感器&#xff0c;如气体检测器、红外热像仪等&…

Map遍历 32

package Array.collection;import java.util.HashMap; import java.util.Map; import java.util.Set; import java.util.function.BiConsumer;public class map1 {public static void main(String[] args) {Map<String, Double> anew HashMap<>();a.put("合法…

图论进阶之路-最短路(Floyd)

时间复杂度&#xff1a;O(n^3) 使用场景&#xff1a;当需要得知任意两个点的最短距离以及其路径时使用 准备&#xff1a;需要两个矩阵 一个记录最短距离&#xff08;D&#xff09; 一个记录最短路径的最后一个结点&#xff08;P&#xff09; 其核心在于不断的判断越过中间…

transformer代码学习及pytorch函数学习

torch.randint(low, high, size, dtypetorch.int64, devicecpu, **kwargs) low 和 high 如上所述。size 是一个元组&#xff0c;表示张量的形状。dtype 是数据类型&#xff0c;默认为 torch.int64&#xff0c;表示生成的整数是64位整数。device 指定了生成张量所在的设备&#…

结构体与共用体

一、链表 1.尾插 2.头删&#xff1a; 3.尾删&#xff1a; 4.内存泄漏&#xff1a;malloc调用的节点需要手动清除 头删效率更高&#xff0c;算法复杂度更低 二、共用体 1.形式&#xff1a;union 共用体名{成员表列} 变量表列&#xff1b;共用体的成员会占用同样的内存空间 …

微信小程序_对接腾讯实时音视频_多人会议

目录 一、开通腾讯实时音视频 1.腾讯实时音视频简介 2.创建应用 二、快速接入 1.微信小程序账号类目资格 2.跑通腾讯多人会议源码 3.发行项目 三、开发自己的业务代码 如何对接腾讯实时音视频的多人会议产品&#xff0c;从开通服务到对接完成&#xff0c;一 一讲解。 一…

LBS 开发微课堂|Polyline绘制优化:效果更丰富,性能更佳!

为了让广大的开发者 更深入地了解 百度地图开放平台的技术能力 轻松掌握满满的技术干货 更加简单地接入 开放平台的服务 我们特别推出了 “位置服务&#xff08;LBS&#xff09;开发微课堂” 系列技术案例 第一期的主题是 《Polyline 绘制优化升级》 你还想了解哪些…

MySQL:Prepared Statement 预处理语句

预处理语句&#xff08;Prepared Statement&#xff09; 是一种在数据库管理系统中使用的编程概念&#xff0c;用于执行对数据库进行操作的 SQL 语句。 使用预处理语句的具体方式和语法依赖于所用的编程语言和数据库管理系统。常见的编程语言如 Java、PHP、Python 和 C# 都提供…

如何把视频语音转文字?交给这4款工具就完事

这两天巴黎奥运会的盛大开幕&#xff0c;世界各地的记者们纷纷涌入这个体育盛事的现场&#xff0c;带着他们的镜头和麦克风&#xff0c;捕捉每一个激动人心的瞬间。 然而&#xff0c;随着采访的深入&#xff0c;如何快速准确地将这些珍贵的视频内容转化为文字记录&#xff0c;…

代码随想录算法训练营第十七天 | 654.最大二叉树, 617.合并二叉树 ,700.二叉搜索树中的搜索 , 98.验证二叉搜索树

目录 654.最大二叉树 思路 方法一&#xff1a; 递归基础版 方法二&#xff1a;递归使用下标 方法三&#xff1a;递归使用切片 心得收获 617.合并二叉树 思路 递归法 迭代法 方法一&#xff1a; 递归 - 前序 - 修改root1 方法二&#xff1a;递归 - 前序 - 新建root…

敦煌文化主题页面 HTML,CSS,Javascript 源码分享

使用技术&#xff1a;HTML&#xff0c;CSS&#xff0c;JavaScript 项目亮点&#xff1a;加入了大量的CSS动画效果&#xff0c;以及JS交互效果&#xff0c;水平适合初学者以及大学生&#xff0c;包含登录注册页 需要的可以dd&#xff0c; 绿泡泡&#xff1a;ColdDayOne

AI入门指南:什么是人工智能、机器学习、神经网络、深度学习?

文章目录 一、前言二、人工智能(AI)是什么&#xff1f;起源概念人工智能分类人工智能应用 三、机器学习是什么&#xff1f;概念机器学习常见算法机器学习分类机器学习与人工智能的关系 四、神经网络是什么&#xff1f;概念神经网络组成部分神经网络模型神经网络和机器学习的关系…