Java学习 --- CSS

最新推荐文章于 2023-07-07 21:28:43 发布

鸭鸭老板

最新推荐文章于 2023-07-07 21:28:43 发布

阅读量793

点赞数 1

分类专栏： javaweb 文章标签： java

本文链接：https://blog.csdn.net/qq_46093575/article/details/124202217

版权

javaweb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、CSS语法

1.1、css文件

/*p标签样式表*/
       p{
           color: red;
       }
       /* 类样式 */
       .f20{
           font-size: 50px;
       }
       /*ID样式*/
       #p4{
               background-color: pink;
               font-size: 24px;
               font-weight: bolder;
               font-style: italic;
               font-family: 华文彩云;
           }
       /*组合样式*/
       div p{
           color: grey;
       }
       div .f32{
           font-size: 45px;
           font-family: 华文细黑;
       }

<html>
   <head>
      <title>html标题</title>
       <meta charset="UTF-8">
       <!-- 被style标签包围的范围是CSS环境，可以写CSS代码 -->
       <style type="text/css">

       </style>
       <!--引入外部css文件-->
       <link rel="stylesheet" href="css/hello01.css">
   </head>
<body>
   <p>这是一</p>
   <p>这是2 </p>
   <p class="f20">这是3 </p>
   <p id="p4">这是4 </p>
   <div>
       <p><span>CAT</span></p>
       <span class="f32">Dog</span>
       <p>???</p>
   </div>
</body>
</html>
<!--
2. CSS的最基本的分类: 标签样式表、类样式表、ID样式表
3. CSS从位置上的分类：嵌入式样式表、内部样式表、外部样式表
-->

二、盒子模型

<html>
   <head>
      <title>html标题</title>
       <meta charset="UTF-8">
       <!-- 被style标签包围的范围是CSS环境，可以写CSS代码 -->
       <style type="text/css">
           #div1{
               width: 300px;
               height: 300px;
               background-color: gold;
               /* border 边框样式*/
               border-width:3px;
               border-style: solid;
               border-color: red;
           }
           #div2{
               width: 100px;
               height: 100px;
               background-color: limegreen;
               margin-top: 100px;
               margin-left: 100px;
               padding-top: 25px;
               padding-left: 25px;

           }
           #div3{
               width: 50px;
               height: 50px;
               background-color: yellow;
               /*margin-top: 25px;*/
               /*margin-left: 25px;*/
           }
       </style>

   </head>
<body>
   <div id="div1">
       <div id="div2">
           <div id="div3">&nbsp;</div>
       </div>
   </div>
</body>
</html>
<!--
CSS盒子模型：
1.border 边框
2.margin 间距
3.padding 填充
-->

三、css布局

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body{
				margin:0;
				padding:0;
				background-color:#808080;
			}
			div{
				position:relative;
			}
			#div_top{
				background-color: orange;
				height:20%;
			}
			#div_left{
				background-color: greenyellow;
				height:80%;
				width:15%;
				float:left;
			}
			#div_main{
				background-color: whitesmoke;
				height:70%;
				float:left;
				width:85%;
			}
			#div_bottom{
				background-color: sandybrown;
				height:10%;
				width:85%;
				float:left;
			}
			#div_container{
				width:80%;
				height:100%;
				border:0px solid blue;
				margin-left:10%;
				float:left;
			}
		</style>
	</head>
	<body>
		<div id="div_container">
			<div id="div_top">div_top</div>
			<div id="div_left">div_left</div>
			<div id="div_main">div_main</div>
			<div id="div_bottom">div_bottom</div>
		</div>
	</body>
</html>

四、练习

css文件

body{
            margin:0;
            padding:0;
            background-color:#808080;
        }
        div{
            position:relative;
            float:left;
        }
        #div_container{
            width:80%;
            height:100%;
            border:0px solid blue;
            margin-left:10%;
            float:left;
           background-color: azure;
        }
  #div_fruit_list{
            width: 100%;
        }
        #tbl_fruit{
            width: 60%;
            line-height: 28px;
            margin-top: 120px;
            margin-left: 20px;


        }
        #tbl_fruit,#tbl_fruit tr,#tbl_fruit td,#tbl_fruit th{
            border: 1px solid gray;
            border-collapse: collapse;
            text-align: center;
            font-size: 16px;
            font-family: 黑体;
            font-weight: lighter;
            color: grey;
        }
        .delImg{
            width: 24px;
            height: 24px;
        }

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/hello02.css">
</head>
<body>
<div id="div_container">
    <div id="div_fruit_list">
        <table id="tbl_fruit">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>草莓</td>
                <td>10</td>
                <td>5</td>
                <td>50</td>
                <td><img src="shanchu.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>芒果</td>
                <td>5</td>
                <td>3</td>
                <td>15</td>
                <td><img src="shanchu.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>西瓜</td>
                <td>2</td>
                <td>12</td>
                <td>24</td>
                <td><img src="shanchu.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>总计</td>
                <td colspan="4">1000</td>

            </tr>
        </table>
    </div>
</div>

</body>
</html>

鸭鸭老板

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
Java学习 --- CSS

目录一、CSS语法1.1、css文件二、盒子模型三、css布局四、练习一、CSS语法1.1、css文件/*p标签样式表*/ p{ color: red; } /* 类样式 */ .f20{ font-size: 50px; } /*ID样式*/ #p4{ background-color: p..
复制链接

扫一扫