zoukankan      html  css  js  c++  java

  • html常用

    <!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>
    背景不动页面动
  • 相关阅读:
    kali linux安装vm
    视频学习_css基础学习
    w3c_html_study_note_5.26
    备份apt目录节省下载时间
    校园网小记
    [原创汉化]linux前端神器 WebStorm8 汉化
    虚拟机备份转移后，网络启动异常，提示“SIOCSIFADDR: No such device”的解决方案
    python开发之virtualenv与virtualenvwrapper讲解
    Nginx负载均衡概述
    centos7安装python3 以及tab补全功能
  • 原文地址：https://www.cnblogs.com/yfjly/p/10954783.html
Copyright © 2011-2022 走看看