`
qq17906
  • 浏览: 54192 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

二、CSS网站元素设计

阅读更多

1.用CSS设计网站导航
   横向导航
      body{background-color:#000000;}
      #nav{height:26px;border-bottom:2px solid #ffffff;list-style:none;}
      #nav li{float:left;font-size:14px;font-weight:bold;}
      #nav li

a{color:#FFFFFF;text-decoration:none;padding-top:7px;display:block;width:97px;height:19px;text-align:center;background-image:

url(img/normal.gif);margin-left:2px;}
     #nav li a:hover{background-image:url(img/hover.gif);color:#ffffff;}
     #nav li a#current{background-image:url(img/active.gif);color:#000000;}

 

  <ul id="nav">
   <li><a href="#" id="current">首页</a></li>
   <li><a href="#">文章</a></li>
   <li><a href="#">参考</a></li>
   <li><a href="#">Blog</a></li>
   <li><a href="#">论坛</a></li>
   <li><a href="#">联系</a></li>
  </ul>

 

 纵向导航
  #category{width:100px;border-color:#c5c4c6;border-style:solid;border-width:0px 1px 1px 1px;}
  #category h1,#category h2{margin:0px;padding:4px;font-size:12px;}
  #category h1{border-top:1px solid #c5c6c4;background-color:#f4f4f4;}
  #category h2{font-weight:normal;}
  
  <div id="category">
   <h1>CSS</h1>
    <h2>A</h2>
    <h2>B</h2>
   <h1>WEB</h1>
    <h2>A</h2>
    <h2>B</h2>
  </div>
 
 下拉及多级弹出式菜单
  <style type="text/css" rel="stylesheet">
   ul {margin:0;padding:0;list-style:none;width:130px;border-bottom:1px solid #ccc;font-size:12px;}
   ul li {position:relative;}
   li ul {position:absolute;left:129px;top:0;display:none;}
   ul li a {display:block;text-decoration:none;color:#777;background:#fff;padding:5px;border:1px solid

#ccc;border-bottom:0;}

   * html ul li {float:left;height:1%;}
   * html ul li a {height:1%;}

   li:hover ul,li.over ul {display:block;}
  </style >


  <script language="javascript">
   startList = function(){
    if(document.all && document.getElementById){
     navRoot = document.getElementById("nav");
     for(i=0;i<navRoot.childNodes.length;i++){
      node=navRoot.childNodes[i];
      if(node.nodeName=="LI"){
       node.onmouseover=function(){this.className += " over";}
      }
      node.onmouseout=function(){this.className=this.className.replace("

over","");}
     }
    }
   }
   window.onload = startList;
  </script>

 <body>
  <ul id="nav">
   <li><a href="">文章</a>
    <ul>
     <li><a href="">Java</a></li>
     <li><a href="">Domion</a></li>
     <li><a href="">C++</a></li>
    </ul>
   </li>
   <li><a href="">Blog</a>
    <ul>
     <li><a href="">全部</a></li>
     <li><a href="">网页</a></li>
     <li><a href="">Domion技术</a></li>
    </ul>
   </li>
  </ul>

  <ul>
   <li><a href="">Music</a></li>
   <li><a href="">纯音乐</a></li>
  </ul>
 </bodY>

    
2.背景控制
 背景颜色、背景图片、背景定位、背景滚动
 背景属性缩写:
  background:背景色 背景图片 背景平铺模式 背景滚动模式 背景定位

 

3.使用列表元素
 ul无序列表- 列表中的各个元素现在逻辑上没有先后顺序
 ol有序列表-将列表中的各个元素有序的 编号

 常用属性:
  list-style : 设置列表的所有属性选项
  list-style-image:设置图片作为列表中的项目符号
  list-style-position:设置项目符号的放置位置
  list-style-type:设置项目符号的几种默认样式

 1.使列表变为段落:display:inline
 2.列表缩进排版:text-indent:value;

 

4.字体及段落样式设计
 CSS支持的字体样式包含字体、字号、颜色等基本属性,以及对其他字体的微调控制方式

 

5.图片样式设计
 图片定位
  一种使用margin进行外边距控制;
  另一种通过top及right属性进行图片位置的相对定位。
 图片剪切
  1.使用clip剪切:clip:rect(number1 number2 number3 number4);
  2.使用div强制剪切:
   overflow:hidden;  将强制不显示对象中超过对象范围的部分内容
   div{width:280px;height:290px;overflow:hidden;}
  
6.链接样式控制
 a:link、a:visited、a:active、a:hover

分享到:
评论

相关推荐

    css网站模版 div css 网站设计

    在这个"css网站模版 div css 网站设计"的主题中,我们将深入探讨CSS在构建网站模板时的关键作用,以及如何结合div元素来实现高效且美观的网站设计。 首先,CSS的核心功能是分离内容与表现,使得网页设计更加灵活且...

    《HTML5+CSS3网站设计基础教程》源代码+补充案例+动手实践

    《HTML5+CSS3网站设计基础教程》是一本旨在教授读者如何使用现代Web技术构建交互式、响应式网站的教材。源代码、补充案例和动手实践环节是学习过程中的重要组成部分,它们帮助理论知识与实际操作相结合,使学习更加...

    HTML5+CSS3网站设计基础教程_动手实践源代码

    5. **CSS3布局**:Flexbox(弹性盒模型)和Grid(网格布局)为复杂网页布局提供了强大的解决方案,使得元素对齐、间距调整和响应式设计变得简单。 6. **CSS3过渡与动画**:通过transition和animation属性可以实现...

    HTML5+CSS3网站设计基础教程(第2版)_源代码.zip

    在"HTML5+CSS3网站设计基础教程(第2版)"中,读者可以学习到如何利用这两种语言构建功能强大且视觉效果出众的网站。 HTML5作为新一代的超文本标记语言,引入了许多新的元素和属性,旨在简化网页结构,提高语义化,...

    Div+CSS网站设计总结

    在网页设计领域,Div+CSS(层叠样式表)是一种广泛应用的技术,用于构建美观、高效且易于维护的网站。Div是HTML中的一个容器元素,它主要用于组织页面布局,而CSS则负责控制页面的样式和布局。这个“Div+CSS网站设计...

    推箱子游戏(css元素)

    css网页设计推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)...

    css平面设计 网页设计

    在网页设计领域,CSS(Cascading Style Sheets)是一种至关重要的技术,用于定义网页内容的布局、颜色、字体等视觉表现。本主题聚焦于“css平面设计 网页设计”,我们将深入探讨CSS如何帮助设计师实现创新且高效的...

    《HTML5+CSS3网站设计基础教程》 PPT

    这份《HTML5+CSS3网站设计基础教程》PPT涵盖了从基础到高级的多个重要知识点,旨在帮助学习者掌握这两种语言的基础和进阶技能。 1. **HTML5**:HTML(超文本标记语言)是网页内容的结构框架,而HTML5是其最新版本,...

    形考任务五 使用 元素以及CSS样式表对下面的内容进行的布局设计.zip

    在本形考任务中,我们将探讨如何利用HTML的`&lt;div&gt;`元素以及CSS样式表来实现页面布局设计。`&lt;div&gt;`元素是HTML中的一个非常重要的结构元素,它用于组合其他HTML元素,形成一个可样式的区块。在这个任务中,我们将深入...

    HTML & CSS 设计与构建网站 中文版

    《HTML & CSS 设计与构建网站》这本书深入浅出地介绍了这两门技术,帮助读者掌握构建现代网页所需的知识。 HTML是网页内容的语言,用于描述网页上的文本、图像、链接等元素。在学习HTML时,你需要了解基本的标签...

    CSS设计大师设计思路与实践

    **二、CSS设计大师的设计思路** 1. **响应式设计**:设计大师通常会采用响应式设计,确保网站在不同设备和屏幕尺寸上都能良好展示。这涉及到媒体查询(media queries)的使用,根据设备特征应用不同的样式。 2. **...

    div+css网页设计网站模板100例

    《Div+CSS网页设计:100个英文网站模板解析》 Div+CSS技术是现代网页设计中的核心技术,它使得网页布局更为灵活、样式控制更为精确。本资源包包含100个精心设计的Div+CSS英文版网站模板,旨在为初学者提供丰富的...

    DIV+CSS的网站设计教程下载

    本教程文档(`DIV+CSS的网站设计教程下载.doc`)将详细讲解上述概念,并提供实例和练习,帮助你逐步掌握DIV+CSS的使用方法。同时,网络上有众多优秀的在线教程和论坛,如W3School、MDN Web Docs,可以作为进一步学习...

    css+div设计精美网上书店

    在网页设计领域,CSS(Cascading Style Sheets)与HTML的结合使用,特别是与div元素的搭配,已经成为构建精美、响应式网站的标准方法。在这个"css+div设计精美网上书店"项目中,我们将深入探讨如何利用这两种技术...

    HTML&CSS 设计与构建网站_PDF电子书下载 带书签目录 完整版

    HTML(HyperText Markup ...通过阅读《HTML&CSS 设计与构建网站》这本书,你可以深入学习这两个重要技术的细节,提升网页设计技能。书中的书签目录将帮助你快速定位到所需的主题,完整版确保你能获取全面的信息。

    DivCss设计器

    【DivCss设计器】是一款强大的网页布局与样式设计工具,专为前端开发者和网页设计师打造,旨在简化CSS(层叠样式表)和HTML(超文本标记语言)中的div元素的使用和设计过程。这款软件提供了直观的图形用户界面,使得...

    很多的css网站设计模板和css表单的美化资源

    这个压缩包中包含的"css网站设计模板及资源"提供了丰富的素材和指导,帮助设计师们更高效地创建美观、功能丰富的网站。 1. **CSS网站设计模板**: CSS模板是预先设计好的样式布局,可以快速应用于网页项目,减少从...

    CSS 网站设计模版学习

    本资源"CSS 网站设计模版学习"旨在帮助初学者和进阶者深入理解如何运用CSS进行高效且美观的网站设计。下面将详细介绍CSS在网站设计中的应用,以及如何通过模版学习来提升技能。 一、CSS基础概念 1. 样式表:CSS是...

    CSS网站布局实录-基于Web标准的网站设计指南(第2版)

    《CSS网站布局实录——基于Web标准的网站设计指南(第2版)》是一本深入探讨CSS(Cascading Style Sheets)技术在构建网站布局中的应用的专业书籍。由李超编著,它针对Web开发人员和设计师,提供了一个全面、实践性...

    htm+css网页设计课程作业

    这个作业项目由二十个或以上的页面组成,展示了作者对网页布局和设计的深入理解和实践。 首先,HTML(HyperText Markup Language)是网页内容的结构化语言,它定义了网页的各个元素及其关系。在这个项目中,你将...

Global site tag (gtag.js) - Google Analytics