zoukankan      html  css  js  c++  java
  • css网站布局学习笔记

    1.网页布局中的元素分为两种:block块状对象和in-line行间对象(内联元素)。比如div为块状对象,span为行间对象,两个div放在一起分行,两个span在一起默认不分行。可以通过display:in-line(block)改变他们,如让两个div设为in-line不分行,或把文字连接改成block块状,变成按钮(常用)。
    2.span和div一样为结构型标签
    3<DIV id=header>
    <DIV id=logo><IMG alt=标题 src="logo"></DIV>
    <DIV id=nav>
    <UL>导航</UL></DIV></DIV>
     没有
    <DIV id=header>
    <H1><IMG alt=标题 src="logo"></H1>
    <UL>导航</UL></DIV>
    更直观,更能反应内容
    4.高度自适应。height:100%是相对于父对象高度100%,需要让层高度100%,必须设置html,body{margin:0px;height:100%}
    5.关于浮动。网页中的各个元素根据上下关系形成文档流,各个元素按照自身是块状对象还是行间对象从上到下顺序显示,把一个元素设置为左浮动时,它的右侧就会有空出的地方,下一个元素会紧贴着这个元素的左边显示,如果宽度不够则到下一行。
    6.清理浮动。当上一个元素设置为左浮动,如果不想浮动在上一个元素的左边,可以使用clear:left(拒绝左浮动)或者clear:both(不浮动);
    7.用a:hover和一张背景图改变背景位移实现鼠标移动变色菜单,定义一个样式来区别当前浏览的菜单。
    8.列表:
    <UL>
    <LI>
    <H2>新闻标题</H2>
    <H5>新闻时间</H5></LI></UL>
    9.重复出现的样式优先使用class不使用id。可以多个class用在一个元素上面。
    10.布局的时候别面出现多个div嵌套,能够多个div浮动自动换行的不适用嵌套。盒模型布局,看成一个方块。
  • 相关阅读:
    ie浏览器报错 DOM7009 无法解码 URL 处的图像 问题的解决方法
    javascript拷贝节点cloneNode()使用介绍
    动态构建 urlpatterns
    request属性
    用户分组权限(模型--登录自带字段)
    模型字段设为可选
    模型 命令
    模板 templates
    动态url加载
    APScheduler实现定时任务
  • 原文地址:https://www.cnblogs.com/polar/p/1123770.html
Copyright © 2011-2022 走看看