DIV+CSS网页布局常用的一些命名规则和书写

CSS样式命名规范

一．文件命名规范

全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；

二．常用类/ID命名规范

页　眉：header
内　容：content
容　器：container
页　脚：footer
版　权：copyright　
导　航：menu
主导航：mainMenu
子导航：subMenu
标　志：logo
标　语：banner
标　题：title
侧边栏：sidebar
图　标：Icon
注　释：note
搜　索：search
按　钮：btn
登　录：login
链　接：link
信息框：manage
……

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn

关于命名的更多知识，您可以参考：
http://www.52css.com/search.asp?SearchContent=%E5%91%BD%E5%90%8D&searchType=title

CSS书写规范及方法

一. 常规书写规范及方法

1. 选择DOCTYPE：

XHTML 1.0 提供了三种DTD声明可供选择：

过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

关于DTD您可以参考：
http://www.52css.com/search.asp?SearchContent=%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B&searchType=title

2. 指定语言及字符集：

为文档指定语言：

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：
常用的语言定义：

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
标准的XML文档语言定义：
<?xml version=”1.0″ encoding=” utf-8″?>
针对老版本的浏览器的语言定义：
<meta http-equiv=”Content-Language” content=” utf-8″ />
为提高字符集，建议采用“utf-8”。

3. 调用样式表：

外部样式表调用：

页面内嵌法：就是将样式表直接写在页面代码的head区。 如：

<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />

在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

4、选用恰当的元素：

根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。例如，使用P元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；

避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；

尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；

5、派生选择器：

可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：

.mainMenu ul li {background:url(images/bg.gif;)}

关于选择器，您可以参考：
http://www.52css.com/search.asp?SearchContent=%E9%80%89%E6%8B%A9%E5%99%A8&searchType=title

6、辅助图片用背影图处理：

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

7、结构与样式分离：

在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写：

页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：

<div id=”mainMenu”>
<ul>
<li><a href=”#” >首页</a></li>
<li><a href=”#” >介绍</a></li>
<li><a href=”#” >服务</a></li>
</ul>
</div>

/*=====主导航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主导航结束=====*/

9、鼠标手势：

在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;”

二．注释书写规范

1、行间注释：

直接写于属性值后面，如：

.search{
border:1px solid #fff;/*定义搜索输入框边框*/
background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/
}

2、整段注释：

分别在开始及结束地方加入注释，如：

/*=====搜索条=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索条结束=====*/

关于注释，您可以参考：
http://www.52css.com/search.asp?SearchContent=%E6%B3%A8%E9%87%8A&searchType=title

三．样式属性代码缩写

1、不同类有相同属性及属性值的缩写：

对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：

#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}

两个不同类的属性值有重复之处，刚可以缩写为：

#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}

2、同一属性的缩写：

同一属性根据它的属性值也可以进行简写，如：

.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no-repeat 50% 50%;
}

3、内外侧边框的缩写：

在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：

.btn {
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}

则可缩写为：

.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}

而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：

.btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}

缩写为：

.btn {margin:10px 5px;}

而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：

.btn {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}

缩写为：

.btn{margin:10px;}

4、颜色值的缩写：

当RGB三个颜色值数值相同时，可缩写颜色值代码。如：

