java JScrollBar美化 java页面美化

转载

风轻云淡的开发 2024-04-19 18:14:05

文章标签 java JScrollBar美化 css java html Java 文章分类 Java 后端开发

文章目录

1、字体样式
2、文本样式
3、超链接伪类
4、列表
5、背景

为什么要美化网页？
1、有小的传递页面信息
2、美化网页、页面漂亮、才能吸引用户
3、突显页面的主题
4、提高用户的体验

span标签（重点要突出的字，使用span套起来）

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

        <style>
            #title1{
                font-size: 50px;
            }
        </style>

    </head>
    <body>
    欢迎学习<span id="title1">Java</span>

    </body>
</html>

java JScrollBar美化 java页面美化_css

1、字体样式

font-family 字体
font-size 字体大小
font-weight 字体的粗细
color 字体的颜色

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

        <!--
        font-family 字体
        font-size   字体大小
        font-weight 字体的粗细
        color       字体的颜色
        -->
        <style>
            body{
                font-family: 楷体;
                color: #de07f5;
            }

            h1{
                font-size: 50px;
            }

            .p1{
                font-weight: bold;
            }


        </style>

    </head>
    <body>
        <h1>Java(计算机编程语言)</h1>
        <p class="p1">
            Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程
        </p>

        <p>
        Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2] 。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3] 。
        </p>
    </body>
</html>

java JScrollBar美化 java页面美化_java JScrollBar美化_02

2、文本样式

颜色
单词
RGB 0 ~ F
RGBA A：0 ~ 1
文本对齐的方式
text-align: center;（水平居中）
首行缩进
text-indent: 2em;
行高
line-height: 300px;
垂直居中：line-height = height
装饰
/下划线/
text-decoration: underline;
/中划线/
text-decoration: line-through;
/上划线/
text-decoration: overline;
文本水平对齐
vertical-align: middle;
阴影

/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
            #price{
                text-shadow: #389ba8 10px 10px 10px;
            }

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

        <!--
            颜色：
                单词
                RGB 0 ~ F
                RGBA A：0 ~ 1

            text-align: 排版，居中
            text-indent: 2em;   段络首行缩进
            行高和快的高度一致 就可以上下居中：
                height: 300px;
                line-height: 300px;
        -->
        <style>

            h1{
                color: rgba(0,255,0,0.8);
                text-align: center;
            }

            .p1{
                text-indent: 2em;
            }

            .p3{
                background: red;
                height: 300px;
                line-height: 300px;
            }
            /*下划线*/
            .l1{
                text-decoration: underline;
            }
            /*中划线*/
            .l2{
                text-decoration: line-through;
            }
            /*上划线*/
            .l3{
                text-decoration: overline;
            }

            /*
            水平对其 参照物 a，b
            */
            img,span{
                vertical-align: middle;
            }

        </style>

    </head>
    <body>

        <p class="l1">2929054</p>
        <p class="l2">2929054</p>
        <p class="l3">2929054</p>
        <h1>Java(计算机编程语言)</h1>
        <p class="p1">
            Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程
        </p>

        <p class="p3">
            Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2] 。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3] 。
        </p>

        <p>
            <img src="./images/1.png" alt="" width="200px" height="200px">
            <span>123456789</span>
        </p>
    </body>
</html>

java JScrollBar美化 java页面美化_html_03

3、超链接伪类

默认的颜色

a{
                text-decoration: none;
                color: #000000;
            }

鼠标悬浮的状态

a:hover{
                color: orange;
                font-size: 50px;
            }

鼠标按住未释放的状态

/*鼠标按住未释放的状态*/
            a:active{
                color: green;
            }

已访问的状态

/*已访问的状态*/
            a:visited{
                color: red;
            }

java JScrollBar美化 java页面美化_Java_04

4、列表

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*
ul li
list-style:
    none 去掉原点
    circle  空心圆
    decimal 数字
    square  正方形
*/
ul{
    background: #adaaaa;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}
#nav{
    width: 300px;
    background: #adaaaa;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表样式</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="nav">
            <h2 class="title">全部商品分类</h2>
            <ul>
                <li>
                    <a href="#">图书</a>  
                    <a href="#">音像</a>  
                    <a href="#">数字商品</a>  
                </li>
                <li>
                    <a href="#">家用电器</a>  
                    <a href="#">手机</a>  
                    <a href="#">数码</a>  
                </li>
                <li>
                    <a href="#">电脑</a>  
                    <a href="#">办公</a>  
                </li>
                <li>
                    <a href="#">家居</a>  
                    <a href="#">家装</a>  
                    <a href="#">厨具</a>  
                </li>
                <li>
                    <a href="#">服饰鞋帽</a>  
                    <a href="#">个护化妆</a>  
                </li>
                <li>
                    <a href="#">礼品箱包</a>  
                    <a href="#">钟表</a>  
                    <a href="#">珠宝</a>  
                </li>
                <li>
                    <a href="#">食品饮料</a>  
                    <a href="#">保健食品</a>  
                </li>
                <li>
                    <a href="#">彩票</a>  
                    <a href="#">旅行</a>  
                    <a href="#">充值</a>  
                    <a href="#">票务</a>  

                </li>
            </ul>
        </div>


    </body>
</html>

java JScrollBar美化 java页面美化_java_05

5、背景

div{
                width: 1000px;
                height: 700px;
                border: 1px solid red;
                background-image: url("./images/1.png");
                /*默认全部平铺*/
            }
            .div1{
                background-repeat: repeat-x;
                /*水平平铺*/
            }
            .div2{
                background-repeat: repeat-y;
                /*垂直平铺*/
            }
            .div3{
                background-repeat: no-repeat;
                /*不平铺*/
            }

java JScrollBar美化 java页面美化_java JScrollBar美化_06