当前位置: 首页 > news >正文

黑马程序员前端web入门:新浪新闻

黑马程序员前端web入门:新浪新闻
几点学习到的:

  1. 设置li无圆点: list-style: none;
  2. 设置a无下划线:text-decoration: none;
  3. a属于行内元素,高度hegiht不起作用,可以设置 display: block; 把它变成块元素。此时,设置水平居中 text-align: center; , 设置垂直居中 line-height: 30px; 。
  4. 网页布局什么时候用图片背景,什么时候用img标签https://blog.csdn.net/smlljet/article/details/103321869
  5. 如果采用background显示图片,需要设置 padding-left 防止内容与背景重叠。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;box-sizing: border-box;}li{list-style: none;}a{text-decoration: none;}.news{width: 360px;height: 200px;margin: 100px auto;}.news .hd{height: 34px;background-color: #eee;border: 1px solid #dbdee1;border-left: none;}.news .hd a{height: 34px; width: 48px;display: block;margin-top: -1px;text-align: center;line-height: 30px;border-top:3px solid #ff8400 ;border-right: 1px solid #dbdee1;background-color: #fff;font-size: 14px;color:#333;}.news .bd{padding: 5px;}.news .bd li{padding-left: 15px;background: url('./img/quare.png');background-repeat: no-repeat;background-position: 0 center;background-size: 5px;}.news .bd li a{padding-left: 20px;background: url('./img/picture.png');background-repeat: no-repeat;background-position: 0 center;background-size: 15px;font-size: 12px;color: #666;line-height: 24px;}.news .bd li a:hover{color: #ff8400;}</style>
</head>
<body><div class="news"><div class="hd"><a href="#">新闻</a></div><div class="bd"><ul><li><a href="#">新闻1新闻1新闻1新闻1新闻1新闻1</a></li><li><a href="#">新闻2新闻2新闻2新闻2新闻2新闻2</a></li><li><a href="#">新闻3新闻3新闻3新闻3新闻3新闻3</a></li><li><a href="#">新闻4新闻4新闻4新闻4新闻4新闻4</a></li><li><a href="#">新闻5新闻5新闻5新闻5新闻5新闻5</a></li><li><a href="#">新闻6新闻6新闻6新闻6新闻6新闻6</a></li></ul></div></div>
</body>
</html>

相关文章:

黑马程序员前端web入门:新浪新闻

黑马程序员前端web入门&#xff1a;新浪新闻 几点学习到的&#xff1a; 设置li无圆点: list-style: none;设置a无下划线&#xff1a;text-decoration: none;a属于行内元素&#xff0c;高度hegiht不起作用&#xff0c;可以设置 display: block; 把它变成块元素。此时&#xff0c…...

力扣_字符串2—最长有效括号

题目 给你一个只包含 ‘(’ 和 ‘)’ 的字符串 s s s&#xff0c;找出最长有效&#xff08;格式正确且连续&#xff09;括号子串的长度。 方法 动态规划 d p [ i ] dp[i] dp[i] 表示以 s [ i ] s[i] s[i] 结尾的最长有效括号的长度如果 s [ i ] s[i] s[i] 为左括号&#…...

小程序接入企业微信「联系我」功能

接入模式有两种 1&#xff0c;展示二维码 可以直接调用服务端API的 配置客户联系「联系我」方式 得到二维码地址给到前端直接展示 2&#xff0c;展示类似“联系客服”的按钮&#xff08;文字和样式可以使用企业微信提供的几种&#xff09; a&#xff09;在小程序后台 “设置…...

jdk17新特性—— 密封类(Sealed Classes)

目录 一、密封类(Sealed Classes)的概述1.1、概述1.2、特性1.3、注意事项 二、密封类(Sealed Classes)代码示例2.1、密封类(Sealed Classes)代码结构示例2.2、密封类(Sealed Classes)代码示例 三、密封类(Sealed Classes)接口代码示例3.1、密封类(Sealed Classes)接口代码结构示…...

【亿级数据专题】「分布式消息引擎」 盘点本年度我们探索服务的HA高可用解决方案

盘点本年度我们探索服务的HA高可用解决方案 前言介绍HA高可用高可用性评估可用性是平均故障间隔时间 HA技术架构的特性分析Master/Slave架构主从复制模式主从复制的特性分析 高可用案例RocketMQ的主从架构责任划分同步机制动态化RocketMQ高可用架构中有限状态机的转换 总结Mast…...

计算机网络-物理层设备(中继器 集线器)

文章目录 中继器中继器的功能再生数字信号和再生模拟信号同一个协议 集线器&#xff08;多口中继器&#xff09;不具备定向传输的原因集线器是共享式设备的原因集线器的所有接口都处于同一个碰撞域&#xff08;冲突域&#xff09;内的原因 小结 中继器 中继器的功能 中继器的…...

PaddleDetection学习4——使用Paddle-Lite和OpencCV在 Android 上实现实时的人脸检测(java)

使用Paddle-Lite在 Android 上实现人脸检测 1 环境准备2. 部署步骤2.1 下载PaddleLite-android-demo2.2 运行face_detection_demo项目3 导入OpenCV进行优化3.1 Android Studio配置OpenCV3.2 预处理代码3.3 后处理代码3.4 优化结果1 环境准备 参考前一篇在 Android 上使用Paddl…...

mkcert的安装和使用,5分学会在本地开启localhost的https访问方式

mkcert官方仓库地址&#xff1a;https://github.com/FiloSottile/mkcert#installation mkcert 是一个简单的工具&#xff0c;用于制作本地信任的开发证书。它不需要配置。 简化我们在本地搭建 https 环境的复杂性&#xff0c;无需操作繁杂的 openssl 实现自签证书了&#xff…...

RHCE DNS域名解析服务器

目录 1. 正向解析 1.1 安装必要软件 1.2 配置静态ip 1.3 DNS配置 1.4 测试 2. 反向解析 2.1 关闭安全软件&#xff0c;安装必要软件 2.2 配置静态ip 2.3 DNS配置 2.4 测试 1. 正向解析 1.1 安装必要软件 1.2 配置静态ip 服务器配置 nmcli c modify ens32 ipv4.method man…...

创建表与删除表(六)

表的基本操作&#xff08;六&#xff09; 一、创建表 1.1 使用DDL语句创建表 CREATE TABLE 表名(列名 类型,列名 类型......); 示例&#xff1a; 创建一个 employees 表包含雇员 ID &#xff0c;雇员名字&#xff0c;雇员薪水。 create table employees(employee_id int,em…...

微信开发者工具 git 拉取 failed invalid authentication scheme

微信开发者工具 git 拉取 failed invalid authentication scheme 拉取代码时报错,无效身份认证 解决方案: 1.检查git地址是否正常 2.检查git用户名密码是否正确...

(4)Elastix图像配准:3D图像

文章目录 前言1、项目实战2、参数文件2.1、parameter_file_rigid_3D.txt2.2、parameter_file_affine_3D.txt2.3、parameter_file_bspline_3D.txt前言 (1)Elastix图像配准:原理 + 源码(详解) (2)Elastix图像配准:参数文件(配准精度的关键) 1、项目实战 将以下文件保…...

windows安装oracle之后怎么连接使用

目录 1.打开SQl Developer 2.选择JDK 3.登录 4.创建表空间,用户 安装oracle的详细教程 WINDOWS安装Oracle11.2.0.4-CSDN博客 1.打开SQl Developer 找到 SQl Developer 2.选择JDK 根据你安装的oracle版本,因为我的oracle是安装的32位的,所以这里jdk也要选择32位 选择到ja…...

在前端开发中,常见的数组循环方式有以下几种:

在前端开发中&#xff0c;常见的数组循环方式有以下几种&#xff1a; for 循环&#xff1a;使用最传统的 for 循环来遍历数组元素。 const array [1, 2, 3, 4, 5];for (let i 0; i < array.length; i) {console.log(array[i]); }forEach() 方法&#xff1a;使用数组的 …...

Redis -- 单线程模型

失败是成功之母 ——法国作家巴尔扎克 目录 单线程模型 Redis为什么这么快 单线程模型 redis只使用一个线程&#xff0c;处理所有的命令请求&#xff0c;不是说redis服务器进场内部真的就只有一个线程&#xff0c;其实也有多个线程&#xff0c;那就是处理网络和io的线程。 R…...

C语言第十五弹---操作符(上)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 操作符 1、操作符的分类 2、二进制和进制转换 2.1、2进制转10进制 2.1.1、10进制转2进制数字 2.2、2进制转8进制和16进制 2.2.2、2进制转16进制 3. 原码、反…...

使用宝塔面板访问MySQL数据库

文章目录 前言一、安装访问工具二、查看数据库总结 前言 前面我们已经部署了前后端项目&#xff0c;但是却不能得到数据库的信息&#xff0c;看有谁再使用你的项目。例如员工、用户等等。本次博客进行讲解如何在宝塔面板里面访问MySQL数据库。 一、安装访问工具 1、打开软件商…...

Win10 双网卡实现同时上内外网

因为需要同时上内网和外网&#xff0c;但公司做了网络隔离&#xff0c;不能同时上内外网&#xff0c;所以多加了块无线网卡&#xff0c;配置双网关实现同时上内外网&#xff0c;互不影响 打开 Windows PowerShell&#xff08;管理员&#xff09;&#xff0c;输入&#xff1a;ro…...

Django模型(六)

一、其它查询 文档:https://docs.djangoproject.com/zh-hans/4.1/ref/models/querysets/#count 1.1、排序 Queryset.order_by(*fields) 默认情况下,QuerySet 返回的结果是按照模型 Meta 中的 ordering 选项给出的排序元组排序的 可以通过使用 order_by 方法在每个 QueryS…...

【Linux】Linux基本指令

目录 1.ls指令 2.cd指令 3.touch指令 4.mkdir指令 5.rmdir指令和rm指令 5.1rmdir指令 5.2rm指令 6.man指令 7.cp指令 8.mv指令 9.cat指令 10.more指令 && less指令 10.1more指令 10.2less指令 11.head指令 && tail指令 11.1head指令 11.2tai…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

算术操作符与类型转换:从基础到精通

目录 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符&#xff1a;、-、*、/、% 赋值操作符&#xff1a;和复合赋值 单⽬操作符&#xff1a;、--、、- 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...