.menu { color:#ff3333;}

可缩写为:

.menu {color:#f33;}

关于缩写您可以参考：
http://www.52css.com/search.asp?SearchContent=%E7%BC%A9%E5%86%99&searchType=title

四．hack书写规范 

因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。

1、 IE6、IE7、Firefox之间的兼容写法：

写法一：

IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
根据上述表达，同一类/ID下的CSS 　hack可写为：
.searchInput {
background-color:#333;/*三者皆可*/
*background-color:#666　!important; /*仅IE7*/
*background-color:#999; /*仅IE6及IE6以下*/
}
一般三者的书写顺序为：FF、IE7、IE6.

写法二：

IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：
.searchInput {
background-color:#333;/*通用*/
_background-color:#666;/*仅IE6可识别*/
}

写法三：

*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*仅IE6*/
*+html .searchInput {background-color:#555;}/*仅IE7*/

屏蔽IE浏览器：

select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

*:lang(zh) select {font:12px  !important;} /*FF的专用*/
select:empty {font:12px  !important;} /*safari可见*/

IE6可识别：

这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

select { display /*IE6不识别*/:none;}

IE的if条件hack写法：

所有的IE可识别：

<!–[if IE]> Only IE <![end if]–>
只有IE5.0可以识别:
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0包换IE5.5都可以识别:
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
仅IE6可识别:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6以及IE6以下的IE5.x都可识别:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
仅IE7可识别:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>

关于CSS HACK和BUG您可以参考：
http://www.52css.com/search.asp?SearchContent=HACK&searchType=title
http://www.52css.com/search.asp?SearchContent=BUG&searchType=title

2、清除浮动：

在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}

你可能感兴趣的:(div+css)

  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 大学生HTML期末大作业——HTML+CSS+JavaScript购物商城（美食） 无·糖 Web前端期末大作业html课程设计cssjavascript大学生大作业web网页设计
    HTML+CSS+JS【购物商城】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目购物商城美食7页含jQuery登录注册二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证
  • Vue3 实现一个简单的方位动画 程序员vue.js
    这是最近遇到的一个有点意思的需求，需要根据后端返回的数据，在一块地图的具体的方位上显示对应位置标识（位置图钉）。不用十分精确，只要能表现出大致的方位即可。类似下面的效果，有点像游戏里的地图标识。设计思路由于不用十分精确，就用最简单的div+css来实现位置标识的显示和动画。之后再通过配合背景图片来保证最基础的效果。方位总共9个，东南西北中加上四个角，通过Grid布局让其形成3*3的格子。位置标识只
  • html添加遮罩 我的名字叫勇敢#5271 前端html添加遮罩
    html添加遮罩的代码如下所示使用div+css，加载中的图片是网上下载的动图，可以根据自己需要进行修改DIVCSS遮罩层functionshowdiv(){document.getElementById("bg").style.display="block";/*document.getElementById("show").style.display="block";*/}functionhi
  • 大前端完整学习路线（详解） 强哥科技兴
    第一阶段：HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。JS高级特征：正则表达式、排序算
  • 一个网站是如何制作出来的 前端开发小白
    "一个网站是如何制作出来的？是不是用了很高大上的技术？"这是大多数童鞋经常会产生的疑问网页制作并非大家想的那样用了高大上的技术。其实网站制作很简单，是由一个叫div+css来搞定的Div+css是什么？div+css是网站布局方式Div：是一个常见网页布局结构。它取代传统的表格布局方式。（就相当于人的骨架和各个零件）Css:是给网站进行美化和修饰。（相当于人的衣服、鞋子、帽子等修饰自己的东西）例如
  • 浮动与清除浮动的六种方法 旧忆ajm
    1.什么是浮动?css中,一共给我们了三种布局方式标准文档流浮动(float)定位(postion)DIV+CSS布局在css中很多效果是标准流无法做到的,比如我要三个div盒子在一行显示,这个在标准流中是无法办到的,因为块级元素的特点就是可以设置宽和高,但是它会独占一行这时候我们就需要使用浮动2.浮动经常出现的问题在元素进行浮动后,会出现父元素没有高度的情况,下面的内容会直接弹到上面的div盒子
  • 2020最新版PHP学习路线--PHP是最好的编程语言吗？ PHP9年架构师
    第一阶段：PHP学习路线-web前端此阶段的学习目标：能够根据UI的设计实现HTML的静态布局。此阶段的市场价值：熟练掌握之后，可以满足市场静态页面布局，但是市场就业工资相对较低。此阶段的重点知识：掌握HTML5常用标签；掌握CSS语法及使用技巧；掌握CSS3新增选择器；掌握CSS3新增样式属性；掌握DIV+CSS布局方式；掌握常见网页布局技巧；熟练使用JavaScript脚本为页面实现动态效果；
  • Web网页设计作业html 周末简设 网页设计html前端css
    /主题/《周末の天空》/前话/周末的天空如此蓝，阳光如此的温暖，可总是不能长久，时间转瞬，希望曾经关心自己和自己关心的人一切都安好，言归正传，该模板为纯html5模板，样式简单，页面都是以DIV+CSS实现线性布局，运用html5技术，包括nav标签、header标签和footer标签等，支持PC端和手机端。/图摘//设计/
  • div布局 Mr_J316
    2019-04-16盒模型可以把网页看作是由一个个的“盒子”组合而成。这个盒子就是div标签。HTML主要利用div标签进行网页布局，利用CSS进行样式设置，这种方法称为“Div+CSS”。div常用属性1.width2.height3.margin属性描述margin简写属性。按照上、右、下、左顺序设置外边距。margin-bottom下外边距。margin-left左外边距。margin-ri
  • 特邀：一个想法，十年坚持，一位普通码农向技术总监的进阶之路 程序员技术圈
    在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去！其实现实并不是这样子的，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。明确入行的目的很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML,DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容易找到工作，收入比普通的工作还要高一些，所以成为了很多高校毕业生的选择。如果您只是
  • 大一学生Web课程设计 美食主题网页制作(HTML+CSS+JavaScript)-咖啡 6页 二挡起步 web前端期末大作业前端javascripthtmlbootstrap美食
    源码获取文末联系Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|精彩专栏推荐美食网页介绍|甜品蛋糕|地方美食小吃文化|餐饮文化|等网站的设计与制作|美食主题网站|HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础
  • 2020年小白要知道的Web前端学习路线 web前端学习指南
    今天小编要跟大家分享的文章是关于2020年小白要知道的Web前端学习路线。准备在2020年学习Web前端技术的小伙伴们来和小编一起看看本篇文章，希望能够对大家有所帮助！第一阶段：●HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、●JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器
  • 前端：分享几个前端素材网站 蓝绿色~菠菜 前端前端bootstrapjavascript
    1、17素材网：资源还算比较全，包括各种前端插件、图片展示、文字效果、以及整站模板等，但是需要花钱注册会员。网址：jQuery网页特效最全网页模板和网站模板jQuery代码_17素材网2、模板之家：整站资源比较丰富，各种后台管理、企业、政府模板。免费，广告较多。网址：网页模板,网站模板,DIV+CSS模板,企业网站模板下载-模板之家3、图标bootstrap图标大全：BootstrapIcons-
  • html 实现格子效果,div+css实现九宫格效果 weixin_39793420 html实现格子效果
    div+css实现九宫格效果有3种方法：1、方法一：把九宫图切割成9张图，用9个div合在一起，改变宽高，实现。优点：兼容性100%支持，缺点div太多，使用不方便。2、方法二：把九宫图按特定格式排列成一张图，再用9个div合在一起，改变宽高和padding，实现。优点：兼容性100%支持，缺点div太多，使用不方便。一张背景实现自适应九宫格/*为了让看得简单清晰点，CSS跟XHTML代码就不写那
  • 【HTML/CSS/JavaScript】网页设计实验四（DIV+CSS 综合运用 ） 阿斯卡码 课程作业csshtml前端
    DIV+CSS综合运用项目1应用外部样式表设计新闻页面项目2设计“匾牌设计”页面项目3设计《中国教育网络》杂志简介项目4设计《京东商品导购》页面项目5设计“文轩图书榜”页面项目6设计“巴城老街风景”页面+++点击资源索引【查看其它实验】+++项目1应用外部样式表设计新闻页面使用Dreamweaver等软件编写符合以下要求的文档，完成后的效果如图4-1所示：（1）文件名：prj_4_1.html。（
  • web前端项目重构的理解 亮学长 前端
    重构是指在不改变外部行为的前提下，对代码、结构、布局或者设计进行优化和改进的过程。在前端开发中，重构通常指对网站或应用程序的前端部分进行优化和改造，以提升性能、可维护性和用户体验。对于传统的网站来说，重构可以包括以下方面的优化：结构优化：将使用表格布局的页面改为使用DIV+CSS布局，使页面结构更加语义化、清晰，并提高页面的可读性和维护性。兼容性优化：将网站的前端代码和样式进行调整，使其能够兼容现
  • 数据可视化 - Echarts图表 Henry_ww 前端echarts
    可视化项目代码-->底部01-项目介绍应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入‘立可得’数据可视化项目。该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图…线上地址：htt
  • CSS中的页面布局方式 为梦想而战@大学生 前端cssjavascriptcss3linux
    页面布局在实际工作，页面布局有以下几种：table布局div+css布局弹性布局网格布局table布局（了解）这种布局方式早期经常使用，大概在2000看开始就基本上不使用这种布局方式了。因为它解析性能差。    table布局      顶部内容                                            用户注册                             
  • 学生个人静态网页设计作品之我的家乡 月光作笺Y
    设计思路页面使用居中效果，留下留白简洁简便，使浏览者在浏览的过程中有一种舒适感，在视觉方面有着清晰安静的画面，吸引浏览者对下面内容的浏览。作品采用的背景是白色，在视觉方面上有着明亮的空间，主体内容宽度为1080px，较大的宽度让浏览者能够清晰的浏览。知识运用在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识内容介绍
  • 一个标准对话框css样式 苏叶的小城堡
    由于对话框内容的长度不一,使用背景图片很难兼容,所有,开始使用div+css来编写一个对话框,内容如下:html:css:效果:
  • 程序员，为什么如此迷茫？ 假话当真
    所有的迷茫都是因为未知，所有的畏惧都是因为不够用强大！很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML、DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容易找到工作，收入比普通的工作还要高一些，所以成为了很多高校毕业生的选择。如果正好说的是你，那我劝阁下还是趁早转行吧，程序员这个职位不适合你，这样做也是为了避免以后遇到35岁的中年危机，出现进退两难的
  • WEB前端人机交互导论实验-实训4 DIV+CSS综合运用 起床悠悠 前端htmlcss前端csshtml5
    1.项目1设计《中国教育网络》杂志简介A题目要求：综合运用DIV+CSS设计《中国教育网络》杂志简介页面，效果如下图所示:B.思路整体思路是将《中国教育网络》杂志的简介信息以有序的方式呈现出来，同时通过样式和布局设置，使页面更具吸引力和可读性。页面结构使用元素进行划分，文本内容使用不同的HTML元素进行组织，样式通过外部和内联样式定义来实现。（1）CSS样式：*：对所有文本字体大小进行调整。p：对
  • html制作网页案例代码----(故宫博物馆9页)特效很多 二挡起步 web前端期末大作业htmljavascript前端dreamweavercss
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业茶文化网站|中华传统文化题材|京剧文化水墨风书画|中国民间年画文化艺术网站|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样
  • 大学生个人网页模板 简单网页制作作业成品 极简风格个人介绍HTML(个人博客 4页) 二挡起步 web前端期末大作业htmljavascript前端dreamweaver风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|个人博客网站|个人主页介绍|个人简介|个人博客设计制作|等网站的设计与制作|大学生个人HTML网页设计作品|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相
  • 关于我的家乡html网页设计完整版 以家乡为主题的网页设计与实现 二挡起步 web设计网页规划与设计html前端javascriptbootstrapdreamweaver
    Web前端三大核心技术HTML：结构HTML期末大学生网页设计作业，可以替换文字图片满足不同的CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线网页基本结构网页演示网站源码HTML结构代码学的反而越迷茫学习更多前端学习路线（1）html文件：其
  • 用HBuider编写城市旅游网站 javascript html5 http 1． 布局设计 （1） 文件命名正确、项目文件组织结构合理。 （2） 页面布局合理、结构完整。主题鲜明，页 酸奶公园 旅游javascripthtml5
    用HBuider编写城市旅游网站javascripthtml5http1．布局设计（1）文件命名正确、项目文件组织结构合理。（2）页面布局合理、结构完整。主题鲜明，页面清晰，内容充实完整。（3）页面间链接正确。要求运用div+css布局或结构标签。2．内容设计（1）正确使用标签（5种以上），定义文字、表格、列表、图片、声音、动画、视频等内容。内容充实图文并茂，框架及表格结构清楚合理。（2）正确使用
  • HTML做一个简单漂亮的旅游网页（纯html代码）重庆旅游 7页 优质内容贡献 HTML5期末大作业html旅游javascript游戏css
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|家游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交
  • HTML&CSS知识点总结（二） nzdnllm
    1.表单标签常用属性：action：表单提交的位置method：表单提交的方法（get/post/put/delete……）默认值:get2.表单常用值解析：（1）用户名：value：文本框默认值size：文本框长度maxlengh：最多输入字符数readonly：只读（用户修改用户信息时的身份证号等条目）placeholder：提示信息3.使用div+CSS布局完成首页重构（1）divhtml标
  • tomcat基础与部署发布 暗黑小菠萝 Tomcat java web
    从51cto搬家了，以后会更新在这里方便自己查看。 做项目一直用tomcat，都是配置到eclipse中使用，这几天有时间整理一下使用心得，有一些自己配置遇到的细节问题。 Tomcat：一个Servlets和JSP页面的容器，以提供网站服务。 一、Tomcat安装     安装方式：①运行.exe安装包      &n
  • 网站架构发展的过程 ayaoxinchao 数据库应用服务器网站架构
    1.初始阶段网站架构：应用程序、数据库、文件等资源在同一个服务器上 2.应用服务和数据服务分离：应用服务器、数据库服务器、文件服务器 3.使用缓存改善网站性能：为应用服务器提供本地缓存，但受限于应用服务器的内存容量，可以使用专门的缓存服务器，提供分布式缓存服务器架构 4.使用应用服务器集群改善网站的并发处理能力：使用负载均衡调度服务器，将来自客户端浏览器的访问请求分发到应用服务器集群中的任何
  • [信息与安全]数据库的备份问题 comsci 数据库
          如果你们建设的信息系统是采用中心-分支的模式,那么这里有一个问题   如果你的数据来自中心数据库,那么中心数据库如果出现故障,你的分支机构的数据如何保证安全呢?    是否应该在这种信息系统结构的基础上进行改造,容许分支机构的信息系统也备份一个中心数据库的文件呢?  &n
  • 使用maven tomcat plugin插件debug关联源代码 商人shang mavendebug查看源码tomcat-plugin
    *首先需要配置好'''maven-tomcat7-plugin'''，参见[[Maven开发Web项目]]的'''Tomcat'''部分。 *配置好后，在[[Eclipse]]中打开'''Debug Configurations'''界面，在'''Maven Build'''项下新建当前工程的调试。在'''Main'''选项卡中点击'''Browse Workspace...'''选择需要开发的
  • 大访问量高并发 oloz 大访问量高并发
    大访问量高并发的网站主要压力还是在于数据库的操作上，尽量避免频繁的请求数据库。下面简 要列出几点解决方案： 01、优化你的代码和查询语句，合理使用索引 02、使用缓存技术例如memcache、ecache将不经常变化的数据放入缓存之中 03、采用服务器集群、负载均衡分担大访问量高并发压力 04、数据读写分离 05、合理选用框架，合理架构(推荐分布式架构)。
  • cache 服务器 小猪猪08 cache
    Cache   即高速缓存.那么cache是怎么样提高系统性能与运行速度呢？是不是在任何情况下用cache都能提高性能？是不是cache用的越多就越好呢？我在近期开发的项目中有所体会，写下来当作总结也希望能跟大家一起探讨探讨，有错误的地方希望大家批评指正。 　　1.Cache   是怎么样工作的? 　　Cache   是分配在服务器上
  • mysql存储过程 香水浓 mysql
    Description:插入大量测试数据 use xmpl; drop procedure if exists mockup_test_data_sp; create procedure mockup_test_data_sp( in number_of_records int ) begin declare cnt int; declare name varch
  • CSS的class、id、css文件名的常用命名规则 agevs JavaScriptUI框架Ajaxcss
      CSS的class、id、css文件名的常用命名规则     (一)常用的CSS命名规则 　　头：header 　　内容：content/container 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right
  • 全局数据源 AILIKES javatomcatmysqljdbcJNDI
    实验目的：为了研究两个项目同时访问一个全局数据源的时候是创建了一个数据源对象，还是创建了两个数据源对象。 1：将diuid和mysql驱动包（druid-1.0.2.jar和mysql-connector-java-5.1.15.jar）copy至%TOMCAT_HOME%/lib下；2：配置数据源，将JNDI在%TOMCAT_HOME%/conf/context.xml中配置好,格式如下：&l
  • MYSQL的随机查询的实现方法 baalwolf mysql
    MYSQL的随机抽取实现方法。举个例子，要从tablename表中随机提取一条记录，大家一般的写法就是：SELECT * FROM tablename ORDER BY RAND() LIMIT 1。但是，后来我查了一下MYSQL的官方手册，里面针对RAND()的提示大概意思就是，在ORDER BY从句里面不能使用RAND()函数，因为这样会导致数据列被多次扫描。但是在MYSQL 3.23版本中，
  • JAVA的getBytes()方法 bijian1013 javaeclipseunixOS
        在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同OS下，返回的东西不一样！      String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如： byte[] b_gbk = "
  • AngularJS中操作Cookies bijian1013 JavaScriptAngularJSCookies
            如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。         幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎
  • [Maven学习笔记五]Maven聚合和继承特性 bit1129 maven
    Maven聚合   在实际的项目中，一个项目通常会划分为多个模块，为了说明问题，以用户登陆这个小web应用为例。通常一个web应用分为三个模块： 1. 模型和数据持久化层user-core, 2. 业务逻辑层user-service以 3. web展现层user-web， user-service依赖于user-core user-web依赖于user-core和use
  • 【JVM七】JVM知识点总结 bit1129 jvm
      1. JVM运行模式 1.1 JVM运行时分为-server和-client两种模式，在32位机器上只有client模式的JVM。通常，64位的JVM默认都是使用server模式，因为server模式的JVM虽然启动慢点，但是，在运行过程，JVM会尽可能的进行优化 1.2 JVM分为三种字节码解释执行方式：mixed mode, interpret mode以及compiler
  • linux下查看nginx、apache、mysql、php的编译参数 ronin47
    在linux平台下的应用，最流行的莫过于nginx、apache、mysql、php几个。而这几个常用的应用，在手工编译完以后，在其他一些情况下（如：新增模块），往往想要查看当初都使用了那些参数进行的编译。这时候就可以利用以下方法查看。 1、nginx [root@361way ~]# /App/nginx/sbin/nginx -V nginx: nginx version: nginx/
  • unity中运用Resources.Load的方法？ brotherlamp unity视频unity资料unity自学unityunity教程
    问：unity中运用Resources.Load的方法？ 答：Resources.Load是unity本地动态加载资本所用的方法,也即是你想动态加载的时分才用到它,比方枪弹,特效,某些实时替换的图像什么的,主张此文件夹不要放太多东西,在打包的时分,它会独自把里边的一切东西都会集打包到一同,不论里边有没有你用的东西,所以大多数资本应该是自个建文件放置 1、unity实时替换的物体即是依据环境条件
  • 线段树-入门 bylijinnan java算法线段树
    /** * 线段树入门 * 问题：已知线段[2,5] [4,6] [0,7]；求点2,4,7分别出现了多少次 * 以下代码建立的线段树用链表来保存，且树的叶子结点类似[i,i] * * 参考链接：http://hi.baidu.com/semluhiigubbqvq/item/be736a33a8864789f4e4ad18 * @author lijinna
  • 全选与反选 chicony 全选
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全选与反选</title>
  • vim一些简单记录 chenchao051 vim
    mac在/usr/share/vim/vimrc linux在/etc/vimrc   1、问：后退键不能删除数据，不能往后退怎么办？       答：在vimrc中加入set backspace=2   2、问：如何控制tab键的缩进？       答：在vimrc中加入set tabstop=4 (任何
  • Sublime Text 快捷键 daizj 快捷键sublime
    [size=large][/size]Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：
  • php 引用(&)详解 dcj3sjt126com PHP
    在PHP 中引用的意思是：不同的名字访问同一个变量内容. 与Ｃ语言中的指针是有差别的．Ｃ语言中的指针里面存储的是变量的内容在内存中存放的地址 变量的引用 PHP 的引用允许你用两个变量来指向同一个内容  复制代码代码如下: <?  $a="ABC";  $b =&$a;  echo
  • SVN中trunk,branches,tags用法详解 dcj3sjt126com SVN
    Subversion有一个很标准的目录结构，是这样的。比如项目是proj，svn地址为svn://proj/，那么标准的svn布局是svn://proj/|+-trunk+-branches+-tags这是一个标准的布局，trunk为主开发目录，branches为分支开发目录，tags为tag存档目录（不允许修改）。但是具体这几个目录应该如何使用，svn并没有明确的规范，更多的还是用户自己的习惯。
  • 对软件设计的思考 e200702084 设计模式数据结构算法ssh活动
    软件设计的宏观与微观    软件开发是一种高智商的开发活动。一个优秀的软件设计人员不仅要从宏观上把握软件之间的开发，也要从微观上把握软件之间的开发。宏观上，可以应用面向对象设计，采用流行的SSH架构，采用web层，业务逻辑层，持久层分层架构。采用设计模式提供系统的健壮性和可维护性。微观上，对于一个类，甚至方法的调用，从计算机的角度模拟程序的运行情况。了解内存分配，参数传
  • 同步、异步、阻塞、非阻塞 geeksun 非阻塞
    同步、异步、阻塞、非阻塞这几个概念有时有点混淆，在此文试图解释一下。   同步：发出方法调用后，当没有返回结果，当前线程会一直在等待（阻塞）状态。 场景：打电话，营业厅窗口办业务、B/S架构的http请求-响应模式。   异步：方法调用后不立即返回结果，调用结果通过状态、通知或回调通知方法调用者或接收者。异步方法调用后，当前线程不会阻塞，会继续执行其他任务。 实现：
  • Reverse SSH Tunnel 反向打洞實錄 hongtoushizi ssh
    實際的操作步驟： # 首先，在客戶那理的機器下指令連回我們自己的 Server，並設定自己 Server 上的 12345 port 會對應到幾器上的 SSH port ssh -NfR 12345:localhost:22 [email protected] # 然後在 myhost 的機器上連自己的 12345 port，就可以連回在客戶那的機器 ssh localhost -p 1
  • Hibernate中的缓存 Josh_Persistence 一级缓存Hiberante缓存查询缓存二级缓存
    Hibernate中的缓存   一、Hiberante中常见的三大缓存：一级缓存，二级缓存和查询缓存。 Hibernate中提供了两级Cache，第一级别的缓存是Session级别的缓存，它是属于事务范围的缓存。这一级别的缓存是由hibernate管理的，一般情况下无需进行干预；第二级别的缓存是SessionFactory级别的缓存，它是属于进程范围或群集范围的缓存。这一级别的缓存
  • 对象关系行为模式之延迟加载 home198979 PHP架构延迟加载
    形象化设计模式实战     HELLO!架构   一、概念 Lazy Load：一个对象，它虽然不包含所需要的所有数据，但是知道怎么获取这些数据。 延迟加载貌似很简单，就是在数据需要时再从数据库获取，减少数据库的消耗。但这其中还是有不少技巧的。     二、实现延迟加载 实现Lazy Load主要有四种方法：延迟初始化、虚
  • xml 验证 pengfeicao521 xmlxml解析
    有些字符，xml不能识别，用jdom或者dom4j解析的时候就报错 public static void testPattern() { // 含有非法字符的串 String str =       "Jamey&#52828;&#01;&#02;&#209;&#1282
  • div设置半透明效果 spjich css半透明
    为div设置如下样式：   div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}        说明： 1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opaci
  • 你真的了解单例模式么？ w574240966 java单例设计模式jvm
        单例模式，很多初学者认为单例模式很简单，并且认为自己已经掌握了这种设计模式。但事实上，你真的了解单例模式了么。   一，单例模式的5中写法。（回字的四种写法，哈哈。）     1，懒汉式           （1）线程不安全的懒汉式 public cla
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他