热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

css+div网页设计

宏观了解css+div的各个方面。

css是网页制作不可缺少的部分,我会用两篇博客为大家展示css的基本用法。

关于css+div的整体结构图总结如下:

本篇博客主要介绍css的基础知识。

一、css概念;

css(级联样式表):它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

二、使用css控制页面方法

css控制页面的方法共有四种,行内样式、内嵌式、链接式、导入式。


a、行内样式


ps:行内样式是最简单的css使用方法,但是由于每一个标记采用了一个style,后期维护成本很高,不推荐。


b、内嵌式


ps:适合于对特殊页面单独设置样式。


c、链接式


ps:链接式是使用频率最高也是最实用的方法。


d、导入式


ps:导入式最大的好处就是可以让一个HTML文件导入多个css样式表。


e、四种页面控制方法的优先级:行内样式>链接式>内嵌式>导入式


三、css选择器

选择器是css中的重要概念,所有的HTML语言中的标记都是通过不同的选择器进行控制的。


a、标记选择器。



b、类别选择器



d、id选择器



四、文字效果

举例:

关键字

含义

Font-family

设置字体样式,例如:宋体,楷体等

Font-size

设置字体大小,单位可以是in,cm,mm,%相对值等

Color

字体样色,可以是red等单词,#******rgb(*%,*%,*%)

Font-weight

字体粗细,可以是数字,normal

Font-style

字体是否为斜体:italic

text-decoration

字体的下划线,顶画线,删除线等

text-transform

英文字母大小写问题

text-align

对齐方式

letter-spacing

字间距

line-height

行间距



五:图片效果

图片属性其实也没有什么特殊的,无非就是边框样式,大小、对其方式等,这里就不一一列举了,有兴趣的同学和自行查看css完全参考手册。

这里举个例子:





   

	


显示效果图


六、背景设置


1、背景颜色

基本语法:

.topbanner{  
    background-color:#fbc9ba;   /* 设置banner类的背景色 */  
}  


2、背景图片

a、基本语法:

 background-image:url(bg2.jpg);      /* 背景图片 */  
b、背景图片重复

举例:





   




e、背景图片位置

background-position:bottom right;	/* 背景位置,右下 */
background-position:30% 70%;		/* 背景位置,百分比 */
background-position:300px 25px;		/* 背景位置,具体数值 */

f、固定背景图片

	background-attachment:fixed;		/* 固定背景图片 */


七、链接特效

属性 说明
a:link 正常浏览时候的样式
a:visited 被点击的超链接样式
a:hover 鼠标经过时候的样式
a:active 单机超链时候的样式


举例:

a:link{							/* 超链接正常状态下的样式 */
	color:#005799;				/* 深蓝 */
	text-decoration:none;		/* 无下划线 */
}
a:visited{						/* 访问过的超链接 */
	color:#000000;				/* 黑色 */
	text-decoration:none;		/* 无下划线 */
}
a:hover{						/* 鼠标经过时的超链接 */
	color:#FFFF00;				/* 黄色 */
	text-decoration:underline;	/* 下划线 */
}

八、鼠标特效

	cursor:se-resize;/* 变幻鼠标形状 */

cursor属性定制了好多鼠标特效大家可以参照这张表


九、滤镜

css中的滤镜只能在IE浏览器中使用,我们以后要做的软件尽量还是要对绝大部分浏览器都支持的,这里就不多说滤镜的知识了。滤镜的标识符为filter,总体上和其他css语句相同,有兴趣的朋友自己再查看相关资料。


今天的内容就讲这么多,下篇博客将为大家介绍css+div的美化布局以及css与Javascript、ajax、jquery的混合应用。



推荐阅读
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
  • 前言对于从事技术的人员来说ajax是这好东西,都会使用,而且乐于使用。但对于新手,开发一个ajax实例,还有是难度的,必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
  • asp.net(vb脚本)如何获取xml的节点值?xmlversion1.0encodingutf-8?rootimageimagemenusmenuurl#frame_paren ... [详细]
  • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
author-avatar
手机用户2502910651
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有