CSS练习

最新推荐文章于 2023-12-18 20:24:10 发布

S_numb

最新推荐文章于 2023-12-18 20:24:10 发布

阅读量424

点赞数 2

分类专栏： Java

本文链接：https://blog.csdn.net/S_numb/article/details/103783552

版权

Java 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

1. QQ导航栏

html 代码

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

<head>
    <meta charset="UTF-8">
    <title>QQ导航栏</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="div1">
    <div id="div2">
        <a href="1.QQ导航栏.html" id="imgLabel"><img src="img/logo.png" width="145" height="90"></a>
    </div>

    <div id="div3">
        <ul>
            <li><a href="1.QQ导航栏.html">功能特权</a></li>
            <li><a href="1.QQ导航栏.html">游戏特权</a></li>
            <li><a href="1.QQ导航栏.html">生活特权</a></li>
            <li><a href="1.QQ导航栏.html">会员活动</a></li>
            <li><a href="1.QQ导航栏.html">成长体系</a></li>
            <li><a href="1.QQ导航栏.html">年费专区</a></li>
            <li><a href="1.QQ导航栏.html">超级会员</a></li>
        </ul>
    </div>

    <div id="div4">
        <a href="1.QQ导航栏.html">登录</a>
        <a href="1.QQ导航栏.html">开通超级会员</a>
    </div>

</div>
</body>

</html>

CSS 代码

*{
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
}

#div1{
    height: 90px;
    width: 100%;
    background: rgba(0,0,0,0.6);
}

#div2{
    width: 300px;
    height: 90px;
    margin: 0 auto;
    text-align: center;
}

#div2, #imgLabel, #div3,#div3 li , #div4{

    height: 90px;
    display: inline-block;
    vertical-align: top;
}

#div3{
    margin: 0 48px;
}

#div3 li{
    line-height: 90px;
    width: 90px;
}

#div3 li a{
    display: block;
    text-align: center;
    font-size: 16px;
    color: white;
}

#div3 li a:hover{
    color: blue;
}

#div4 a{
    display: inline-block;
    font-size: 16px;
    text-align: center;
    margin-top: 25px;
    border-radius: 35px;
}

#div4 a:first-of-type{
    width: 93px;
    height: 38px;
    line-height: 38px;
    color: #fad65c;
    border: 1px #fad65c solid ;
}
#div4 a:first-of-type:hover{
    background:#fad65c;
    color:#986b0d;
}

#div4 a:last-of-type{
    width: 130px;
    height: 38px;
    line-height: 38px;
    color: #986b0d;
    font-weight: bold;
    border: 1px #fad65c solid ;
    background: #fad65c;
}
#div4 a:last-of-type:hover{
    background: #fddc6c;
}

演示结果：

2.畅销书排行榜

