CSS制作简洁的栏目/标题样式

CSS制作简洁的栏目/标题样式

CSS制作简洁的栏目/标题样式

HTML:

<h2><strong>栏目名称</strong></h2>
<h2><strong class="blue">网页设计</strong></h2>
<h2><strong>网站制作</strong></h2>
<h2><strong class="blue">免费空间</strong></h2>

CSS:

h2{margin: 20px 0;border-bottom:3px solid #f0f0f0; width: 100%; height: 33px;}
h2 strong{ float:left; height: 33px; padding:0 10px; font-size: 18px; overflow: hidden; color:#BC272C; border-bottom: 3px solid #BC272C;}
h2 strong.blue{ border-bottom:3px solid #06F; color:#06F}
h2 strong.blue a{ color:#06F}
h2 strong a{color:#BC272C}

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3131.html

(3)
江山如画的头像江山如画管理团队
上一篇 2019年1月5日 下午4:05
下一篇 2019年1月5日 下午4:30

99%的人还看了以下文章

  • 纯CSS制作热门文章排行,且前3名背景不同

    要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。   htm…

    2018年7月14日
    3.9K0
  • vue学习v-on:click绑定HTML的单击事件

    v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…

    2020年6月14日
    6.3K0
  • 第9课:在网页中添加图像

    假如能把自己喜欢的的图像放到网页上,那就太好了。 这貌似有点难度。。。 也许是有点难度,但其实也不难,一个元素就可以搞定: 例1: <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下: 你要做的只是:告诉浏览器你要插入一张图…

    2018年1月20日
    8.5K0
  • 纯JS实现的验证码-可自定义长度和字符

    纯JS实现的页面验证码-可自定义长度和验证码字符 生成验证码的函数 <script type=”text/javascript”> var code; function createCode() { code = “”; var codeLength = 4; //验证码的长度 var checkCode = document.getElemen…

    2018年10月9日
    4.4K0
  • CSS实现段落首字下沉效果的2种方法

    CSS实现段落首字下沉效果方法一 在CSS布局中,通过设置首字的大小并向左浮动,从而使得首字与其他字符区别;通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…

    2019年4月2日
    14.3K0
  • Marquee标签制作滚动公告、新闻列表

    效果演示 《Marquee标签实现跑马灯、滚动公告、通知效果》 Marquee标签制作滚动公告、新闻列表 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>marquee实现的滚动公告|www.125jz.com</titl…

    2019年2月28日
    9.6K0

发表回复

登录后才能评论