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

DIV

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

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

它主要用于页面的布局；

Span

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

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

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

CSS

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

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

语法和规范：

设置样式：

<style></style>

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

<style></style> 内部：

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

选择器{

属性名1:属性值1；

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

}

*冒号是英文输入法的

*最后一个分号可以省略

基本选择器：(3种)

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

例子：

 <!DOCTYPE html>
 <html>

     <head>
         <meta charset="UTF-8">
         <title>元素选择器</title>
         <!--对整体设置样式-->
         <style  type="text/css">
             div{
                 font-size:50px;
                 color:pink;
             }
         </style>
     </head>
     <body>
         <div>
             哈哈哈哈哈11
         </div>
         <div>
             哈哈哈哈哈22
         </div>
         <div>
             哈哈哈哈哈33
         </div>
         <div>
             哈哈哈哈哈44
         </div>
         <div>
             哈哈哈哈哈55
         </div>
     </body>

 </html>

结果：

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

例子：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>类选择器</title>
         <!--部分设置样式-->
         <style>
             .div2{
                 font-size: 30px;
                 color:gold
             }
         </style>
     </head>
     <body>
         <div>
             哈哈哈哈哈11
         </div>
         <div class="div2">
             哈哈哈哈哈22
         </div>
         <div>
             哈哈哈哈哈33
         </div>
         <div class="div2">
             哈哈哈哈哈44
         </div>
         <div>
             哈哈哈哈哈55
         </div>
     </body>
 </html>

结果：

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

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

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>id选择器</title>
        <!--单个设置样式-->
        <style>
            #div5 {
                font-size: : 30px;
                color: yellow;
            }
        </style>
    </head>

    <body>
        <div>
            哈哈哈哈哈11
        </div>
        <div class="div2">
            哈哈哈哈哈22
        </div>
        <div>
            哈哈哈哈哈33
        </div>
        <!--虽然44可以实现样式，但不是id选择器的目的，此处是有问题的。使用时只设置一个。-->
        <div class="div2" id="div5">
            哈哈哈哈哈44
        </div>
        <div id="div5">
            哈哈哈哈哈55
        </div>
    </body>

</html>

结果：

其他选择器

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

例子：

 <!DOCTYPE html>
 <html>

     <head>
         <meta charset="UTF-8">
         <title>层级选择器</title>
         <style>
             div p{
                 font-size:30px;;
                 color:green;
             }
         </style>
     </head>

     <body>
         <div>
             哈哈哈哈哈11
         </div>
         <div>
             哈哈哈哈哈22
         </div>
         <div>
             哈哈哈哈哈33
         </div>
         <div>
             <p>
                 哈哈哈哈哈55
             </p>
         </div>
         <div>
             哈哈哈哈哈55
         </div>
     </body>

 </html>

结果：

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

例子：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>属性选择器</title>
         <style>
             input[type='text']{
                 background-color: red;
             }

             input[type='password']{
                 background-color: blue;
             }
         </style>
     </head>
     <body>
         用户名：<Input type="text" name="username"/><br />
         密码：<input type="password" name="password" />
     </body>
 </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. tcp & 长连接 短连接

    参考文档: tcp协议 http://blog.chinaunix.net/uid-26833883-id-3627644.html 长连接和短连接 http://blog.csdn.net/free ...

  2. stop容器，把信号量传给java进程，优雅退出

    Java中可以添加ShutdownHook监听关闭事件,包括kill -15, control+c,terminal等信号.kill -9则接收不到. Runtime.getRuntime().add ...

  3. CentOS 7搭建本地yum源和局域网yum源

    这两天在部署公司的测试环境,在安装各种中间件的时候,发现各种依赖都没有:后来一检查,发现安装的操作系统是CentOS Mini版,好吧,我认了:为了完成测试环境的搭建,我就搭建了一个局域网的yum源. ...

  4. Vue.js 自定义组件封装实录——基于现有控件的二次封装（以计时器为例）

    在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...

  5. python入门之名称空间

    name = 'tank' 什么是名称空间? 存放名字的空间 如果你想访问一个变量值,必须先访问对应的名称空间,拿到名字和对应的内存地址的绑定关系 名称空间的分类: 1.内置名称空间: python提 ...

  6. spring cloud 客户端负载均衡 - Ribbon

    Spring Cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具,基于Netflix Ribbon实现的,Ribbon不像注册中心.网关那样需要单独部署,它是作为一个工具直接集成到 ...

  7. CentOS7使用tar.gz包安装MySql的踩坑之旅

    由于客户的CentOS服务器没有安装yum工具,只能通过下载tar.gz包安装mysql,于是跟着万能的百度开启了漫漫踩坑之旅: 1.下载mysql-5.6.33-linux-glibc2.5-x86 ...

  8. RuntimeError: Model class myapp.models.Test doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS.

    没有添加子应用在settings里面!

  9. 使用benchmarkSQL测试数据库的TPCC

    压力测试是指在MySQL上线前,需要进行大量的压力测试,从而达到交付的标准.压力测试不仅可以测试MySQL服务的稳定性,还可以测试出MySQL和系统的瓶颈. TPCC测试:Transaction Pr ...

  10. 螺旋折线-C++

    标题:螺旋折线 如图p1.png所示的螺旋折线经过平面上所有整点恰好一次. 对于整点(X, Y),我们定义它到原点的距离dis(X, Y)是从原点到(X, Y)的螺旋折线段的长度. 例如dis(0, ...