html基础实例

最新推荐文章于 2024-07-26 08:00:00 发布

wwetarena

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量109

点赞数

分类专栏： html 文章标签： css html html5

本文链接：https://blog.csdn.net/wwetarena/article/details/120184452

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html基础实例
运行效果:
块样式

<!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>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            border: 2px solid red;
            border-radius: 200px;
        }
        /* id选择器 */
        #d1{
          background-color: red;
          /* 浮动 左 */
          float: right;  
        }
        #d2{
            background-color: blue;
            float: right; 
        }
        #d3{
            float: right; 
        }
    </style>
</head>
<body>
    <!--在页面显示3个div 要求 宽400px 高400px 背景色pink
     边框线 红色 实线 2px 倒角 200px  -->
     <!-- id属性的取值要求必须是唯一的 -->
    <div id="d1">123</div>
    <div id="d2">456</div>
    <div id="d3">789</div>


</body>
</html>

运行效果:
文本样式

<!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>
        div{
            /* 块样式 */
            width: 300px;
            height: 300px;
            background-color: red;
            border: 2px solid #0000ff;
            /* border-radius: 50px; */
            /* 设置div居中 第一个参数 上下 第二个是左右 */
            /*margin: 0 auto;*/
            /* 左外边距   200px */
            margin-left: 200px;
            /* 上边距 */
            margin-top: 50px;
            /* 文本的样式 */
            /* 文本颜色 白色 颜色的取值可以是英文的颜色
            6位16进制数 RGB模式 */
            color:#ACF123;
            /* 设置文本的大小 */
            /* 字体大小 30px */
            font-size: 20px;
            /* 设置字体类型 */
            /* 字体类型    楷体 */
            font-family: "楷体";
            /* 设置字体粗细 */
            /* 字体权重    加粗 */
            font-weight: bold;
            /* 设置文本倾斜 */
            /* 字体风格  斜体 */
            font-style: italic;
            /* 文本装饰线
            text-decoration 有四个取值,可以并存
            上划线 overline 
            贯穿线 line-through
            下划线 underline
            什么都没有 none
            */
            /* 文本装饰        下划线 */
            /* text-decoration: underline overline
            line-through ; */
            /* 行首缩进 */
            text-indent: 40px;
             
        }
        p{
            background-color: pink;
        }
        /* span 行内块  */
        span{
            background-color: gray;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div>
        马斯克 星链计划 火星移民 脑机接口 机器人
    </div>
    <div>
        Lorem ipsum, dolor sit amet consectetur
        adipisicing elit.
        Delectus nesciunt doloremque alias, 
       <span>error nulla pariatur quaerat</span>
        iure quis
        odio non eos! Suscipit animi illum 
        repellendus 
        <p> tempora eius aspernatur
            quisquam
        </p>
         corrupti?
    </div>
</body>
</html>

图片请自备

<!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>
        div{
            width: 600px;
            height: 600px;
            background-color: aqua;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
   <div>
       <img src="1.jpg" alt="" width="600" />
   </div>
   <div>
       <img src="https://0.jpg" alt="" />
   </div>
   <div>
       <img src="https://b.png" alt=""/>
   </div>
</body>
</html>

图片请自备

<!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>
        div{
            width: 220px;
            height: 350px;
            border: 1px solid #ccc;
            position: relative;
        }
        img{
            margin-top: 30px;
        }
        p{
            font-size: 10px;
        }
        #p1{
            color: red;
            font-size: 16px;
        }
        #s2{
            color: red;
        }
        #s1{
            background-color: red;
            color: white;
            border-radius: 3px;
        }
        .ms{
            display: block;
            position: absolute;
            right: 0;
        }
    </style>
</head>
<body>
    <div>
        <img class="ms" src="5.png" alt="" />
        <img src="3.png" alt="" />
        <p id="p1">￥5599.00</p>
        <p>
            <span id="s1">京品电脑</span> 联想ThinkPad E15 
            2021款 酷睿版
             英特尔酷睿i5/i7 <span id="s2">轻薄笔记本电脑</span> 人     
        </p>
    </div>
</body>
</html>