使用表格<table></table>对网站首页进行布局有缺陷，不能拖动版块，不灵活。

DIV

Div是一个html的标签，单独使用没有意义，必须结合CSS使用；

是一个块级元素，单独占一行；

它主要用于页面的布局；

Span

Div是一个html的标签，单独使用没有意义，必须结合CSS使用；

是一个内联元素，显示一行；

它主要用于对括起来的内容进行样式的修饰；

CSS

层叠样式表：同一元素，同一属性，设置不同值；

解决内容与表现分离的问题（html只能将元素展现出来，内容样式无法展示出来），对内容进行修饰；

语法和规范：

设置样式：

<style></style>

*第一种写法：写在<head></head>内部

<style></style> 内部：

（选择器：用于快速查找需要设置样式的元素）

选择器{

属性名1:属性值1；

属性名2:属性值2(；)

}

*冒号是英文输入法的

*最后一个分号可以省略

基本选择器：(3种)

  • 元素选择器：对整体设置样式（div）

例子：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title>元素选择器</title>
  7.          <!--对整体设置样式-->
  8.          <style  type="text/css">
  9.              div{
  10.                  font-size:50px;
  11.                  color:pink;
  12.              }
  13.          </style>
  14.      </head>
  15.      <body>
  16.          <div>
  17.              哈哈哈哈哈11
  18.          </div>
  19.          <div>
  20.              哈哈哈哈哈22
  21.          </div>
  22.          <div>
  23.              哈哈哈哈哈33
  24.          </div>
  25.          <div>
  26.              哈哈哈哈哈44
  27.          </div>
  28.          <div>
  29.              哈哈哈哈哈55
  30.          </div>
  31.      </body>
  32.  
  33.  </html>

结果：

  • 类选择机器：部分设置样式（. class名字）

例子：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>类选择器</title>
  6.          <!--部分设置样式-->
  7.          <style>
  8.              .div2{
  9.                  font-size: 30px;
  10.                  color:gold
  11.              }
  12.          </style>
  13.      </head>
  14.      <body>
  15.          <div>
  16.              哈哈哈哈哈11
  17.          </div>
  18.          <div class="div2">
  19.              哈哈哈哈哈22
  20.          </div>
  21.          <div>
  22.              哈哈哈哈哈33
  23.          </div>
  24.          <div class="div2">
  25.              哈哈哈哈哈44
  26.          </div>
  27.          <div>
  28.              哈哈哈哈哈55
  29.          </div>
  30.      </body>
  31.  </html>

结果：

  • id选择器：单个设置样式（# id名）

*注意：虽然44可以实现样式，但不是id选择器的目的，此处是有问题的。使用时只设置一个。

例子：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>id选择器</title>
  7.         <!--单个设置样式-->
  8.         <style>
  9.             #div5 {
  10.                 font-size: : 30px;
  11.                 color: yellow;
  12.             }
  13.         </style>
  14.     </head>
  15.  
  16.     <body>
  17.         <div>
  18.             哈哈哈哈哈11
  19.         </div>
  20.         <div class="div2">
  21.             哈哈哈哈哈22
  22.         </div>
  23.         <div>
  24.             哈哈哈哈哈33
  25.         </div>
  26.         <!--虽然44可以实现样式，但不是id选择器的目的，此处是有问题的。使用时只设置一个。-->
  27.         <div class="div2" id="div5">
  28.             哈哈哈哈哈44
  29.         </div>
  30.         <div id="div5">
  31.             哈哈哈哈哈55
  32.         </div>
  33.     </body>
  34.  
  35. </html>

结果：

其他选择器

  • 层级选择器：层次选择样式(div p)

例子：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title>层级选择器</title>
  7.          <style>
  8.              div p{
  9.                  font-size:30px;;
  10.                  color:green;
  11.              }
  12.          </style>
  13.      </head>
  14.  
  15.      <body>
  16.          <div>
  17.              哈哈哈哈哈11
  18.          </div>
  19.          <div>
  20.              哈哈哈哈哈22
  21.          </div>
  22.          <div>
  23.              哈哈哈哈哈33
  24.          </div>
  25.          <div>
  26.              <p>
  27.                  哈哈哈哈哈55
  28.              </p>
  29.          </div>
  30.          <div>
  31.              哈哈哈哈哈55
  32.          </div>
  33.      </body>
  34.  
  35.  </html>

