HTML+CSS 网页项目

新疆旅游网页博客页面祝福墙 Happy Wall 学生注册表商品管理后台

小丫头爱打盹

3420人浏览 · 2022-06-11 19:27:58

小丫头爱打盹 · 2022-06-11 19:27:58 发布

1.新疆旅游网页

要实现的效果图片：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新疆旅游网页</title>
    <link rel="stylesheet" href="css/xj.css">
</head>

<body>
    <div id="con">
        <div id="top">
            <img src="../新疆景色网页/img/banner.jpg" alt="top图片">
            <table>
                <th>
                    <td><a href="#">菜单1</a></td>
                    <td><a href="#">菜单2</a></td>
                    <td><a href="#">菜单3</a></td>
                    <td><a href="#">菜单4</a></td>
                    <td><a href="#">菜单5</a></td>
                    <td><a href="#">菜单6</a></td>
                    <td><a href="#">菜单7</a></td>
                    <td><a href="#">菜单8</a></td>
                    <td><a href="#">菜单9</a></td>
                    <td><a href="#">菜单10</a></td>
                </th>
            </table>
        </div><!-- <img src="../新疆景色网页/img/banner.jpg" alt="top图片"> -->
        <div id="main">
            <div class="left">
                <p>天气预报</p>
                <ul>
                    <li>乌鲁木齐 呼和浩特 25-30</li>
                    <li>乌鲁木齐 呼和浩特 25-30</li>
                    <li>乌鲁木齐 呼和浩特 25-30</li>
                    <li>乌鲁木齐 呼和浩特 25-30</li>
                </ul>
                <h5>今日推荐</h5>
                <img src="../新疆景色网页/img/tuijian1.jpg" alt="雪景天城">
                <br>
                <a href="#">美景天城</a>
                <img src="../新疆景色网页/img/tuijian1.jpg" alt="雪景天城">
                <br>
                <a href="#">美景天城</a>
                <img src="../新疆景色网页/img/tuijian1.jpg" alt="雪景天城">
                <br>
                <a href="#">美景天城</a>
            </div>
            
            <div class="middle">
                <img src="../新疆景色网页/img/ghost.jpg" alt="goist">
                <img src="../新疆景色网页/img/picture_h1.gif" alt="美景寻踪">
                <img class="fudong" src="../新疆景色网页/img/beauty1.jpg" alt="beauty1">
                <img class="fudong" src="../新疆景色网页/img/beauty2.jpg" alt="beauty2">
                <img class="fudong" src="../新疆景色网页/img/beauty3.jpg" alt="beauty3">
                <img class="fudong" src="../新疆景色网页/img/beauty4.jpg" alt="beauty4">
                <img src="../新疆景色网页/img/route_h1.gif" alt="route_h1">

                <ul>
                    <li>果子沟--赛里木湖--大草原--霍尔果思口岸</li>
                    <li>果子沟--赛里木湖--大草原--霍尔果思口岸</li>
                    <li>果子沟--赛里木湖--大草原--霍尔果思口岸</li>
                    <li>果子沟--赛里木湖--大草原--霍尔果思口岸</li>
                </ul>
            </div>

            <div class="right">
                <h5>新疆地图</h5>
                <img   src="../新疆景色网页/img/map1.jpg" alt="map1">
                <img   src="../新疆景色网页/img/map2.jpg" alt="map2">
                <h6>特色美食</h6>
                <ul>
                    <li>大盘鸡</li>
                    <li>大盘鸡</li>
                    <li>大盘鸡</li>
                    <li>大盘鸡</li>
                </ul>
                <h6>新疆住宿</h6>
                <ul>
                    <li>南院住宿</li>
                    <li>南院住宿</li>
                    <li>南院住宿</li>
                    <li>南院住宿</li>
                    <li>南院住宿</li>
                    <li>南院住宿</li>
                    <li>南院住宿</li>
                </ul>
                <!-- <table  border="1">
                    <tr>
                        <td>大盘鸡</td>
                    </tr>
                    <tr>
                        <td>大盘鸡</td>
                    </tr>
                    <tr>
                        <td>大盘鸡</td>
                    </tr>
                    <tr>
                        <td>大盘鸡</td>
                    </tr>
                </table> -->
            </div>
        </div>
        <div id="buttom">
            <p>网页爱好者©2019</p> 
            <p>联系我们QQ:23234234</p>
        </div>
    </div>
