zoukankan      html  css  js  c++  java
  • html

    今天学习了一些html知识, 应该说是复习吧. 以前也学过, 但是没有用就忘了.

    主要掌握几个.  html doctype 声明.  字符编码, 注意计算机本地的编码格式,和保存的文档编码格式.

    div+css

    css 是在head 标签里直接用 style 标签写的.   代码部分有.   一个页面首先要有总体思维, 就是把一个页面先看成是一个大块,然后分开几个小块. 一块一块来.

    用div 来布局分块, 一个大的div  ---->  一间房子

             几个小的div --->  房子里面有几个房间   这样细分块下去

    style里面用 #+ID号 {} 来编写内容.

    div 的float 浮动  注意 div的宽和高. 在float里面必须声明宽度和高度.  div 的float 也要注意宽度和高度, 否则有可能会挤到下一行去.

    css 选择器

    类选择器
    前面以”.”来标志,如:
    .demoDiv{
    color:#FF0000;
    }
    HTML中,元素可以定义一个class的属性。
    如:
    <div class="demoDiv">
    这个区域字体颜色为红色
    </div>
     
    标签选择器
    标签{
    }
    div{
    }
    ID选择器
    前面以”#”号来标志,在样式里面可以这样定义:
    #demoDiv{
    color:#FF0000;
    }
    这里代表id为demoDiv的元素的设置它的字体颜色为红色。
    我们在页面上定义一个元素把它的ID定义为demoDiv,如:
    <div id="demoDiv">
    这个区域字体颜色为红色
    </div>

     子块的大小会影响父块的大小.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <head>
    <title>简单页面布局</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style>
        #head{
            width: 1020px;
            height: 120px;
            background: red;
        }
        #main{
            width: 1020px;
            height: 400px;
        }
        #left{
            width: 720px;
            height: 400px;
            background: yellow;
            float: left;
        }
        #right{
            width: 300px;
            height: 400px;
            background: blue;
            float: left;
        }
        #foot{
            width: 1020px;
            height: 120px;
            background: green;
        }
    </style>
    </head>
        <body>
            <div id="container">
                <div id="head"></div>
                <div id="main">
                    <div id="left"></div>
                    <div id="right"></div>
                </div>
                <div id="foot"></div>
            </div>
        </body>
    </html>
  • 相关阅读:
    长沙集训day6
    长沙集训day5(总结)
    长沙集训day4(总结)(爆零记)
    长沙集训day3(总结)(爆零记)
    长沙集训day2(总结)
    长沙集训day1(总结)
    p1324 dining(晚餐)
    p1156集合删数
    1034: [ZJOI2008]泡泡堂BNB
    清北学堂Day 6 游记
  • 原文地址:https://www.cnblogs.com/JohnChen-happy/p/4192413.html
Copyright © 2011-2022 走看看