HTML调用CSS管理、美化div的方法

css布局,关键在于html文件和css文件相对应。在html中,对各p的包含关系作层次分明的设计,然后在css文件中对样式、字体等式进行设计。
简单的html与css布局示意

HTML文件

p_header

p_views

p_views_post

p_views_auther

p_views

p_floot

CSS文件

    .p_body {            background-color: darkcyan;        }    .p_header {            background-color: lightblue;            font-size: 72px;            margin-top: 30px;            padding-left: 30px;        }    .p_views {            background-color: blueviolet;            margin-top: 10px;            padding-left: 30px;            padding-right: 30px;            font-size: 48;        }    .p_views_post {            background-color: aliceblue;        }    .p_views_auther{            background-color: yellowgreen;        }    .p_floot    {            font-size:40px;            background-color: lightblue;            margin-top: 10px;            padding-left: 30px;            padding-right: 30px;        }

以上就是HTML调用CSS管理、美化div的方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1544993.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:27:31
下一篇 2025年12月8日 03:15:31

相关推荐

  • 四种css垂直居中方法

    垂直居中 .parent{width: 400px;height: 400px;border:1px solid grey;display: } .children{width: 200px;height: 200px;background-color: #ccc;} /*table-cell*/ …

    好文分享 2025年12月21日
    000
  • html格式化输出JSON

    本篇文章主要介绍了html格式化输出json示例(测试接口) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 将 json 数据以美观的缩进格式显示出来,借助最简单的 JSON.stringify 函数就可以了,因为此函数还有不常用的后面2个参数。 见MDN https…

    好文分享 2025年12月21日
    000
  • 利用html的name属性获取dom元素

    以前获取dom元素基本都是通过js的document.getelementbyid()或者document.getelementbyname等方法或者通过jq的选择器来选择,但其实html的name属性也可以用来直接获取dom元素,代码如下所示: function check(){ listForm…

    好文分享 2025年12月21日
    000
  • Html当中文本与标签如何让其居中

    1、文本居中: text-align: center;line-height: 100px; (=height) 2、标签居中 margin: 0 auto; 其中0指的是margin-top:0 代码片: 搜索论坛 .item1{ height: 100px; width: 100px; back…

    2025年12月21日
    000
  • html5和html有什么区别

    浅谈:html5和html的区别 最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词。可能有人会问,这两者有什么关系呢?随着这移动互联网快速发展的时代,尤其是4G时代已经来临的时刻,加上微软对“XP系统”不提供更新补丁、维护的情况下“html5+css3”也逐渐的成为新一代web前端技术,…

    好文分享 2025年12月21日
    000
  • HTML在线配色工具

    编者前语: 很多刚开始编写网页的菜鸟,都不知道怎么搭配色彩,刚开始的时候,我也是这样的。 为了更好的搭配色彩。我们说说html css 的色彩搭配以外的事情。 1.网页选择几种颜色比较好? 网页我们一般颜色选择不要超过7种颜色,多了网页风格不好控制,最少不要低于3种,否则太单调。我们常见的网页,一般…

    2025年12月21日
    000
  • html中frame与iframe有哪些区别

    我们首先来看一下w3cschool教程上是如何解释的,因为本人也是从网上了解的 iframe定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 我们可以在页面布局的任何地方来使用这个iframe,它就相当于在页面的任何一个地方插入一个小窗口,用来显示其他页面 frames…

    好文分享 2025年12月21日
    000
  • HTML实现文本框只读取但是不能修改的方法

    本文通过实例代码给大家介绍了 html实现文本框只读不能修改其中的内容的方法,需要的朋友参考下吧 废话不多说了,直接给大家贴代码了,具体代码如下所示: 以上就是HTML实现文本框只读取但是不能修改的方法的详细内容,更多请关注创想鸟其它相关文章!

    好文分享 2025年12月21日
    000
  • HTML+CSS3实现心跳效果代码分享

    本文通过代码给大家介绍了html+css3模拟心的跳动的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧 废话不多说了,直接给大家贴代码了,具体代码如下所示: 模拟心的跳动 * { margin: 0; padding: 0;}body { background-color: #D4CECE…

    好文分享 2025年12月21日
    000
  • 3种方法使HTML页面3秒后自动跳转

    在项目中,我们经常会遇到这样一个功能:如何实现页面N秒后自动跳转。其实方法很简单,下面小编通过本文给大家分享HTML页面3秒后自动跳转的三种常见方法,对html页面3秒后自动跳转的相关知识感兴趣的朋友一起学习吧 在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查…

    好文分享 2025年12月21日
    000
  • 巧妙地用HTML打开Windows文件管理

    (一)代码演示 Insert title here 注册 用户名: 密码: 性别: 男 女 擅长: Java Hadoop PHP 头像: (二)效果图 以上就是巧妙地用HTML打开Windows文件管理的详细内容,更多请关注创想鸟其它相关文章!

    2025年12月21日
    000
  • 韩顺平最新html基础视频教程的资料(源码、课件)推荐

    《韩顺平 2016年 最新html基础视频教程》是针对初学者的一个讲解html基础内容的视频。html(hypertext mark-up language)即超文本标签语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。html文本是由html命令组成的描述性文本,html标签可以说…

    2025年12月21日
    000
  • 韩顺平最新html高级视频教程源码课件推荐

    《韩顺平 2016年 最新html高级视频教程》是以《韩顺平html基础视频教程》为基础来对html知识点的加强和提高。内容相对基础知识要稍难一点,但是知识点更加实用html(hypertext mark-up language)即超文本标签语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主…

    2025年12月21日
    000
  • HTML页面加载速度加快的介绍

    1.页面减肥  a. 页面的肥瘦是影响加载速度最重要的因素。  b. 删除不必要的空格、注释。  c. 将inline的script和css移到外部文件。  d. 可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥。  立即学习“前端免费学习笔记(深入)”…

    好文分享 2025年12月21日
    000
  • 实例展示DIV+CSS实现电台列表

    这篇文章主要介绍了p+css实现电台列表设计的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 CSS Spite技术:也就是CSS精灵技术,实际上CSS的精灵就是图片里的一个个的图标元素,这些图标可以使按钮、标签以及logo等等。很多网站中都应用了该技术,可有效…

    2025年12月21日 好文分享
    000
  • HTML制作网页动态时钟教程

    本文通过实例代码给大家介绍了html写一个网页动态时钟效果,需要的的朋友参考下吧 用html写一个动态网页时钟,代码如下所示: 时钟特效 function disptime(){ var today=new Date(); var hh=today.getHours(); var mm=today.…

    2025年12月21日
    000
  • html5+CSS3+JS七夕告白功能实现详解

    因为今天8月28日就是中国的情人节—七夕,作为我这个程序猿一枚也不甘落后,还有一颗脱单的心,下面小编给大家制作了基于html5+css3+js实现的七夕情人节特效,具体实例代码,大家参考下本文  因为今天8月28日就是中国的情人节—七夕,作为程序猿一枚的我就只有在家敲代码咯!但我还是有一颗脱单的心;…

    2025年12月21日
    000
  • 总结如何在HTML网页中插入视频方法

    这篇文章主要介绍了html网页中插入视频的方法小结,需要的朋友可以参考下 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不…

    好文分享 2025年12月21日
    000
  • HTML中的文件包含

            在论坛中常常有网友问到,可以在一个html的文件当中读取另一个html文件的内容吗?答案是确定的,而且方法不只一种,在以前我只会使用iframe来引用,后来发现了另外的几种方法,那今天就总结这几种方法让大家参考一下,本人觉得第三种方式较好!         1.iframe引入,看看…

    好文分享 2025年12月21日
    000
  • 优化html代码加快网页加载速度

         web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容易。无论是技术高超的老手,还是初涉编程的菜鸟,领会这些都十分必要。      明显HTML,暗渡“公用脚本”      减少web…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信