</body>
</html>

xj.css 代码如下：

*{
    margin: 0px;
    padding: 0px;
}
#con{
    border:1px solid red;
    width:780px;
    height:880px;
    background-color: yellow;
    margin:auto; /*margin */
}
#top{
    width: 780px;
    height:225px;
    /* border: 1px solid black; */
    /* background-color: red; */    
}
#top img{
    /* 图片文字等行内标签默认与父类保持一致 */
    display: block; 
}
#top table{  
    /* border: 1px solid red; */
    text-align: center;
    width:780px;
    background: url(../img/button1.jpg);
}
#top td:hover {
    background: url(../img/button1_bg.jpg);
}
#top table a{
    text-decoration: none;
}
#main{
    border: 1px solid green;
    background-color: green;
    width: 780px;
    height: 600px;    
}
.left{
    border:1px solid white;
    width: 195px;
    height:600px;
    background-color: #87CEFA;
    float:left;
}
.left p{
    text-align: center;
    background: url(../img/weather.jpg) no-repeat;
    /* background-size: 195px 43px; */
    line-height: 43px; /* 字是主题 图片是背景 背景的长宽要由字来决定 */
    font-size: 15px;
    color: white;
}
.left ul{
    text-align: center;
    list-style: none;
    font-size: 12px;
    line-height: 25px;
    color:white; 
}
.left ul li{
    background: skyblue url(../img/icon1.gif) no-repeat 15px;
    background: 颜色 背景图片 repeat x水平位置 y竖直位置 / 图片本身的长度 图片宽度;
}
/* span标签 行内标签 不能设置宽度 */
.left h5{
   border:3px solid red;
   line-height: 30px;
   padding-left: 25px;
   /* padding-right:; */
   /* background-size: 195px; */
   background: #008B8B url(../img/icon2.gif)  no-repeat 10px;
}
.left img{
    margin-top:15px ;
    margin-left:15px;
    width:144px;
    height: 94px;
}
.left a{
    padding-left:55px;
    /* margin:55px; */
    /* 注意：标签的属性。 a标签是行内标签 不能设置宽高 */
}
.middle{
    border:1px solid red;
    width: 390px;
    height: 600px;
    background-color: white;
    /* 如果只有左侧浮动的话 它们将会镶嵌
    这是右侧也需要向左侧浮动 */
    float: left;     
}
.middle img{
    /* margin-top: 0px;
    padding:0px; */
    display: block;
}
.fudong{
    float:left;
    padding-left: 5px;
    padding-top: 5px; 
    padding-bottom: 5px; 
}

.middle ul{
    margin-left: 35px;
    padding-top: 5px;
    font-size: 18px;
}
.right{
    border:1px solid black;
    width: 188px;
    height: 600px;
    background-color: skyblue;
    float: left;
}
.right h5{
    border:2px solid red;
    /* margin-top: 15px; */
    padding-left: 25px;
    line-height: 30px;
    /* padding-right:; */
    /* background-size: 195px; */
    background: #008B8B url(../img/icon2.gif)  no-repeat 10px;  
 }
 .right h6{
    border:2px solid red;
    margin-top: 5px;
    padding-left: 25px;
    line-height: 30px;
    /* padding-right:; */
    /* background-size: 195px; */
    background: #008B8B url(../img/icon2.gif)  no-repeat 10px;
 }

