css+div

简介:

           div+css是web设计标准,它是一种网页布局方法。它可以实现网页页面内容与表现分离。

         css是层叠样式表(Cascading Style Sheets)的缩写,用于定义HTML元素的显示形式。

         样式规则:由一个选择器后跟一个声明块组成。声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。

         举例如下:

#m_category{
    width:200px;
    float :left ;
}
         下面说一说什么是选择器:

              元素选择器:语法格式: 元素{color: blue;}
              类选择期: 语法格式: .类名{属性: 值;}
              ID选择器:#id名 {属性 : 值;} ID名不能重复
              通配符选择器:语法格式:*{属性:值;}
              伪类选择器:
                        伪类选择器可以以不同方式格式化超级链接<a>元素的四种不同状态:以下顺序依次写;(记忆方法:a Love or Hate)
                        a:link 是用在未访问的链接的选择器
                        a:visited 是用在已访问过的链接的选择器
                        a:hover 是用在鼠标光标放在其上的链接的选择器
                        a:active 是用在获得焦点(比如,被点击)的链接的选择器
                        如果需要,我们可以组合这几个状态,按顺序写:
                        a:link,a:visited { color :blue;}
                        a:hover ,a:active { color :blue;}
                伪元素选择器
                        标准的选择器不能格式化一个元素内容的第一个字母或者第一行,而伪元素选择器能实现:
                        所有浏览器支持的有两种: :first-line和 :first-letter
                        例:段落的第一行:p:first-line {属性:值;}
                      例:段落的第一个字母:p:first-letter {属性:值;}
            下面说一说CSS优先级,即CSS样式在浏览器中被解析的先后顺序。
             优先级顺序为:内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pseudo-class)和属*(attribute)选择符 > 类别(type),伪对象(pseudo-element)
              这样做有什么优势呢?
                1、精简的代码,使用DIV+CSS布局,页面代码精简。
                 2、提高访问速度,增减用户体验性
                  3、很容易被搜索引擎搜索岛。降低网页大小,让网页体积变得更小。

相关文章
|
7月前
|
前端开发
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
114 0
|
23天前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
19 1
|
3月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
5月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
262 3
|
5月前
|
前端开发
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
382 1
|
5月前
|
前端开发
css div填满剩余高度
css div填满剩余高度
109 0
|
7月前
|
编解码 前端开发 UED
div+css详解
总的来说,"div+css"是一种强大的网页布局方法,它提供了灵活性和可维护性,使得网页设计师和开发人员能够创建各种各样的页面布局和风格,同时确保网站具有一致的外观和良好的用户体验。它已成为现代Web开发中的标准实践之一。
138 3
|
7月前
|
前端开发 JavaScript
css 设置div阴影样式
css 设置div阴影样式
60 0
|
7月前
|
前端开发 小程序
css div添加滚动条(附加源码)
css div添加滚动条(附加源码)
88 0
|
7月前
|
前端开发 搜索推荐 容器
div+css的布局较table布局有什么优缺点?
div+css的布局较table布局有什么优缺点?