7-HTML+CSS页面布局重点总结

最新推荐文章于 2021-09-22 09:26:34 发布

娶个村姑当大妾

最新推荐文章于 2021-09-22 09:26:34 发布

阅读量611

点赞数

分类专栏： HTML+CSS 文章标签： HTML+CSS html css

本文链接：https://blog.csdn.net/bug_money/article/details/54315728

版权

HTML+CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML
   重点：
       1）每种标签特性
           h1
           table
           tbody
           tr
           td
           ul,ol,dl
           li,dt,dd
           p
           a
           img

       2）将div转换为任意标签元素
           将任意标签转换为DIV（布局）
           <div class="h1"></div>
           .h1{
               margin:
               font-size:
               font-weight:
           }
           <div class="a"></div>
           .a{
               text-decoration:
               color:
               cursor:pointer
           }
       3）行内元素，块级元素
           块级元素
               div
               h1~h6
               p
           行内元素
               span
               a
               装饰标签（i em b strong）

          特殊
           img
               display:block;
               border:0px;
           <a href=""><img></a>
           image
               src   地址
               alt   文字替换
               userMap   dw
           table
           tr
           td
           th
       4) 表单元素(功能)
           form
               input
                   height:   内容高度
                   内边距:   2px
                   边框:   1px
               select
               textarea
       功能元素


   <a href="路径">内容</a>
       相对路径
           ../
           ./
           images/a.jpg
       决对路径   http://www.baidu.com
       文件路径   file:///d:/images/

   表单(功能)
       register.action
       <form action="#" method="get">
           input
               type="text"
                   password
                   radio
                   checkbox
                   button
                   submit
                   reset
                   file
                   ...
           textarea
           select
       </form>

       get
           1) 浏览器地址栏的地址上附带了表单信息
           2) 携带数据量比较小
       post
           1) 浏览器地址栏的地址上不附带了表单信息，表单信息附带在报文中
           2) 携带数据量比较大
DIV
   盒子模型（块级元素）
       width,height
       padding   内容与边框距离
       border   边框
       margin   外边框

CSS
   1) 选择器
       标签选择器   div li
       类选择器   .类名 <div class="类名"></div>
       ID选择器   #ID       <div id="ID"></div>
       层级选择器
           子代   父选择器>子选择器
                   .one>span
               <div class="one">
                   <span>
                       <strong></strong>
                   </span>
                   <em></em>
               </div>
               <ul class="one">

               </ul>
           后代   父选择器后台选择器
                   .one strong
       复合选择器
           ul.one
       组合选择器
           h1,body{}
       ----------------------
       选择器的优先级(属性名相同，属性值不同)
           style="css"
           >层级
           >复合
           >id
           >class
           >tag
       *{ font-size:14px;}
       .header{}
       .header .top{}
       .top .search

       <div class="header">
           <div class="top">
               <table>
                   <tbody>
                       <tr>
                           <td class="search"></td>
                           <td></td>
                       </tr>
                   </tbody>
               </table>
           </div>
           <div class="bottom"></div>
       </div>
       <div class="content"></div>
       <div class="footer"></div>

   2) 布局级别（方式）
       1. 行级别布局
           <div></div>
           .header{
               overflow:hidden;
           }
           .header .top{
               height:20px;
           }
           .header .bottom{
               hgeight:80px;
           }


       2. 列级别布局

           float

           div 没有浮动，宽度为父级元素的宽度
           div 浮动，宽度由子元素决定

           1. 兄弟元素的浮动
               <div class="one"></div>
               <div class="two"></div>

               one浮动，two不浮动，two上移
               one不浮动，two浮动，two不动，two下面的不浮动元素上移
               one浮动，two浮动，onetwo位于一行

           2. 父子元素的浮动
               <div class="outer">
                   <div class="inner"></div>
               </div>
               前提：outer不指定高度
                   outer不浮动，inner不浮动，outer高度由inner决定
                   outer浮动，inner不浮动,outer高度由inner决定
                   outer浮动，inner浮动,outer高度由inner决定

                   outer不浮动，inner浮动，outer高度为0.如果想要被撑，outer{overflow:hidden}
           <div >
               <div div float>
                   <div float></div>
                   <div float></div>
               </div>
           </div>
           3. 定位布局(position)
           相对谁？？？
           定位元素
               top
               bottom
               left
               right
           3)特殊布局
           1.定位元素
               可以使用
                   left
                   top
                   bottom
                   right
           2.非定位元素

           position
               fixed
                   固定定位,相对点为浏览器
                       <div style="position:fixed;right:0px">

                       </div>
               absolute
                   绝对定位，相对点离它最近的父级定位元素
               relative
                   相对定位，相对点是它原本位置

           如果一个元素 position为fixed,absolute,relative三者之一，那这个元素为定位元素

   4) 改变元素的默认显示方式 display
       none
       block
       inline
       inline-block(block; float:left)
       行内
           不能指定宽高
       块级
           可以指定宽高
       元素只要浮动，这个元素肯定是块级元素
           float:left;
           width:
           heiht:

   5. 经验：
           1) 尽量用块来包含内联
           2) 无法确定使用哪个标签的时候就使用div
           3) 背景与图片的区别
               背景：为了修饰使用背景图像;不占据空间
                   background-image
               图片：通常由宣传意义的图;占据空间
                   <img src="">
                   为了避免图像周围有空隙，建议将图像定义为块元素 img{display:block}

           4) 导航（横向）通常使用无序列表ul li布局（层级较多，效果好加）
           5) dl/dt/dd 菜单列表（纵向）
           6) 用语义的方式安排标签，建议在div内包含h1,p,ul,table...标签来布局，将div作为布局的父元素
           7) div浮动后，宽度随着内容的增加而增加

   css样式 1.默认样式
   尽量消除布局元素的默认样式，再添加新样式
       font
           font-size
           font-family
           font-weight
       border
           border-left
           border-left-style
           border-left-color
           border-left-weith
           border-right
           border-top
           border-bottom
           border-spacing:0px
       margin

       padding

       text
           text-align
           text-indent
           text-decoration
       list
           list-style
           list-style-imgage
           list-style-position

       cursor:pointer