.right img{
    padding-left: 15px;
    margin-top: 10px;
}
.right ul{
    /* text-decoration: none; */ 
    list-style: none;
    margin-top: 5px;     /*  特备注意 通过内外边框来控制虚线的长度*/
    margin-left: 20px;
    margin-right: 50px;
    /* margin-left:40px; */
    /* text-align:left; */
    /* margin-left:40px;
    margin-top: 20px; */
}
.right li{
    background: url(../img/icon2.gif) no-repeat 0px ;
    /*注意： 搞清楚内外边距 margin 外 padding 内*/
    padding-left: 10px;
    border-bottom: 1px dashed white ;
}
/* .right table{
    
} */

#buttom{
    border:1px solid black;
    background-color: skyblue;
    width:780px;
    height:50px;
}
#buttom p{
    text-align: center;
}

img文件夹中的图片如下：
在这里插入图片描述

运行结果如下：
请添加图片描述

2.博客页面

要实现的效果图片：
请添加图片描述
代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客页面</title>
    <!-- 注意引用css文件的位置 -->
    <link rel="stylesheet" href="css/bk.css"> 

</head>
<body>
    <div id="con">
        <div class="con1">
            <ul>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
                <li>菜单</li>
            </ul>

            <!-- <table >
                <tr>
                    <td>菜单</td>
                    <td>菜单</td>
                    <td>菜单</td>
                    <td>菜单</td>
                    <td>菜单</td>
                </tr>
            </table> -->
        </div>
        <div class="con2">
            <ul>
                <li>我的日记</li>
                <li>我的日记</li>
                <li>我的日记</li>
            </ul>
        </div>
        <div class="con3"> 
            <h1>这是标题</h1>
            <p>这是内容这是内容这是内容这
                是内容这是内容这是内容这是
                内容这是内容这是内容这是内容
                这是内容这是内容这是内容这是
                内容这是内容这是内容这是内容这
                是内容这是内容这是内容这是内容
                这是内容这是内容这是内容这是内容
                这是内容这是内容这是内容这是内
                容这是内容这是内容这是内容这是
                内容这是内容这是内容这是内容这
                是内容这是内容这是内容这是内容</p>

        </div>
    </div>
</body>
</html>

bk.css代码如下：

#con{
    border:1px solid black;
    background-color: white;
    width:1000px;
    height:1000px;
    margin:auto;
}
.con1{
    /* border:1px solid red; */
    width:1000px;
    height:30px;
    background-color: black;
    margin-top: 20px;
    /* list-style: none;
    border:1px; */
}
.con1 ul{
    /* border:2x solid yellow; */
    background-color: white;
    width: 1000px;
    height: 30px;
    margin: 0px;
    padding:0px;
}
.con1 ul li{
    border:1px solid black;
    width: 198px;
    line-height: 30px;
    list-style: none;
    text-align: center;
    /* color:white; */
    display: inline-block;
    float: left; /*  设置浮动 */
}
.con1 li:hover{
    color:white;
    background-color: black;
}
/* .con1{
    margin-top: 10px; 
    border: 1px solid black;
    width:1000px;
    height: 32px;
    background-color:white;
    display: block;
}
table{
    border:1px solid red; 
    width: 1000px;
    height:32px;
    text-align:center;
    display: inline-block;
}
.con1 td{
    width: 1000px;
    line-height: 32px;
    color:black;
    font-weight: bold;
    padding:0px;
    margin:0px;
}
.con1 td:hover{
    background-color: black;
    color:white;
} */ 
.con2{
    border: 1px solid black;
    width: 200px;
    height: 200px;
    /* margin-left: 20px;*/
    margin-top: 20px; 
    float:left;
}
/* .con2{
    text-align: center;
    line-height: 10px;
} */
.con2 ul{
    border:1px solid red;
    text-align: center;
    list-style: none;
    line-height: 30px;
    padding:0px;
    margin-left:20px;
    margin-right: 20px;
}
.con2 li{
    border-bottom:1px dashed black;
}
.con3{
    border: 1px solid black;
    background-color: white;
    width:776px;
    height:500px;
    /* float:left; */
    display: inline-block;
    margin-top: 20px;
    margin-left: 20px;
}
h1{
    text-align: center;
}
p{
    color:black;
    text-indent: 2em;
    padding-left: 20px;
    padding:20px;
}

