python(css样式)

css样式01

# main.css
h1{
    color: red;
    font-size: 24px;
}

<!DOCTYPE html>
<html lang="en">
<head>


    <!--
    ** 设置样式表的三种分类:
        1). 行内氧样式表;
        2). 内部样式表;
        3). 外部样式表;

    -->
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式表-->
    <!--<style>-->
        <!--h1{-->
            <!--color: red;-->
            <!--font-size: 24px;-->
            <!--}-->

    <!--</style>-->

    <!--<!-外部样式表&ndash;&gt;-->
    <link  rel="stylesheet"  href="css/main.css">
</head>
<body>


<!--内联样式表-->
<!--<h1 style="color: red; font-size: 24px">CSS样式</h1>-->
<h1 style="color: green">CSS样式表</h1>

</body>
</html>

实现水平导航栏加CSS样式

# nav.css
ul {
    list-style-type: none;
    text-align: center
}
ul li {
    display: inline-block;
    width: 20%;
    height: 30px;
    background: green;
    padding-top: 15px;
    font-size: 18px;
    /*text-decoration: none;*/
}

ul li a {
    text-decoration: none;
    color: white;
}
/*鼠标经过时产生的变化*/
li:hover {
    background: #4CAF50;
    font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/nav.css">
</head>
<body>

<!--
行内元素: 占多少用多少
块级元素: 一个标签占一整行
-->
<ul>
    <li><a href="http://www.baidu.com">博客</a></li>
    <li><a href="#">学院</a></li>
    <li><a href="#">技术</a></li>
    <li><a href="#">编程</a></li>
</ul>

</body>
</html>

登陆界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/main01.css">

</head>
<body>


<div class="content">
    <div class="main">
        <h1>Welcome</h1>
        <form action="#">
            <input type="text" placeholder="请输入帐号"><br/>
            <input type="password" placeholder="请输入密码"><br/>
            <input type="submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;陆">
        </form>

    </div>
</div>


</body>
</html>

模拟唯品会注册网站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body {
            padding: 0;
            margin: 0;

        }


        /*div {*/
            /*border: 1px solid red;*/
        /*}*/


        .header {
            width: 1920px;
            height: 100px;
            margin: 0 auto;

        }


        .logo{
            background: url("img/logo.png");
            width: 174px;
            height: 79px;
            float: left;
            margin-left: 200px;
            margin-top: 10px;
        }
        .service{
            margin-top: 20px;
               background: url("img/service.png");
            width: 321px;
            height: 55px;
            float: right;
            margin-right: 200px;

        }


        .content {
            width: 1920px;
            height: 600px;
            background: url("https://img.vipstatic.com/upload/flow/2018/06/15/157/15290438491111.jpg");
            background-repeat: no-repeat; /*图片不能让嗯填充满的时候， 不重复显示*/
            margin: 0 auto;
        }


        .main {
            width: 360px;
            height: 450px;
            float: right; /*将div标签向右对齐*/
            margin-right: 150px;
            margin-top: 50px;
            padding: 20px 20px 30px 20px; /*内边距: 上右下左*/
            background: white;
            text-align: center;

        }


        #registerText {
            font-size: 20px;
            font-weight: bold;

        }


        #loginText {
            float: right; /*div向右偏移*/
            display: inline; /*块级元素变为行内元素*/
        }

        .main input {
            margin-top: 20px;
            height: 40px;
            width: 300px;
            border: 1px solid darkgray;
            border-radius: 10px;
            text-align: left;
            padding-left: 20px;
        }


        .main .code {
            width: 140px;
        }


        .main input[type='checkbox'] {
            width: 2px;
            height: 2px;
        }

        .main input[type='submit'] {
            background: #f10180;
            color: white;
            border: 1px solid #f10180;
            text-align: center;
        }


        .main a {
            text-decoration: none;
            color: #1d94d1;
            font-size: 13px;
        }

        .main #loginText a{
            color: #f10180;
            font-size: 15px;
        }

        .footer {
            width: 1920px;
            height: 100px;
            text-align: center;
            padding-top: 50px;
            margin: 0 auto;
        }


    </style>


</head>
<body>
<!--导航栏部分(logo/图标)-->
<div class="header">

    <div class="logo">

    </div>

    <div class="service">

    </div>


</div>
<!--页面主体-->
<div class="content">
    <!--注册表单界面-->
    <div class="main">
        <span id="registerText">会员注册</span>
        <div id="loginText">已注册可<a href="#">直接登录</a></div>
        <hr/>
        <input type="text" placeholder="请输入电话号码"><br/>
        <input type="text" class="code" placeholder="请输入验证码"> &nbsp;&nbsp;
        <input type="button" class="code" value="获取验证码">
        <br/>
        <input type="password" placeholder="请输入密码"><br/>
        <input type="password" placeholder="请重新输入密码"><br/>

        <input type="checkbox">我已阅读并接受以下条款：
        <a href="#">《唯品会服务条款》 </a>
        <a href="#">《隐私条款》 </a>
        <a href="#">《唯品支付用户服务协议》 </a>
        <a href="#">《唯品信用服务协议》 </a>

        <br/>

        <input type="submit" value="立即注册"><br/>


    </div>


