html,css学习笔记（第二天）

最新推荐文章于 2024-05-30 15:01:09 发布

shortcutsuccess

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量80

点赞数

文章标签： css html 学习

本文链接：https://blog.csdn.net/shortcutsuccess/article/details/126003132

版权

01颜色和背景.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: red;
            color: #00ff00;
            color: #00f;
            color: rgb(255,0,0);
            color: rgba(255,0,0,0.5);
        }
        div{
            width: 200px;
            height: 200px;
            background-color: purple;
            /*设置背景图片*/
            background-image: url("../day01/a.jpg");
            /*设置背景图片尺寸: 宽 高 */
            background-size: 100px 100px;
            /*设置禁止重复*/
            background-repeat: no-repeat;
            /*设置背景图片位置*/
            /*background-position: 50px 100px;*/
            background-position: 50% 50%;
        }
    </style>
</head>
<body>
<div>ABCD</div>
<h1>颜色测试</h1>
</body>
</html>

02背景图片练习.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 611px;
            height: 376px;
            background-color: #e8e8e8;
            background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
            background-repeat: no-repeat;
            background-size: 318px 319px;
            background-position: 90% 60%;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

03文本字体相关.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 50px;
            border: 1px solid red;
            /*水平对齐方式*/
            text-align: center;
            /*文本修饰 overline上划线 underline下划线 line-through删除线 none没有*/
            text-decoration: line-through;
            /*设置行高:单行可以实现垂直居中, 多行可以控制行间距*/
            line-height: 30px;
            /*文本阴影:颜色 x偏移值 y偏移值 浓度*/
            text-shadow: green 5px 5px 5px;
            /*字体大小*/
            font-size: 30px;
            /*字体加粗*/
            font-weight: bold;
            /*斜体*/
            font-style: italic;
        }
        a{
            text-decoration: none;/*去掉自带下划线*/
        }
        h1{
            font-weight: normal;/*去掉自带加粗效果*/
            /*设置字体*/
            /*font-family: cursive;*/
            font: 40px cursive;
        }
    </style>
</head>
<body>
<h1>这是h1</h1>
<a href="">超链接</a>
<div>文本和字体</div>
</body>
</html>

04文本和字体练习.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width: 100px;
            height: 30px;
            background-color: green;
            color: red;
            text-align: center;
            line-height: 30px;
        }
        span{
            font-size: 25px;
            font-style: italic;
        }
        #h1-1{
            font-weight: normal;
            text-shadow: blue -10px 10px 3px;
        }
        #h1-2{
            text-decoration: underline;
        }
        a{
            text-decoration: none;
            font-weight: bold;
            font-size: 20px;
        }

    </style>
</head>
<body>
<div id="d1">刘德华</div><div>张学友</div>
<span>香蕉</span><span>苹果</span>
<h1 id="h1-1">冰箱</h1><h1 id="h1-2">洗衣机</h1>
<a href="http://www.baidu.com">百度</a>
</body>
</html>

05元素显示方式.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{
            /*行内元素不能修改宽高*/
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
        img{
            width: 100px;
            height: 100px;
        }
        a{
            background-color: #0aa1ed;
            /*行内元素修改了显示方式为块级或行内块之后就可以修改宽高*/
            display: block;
            width: 132px;
            height: 40px;
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="http://www.jd.com">查看详情</a>
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<div>div1</div><div>div2</div><div>div3</div>
<span>span1</span><span>span2</span><span>span3</span>
</body>
</html>

06外边距.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*margin-top: 50px;
            margin-left: 30px;
            margin-bottom: 100px;
            margin-right: 20px;*/
            /*四个方向*/
            /*margin: 50px;*/
            /*上下20  左右40*/
            /*margin: 20px 40px;*/
            /*上右下左 顺时针*/
            /*margin: 10px 20px 30px 40px;*/
            margin-bottom: 100px;
        }
        #d2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*上下相邻彼此添加外边距 取最大值*/
           margin-top: 150px;
        }
        #s1{
            /*行内元素上下外边距无效*/
            margin-bottom: 100px;
            margin-right: 100px;
        }
        #s2{
            margin-left: 50px;/*左右相邻彼此添加外边距两者相加*/
        }
    </style>
</head>
<body>
<span id="s1">span1</span><span id="s2">span2</span>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>