运行结果如下：
请添加图片描述

3.祝福墙Happy Wall

要实现的效果图片：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纪念墙</title>
    <link rel="stylesheet" href="css/jnq.css">
</head>
<body>
    <div id="con">
        <div class="con1"><h1>HAPPY WALL</h1></div>
        <div class="con2">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con20">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con21">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con22">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con221">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con222">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con29">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con209">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con219">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con229">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con2219">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con2229">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <!-- <div class="con23">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con24">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div>
        <div class="con25">
            <br>亲爱的丫头：<br><br>好好学习，天天向上！
            <br>开开心心，快快乐乐！<br>平平安安，健健康康！
        </div> -->
        <div class="con3"></div>
    </div>
</body>
</html>

jnq.css代码如下：

#con{
    border:1px solid green;
    width:600px;
    height: 600px;
    margin:100px auto;
    background-image: linear-gradient(25deg,red,orange,yellow,green,cyan,blue,purple);
    /* 把父类设置成相对位置 他的子集以此为基准 */
    position: relative; 
}
.con1{
    text-align: center;
}
.con2{
    border:1px solid red;
    width:150px;
    height: 220px;
    background-color: rgb(60, 0, 255);
    /* 绝对定位  相对于父类偏移*/
    position:absolute;
    top:80px;
    left:55px;
    /* 旋转 */
    transform: rotate(70deg); 
}
.con2:hover{
    /* 浮标下的优先显示 index 指数 */
    z-index: 9;
    /* 设置动画效果时间 all 表示所有方位 */
    transition: all 1s;
    transform:rotate(0deg); 
}
.con20{
    border:1px solid red;
    width:150px;
    height: 220px;
    background-color: red;
    /* 绝对定位  相对于父类偏移*/
    position:absolute;
    top:100px;
    left:45px;
    /* 旋转 */
    transform: rotate(30deg); 
}
.con20:hover{
    /* 浮标下的优先显示 index 指数 */
    z-index: 9;
    /* 设置动画效果时间 all 表示所有方位 */
    transition: all 1s;
    transform:rotate(0deg); 
}
.con21{
    border:1px solid red;
    width:150px;
    height: 220px;
    background-color: yellow;
    position:absolute;
    top:150px;
    left:45px;
    /* 旋转 */
    transform: rotate(10deg); 
}
.con21:hover{
    z-index: 9;
    transition: all 1s;
    transform:rotate(0deg); 
}
.con22{
    border:1px solid red;
    width:150px;
    height: 220px;
    background-color:white;
    /* 相对定位 */
    position:absolute;
    top:200px;
    left:45px;
    /* 旋转 */
    transform: rotate(-10deg); 
}
.con22:hover{
    z-index: 9;
    transition: all 1s;
    transform:rotate(0deg); 
}
.con221{
    border:1px solid red;
    width:150px;
    height: 220px;
    background-color:purple;
    /* 相对定位 */
    position:absolute;
    top:250px;
    left:55px;
    /* 旋转 */
    transform: rotate(-25deg); 
}
.con221:hover{
    z-index: 9;
    transition: all 1s;
    transform:rotate(0deg); 
}
.con222{
    border:1px solid red;
    width:150px;
    height: 220px;
    background-color:orange;
    /* 相对定位 */
    position:absolute;
    top:300px;
    left:75px;
    /* 旋转 */
    transform: rotate(-35deg); 
}
.con222:hover{
    z-index: 9;
    transition: all 1s;
    transform:rotate(0deg); 
}
.con29{
    border:1px solid red;
    width:150px;
    height: 220px;
    background-color: rgb(60, 0, 255);
    /* 绝对定位  相对于父类偏移*/
    position:absolute;
    top:80px;
    left:300px;
    /* 旋转 */
    transform: rotate(-70deg); 
}
.con29:hover{
    /* 浮标下的优先显示 index 指数 */
    z-index: 9;
    /* 设置动画效果时间 all 表示所有方位 */
    transition: all 1s;
    transform:rotate(0deg); 
}
.con209{
    border:1px solid red;
    width:150px;
    height: 220px;
    background-color: red;
    /* 绝对定位  相对于父类偏移*/
    position:absolute;
    top:100px;
    left:280px;
    /* 旋转 */
    transform: rotate(-30deg); 
}
.con209:hover{
    /* 浮标下的优先显示 index 指数 */
    z-index: 9;
    /* 设置动画效果时间 all 表示所有方位 */
    transition: all 1s;
    transform:rotate(0deg); 
}
.con219{
    border:1px solid red;
    width:150px;
    height: 220px;
    background-color: yellow;
    position:absolute;
    top:150px;
    left:300px;
    /* 旋转 */
    transform: rotate(-5deg); 
}
.con219:hover{
    z-index: 9;
    transition: all 1s;
    transform:rotate(0deg); 
}
.con229{
    border:1px solid red;
    width:150px;
    height: 220px;
    background-color:white;
    /* 相对定位 */
    position:absolute;
    top:200px;
    left:300px;
    /* 旋转 */
    transform: rotate(10deg); 
}
.con229:hover{
    z-index: 9;
    transition: all 1s;
    transform:rotate(0deg); 
}
.con2219{
    border:1px solid red;
    width:150px;
    height: 220px;
    background-color:purple;
    /* 相对定位 */
    position:absolute;
    top:250px;
    left:280px;
    /* 旋转 */
    transform: rotate(25deg); 
}
.con2219:hover{
    z-index: 9;
    transition: all 1s;
    transform:rotate(0deg); 
}
.con2229{
    border:1px solid red;
    width:150px;
    height: 220px;
    background-color:orange;
    /* 相对定位 */
    position:absolute;
    top:300px;
    left:260px;
    /* 旋转 */
    transform: rotate(35deg); ![请添加图片描述](https://img-blog.csdnimg.cn/6f64b746e6504922a420d4cc1a87f9e4.gif)
}
.con2229:hover{
    z-index: 9;
    transition: all 1s;
    transform:rotate(0deg); 
}

运行结果如下：
请添加图片描述

4.学生注册表

要实现的效果图片：
请添加图片描述
代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生注册</title>
    <link rel="stylesheet" href="css/xszc.css">

</head>
<body>
    <form action="#">
        <table border="1" align="center" >
            <caption>学生注册</caption>
            <tr>
                <td>姓名</td>
                <td><input type="text"/></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password"/></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" value="男"/>男
                    <input type="radio" name="sex" value="女"/>女
                </td>
            </tr>
            <td>性别</td>
                <td>
                    <input type="checkbox" name="hobby" value="打球"/>打球
                    <input type="checkbox" name="hobby" value="唱歌"/>唱歌
                    <input type="checkbox" name="hobby" value="打游戏"/>打游戏
                </td>
            <tr>
            <tr>
                <td>省份</td>
                <td><select name="shengfen" id=""><option value="henan">河南</option>
                        <option value="hebei">河北</option>
                        <option value="shandong">山东</option>
                    </select></td>
            </tr>
            <tr>
                <td>
                    自我介绍
                </td>
                <td><textarea name="ziwojieshao" id="" cols="10" rows="5"></textarea></td>
            </tr>
            <tr>
                <td>
                    照片
                </td>
                <td><input type="file"></td>
            </tr>
            <tr>
                <td>
                </td>
                <td><button>普通按钮</button>
                    <button type="submit">提交</button>
                    <button type="reset">重置</button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

xszc.css代码如下：

table{
    width:400px;
}

运行结果如下：
请添加图片描述

5.商品管理后台

要实现的效果图片：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理后台</title>
    <link rel="stylesheet" href="css/spglht.css" type="text/css"> 

</head>
<body>
    <div id="con">
        <div id="top">
            <p>商品管理后台</p>
            <span>欢迎张三（采购经理)|注销</span>
        </div>
        <div id="left">
            <ul class="menu">
                <li>商品管理
                    <ul>
                        <li><a href="page1.html" target="mywin">看帅哥1</a></li>
                        <li><a href="page2.html" target="mywin">看帅哥2</a></li>
                    </ul>
                </li>
                <li>人事管理1
                    <ul>
                        <li><a href="#" target="mywin">商品查询</a></li>
                        <li><a href="#" target="mywin" >商品添加</a></li>
                    </ul>
                </li>
                <li>人事管理2
                    <ul>
                        <li><a href="#" target="mywin">商品查询</a></li>
                        <li><a href="#" target="mywin">商品添加</a></li>
                    </ul>
                </li>
                <li>采购管理
                    <ul>
                        <li><a href="#" target="mywin">商品查询</a></li>
                        <li><a href="#" target="mywin">商品添加</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="right">
            <iframe name="mywin" src=""></iframe>
        </div>
        <div id="zero"></div>
        <div id="buttom"></div>
    </div>
