CSS综合案例(快报模块头部制作)

news2024/11/13 18:19:37

(大家好,今天我们将继续来学习CSS的相关知识,大家可以在评论区进行互动答疑哦~加油!💕)

目录

一、前述

二、案例分析 

1.样例参看

2.拆分分析 

三、案例实施


一、前述

案例:快报模块头部制作

制作页面整体可以分为两步:

  1. 搭建HTML结构页面
  2. 修改CSS样式

二、案例分析 

1.样例参看

2.拆分分析 

分为三部分:

  1. <div>大盒子设置
  2. 标题+下划线
  3. <ul>无序列表


三、案例实施

代码: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例-快报模块头部制作</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        /* 去掉li前面的小圆点 */
        list-style: none;
    }

    .box {
        width: 248px;
        height: 163px;
        border: 1px solid #ccc;
        margin: 100px auto;
    }

    .box h3 {
        height: 32px;
        border-bottom: 1px dotted #ccc;
        font-size: 14px;
        font-weight: 400;
        line-height: 32px;
        padding-left: 15px;
    }

    .box ul li a {
        font-size: 12px;
        color: #666;
        text-decoration: none;
    }

    .box ul li a:hover {
        text-decoration: underline;
    }

    .box ul li {
        height: 23px;
        line-height: 23px;
        padding-left: 20px;
    }

    .box ul {
        margin-top: 7px;
    }
</style>
</head>

<body>
    <div class="box">
        <h3>squirrel快报</h3>
        <ul>
            <li><a href="#">【形态特征】小松鼠通常‌体形细小</a></li>
            <li><a href="#">【形态特征】小松鼠长着毛茸茸的尾巴</a></li>
            <li><a href="#">【形态特征】食物主要是种子和果仁</a></li>
            <li><a href="#">【生活习性】把食物掩埋储藏在地下过冬</a></li>
            <li><a href="#">【特定种类】种类比较繁多</a></li>
        </ul>

    </div>
</body>

</html>

(今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:人生没有无用的经历,所以我们一直走,天一定会亮。) 

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

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

相关文章

微信小程序基本语法

官网 https://developers.weixin.qq.com/miniprogram/dev/framework/ 视频教程&#xff1a;尚硅谷微信小程序开发教程&#xff0c;2024最新微信小程序项目实战&#xff01; 仿慕尚花坊项目源码&#xff1a;https://gitee.com/abcdfdewrw/flower-workshop 目录 一&#xff0c;初…

热门软件缺陷管理工具2024:专业评测与建议

国内外主流的10款软件缺陷管理工具软件对比&#xff1a;PingCode、Worktile、禅道、Tapd、Teambition、Tower、JIRA、Bugzilla、MantisBT、Trac。 在软件开发过程中&#xff0c;管理缺陷和漏洞常常成为一项挑战&#xff0c;尤其是在项目规模庞大时。选择一个高效的软件缺陷管理…

C#实现自定义标签的设计和打印

背景:最近在进行资产盘点的时候,需要对固定资产设计标签并进行打印。 设计标签:选用的是Fastreport自带的,可拆包忌用的标签设计器;进行标签的模型设计。 软件解压后可直接进行使用。模板的设计基本都是无脑操作,拖拽控件按,放置到固定未知即可;我设计的模板如下: 说…

Vision Pro的增强视觉:企业级Unity插件包实现主摄像头访问

在AR和VR技术的快速发展中,Unity作为跨平台游戏和应用开发的首选引擎,其插件生态的丰富性一直是开发者们关注的焦点。最近,一个专为Vision Pro设计的Unity插件包——EnterpriseCameraAccessPlugin,因其能够通过企业API访问主摄像头的功能,引起了广泛关注。 一、插件背景与…

springboot+vue+mybatis鲜花管理系统+PPT+论文+讲解+售后

随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;鲜花管理系统当然也不能排除在外。鲜花管理系统是以实际运用为开发背景&#xff0c;运用软件工程开发方法&#xff0c;采用SSM技…

小阿轩yx-zookeeper+kafka群集

小阿轩yx-zookeeperkafka群集 消息队列(Message Queue) 是分布式系统中重要的组件 通用的使用场景可以简单地描述为 当不需要立即获得结果&#xff0c;但是并发量又需要进行控制的时候&#xff0c;差不多就是需要使用消息队列的时候。 消息队列 什么是消息队列 消息(Mes…

前端框架入门之Vue _el和data的两种写法 分析MVVM模型

目录 _el与data的两种写法 MVVM模型 _el与data的两种写法 查看vue的实例对象 我们在这边注释掉了el属性 这样的话div容器就绑定不了vue实例 当我们可以在这里写一个定时任务 然后再回头指定 这个mount有挂载的意思 就是把容器对象交给vue实例后 去给他挂载指定的对象 &…

MySQL 进阶(四)【锁】

1、锁 1.1、锁的概述 锁就不需要多介绍了&#xff0c;多个用户访问共享数据资源&#xff0c;如何保证数据并发访问的一致性、有效性是数据库最重要的问题。同时&#xff0c;锁冲突也是影响一个数据库并发性能最重要的因素。 MySQL 中锁的划分有三类&#xff1a; 全局锁&…