结果：

  • 属性选择器：属性选择样式( input[type='..' ] )

例子：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>属性选择器</title>
  6.          <style>
  7.              input[type='text']{
  8.                  background-color: red;
  9.              }
  10.  
  11.              input[type='password']{
  12.                  background-color: blue;
  13.              }
  14.          </style>
  15.      </head>
  16.      <body>
  17.          用户名：<Input type="text" name="username"/><br />
  18.          密码：<input type="password" name="password" />
  19.      </body>
  20.  </html>

结果：

【使用DIV+CSS重写网站首页案例】CSS选择器的更多相关文章

  1. 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现

    使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...

  2. 【使用DIV+CSS重写网站首页案例】CSS浮动

    CSS浮动: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘为止 由于浮动框不在文件的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 选择器之 float属性 ...

  3. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  4. 【使用DIV+CSS重写网站首页案例】CSS盒子模型

    CSS盒子模型 取值问题: 默认情况,padding.border.margin都为0: 设定区域内容的width和height,是区域内容框的尺寸: 如果设定padding/border/margi ...

  5. PHP.5-DIV+CSS布局网站首页实例

    DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...

  6. HTML&CSS——使用DIV和CSS完成网站首页重构

    1.DIV 相关的技术 Div 它是一个 html 标签,一个块级元素(单独显示一行).它单独使用没有任何意义,必须结合CSS来使用.它主要用于页面的布局. Span 它是一个 html 标签,一个内 ...

  7. 原生CSS设置网站主题色—CSS变量赋值

    定义CSS变量 在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量 :root { --main-bg-color: #ff7675; --color1: #fbfee9 ...

  8. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  9. IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

    首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...

随机推荐

  1. UDF——文件编码造成UDF编译失败

    有时候我们觉得我们的代码写得很正确的,但是在Fluent当中编译的时候一直编译不通过,提示我们错误,我们根据Fluent当中的错误提示去找到源代码中对应的行,却发现没有错误提示当中的问题,出现这个问题 ...

  2. Spring Boot 构造器参数绑定，越来越强大了！

    在之前的文章:Spring Boot读取配置的几种方式,我介绍到 Spring Boot 中基于 Java Bean 的参数绑定,在一个 Java Bean 类上用 @ConfigurationPro ...

  3. 几句话总结一个算法之Policy Gradients

    强化学习与监督学习的区别在于,监督学习的每条样本都有一个独立的label,而强化学习的奖励(label)是有延后性,往往需要等这个回合结束才知道输赢 Policy Gradients(PG)计算某个状 ...

  4. 【IntelliJ IDEA学习之六】IntelliJ IDEA 调试

    版本:IntelliJIDEA2018.1.4 一.设置热部署1.自动编译 2.配置hotswap 3.开启compiler.automake.allow.when.app.running CTRL ...

  5. Cannot find class in classpath解决方法

    1)Build Path出问题了 build path出问题了 ,java工程名前会有一个红色的感叹号,重新build一下 工程名上右键——>Build Path ——>Configure ...

  6. TYPORA语法

    原文链接:https://blog.csdn.net/SIMBA1949/article/details/79001226

  7. 《C++ 习题与解析》笔记

    目录 ####Chapter-1 C++语言概述(错题) ####Chapter-2 类和对象 ####Chapter-3 引用 ####Chapter-4 友元函数 #### Chapter-5 运 ...

  8. 记一个Redis分布式事务锁

    package com.mall.common; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory. ...

  9. switch/case/default中的雷区

    switch的语法如下: switch(表达式){ case常量表达式1: 语句1;break; case常量表达式2: 语句2;break; - case常量表达式n: 语句n;break; def ...

  10. SpringCloud分布式架构权限管理

    概述 本文讨论分布式架构权限管理的两种情况,一种是针对统一授权访问的,一种是跨平台接口访问的. 虽然分布式架构会做业务的切割,将整体的业务切割为独立的子业务或者子平台,但是同一平台下往往会有统一的授权 ...