</body>
</html>

page1.html代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>page1</title>
    <link rel="stylesheet" href="css/page1.css">
</head>
<body>
    <div id="con"></div>
</body>
</html>

page2.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <title>page2</title>
    <link rel="stylesheet" href="css/page2.css">
</head>
<body>
    <div id="con"></div>
</body>
</html>

spglht.css代码如下：

#con{
     width:1800px;
     height:900px;
     border:5px solid green;
     background-color: yellow;
 }
 #top{
     border:1px solid black;
     width: auto;
     height:100px;
     background-color: black;
 }
 p{
     text-align: left;
     color:white;
     text-decoration: none;
     font-size: 30px;
     margin-left:40px;
     display: inline-block;
 }
span{
     /* text-align:right; */
     /*margin-left: 800px; 注意 */
     color:white;
     /* display: inline-block; */
     float: right; 
     margin-right: 20px;
     line-height:100px ;
 }
 #left{
     border:1px solid red;
     height:800px;
     width:160px;
     background-color: black;
/*区分清display 改变标签类别 float浮动 */
     display: block; 
     float:left;
 }
 ul{
     list-style: none;
     margin: 0px;
     padding: 0px;
     text-align: center;
     color:white;
     /* border:1px solid black; */
 }
 .menu{
     font-weight: bolder;
     line-height: 40px;
     font-size: 25px;
     /* border:1px solid gray; */
 }
 .menu li ul{
     height:0px;
     overflow: hidden;
     background-color: gray;
     
 }
 .menu li:hover ul{
    height:80px;
 }
 #right{
     /* margin-left: 300px; */
     margin-top: 0px;
     width:1634px;
     height:800px;
     border:1px solid green;
     background-color: white;
     display: inline;
     float:left;
 }
iframe{
     width: 1200px;
     height:700px;
     border:1px solid green;
     margin-left:200px; 
     margin-top: 50px;
     float:left;  
 }
 #zero{
     clear: both;
 }

page1.css代码如下：

#con{
    border:1px solid brown;
    width:auto;
    height:800px;
    background:url(../img/shuaige.jpg) ;
}

page2.css代码如下：

#con{
    border:1px solid brown;
    width:auto;
    height:800px;
    background:url(../img/shuaige2.png) ;
}

img文件夹中的图片如下：
在这里插入图片描述
运行结果如下：
请添加图片描述

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

华为云开发者联盟

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

华为云开发者联盟

cover

华为云云原生FinOps解决方案，释放云原生最大价值

华为云开发者联盟

所有评论(0)

查看更多评论

小丫头爱打盹

已为社区贡献4条内容