html常用

2024-03-07 21:54:27

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="https://www.baidu.com" method="post">
    <label>用户名：
        <input type="text" name="user" placeholder="请设置用户名">
    </label><br>
    <label>手机号：
        <input type="text" name="phone" placeholder="请输入手机号">
    </label><br>
    <label>密码：
        <input type="password" name="password" placeholder="请输入密码">
    </label><br>
    <label>验证码：
        <input type="text" name="yz" placeholder="请输入验证码">
        <input type="button" value="获取验证码">
    </label><br>
    <input type="checkbox">阅读并接收<a href="www.baidu.com"><<百度用户协议>></a>及<a href="www.baidu.com"><<百度用户保护协议>></a><br>
    <label>
        <input type="submit" value="注册">
    </label><br>
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style>
        .body{
            margin:0;
        }
        ul{
            margin: 0;
            padding: 0;
        }
        /*去除了ul的样式。*/
        .c1{
            height:50px;
            width: 100%;
            background-color: #4d4d4d;
        }
        .c2{
            color: #eee;
            float: left;
            margin-right:5px;
            margin-top:13.5px;
            padding-right:15px;
        }
        .c3{
            float: right;
            list-style-type: none;
        }
        .c3>li{
            float: right;
            margin-left: 15px;
        }
        .c3>li>a:hover{
            background: white;
            color: #ff4700;
        }
        a{
            text-decoration: none;
            color: #eeeeee;
        }

        .sep{
            color: #00ab36;
            padding-left: 10px;
        }
        .c3>li>a{
            line-height: 50px;
            padding: 15px;
        /*    让行高等于父标签的高度，实现单行文本垂直居中*/
        }
        .c1earfix:after{
            content: "";
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
<div class="c1 clearfix">
    <div class="c2">商城<span class="sep">|</span></div>
    <div class="c2">天<span class="sep">|</span></div>
    <div class="c2">地<span class="sep">|</span></div>
    <div class="c2">无<span class="sep">|</span></div>
    <div class="c2">极</div>
    <ul class="c3">
        <li><a href="">购物车</a></li>
        <li><a href="">登录</a></li>
        <li><a href="">注册</a></li>
    </ul>
</div>
</body>
</html>

导航栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
<!--左侧 开始-->
<div class="left">
    <div class="avator">
        <img src="timg.jpg" alt="">
    </div>
    <div class="blog-title">richell的blog</div>
    <div class="blog-info">什么也没有</div>
    <div class="blog-link">
        <ul>
            <li><a href="">关于我</a></li>
            <li><a href="">微博</a></li>
            <li><a href="">公众号</a></li>
        </ul>
    </div>
    <div class="blog-tag">
        <ul>
            <li><a href="">#javascript</a></li>
            <li><a href=""># python</a></li>
            <li><a href=""># golang</a></li>
        </ul>
    </div>
</div>
<!--左侧 结束-->

<!--右侧 开始-->
<div class="right">
    <div class="article-list">
<div class="article">
            <div class="article-top">
                <div class="article-title">白猫<span class="article-date">2018-08-31</span></div>
            </div>
            <div class="article-middle">
                <p>在人间大手大脚ask机读卡事件发生发哦首府卡洛夫OK十大科技的可拉斯基的跨境物流快递就考虑实际大陆空军的绿卡就是的离开来得深刻了解阿喀琉斯大家</p>
            </div>
            <div class="article-bottom">
                <span># HTML</span>
                <span># CSS</span>
            </div>
        </div>
        <div class="article">
            <div class="article-top">
                <div class="article-title">白猫<span class="article-date">2018-08-31</span></div>
            </div>
            <div class="article-middle">
                <p>在人间大手大脚ask机读卡事件发生发哦首府卡洛夫OK十大科技的可拉斯基的跨境物流快递就考虑实际大陆空军的绿卡就是的离开来得深刻了解阿喀琉斯大家</p>
            </div>
            <div class="article-bottom">
                <span># HTML</span>
                <span># CSS</span>
            </div>
        </div>
               <div class="article">
            <div class="article-top">
                <div class="article-title">白猫<span class="article-date">2018-08-31</span></div>
            </div>
            <div class="article-middle">
                <p>在人间大手大脚ask机读卡事件发生发哦首府卡洛夫OK十大科技的可拉斯基的跨境物流快递就考虑实际大陆空军的绿卡就是的离开来得深刻了解阿喀琉斯大家</p>
            </div>
            <div class="article-bottom">
                <span># HTML</span>
                <span># CSS</span>
            </div>
        </div>
               <div class="article">
            <div class="article-top">
                <div class="article-title">白猫<span class="article-date">2018-08-31</span></div>
            </div>
            <div class="article-middle">
                <p>在人间大手大脚ask机读卡事件发生发哦首府卡洛夫OK十大科技的可拉斯基的跨境物流快递就考虑实际大陆空军的绿卡就是的离开来得深刻了解阿喀琉斯大家</p>
            </div>
            <div class="article-bottom">
                <span># HTML</span>
                <span># CSS</span>
            </div>
        </div>
            <div class="article-middle"></div>
            <div class="article-bottom"></div>
        </div>
    </div>
</div>
<!--右侧 结束-->
</body>
</html>

blog

/*这是blog界面的css*/
body{
    margin: 0;
}

a{
    text-decoration: none;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
/*blog 左侧样式区*/
.left{
    position: fixed;
    left: 0;
    tep:0;
    height: 100%;
    width: 20%;
    background-color: #4d4d4d;
}
.right{
    width: 80%;
    float: right;
    background: #eeeeee;
}

/*头像*/
.avator{
    height: 100px;
    width: 100px;
    border: 3px solid white;
    border-radius: 50%;
    overflow: hidden;
    margin: 20px auto 0;
}

.avator>img{
    width: 100%;
}
/*blog标题*/
.blog-title{
    text-align: center;
    color: rgb(238,238,238);
    font-weight: bold;
}
.blog-info{
    text-align: center;
    color: rgb(238,238,238);
    margin: 25px 0;

}
/*blog链接和标签*/

.blog-link li,
.blog-tag li{
    margin: 20px,0;
    text-align: center;
}
.blog-tag{
    margin-top: 15px;
}
.blog-link a,
.blog-tag a{
    color: rgb(136,136,136);
}

.blog-link a:hover,
.blog-tag a:hover{
    color: white;
}

/*右侧样式区别*/

.article-list{
    margin: 20px 10% 20px 20px;
}

.article{
    background-color: white;
    margin-bottom: 20px;
}

.article:hover{
        box-shadow: 0 10px 20px;
    transition: all 200ms linear;
}

.article-date{
    float: right;
    font-size: 16px;
    font-weight: normal;
}
.article-title{
    border-left: 5px solid darkred;
    font-size: 24px;
    font-weight: bold;
    padding: 15px 20px;
}

.article-middle{
    padding: 10px 20px;
}

.article-bottom{
    border-top: 1px solid #eeeeee;
    margin: 0 20px;
    padding: 15px 0;
}

.article-bottom>span{
    font-size: 12px;
}

blog.css

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>华东页面背景被动</title>
    <style>
        *{
            margin:0;
        }
        .box{
            width: 100%;
            height: 500px;
            backgrounda:url("timg.jpg") no-repeat center center;
            background-attachment: fixed;
            <!--背景图片固定不动-->
        }
        .d1{
            height:500px;
            background-color: tomato;
        }
        .d2{
            width: 500px;
            background-color: steelblue;
        }
        .d3{
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="box"></div>
<div class="d2"></div>
<div class="d3"></div>

</body>
</html>

背景不动页面动

码农公寓

相关文章