敏捷营销在AI智能名片微信小程序中的应用探索

摘要&#xff1a;在数字化转型的浪潮中&#xff0c;企业面临着前所未有的挑战与机遇。AI智能名片微信小程序作为一种创新的营销工具&#xff0c;以其便捷性、智能化和高效性&#xff0c;正逐步成为企业连接客户、推广品牌的新宠。然而&#xff0c;如何在快速变化的市场环境中&a…

Automation Anywhere推出新一代AI+自动化企业系统,助力企业实现10倍商业增长

RPA厂商纷纷进军AI Agent ( AI 代理)领域&#xff0c;陆续推出创新产品。最近&#xff0c;Automation Anywhere宣布推出其新的AI 自动化企业系统&#xff0c;该系统结合AI和自动化技术&#xff0c;以实现指数级的业务成果。 在Imagine 2024大会上首次亮相的这款新产品&#xf…

机器学习中的梯度下降

本文只是简单解释一下梯度下降&#xff0c;其中涉及到的公式并没有展示说明。 1.什么是梯度&#xff1f; 梯度也可以理解为导数。 在一维空间中&#xff1a;梯度就是导数&#xff0c;或者说对于一个线性函数&#xff0c;也就是线的斜率。 2.什么是梯度下降&#xff1f; 梯度是…

字典树实现

一、字典树 字典树&#xff08;Trie树&#xff09;是一种多叉树结构&#xff0c;每条边代表一个字符&#xff0c;从根节点到其它节点的路径构成一个单词。其具有较好的查询性能&#xff0c;可以用于有效地存储大量字符串&#xff0c;并支持高效的查找、插入和删除操作。 二、…

浏览器缓存:强缓存与协商缓存实现原理有哪些?

1、强缓存&#xff1a;设置缓存时间的&#xff0c;那么在这个时间内浏览器向服务器发送请求更新数据&#xff0c;但是服务器会让其从缓存中获取数据。 可参考&#xff1a;彻底弄懂强缓存与协商缓存 - 简书 2、协商缓存每次都会向浏览器询问&#xff0c;那么是怎么询问的呢&…

java 项目使用 acitiviti 流程引擎中的人员设置

学习目标&#xff1a; 目标 [ ]了解 java 项目使用 acitiviti 流程引擎中的人员设置 知识小记&#xff1a; - [x] 1、人员选择说明 - [x] 2、分配任务候选人 任务的候选人是指有权限对该任务进行操作的潜在用户群体&#xff0c;这个用户群体有权限处理(处理、完成)该任务…

第九课:服务器发布(静态nat配置)

一个要用到静态NAT的场景&#xff0c;当内网有一台服务器server1&#xff0c;假如一个用户在外网&#xff0c;从外网访问内网怎么访问呢&#xff0c;无法访问&#xff0c;这是因为外网没办法直接访问内网&#xff0c;这时候需要给服务器做一个静态NAT。 静态NAT指的是给服务器…

学习笔记——动态路由——IS-IS中间系统到中间系统(特性之路由泄漏)

3、路由泄漏 什么是路由泄漏&#xff1f; IS-IS路由协议允许路由信息的两级层次结构。可以有多个1级区域通过连续的2级主干互连。路由器可以属于1级、2级或两者。1级链路状态数据库仅包含有关该区域的信息。第2级链路状态数据库包含有关该级别以及每个第1级区域的信息。L1/L2…

Matlab|基于蒙特卡洛法的电动汽车充电负荷计算

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序方法复现《V2G 模式下含分布式能源的配电网优化运行研究》第二章电动汽车无序充电模型&#xff0c;按照文章《V2G 模式下基于复杂网络的电动汽车有序充电策略》分析思路研究了不同数量电动汽车接入情况…

初识Docker及管理Docker

Docker部署 初识DockerDocker是什么Docker的核心概念镜像容器仓库 容器优点容器在内核中支持2种重要技术&#xff1a;Docker容器与虚拟机的区别 安装Docker源码安装yum安装检查Docker Docker 镜像操作配置镜像加速器&#xff08;阿里系&#xff09;搜索镜像获取镜像查看镜像信息…

【STM32 IDE】使用STM32CubeIDE创建一个工程

关于IDE的下载安装和环境配置这里暂且不介绍&#xff0c;我们直接使用STM32F407ZGT6创建工程。 这里需要注意两点&#xff1a; 创建工程时&#xff0c;默认使用最新版本的固件包&#xff08;HAL库&#xff09;&#xff0c;好像还不让更改。如果本地电脑位置没有该版本的包&…

Porfinet从转Ethernet/IP从总线协议转换网关

产品功能 1. 远创智控YC-PN-EIP型是Porfinet从转Ethernet/IP从工业级Porfinet 网关。‌这种网关设备允许将Porfinet网络中的设备连接到Ethernet/IP网络中&#xff0c;‌从而实现不同工业通信协议之间的互操作性。‌这些网关设备通常具有两个以太网接口&#xff0c;‌分别用于连…