css+div 今日总结

简介: 网页布局常用的布局是顶部(top)、底部(footer)、中间部分(center)。顶部一般是标题(title)和菜单(menu),菜单一级菜单和二级菜单,二级菜单的样式方面有多中变化,一般体现在鼠标悬浮,鼠标点击时的字体颜色的更改和局部背景颜色的更改

忙碌了一段时间,前端界面学到不少知识。记录下,自己的所思所想所感...


1.网页布局、背景色以及整体风格



      网页布局常用的布局是顶部(top)、底部(footer)、中间部分(center)。顶部一般是标题(title)和菜单(menu),菜单一级菜单和二级菜单,二级菜单的样式方面有多中变化,一般体现在鼠标悬浮,鼠标点击时的字体颜色的更改和局部背景颜色的更改,没有特殊情况,顶部和头部每个网页都会用到,把他们写成2个jsp文件,那个页面需要用到,就引用。


引用jsp文件代码如下:


 

<jsp:include  page= "../include/init.jsp"  flush= "true" />   page是jsp文件的路径
引用css文件代码如下:
     <link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/default/style/resourceConfig.css" />

      href是css文件的路径;request.getContextPath()是当前文件所在的根目录


在css文件中引用css文件的代码:


@import url(base.css);



     背景色决定了网页的整体风格。为了适应浏览器的打下,故背景图片不可设置成固定的宽度,高度可以固定,因为切图的时候把背景图片切成宽度是1px,高度是实际高度的图片,样式设置成x轴方向重复。网页的整个背景最好在body里面设置(body设置网页的字体 颜色 居中等等。).例如:


body{
    background:url(../images/bodyBg_01.png) left top repeat-x #ececba;
    margin:0;
    padding:0;
    font-family:"微软雅黑";
 }
div,p,ul,h1,h2,h3,h4,h5,h6{padding:0;margin:0;}

margin:0;设置body的上下左右边距都是0.


margin:0 aut0;设置对象居中,原理是设置对象的上下边距是0,左右的边距auto,auto就是左右的边距是一样的,那么对象自动居中。


2.css文件的书写技巧



   css+div布局就是为了实现内容和样式的彻底分离,设置网页的整体风格写成一个base.css文件,存放整体风格的样式代码。


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