官方QQ群—Discuz在线开发手册购买邀请码
开启辅助访问 在线金币（V币）充值切换风格
立即注册 找回密码

QQ登录

只需一步，快速开始

【道勤网】- www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程！【道勤网】

快捷导航
搜索
【道勤网】- www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程！【道勤网】»论坛 › 建站技术 › DIV+CSS › div css 第二节在div css当中并列标签的应用规则详解
返回列表 发新帖
查看: 4930|回复: 0

[DIV+CSS 教程笔记02] div css 第二节在div css当中并列标签的应用规则详解

[复制链接]
发表于 2014-11-29 15:39:51 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 asp老师 于 2014-11-30 22:40 编辑

什么是并列标签？为什么说学好并列标签，是以后学习代码知识的基础？
大家要静下心来，听老师耐心的讲解！
请大家关注下一节：
我们先来看下第一节的代码如下;
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <!--下面就是css的编写方法<stye type="text/css"> </style>-->
  7. <style type="text/css">
  8. P{color:#F00; }


  11. </style>
  12. </head>

  14. <body>


  17. 大家好，<p style="color:#F00;">现在我们一起来学习这个div+css系列教程-道勤网</p><p>本节视频由 道勤网  提供,全部免费建站视频教程请登录道勤网!www.daoqin.net .请关注本节课discuz视频教程!<p>为各位新手站长提供学习交流的互助平台,还可以学到网站推广的<p>知识,如:seo等!实实在在的为新手站长包括空间域名的购买指导,到程序的使用,及网站建设,网站优化,网站维护等全方位服务,是道勤网努力的方向!<p>QQ群226547332

  19. </body>
  20. </html>
复制代码
那么我们可以看下里面的css代码
如下：
  1. <style type="text/css">
  2. P{color:#F00; }


  5. </style>
复制代码
好那么我们给这个属性在添加属性，代码如下：
  1. <style type="text/css">
  2. P{color:#F00; font-size:24px;}


  5. </style>
复制代码
那么此时我们可以看下这个font-size:24px;所起到的效果，让字体变大，效果如下：
01.jpg
此时我们在给加一个背景色的属性background:#F00;   具体css代码如下：
  1. <style type="text/css">
  2. P{color:#F00; font-size:24px; background:#9C6;}


  5. </style>
复制代码
效果如下：
002.jpg
这样呢，我们就是针对这个P标签进行设定的参数。如果我们需要对其他的进行设定的话，需要我们另起一行，代码如下：
  1. <style type="text/css">
  2. P{color:#F00; font-size:24px; background:#9C6;}
  3. body{background:#F30;}


  6. </style>
复制代码
大家可以看到此时我们又多写了一个另外的一个代码：
  1. body{background:#F30;}
复制代码
那么此时效果如下：
03.jpg
如果我们想要对 QQ群226547332 这句话，变化一个颜色同时还要让这个字体变大，我们通过css怎么设置呢？
我们可以先给这句话，加一个  <span></span> (span标签是不换行也不断行的标签)，之后呢，我们在返回到<style tpye="text/css">  </style>  这里进行设定就可以了。
代码如下;
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <!--下面就是css的编写方法<stye type="text/css"> </style>-->
  7. <style type="text/css">
  8. P{color:#F00; font-size:24px; background:#9C6;}
  9. body{background:#F30;}
  10. span{color:#00F; font-size:45px;}

  12. </style>
  13. </head>

  15. <body>


  18. 大家好，<p style="color:#F00;">现在我们一起来学习这个div+css系列教程-道勤网</p><p>本节视频由 道勤网  提供,全部免费建站视频教程请登录道勤网!www.daoqin.net .请关注本节课discuz视频教程!<p>为各位新手站长提供学习交流的互助平台,还可以学到网站推广的<p>知识,如:SEO等!实实在在的为新手站长包括空间域名的购买指导,到程序的使用,及网站建设,网站优化,网站维护等全方位服务,是道勤网努力的方向!<p><span>QQ群226547332</span>

  20. </body>
  21. </html>
复制代码
效果如下;
010.jpg


点击查看其他DIV+CSS教程
第一节 div css基本书写规则和原理详细解答
第二节在div css当中并列标签的应用规则详解
第三节 div+ css中文字和图片背景的常用css熟悉详解
第四节div+css当中的 内联样式和外联的区别讲解
第五节div+css当中 class类别选择符的应用详解
第六课. DIV +CSS当中的 id选择器的应用和匹配原理详解
第七课 div css当中 组合选择符的应用和原理详解
第八课 div css 通配选择符和包含选择器的用法技巧
第九课 div css里面 常用选择器的课程总结
第十课 div css 中css伪类元素的讲解和应用原理详解
第十一课 div css当中的 背景图片的定位概念
道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

建站技术交流导读服务器运维/第四天课程/第三天课程/第二天课程/第一天课程
关闭

道勤网- 推荐内容！上一条 /2 下一条

!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回复 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号-1 )

GMT+8, 2024-11-15 11:36

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

快速回复 返回顶部 返回列表