html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>畅销书排行榜</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div>
    <div class="titleLabel">畅销书排行 <img src="img/bang.gif" alt=""> </div>

    <div class="bodyLabel" >
    <ul>
        <li><img src="img/book_no01.gif" alt=""><a href="1，畅销书排行榜.html">不抱怨的世界(畅...</a></li>
        <li><img src="img/book_no02.gif" alt=""><a href="1，畅销书排行榜.html">遇见未知的自己...</a></li>
        <li><img src="img/book_no03.gif" alt=""><a href="1，畅销书排行榜.html">活法（季羡林、...</a></li>
        <li> <img src="img/book_no04.gif" alt=""><a href="1，畅销书排行榜.html"  class="a4">高效能人士的七个习惯</a></li>
        <li> <img src="img/book_no05.gif" alt=""><a href="1，畅销书排行榜.html" class="a5">被迫强大（北外女生香奈儿...</a></li>
        <li><img src="img/book_no06.gif" alt=""><a href="1，畅销书排行榜.html"  class="a6">遇见心想事成的自己（《遇...</a></li>
        <li><img src="img/book_no07.gif" alt=""><a href="1，畅销书排行榜.html"  class="a7">世界上最伟大的推销员（插...</a></li>
        <li><img src="img/book_no08.gif" alt=""><a href="1，畅销书排行榜.html"  class="a8">我的成功可以复制（唐骏亲...</a></li>
        <li><img src="img/book_no09.gif" alt=""><a href="1，畅销书排行榜.html"  class="a9">少有人走的路：心智成熟的...</a></li>
        <li><img src="img/book_no10.gif" alt=""><a href="1，畅销书排行榜.html"  class="a10">活出全新的自己-唤醒...</a></li>
    </ul>
    </div>
</div>



</body>

</html>

css 代码：

/*总体框架设置*/
div {
    /*宽度设置为290px*/
    width: 290px;
    /*颜色渐变*/
    background: linear-gradient(to bottom, #f9fbcb, #f8f8f3);
}

/*标题设置*/
.titleLabel {
    /*因为下边设置边距的时候 多出1em，1em=16px 故而 此处删除多余的宽度为 274px*/
    width: 274px;
    /*背景色*/
    background: #518700;
    /*字体颜色*/
    color: white;
    /*字体加粗*/
    font-weight: bold;
    /*设置内边距*/
    padding: 2px 0 4px 1em;
}

/*标题中图片设置*/
.titleLabel img {
    /*将图片与文字底部对齐*/
    vertical-align: bottom;
}

/*设置无序列表格式*/
.bodyLabel li {
    /*去掉圆点*/
    list-style: none;
    /*设置底部外边距为了看起来好看*/
    margin-bottom: 6px;
}

/*设置书单的图片标志*/
.bodyLabel img {
    /*设置为与文字居中对齐*/
    vertical-align: middle;
}

/*设置书单标题图片 从4,5,6,7,8,9,10 集体往右移动3px，觉得如果加入class会麻烦，但是最起码可阅读星性强*/
.bodyLabel li:nth-of-type(4), .bodyLabel li:nth-of-type(5), .bodyLabel li:nth-of-type(6),
.bodyLabel li:nth-of-type(7), .bodyLabel li:nth-of-type(8), .bodyLabel li:nth-of-type(9),
.bodyLabel li:nth-of-type(10) {
    /*设置为相对定位*/
    position: relative;
    /*定位到原始位置向右偏移3px*/
    left: 3px;

}
/*设置书单链接*/
.bodyLabel a {
    /*去掉下划线*/
    text-decoration: none;
    /*设置字体大小*/
    font-size: 12px;
    /*设置文字颜色*/
    color: blue;
    /*设置左外边距*/
    margin-left: 8px;
}
/*设置链接后的格式*/
.bodyLabel a:hover {
    /*链接后颜色还是蓝色*/
    color: blue;
    /*链接时有下划线*/
    text-decoration: underline;
}
/*将后边的链接往右移动与前边的三个文档首字对齐*/
.a4, .a5, .a6, .a7, .a8, .a9, .a10 {
    padding-left: 4px;
}

演示结果：

3. 京东登录

html 代码：

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

<head>
    <meta charset="UTF-8">
    <title>仿京东登录页面</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div>

    <div class="titleJD">
        <a href="1.仿京东登录页面.html"><img src="img/logo.png" alt=""></a>
        <span>欢迎登录</span>
    </div>


    <div class="back">
        <div class="contentJD">
            <div class="enterJD">
                <div>
                    <h2>京东会员<a href="1.仿京东登录页面.html"><img src="img/icon5.jpg" alt="">立即注册</a></h2>
                </div>

                <form action="">
                    <div class="userJD">
                        <img src="img/icon1.jpg" alt="">
                        <input type="text" name="user" placeholder="邮箱/用户名/已验证手机">
                    </div>

                    <div class="pwdJD">
                        <img src="img/icon2.jpg" alt="">
                        <input type="password" name="psw">
                    </div>

                    <div class="autoEnterJD">
                        <input type="checkbox" name="auto" id="auto">
                        <label for="auto">自动登录</label>
                        <a href="1.仿京东登录页面.html">忘记密码？</a>
                    </div>

                    <div class="denglu">
                        <a href="1.仿京东登录页面.html">登&nbsp&nbsp;录</a>
                    </div>
                </form>
            </div>

        </div>
    </div>


    <div class="foot">
        <div>
            <a href="1.仿京东登录页面.html">关于我们</a>|
            <a href="1.仿京东登录页面.html">联系我们</a>|
            <a href="1.仿京东登录页面.html">人才招聘</a>|
            <a href="1.仿京东登录页面.html">商家入驻</a>|
            <a href="1.仿京东登录页面.html">广告服务</a>|
            <a href="1.仿京东登录页面.html">手机京东</a>|
            <a href="1.仿京东登录页面.html">友情链接</a>|
            <a href="1.仿京东登录页面.html">销售联盟</a>|
            <a href="1.仿京东登录页面.html">京东社区</a>|
            <a href="1.仿京东登录页面.html">京东公益</a>|
            <a href="1.仿京东登录页面.html">English Site</a>
        </div>

        <div class="foot-foot">
           Copywrite &copy;2004-2017 京东JD.com 版权所有
        </div>
    </div>


</div>
</body>

</html>

css 代码：

/*所有的超链接去掉下划线*/
a{
    text-decoration: none;
}

/*设置顶层*/
.titleJD{
    /*顶层宽度设置为990px*/
    width: 990px;
    /*高度设置为60px*/
    height: 60px;
    /*上下外边距为0，左右自动是为了居中*/
    margin: 0 auto;
    /*内边距为0*/
    padding: 0;
}
/*将图片是嵌入进去的，并对其设置为左浮*/
.titleJD img{
    float: left;
}
/*设置 欢迎登录 四个字*/
.titleJD span{
    /*高度设置的和顶层一样高是为了让其居中*/
    height: 60px;
    /*字体大小为24px*/
    font-size: 24px ;
    /*字体格式为微软雅黑*/
    font-family: 微软雅黑;
    /*字体颜色为灰色*/
    color: #666666;
    /*浮动方式 左浮*/
    float: left;
    /*行高和文本框架一样高为了居中*/
   line-height: 60px;
    /*设置左边距与图片间隔*/
    padding-left: 20px;
}
/*
中间层的背景颜色设置：
这一块需要单独设置，并且得先设置背景色，在嵌入图片，否则图片会被覆盖
*/
.back{
    background: #e93854;
}
/*中间层框架设置*/
.contentJD{
    /*插入背景图片*/
    background-image: url("../img/banner.png");
    /*宽度和第一个框架一样*/
    width: 990px;
    /*自定义高度*/
    height: 475px;
    /*居中*/
    margin: 0 auto;
}
/*对登录界面设置*/
.enterJD{
    /*右浮*/
    float: right;
    width: 306px;
    padding: 20px;
    background: white;
    margin-top: 40px;
}
/*对登录界面的标题设置*/
.enterJD h2{
    font-weight: normal;
    font-size: 20px;
    height: 27px;
    margin-bottom: 25px;
    color: #666666;
}
/*对注册链接设置*/
.enterJD h2  a{
    font-size: 14px;
    color: #b61d1d;
    padding-left:140px;
    line-height: 29px;
}
/*对注册链接设置*/
.enterJD h2  a:hover{
    text-decoration: underline;
}
/*对链接前的图片设置，此处是插入，并没有将图片设置为背景*/
.enterJD h2 a img{
    vertical-align: middle;
    padding-right: 5px;
}

/*对登录框用户名设置*/
.userJD{
    height: 38px;
    margin-bottom: 20px;
    border: 1px #bdbdbd solid;
}

.userJD input{
    width: 262px;
    height: 33px;
    float: right;
}
/*对登录框密码设置*/
.pwdJD{
    height: 38px;
    margin-bottom: 20px;
    border: 1px #bdbdbd solid;
}

.pwdJD input{
    width: 262px;
    height: 33px;
    float: right;
}
/*对自动登录设置*/
.autoEnterJD{
   font-size: 12px;
    color: #666666;
    margin-bottom: 20px;
}

.autoEnterJD input{
    vertical-align: middle;
    margin-right: 3px;
}
/*对忘记密码设置*/
.autoEnterJD a{
    float: right;
    color:#666666 ;
}

.autoEnterJD a:hover{
    text-decoration: underline;
    color: #b61d1d;
}
/*对登录按钮设置*/
.denglu{
    width: 302px;
    height: 33px;
    border: 1px solid red;
    line-height: 33px;
    text-align: center;
    background: red;
    font-size: 18px;
}

.denglu a{
    color: white;
}
/*对最后一层设置*/
.foot{
    width: 990px;
    height: 60px;
    margin: 10px auto;
    padding: 0;
    text-align: center;
    font-size: 14px;
}

.foot a,.foot-foot{
    margin: 0 10px;
    color: #666666;
}

.foot a:hover{
    text-decoration: underline;
    color: #b61d1d;
}

演示结果：

S_numb

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS练习

1. QQ导航栏html 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>QQ导航栏</title> <link rel="stylesheet" href="css/style.css"&g...
复制链接

扫一扫