javaweb---静态网页开发技术(4)

最新推荐文章于 2024-03-20 21:05:26 发布

小张哎！

最新推荐文章于 2024-03-20 21:05:26 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/qq_45746744/article/details/115105778

版权

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8">
        <title>zqy</title>
            <style type="text/css">
            body{
                background-color: yellow;
                }
            #div1{
                 text-align: center;
                 margin: 10px;
                 
                 }
            #div2{
                 text-align: center;
                 padding: 10px;
                 margin: 10px;
                 height: 50px;
                 weight: 95%;
                 background-color: lightblue;
                 border: 1px solid black;
                 }
            #div3{
                 float: left;
                 text-align: center;
                 margin: 10px;
                 padding: 10px;
                 height: 450px;
                 width: 70%;
                 background-color: pink;
                 border: 1px solid black;
                 }
            #div4{
                 text-align: center;
                 float: left;
                 margin: 10px;
                 padding: 10px;
                 height: 450px;
                 width: 24%;
                 background-color: lightgreen;
                 border: 1px solid black;
                 }
            #div5{
                 text-align: center;
                 float: left;
                 margin: 10px;
                 padding: 10px;
                 height: 40px;
                 width: 97%;
                 background-color: purple;
                 border: 1px solid black;
                 }
            </style>
        
    </head>
    <body>
        <div id="div1">#container</div>
        <div id="div2">#banner</div>
        <div id="div3">#content</div>
        <div id="div4">#links</div>
        <div id="div5">#footer</div>
    </body>
</html>

其运行结果为：
在这里插入图片描述
有点问题的，如果把页面缩小，盒子会乱
下面改改格式：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8">
        <title>zqy</title>
            <style type="text/css">
            body{
                background-color: yellow;
                }
            #div1{
                 text-align: center;
                 margin: 10px;
                 width: 800px;
                 }
            #div2{
                 text-align: center;
                 padding: 10px;
                 margin: 10px;
                 height: 50px;
                 width: 800px;
                 background-color: lightblue;
                 border: 1px solid black;
                 }
            #div3{
                 float: left;
                 text-align: center;
                 margin: 10px;
                 padding: 10px;
                 height: 450px;
                 width: 560px;
                 background-color: pink;
                 border: 1px solid black;
                 }
            #div4{
                 text-align: center;
                 float: left;
                 margin: 10px;
                 padding: 10px;
                 height: 450px;
                 width: 200px;
                 background-color: lightgreen;
                 border: 1px solid black;
                 }
            #div5{
                 text-align: center;
                 float: left;
                 margin: 10px;
                 padding: 10px;
                 height: 40px;
                 width: 800px;
                 background-color: purple;
                 border: 1px solid black;
                 }
            </style>
        
    </head>
    <body>
        <div id="div1">#container</div>
        <div id="div2">#banner</div>
        <div id="div3">#content</div>
        <div id="div4">#links</div>
        <div id="div5">#footer</div>
    </body>
</html>