时间戳

首页 > 技术文章 > HTML、CSS基础学习

HTML、CSS基础学习

ranylra 2021-09-01 10:30 原文

Html

a标签


    
        <a href="http://baidu/com" target="_blank">网络测试</a>
        <a href="http://baidu/com" target="_self">网络测试</a>
    


# _blank :新建一个标签页打开
# _self :在当前页面打开

img标签


    
        <img src="./image.png" alt="我是备胎">
    


# scr 可以引用网络图片地址和本地图片路径地址
# alt 意味这图片如果挂了可以给个提示

表格标签


    
        <table border="1">
            <thead>
                <tr>
                    <th>
                        名字
                    </th>
                    <th>
                        心情
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> 
                        Wang Huahua
                    </td>
                    <td>
                        :)
                    </td>
                </tr>           
                <tr>
                    <td> 
                        Li Ming
                    </td>
                    <td>
                        :D
                    </td>
                </tr>
            </tbody>
        </table>

image.png

header标签


    
        <header>
            <h1>Hello World!</h1>
            <small>ABCDEFGHIJK</small>
            <hr>
        </header>

        极目新闻记者 周浩 见习记者 杨锦英

        从5月21日至6月19日，广州市用近一个月的时间，正面迎战德尔塔变异株，并控制住疫情。

        在宣布成立疫情防控问责联合调查组近两个月后，8月12日，广东省纪委监委发布《广州市新冠肺炎 疫情防控问责情况通报》，对20名领导干部严肃问责。其中，广州市常务副市长被诫勉处理，市卫健委主任被免，荔湾区委书记、区长双双被免职。

        对于此次问责，有人表示力度很大，但也有人觉得是否用力过猛。暨南大学粤港澳大湾区应急管理教育促进会卢文刚会长认为，不能因问责否定广州市的疫情防控工作，相反，问责能更客观、全面、高标准地评价广州疫情防控工作。总体来看，问责客观、严格而适度，也为全国疫情防控注入“强心剂”，有震慑效应。
        <hr>
        <footer>
            Contact | Terms | Privacy | About
        </footer>
    


# header 定义文档的页眉
# footer 定义文档的页脚

link与script


    <header>
        <link rel="stylesheet" href="base.css">
    </header>
    
        <script src="base.js"></script>

button标签


    
        <button>Signup</button>

abbr标签


    
        The <abbr title="People's Repulic of China">PRC</abbr>
        was founded in 1949
    


# 标记一个缩写

image.png

CSS

*{
    margin: 0;   => 内距
    padding: 0; => 外距
    box-sizing: border-box;  => 元素指定的任何内边距和边框都将在已设定的宽度和高度进行绘制
    font-family: 'Poppins',sans-serif; => 规定元素的字体系列
}

body{
    background: #3498db; => 背景色
    overflow: hidden;  => 规定当内容溢出时发生的事情，hidden 是将溢出内容进行裁剪
}

.container{
    max-width: 440px;  => 设置段落最大的宽度
    padding: 0 20px;  => 内边距的属性 这里代表着 上边距为 0 右边距为 20px
    margin: 170px auto; => 外边距的属性 这里代表着 上外边距为 170px 浏览器计算外距
}
.wrapper{
    width: 100%; => 设置宽度百分比
    background: #fff; 
    border-radius: 5px; => 设置元素的圆角边框
}
.wrapper .title{
    line-height: 90px; => 设置行间的距离(行高)
    background: #2980b9;
    text-align: center; => 规定元素中的文字的水平对其方式
    border-radius: 5px 5px 0 0;
    color:#fff; => 设置文本颜色
    font-size:30px;  => 设置文本尺寸
    font-weight: 600; => 设置文本粗细
}
.wrapper form{
    padding:30px 25px 25px 25px; => 属性所有内边距
}
.wrapper form .row{
    height:45px; => 设置元素的高度
    margin-bottom:15px; => 设置元素的下外编剧
    position:relative; => 生成相对定位的元素，相对于其他正常位置进行定位
}
.wrapper form .row input{
    height: 100%;
    width:100%;
    outline: none; => 绘制元素周围的一条线 none意味着 outline-color、outline-style、outline-width 都不生效
    padding-left: 60px; => 设置元素左内边距
    border-radius: 5px;
    border: 1px solid lightgrey;  => 设置边框(像素、样式、颜色) solid 为实心的
    font-size: 16px;
    transition: all 0.3s ease; => 设置元素的过渡动画 这是 默认过渡 只将过渡延长至0.3s
}
.wrapper form .row i {
    position: absolute; => 生成绝对定位的元素
    width: 47px;
    height:100%;
    color:#fff;
    font-size: 18px; 
    background:#2980b9; 
    border: 1px solid #2980b9; => 设置属性所有的边框属性
    border-radius: 5px 0 0 5px;
    display: flex;  => 设置弹性布局
    align-items: center; => 属性为弹性容器内项目指定默认对齐方式
    justify-content: center; => 属性(水平)对齐弹性容器的项目，
}
.wrapper form .pass{
    margin: -8px 0 20px 0;  => 设置元素外边距的宽度
}
.wrapper form .pass a{
    color: #2980b9;
    font-size: 17px;
    text-decoration: none; => 属性规定添加文本的修饰
}
.wrapper form .pass a:hover{
    text-decoration: underline; => 属性添加到文本的修饰(定义文本下的一条线)
}
.wrapper form .button input{
    color:#fff;
    font-size:20px;
    font-weight: 500;
    padding-left: 0px;
    background:#2980b9;
    border: 1px solid #2980b9;
    cursor: pointer; => 属性规定要显示的光标的类型(光标呈现为指示链接的指针 【一只手】)
}
form .row input:focus{
    border-color: #3498db;  => 属性设置四条边框的颜色
    box-shadow: inset 0px 0px 2px 2px rgba(26, 188, 156, 0.25); =>属性向框添加一个或多个阴影
}
form .button input:hover{
    background: #3498db;
}
.wrapper form .signup-link{
    text-align: center;
    margin-top: 20px; => 设置属性元素的上外边距
    font-size: 17px; 
} 
.wrapper form .signup-link a{
    color: #2980b9;
    text-decoration: none; => 属性规定添加文本的修饰 
}
form .signup-link a:hover{
    text-decoration: underline; => 定义文本下的一条线
}

推荐阅读