【HTML+CSS】CSS基础2

最新推荐文章于 2024-07-23 14:51:29 发布

古田兔子

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量44

点赞数

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/Mr_TianSDQ/article/details/130628415

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1. 图片背景设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document </title>
    <style type="text/css">
        #bgstyle1 {width: 300px;height: 40px;border: 1px solid blue; 
            background-image: url(D:/素材/素材/3333.jpg);background-position: 0px -150px;}

            #bgstyle2
            {
                width: 300px;height: 40px;border: 1px solid blue;
                background-image: url(D:/素材/素材/4444.jpg);
                background-position: -60px -110px;

            }
    </style>
</head>

<body>
    <div id="bgstyle1">
    </div>
    <br>
    <div id="bgstyle2">
    </div>
</body>
</html>

2.图片美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document </title>
    <style type="text/css">
        img
        {
           border:5px solid blue;
           width: 110px;height: 120px; 
        }
    </style>
</head>

<body>
    <img src="D:/素材/素材/3333.jpg">
</body>
</html>

3.文本框美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document </title>
    <style type="text/css">
        .myinput1
        {
            border: 1px solid;
            border-radius: 2px;
            background-color: peachpuff;
            font-size: 14px;
        }
        .myinput2
        {
            border: 0px;
            border-bottom: 1px solid red;
            font-size: 14px;
        }
        
    </style>
</head>

<body>
    <div id="one">
        用户名：<input class="myinput1" type="text" name="userName" size="20"  /> <br/>
        密码：<input class="myinput2" type="password" name="userPwd" size="20" />
    </div>
</body>
</html>

4.按钮美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .imagebtn
        {
            background-image: url(D:/素材/icon/MSGBOX03.ICO);
            width:32px;height: 32px;border: 0px;
        }
    </style>
</head>

<body>
    
    <input type="button" name="btnBuy" class="imagebtn"/> <br/>

</body>
</html>

5.表格美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .sellTable
        {
            border: 1px solid blue;border-collapse: collapse;
        }
        .sellTable caption
        {
            border: 1px solid blue;padding: 8px;background-color: aqua;font-size: 16px;letter-spacing: 5px;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
        .sellTable th
        {
            border: 1px solid blue;padding: 8px;background-color: blueviolet;
        }
        .sellTable td
        {
            border: 1px solid blue;padding: 6px; text-align: center;
        }
        .sellTable tr
        {
            background-color: rgb(196, 253, 255);

        }
    </style>
</head>

<body>
    <table class="sellTable">

        <caption> 学生成绩表</caption>
        <tr>
            <th>班级名称</th><th>姓名</th><th>总分</th>
        </tr>
        
        <tr>
            <td>软件1班</td><td>张晓晓</td><td>180</td>
        </tr>
        <tr>
            <td>软件1班</td><td>刘晓芬</td><td>175</td>
        </tr>
        <tr>
            <td>软件1班</td><td>王晓峰</td><td>185</td>
        </tr>
    
        <tr>
            <td>软件2班</td><td>杜晓丽</td><td>180</td>
        </tr>
        <tr>
            <td>软件2班</td><td>王晓丽</td><td>175</td>
        </tr>
        <tr>
            <td>软件2班</td><td>周晓丽</td><td>185</td>
        </tr>
    </table>

</body>
</html>