`
zhangyaochun
  • 浏览: 2612971 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

html页面设计浅谈

阅读更多

其实做了一段的前端页面开发你就会发现,开始的时候无论是css类名或者div的id的命名,多不知道叫什么好?当然如果有点创新的同学应该会找寻各大顶级门户网站去扒别人的代码看看。所以这篇文章只是写给初学者或者这方面有需求的同学。

 

1.从头开始

  ------header (内容)

  ------logo(网站标志)

  ------loginbar(登录条)

  ------regsiter(注册)

  ------toolbar(工具条相关的)

2.导航菜单  

  -----nav(导航)

  -----subnav(子导航)

  -----search(搜索)

  -----hot(热门)

3.肉体(主体灵魂部分)

  ------content或者container(主体内容)

  ------banner(广告图)

  ------sidebar (左边栏目)

  ------module-bd(某个模块的头部分)

  ------module-hd(某个模块的主体内容部分)

  ------左中右(一般我多少喜欢父容器名_l,父容器名_c,父容器名_r)

  ------download(下载部分,也可以加上前缀的父容器名)

 

 

4.尾巴

  -----footer

  -----copyright(版权)

  -----friendlink(友情链接)

  -----partner(合作伙伴)

 

 

这边我还有一个小小推荐,当然也是自己的用法

 

比如我的模块是美容小模块部分 我的文档树结构

 

 

 

<div id="category">
   <div class="category-hd">
      <h2>商品分类</h2>
   </div>
   <div class="category-bd">
      <div id="module1" class="module">
           <div class="module-hd">
                <h3 class="meirong">美容</h3>
           </div>
           <div class="module-bd">
                <dl>
                   <dt>
			 <a title="粉底液" href="###">粉底液</a>
                   </dt>
                   <dt>
			 <a title="护肤水" href="###">护肤水</a>
                   </dt>
                   .............
                </dl>             
           </div>
      </div>
   </div>
</div>

 

 

0
2
分享到:
评论

相关推荐

    html+css浅谈

    HTML和CSS是构建网页设计和布局的两大核心技术。HTML(HyperText Markup Language)负责结构化内容,而CSS(Cascading Style Sheets)则用于样式控制和视觉表现。本压缩包包含三部分培训材料:《html+css培训(一)....

    浅谈蒙古文网页设计.pdf

    「浅谈蒙古文网页设计」 蒙古文网页设计是指在网页设计中使用蒙古文文字的设计方法和技术。蒙古文是一种特殊的文字,其书写习惯是从上到下、从左到右的顺序拼写显示出来。因此,我们需要借助层叠样式表(CSS)的...

    _浅谈Dreamweaver在网页设计中的应用.pdf

    《浅谈Dreamweaver在网页设计中的应用》 网页设计作为互联网时代的重要组成部分,已经成为信息传播和交互的关键途径。随着计算机技术和网络的不断发展,网页设计的工具也在不断进化,其中Dreamweaver以其独特的功能...

    浅谈FLASH动画设计论文.doc

    【Flash动画设计】\n\nFlash动画设计,作为20世纪末至21世纪初互联网艺术的代表性形式,是由MACROMEDIA公司在1996年推出的一款强大的网页动画设计工具。这款软件在中国迅速兴起,引领了一股“Flash热”,不仅在动漫...

    浅谈用HTML和JavaScript修饰Web页.pdf

    "浅谈用HTML和JavaScript修饰Web页.pdf" 本文主要讨论如何使用HTML和JavaScript修饰Web页,提高Web页的交互性和用户体验。HTML是静态网页的基础,而JavaScript可以使网页更加交互性。文章首先介绍了HTML的基本概念...

    浅谈网页特效设计.pdf

    网页特效设计是网页设计中的一种重要技术,它可以提高网页的交互性和视觉效果,提高用户的体验度。同时,J avaScr i pt 脚本语言是网页特效设计的核心技术之一,它具有许多优点和特点,非常适合初学者学习和应用。

    HTML5智能手机UI布局浅谈

    在探讨《HTML5智能手机UI布局浅谈》这一主题时,我们深入分析了HTML5在智能手机用户界面设计中的应用,以及它如何改变了移动Web开发的格局。以下是对标题、描述及部分文档内容中提及的关键知识点的详细解读。 ### ...

    浅谈企业网站的设计与建设.pdf

    浅谈企业网站的设计与建设 本文旨在通过某企业网站的设计和建设的实例,详细阐述网站建设的方法与过程,将理论与实践相结合,构建出一个具有借鉴性的网站设计框架,对当前互联网高速发展而催生出的新兴行业——网络...

    浅谈在WEB网页上使用VBScript和JScript.pdf

    浅谈在WEB网页上使用VBScript和JScript.pdf 本文讨论了在WEB网页设计中如何选择和使用VBScript和JScript。VBScript是Visual Basic的子集,用于在浏览器中进行工作,具有简单易学的特性。JScript是JavaScript的一种...

    浅谈HTML5在游戏开发中的应用 pdf.rar

    这个“浅谈HTML5在游戏开发中的应用”电子教程可能涵盖了HTML5在游戏开发领域的关键技术和策略,尽管它不涉及具体的编程细节或HTML5的每个特性。 首先,HTML5的游戏开发优势在于它的跨平台兼容性。由于HTML5是基于...

    浅谈基于微信小程序的校园一体化服务平台的设计与开发.pdf

    例如,前端开发通常会采用CSS、HTML、JavaScript等技术,以简洁化代码实施开发,并借助微信小程序提供的目录结构和页面逻辑(wxml)以及样式表(wxss)进行界面设计。而后端开发则涉及到数据库的选定和服务器端逻辑...

    浅谈CSS在网站制作中的应用

    但大部分用HTML做网站的人都曾经遇到过这样的问题:原本在自己的机器上排好版的网页,换到另外一台不同分辨率的显示器后就变了样,尤其是一部分字体变得很大,使原先设计的美观页面变了形。这是因为在网页文件中没有...

    浅谈高职院校网页美工教学中如何开发学生的设计潜能

    在当今互联网高速发展的大背景下,网页设计已经成为了信息传达和视觉美感的重要手段。伴随着用户对网页设计美感要求的不断提高,高职院校在进行网页美工教学时,面临着培养学生创新意识和设计潜能的挑战。为了有效地...

    浅谈HTML5 & CSS3的新交互特性

    HTML5 和 CSS3 是现代网页开发的核心技术,它们引入了一系列创新的交互特性,极大地提升了用户体验和网页设计的可能性。HTML5 主要是对HTML4的扩展和改进,而CSS3则是在CSS2的基础上增加了许多新的样式规则。 ...

    浅谈初入电商美工从业者应具备的基本能力.pdf

    随着前端技术的发展,虽然大多数电商平台的页面设计不需要专业的代码编写技能,但从业者仍需具备一些基本的网页编辑能力。例如,了解HTML和CSS的基础知识,可以帮助美工更好地理解网页布局和颜色在显示器与实际印刷...

    asp服务器脚本语言浅谈

    ### ASP服务器脚本语言浅谈 #### 一、ASP的起源与定义 **ASP**(Active Server Pages)是由微软开发的一种服务器端脚本环境,用于创建动态网页或Web应用程序。它是一种简单而便捷的编程工具,使得开发人员能够轻松地...

    浅谈如何实现PHP代码与页面显示分离

    5. **显示结果**:最终将填充数据的HTML页面呈现给用户。 #### 六、结论 通过使用如Smarty这样的模板引擎,开发者可以有效地实现PHP代码与页面显示的分离。这种方式不仅能够提高代码的可读性和可维护性,还能提升...

    浅谈关于JavaScript脚本语言的学习.pdf

    "浅谈关于JavaScript脚本语言的学习" JavaScript脚本语言的基本特点: 1. 简单性:JavaScript是一种解释性语言,不需要提前进行编译,在程序运行过程中由浏览器边解释边执行,因此不需要额外的运行环境。 2. 跨...

    浅谈框架与MVC

    ### 浅谈框架与MVC #### 架构的重要性及概念 在软件开发领域,架构设计扮演着至关重要的角色。良好的架构设计不仅能够确保软件系统的稳定性、可维护性和可扩展性,还能提升团队协作效率。正如文章所述,“好的产品...

    浅谈web开发的水有多深.docx

    《浅谈Web开发的深度》 Web开发,看似简单,实则深不可测。它涵盖了前端设计、交互实现、兼容性处理、代码优化等多个层面,每个环节都蕴含着丰富的技术细节和挑战。 首先,页面前端开发的基础在于实现视觉稿。这...

Global site tag (gtag.js) - Google Analytics