</div>


<!--脚标-底部设置(商标/备案信息)-->
<div class="footer">
    Copyright 2008-2018 vip.com，All Rights Reserved ICP证：粤 B2-20080329

</div>

</body>
</html>

模拟唯品会登陆网站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body {
            padding: 0;
            margin: 0;
        }

        /*div {*/
        /*border: 1px solid red;*/
        /*}*/


        .header {
            width: 100%;
            height: 100px;

        }


        .logo {
            background: url("img/logo.png");
            width: 174px;
            height: 79px;
            float: left;
            margin-left: 200px;
            margin-top: 10px;
        }

        .service {
            margin-top: 20px;
            background: url("img/service.png");
            width: 321px;
            height: 55px;
            float: right;
            margin-right: 200px;

        }


        .content {
            width: 100%;
            height: 600px;
            background: url("https://img.vipstatic.com/upload/flow/2018/06/15/157/15290438491111.jpg");
            background-repeat: no-repeat; /*图片不能让嗯填充满的时候， 不重复显示*/
        }


        .main {
            width: 360px;
            height: 300px;
            float: right; /*将div标签向右对齐*/
            margin-right: 150px;
            margin-top: 100px;
            padding: 20px 20px 30px 20px; /*内边距: 上右下左*/
            background: white;
            text-align: center;

        }

        #registerText {
            font-size: 20px;
            font-weight: bold;

        }


        #loginText {
            float: right; /*div向右偏移*/
            display: inline; /*块级元素变为行内元素*/
        }

        .main input {
            margin-top: 20px;
            height: 40px;
            width: 300px;
            border: 1px solid darkgray;
            border-radius: 10px;
            text-align: left;
            padding-left: 20px;
        }


        .main .code {
            width: 140px;
        }


        .main input[type='checkbox'] {
            width: 2px;
            height: 2px;
        }

        .main input[type='submit'] {
            background: #f10180;
            color: white;
            border: 1px solid #f10180;
            margin-top: 30px;
            text-align: center;
        }


        .main a {
            text-decoration: none;
            color: #1d94d1;
            font-size: 13px;
        }

        .main #loginText a {
            color: #f10180;
            font-size: 15px;
        }

        .footer {
            width: 100%;
            height: 100px;
            text-align: center;
            padding-top: 50px;
        }


    </style>


</head>
<body>
<!--导航栏部分(logo/图标)-->
<div class="header">

    <div class="logo">

    </div>

    <div class="service">

    </div>


</div>
<!--页面主体-->
<div class="content">
    <!--注册表单界面-->
    <div class="main">
        <span id="registerText">会员登录</span>
        <div id="loginText"><a href="#">直接注册</a></div>
        <hr/>
        <input type="text" placeholder="请输入电话号码"><br/>

        <input type="password" placeholder="请输入密码"><br/>



        <input type="submit" value="立即登录"><br/>


    </div>


</div>


<!--脚标-底部设置(商标/备案信息)-->
<div class="footer">
    Copyright 2008-2018 vip.com，All Rights Reserved ICP证：粤 B2-20080329

</div>

</body>
</html>

分页的设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div {
            margin: 0 auto;
            width: 50%;
            height: 100px;
            /*border: 1px solid red;*/
            text-align: center;
            margin-top: 300px;
        }

        ul.pagination li {
            list-style-type: none;
            display: inline;

        }

        ul.pagination li a {
            text-decoration: none;
            color: black;
            padding: 8px 10px; /*10px左右内边距， 8px上下内边距*/
            border: 1px solid darkgray;
            border-radius: 20px;

        }


        ul.pagination li a.active {
            background: green;
            color: white;
        }

        /*如果类名不为active并且鼠标经过才显示的样式*/
        ul.pagination li a:hover:not(.active) {
            background: darkseagreen;
            border: 1px solid green;
            font-size: 19px;
        }


    </style>


</head>
<body>


<div>
    <ul class="pagination">
        <li><a href="#">上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a class="active" href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li>....</li>
        <li><a href="#">20</a></li>
        <li><a href="#">21</a></li>
        <li><a href="#">下一页</a></li>
    </ul>


</div>

</body>
</html>

css样式01

实现水平导航栏加CSS样式

登陆界面

模拟唯品会注册网站

模拟唯品会登陆网站

分页的设计

猜你喜欢