常见公告栏信息效果的实现

实现的效果如下：

上面的效果主要利用了，ul,h3,li,span,在加一些Css来实现的。

要实现上面的公告栏的效果，代码如下:

第一种方案：利用 padding来解决 “关于XXXXXXXXX的公告通知” 的显示。

不推荐使用，应用span加relative定位来解决字体的定位，应为padding具有浏览器兼容问题

<div class="div_show"><ul class="topic_show"><h3><span>通知公告</span></h3><li>关于XXXXXXXXX的公告通知</li><li>关于XXXXXXXXX的公告通知</li><li>关于XXXXXXXXX的公告通知</li><li>关于XXXXXXXXX的公告通知</li><li>关于XXXXXXXXX的公告通知</li></ul></div>

css的实现

    <style type="text/css" media="screen">/* 清除掉一些标签默认自带的 padding 和  margin*/* {padding: 0px;margin: 0px;}/* 用于设置DIV的位置*/.div_show {margin-left: 50px;margin-top: 50px;}/* 用于ul的款对，和显示的边框颜色，颜色为灰色在此处只设置了，ul的宽度，没有设置高度因为高度是随着li的变化而变化的*/ul.topic_show {list-style: none;width: 249px;border: 1px solid #999;}/* 用于设置ul中标题大小，背景和颜色，以及字体大小*/ul.topic_show  h3 {height: 30px;width: 249px;background: #111155;color: #FFFFFF;font-size: 14px;}/* 利用span和position的relative来设置ul中标题中的字的位置*/ul.topic_show  h3 span {position: relative;left: 10px;top: 8px;}/* 利用padding来设置，li中字体的位置*/ul.topic_show li {padding: 5px 20px;font-size: 12px;color: #555;background: url("point.jpg") no-repeat;background-position: 10px 7px;}</style>

第二种方案：利用 span来解决 “关于XXXXXXXXX的公告通知” 的显示，

推荐使用。

html代码

<div class="div_show"><ul class="topic_show"><h3><span>通知公告</span></h3><li><span>关于XXXXXXXXX的公告通知</span></li><li><span>关于XXXXXXXXX的公告通知</span></li><li><span>关于XXXXXXXXX的公告通知</span></li><li><span>关于XXXXXXXXX的公告通知</span></li><li><span>关于XXXXXXXXX的公告通知</span></li><li><span>关于XXXXXXXXX的公告通知</span></li><li><span>关于XXXXXXXXX的公告通知</span></li></ul></div>

Css实现，利用span的实现

<style type="text/css" media="screen">/* 清除掉一些标签默认自带的 padding 和  margin*/* {padding: 0px;margin: 0px;}/* 用于设置DIV的位置*/.div_show {margin-left: 50px;margin-top: 50px;}/* 用于ul的款对，和显示的边框颜色，颜色为灰色在此处只设置了，ul的宽度，没有设置高度因为高度是随着li的变化而变化的*/ul.topic_show {list-style: none;width: 249px;border: 1px solid #999;}/* 用于设置ul中标题大小，背景和颜色，以及字体大小*/ul.topic_show  h3 {height: 30px;width: 249px;background: #111155;color: #FFFFFF;font-size: 14px;}/* 利用span和position的relative来设置ul中标题中的字的位置*/ul.topic_show  h3 span {position: relative;left: 10px;top: 8px;}/* li中字体通知内容,以及li大小和背景图片的设置*/ul.topic_show li {font-size: 12px;height: 25px;color: #555;border: 1px solid red;background: url("point.jpg") no-repeat;background-position: 10px 7px;}/* 利用span和relative来解决，li中字体的位置*/ul.topic_show li  span {position: relative;left: 20px;top: 5px;}</style>

转载于:https://www.cnblogs.com/zhangbaowei/p/4748346.html

常见公告栏信息效果的实现相关推荐

串扰几种常见措施的效果及差异
转自:http://www.elecfans.com/d/739672.html Abstract:串扰是SI设计中较为重要的一个概念,如何在产品设计中保持信号在传递过程中不会受到周围信号的影响,同时 ...
Excel常见错误信息
# Excel常见错误信息经常使用Excel的朋友可能都会遇到一些看起来似懂非懂的错误值信息:例如# N/A!.#VALUE!.#DIV/O!等等,出现这些错误的原因有很多种,你真的了解它们吗,熟练 ...
的计时器设置_【教程】PPT课件中常见的计时器效果（2）——沙漏式计时器 | 源文件提供下载...
往期推荐: [教程]几种常见的计时器效果(1)| 源文件提供下载 [资源]统编语文1-6年级上册专项复习练习题 [资源]转发起来!超精美全册课件下载 | 统编版小学语文五年级下册大家好,这里是小课同 ...
html中简单轮播图实现原理,常见轮播效果及其实现原理
常见轮播效果及其实现原理说明: 本项目只做最基础的原理分析与最简单的应用场景. 1. 简单做法:css定位 + js滑动动画思路: 在同一个父容器内, 1. 通过改变父容器的`left` 值实现- ...
Python编程常见出错信息及原因分析（5）：安装扩展库
本文主要介绍使用pip安装扩展库时常见的错误. (1)pip命令应该在命令提示符环境中执行,如果在Python开发环境中执行,则会出现下面的错误: (2)不存在要安装的扩展库,此时应仔细检查是否有拼写 ...
Python编程常见出错信息及原因分析（4）
(1)删除列表元素引起的下标变化错误演示代码: x = list(range(10)) for i in range(len(x)): if x[i]%2 == 0: del ...
Python编程常见出错信息及原因分析（3）
(1)不可哈希错误演示代码: >>> x = {[1], [2]} Traceback (most recent call last): File "<pysh ...
Python编程常见出错信息及原因分析（2）
(1)缩进错误演示代码: >>> if 5>3: print('5>3') SyntaxError: expected an indented block >&g ...
css三实现ui,纯CSS实现常见的UI效果
原标题:纯CSS实现常见的UI效果转自:掘金 - alphardex 前言切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...

常见公告栏信息效果的实现

常见公告栏信息效果的实现相关推荐

最新文章

热门文章