lovecoding
/
VIP24


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 内部样式 */
        p{
            width: 200px;
            height: 200px;
        }
    </style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="1_test.css">
</head>
<body>
    <!-- 
        基础标签：
        h1-h6  标题
        p 段落
        img  图片
        a 超链接
        ul li   列表
        div 区块 用来布局
        span 文本内容 
        b 加粗
        i 斜体

        表格
        table
            tr
                td

        表单
            文本框 
            <input type="text">
            密码框
            <input type="password">
            单选框
            <input type="radio">
            复选框
            <input type="checkbox">
            下拉框
            select  
                option
            文本域
            textarea
            提交按钮
            <input type="submit">
            普通按钮
            <input type="button">

        css样式
        1、引入css
            内联样式
            内部样式
            外部样式
           
        2、css 选择器  
            标签选择器
            div{
                
            }
            id选择器(id唯一的)
            #xxx{

            }
            class 类选择器 
            .aa{

            }
            后代选择器
            #ul1 .aa{

            }
            分组选择器|群组选择器
            #ul1 .aa, #xxx{
            
            }

            伪类选择器
            a:hover{

            }
        3、基础样式
            宽高 背景
            width:200px;
            height:200px;
            background
                -color:red; 颜色
                -image:url(xx.jpg); 图片
                -repeat:no-reprat|repeat; 不重复|重复
                -posiotn:0 0; 位置：水平（固定值|left|center|right） 垂直(固定值|top|center|bottom)

            简化为：
            background:red url(xx.jpg) no-reprat 0 0;

            字体 相关
            font
                -size:12px 字体大小 （默认字体大小16px  设置最小字体大小12px）
                -family:字体
                -weight:400; 字体粗细 100-900 （默认400 ）
                style:italic|normal 斜体|正常
            
            color:red; 文字颜色

            文本相关属性
            text-align:left |right|center; 文本水平对齐
            line-height:height ;单行文本垂直居中
            text-decoration: underline 下划线|none没有 |line-through中划线
            text-indent:20px; 首行缩进

            列表 
            list-style:none;去掉列表前边的点

            
     -->

     <select name="" id="">
         <option value="">黑大</option>
         <option value="">理工</option>

     </select>
     <input type="submit">

     <input type="button" value="确定">

     <input type="reset">
     <!-- 内联样式 -->
     <div style="width:200px; height:200px; background:red"></div>
    <h1 id="xxx"></h1>

    <ul id="ul1">
        <li></li>
        <li class="aa"></li>
        <li></li>
        <li class="aa"></li>

    </ul>


    <ul>
        <li></li>
        <li class="aa"></li>
        <li></li>
        <li class="aa"></li>

    </ul>
</body>
</html>