ホームページ > ウェブフロントエンド > htmlチュートリアル > 关于网页布局的原则和导航栏的一些理解。(小白) - DD狗

关于网页布局的原则和导航栏的一些理解。(小白) - DD狗

WBOY
リリース: 2016-05-21 08:42:40
オリジナル
889 人が閲覧しました

   欢迎大家来到我的博客,我是一个web小白,希望可以通过博客来了解学习更多知识,谢谢大家。

     今天,我对网页的布局和导航栏进行了简单的了解,下面和大家分享一些自己的笔记。



       网页简单布局结构与表现原则:
           在网页布局中,html:结构化,css:表现化,JavaScript:行为化,三者存在分离又存在结合(一种思想)。
   那么什么是分离呢?并不是简简单单的分开编辑,如上所说,html是指向结构的,我们在制作时,
   应该先把html进行结构化,简洁化,再在此基础上进行css,实现真正的分离和结合。在初步的制作时,我们不应该过分追求
   样式,先在html的结构和语义化上进行努力。

           用最大化的简化html的结构,然后用css进行设置,减少html和css的契合度。

           看到网页设计图时,先进行html的结构,语义化,再进行css设计。

 ----     text-indent 文本缩进。(简化代码)

 


 

  

  
                            导航菜单的制作:
①垂直菜单
                用无序列表构造
                 


                 清除圆点:list-style:none
                清除下划线:text-decoration:none
      **定义的关键是将标签设置为块元素,增加hover的效果。
                     ul li a{display:block;}
                     a:hover{}增加菜单的交互效果。

延伸回顾:块级元素(block)的特点:1 每个块级元素都会独自霸道一行。
                                             2 元素的高,宽,行高以及顶和底边距都可以设定。
                                             3 宽度不设置时,与父元素一致。
              内联元素(inline)的特点:1 与其他元素在同一行上。
                                             2 元素的高,宽,行高以及顶和底边距都不可以设定。
                                             3 元素的宽度不可以改变。
   内联块状元素(block-inline)特点:1 与其他元素在同一行上。
                                             2 元素的高,宽,行高以及顶和底边距都可以设定。


②水平菜单
                  在垂直菜单的基础上对li进行浮动
                          li{
                                   float:left
                             }
③圆角菜单
在水平菜单的基础上有两种方法:
                               1.为ul增加一个border-bottom,再为a标签增加一个圆角的图片背景。移动背景:background-position:
                               2. 使用border-radius。

 


 

 以上学习内容来自:慕课网。 http://www.imooc.com/course/program

---恢复内容结束---

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート