- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

IDEA初学之HTML&CSS

俺想吃蜂蜜发表于 2022/04/30 10:06:20 2022/04/30

【摘要】开发主页因为静态HTML不包含动态信息，所以我们使用JSP开发页面。JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。 1、创建页面框架创建homepage.jsp、footer.jsp、top.jsp和left.jsp，然后在homepage.jsp里面引用这个left.jsp、foote...

开发主页

因为静态HTML不包含动态信息，所以我们使用JSP开发页面。

JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。

1、创建页面框架

创建homepage.jsp、footer.jsp、top.jsp和left.jsp，然后在homepage.jsp里面引用这个left.jsp、footer.jsp和top.jsp页面（这里拆分页面，使得homepage页面简洁，并且提高页面的重用性）。

homepage.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>\
<html>\
<head>\
    <title>主页</title>\
</head>\
<style>\
    .main{\
        height: 500px;\
    }\
    .main_right{\
        height: 100%;\
        width: 70%;\
        background-color: aqua;\
        float: right;\
    }\
</style>\
<body >\
<jsp:include page="top.jsp"></jsp:include>\
<div class="main">\
    <jsp:include page="left.jsp" />\
    <div class="main_right">\
        右边主体内容\
    </div>\
</div>\
<%--<div class="footer">footer</div>--%>\
<jsp:include page="footer.jsp"></jsp:include>\
\
</body>\
</html>

top.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>\
\
<style>\
    .top{\
        height: 50px;\
        background-color: blueviolet;\
    }\
</style>\
<div class="top" >\
    头部\
    </div>

footer.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>\
\
<style>\
\
</style>\
<div class="footer" style="height: 200px;background-color: burlywood">\
   底部\
</div>

 

#######################  left.jsp ###########################

\
<%@ page contentType="text/html;charset=UTF-8" language="java" %>\
\
<style>\
    .main_left{\
        height: 100%;\
        width: 30%;\
        background-color: cadetblue;\
        float: left;\
    }\
</style>\
<div class="main_left">\
\
    左边\
</div>

效果如下：

2、调整top.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>\
\
<style>\
    .top{\
        height: 50px;\
        width:100%;\
        background-color: #ccc;\
        /*向 div 元素添加阴影    rgba:设置背景颜色，前面3个是红绿蓝，第四个是透明度 */\
        /*!important  优先执行*/\
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;\
    }\
    .top_title{\
        font-size: 25px;\
        padding-left: 40%;\
    }\
    .top_admininfo{\
        font-size: 20px;\
        padding-left: 15%;\
        }\
    .top_logout{\
        font-size: 20px;\
        padding-left: 10%;\
    }\
    .top_content{\
        padding-top: 5px;\
    }\
</style>\
<div class="top" >\
    <div class="top_content">\
        <span class="top_title">图书馆系统（后台管理）</span>\
        <span class="top_admininfo">欢迎你：管理员A</span>\
        <span class="top_logout"><a href="https://www.baidu.com/"  target="_blank">退出</a></span>\
    </div>\
\
</div>

效果图：

3、调整中部

介绍一款前端框架给大家：

Bootstrap https://www.bootcss.com/

https://v4.bootcss.com/docs/getting-started/introduction/

标签库：https://icons.bootcss.com/

1）左部：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>\
\
<style>\
    .main_left{\
        height: 100%;\
        width: 20%;\
        float: left;\
        /*inset：从外层的阴影（开始时）改变阴影内侧阴影*/\
        box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);\
    }\
    .main_left .content ul{\
        /*去掉前面圆点*/\
        list-style: none;\
        padding-left: 70px;\
        /*设置li之间的间距*/\
        line-height:40px;\
        font-size: 16px;\
    }\
    .main_left .content ul li{\
\
    }\
    .main_left .content ul li a{\
        /*去掉链接下划线*/\
        text-decoration: none;\
    }\
</style>\
<div class="main_left">\
\
    <div class="content">\
        <ul>\
            <li>\
                <a href="">\
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-sunglasses" viewBox="0 0 16 16">\
                        <path d="M4.968 9.75a.5.5 0 1 0-.866.5A4.498 4.498 0 0 0 8 12.5a4.5 4.5 0 0 0 3.898-2.25.5.5 0 1 0-.866-.5A3.498 3.498 0 0 1 8 11.5a3.498 3.498 0 0 1-3.032-1.75zM7 5.116V5a1 1 0 0 0-1-1H3.28a1 1 0 0 0-.97 1.243l.311 1.242A2 2 0 0 0 4.561 8H5a2 2 0 0 0 1.994-1.839A2.99 2.99 0 0 1 8 6c.393 0 .74.064 1.006.161A2 2 0 0 0 11 8h.438a2 2 0 0 0 1.94-1.515l.311-1.242A1 1 0 0 0 12.72 4H10a1 1 0 0 0-1 1v.116A4.22 4.22 0 0 0 8 5c-.35 0-.69.04-1 .116z"/>\
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-1 0A7 7 0 1 0 1 8a7 7 0 0 0 14 0z"/>\
                    </svg>\
                    管理员信息中心\
                </a>\
            </li>\
            <li>\
                <svg xmlns="http://www.w3.org/2000/svg" width="16"
                height="16" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">\
                    <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/>\
                </svg>\
                客户信息管理</li>\
            <li>\
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book" viewBox="0 0 16 16">\
                    <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>\
                </svg>\
                图书信息管理\
            </li>\
            <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark-check" viewBox="0 0 16 16">\
                <path fill-rule="evenodd" d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>\
                <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>\
            </svg>\
                借阅信息管理</li>\
        </ul>\
    </div>\
</div>

效果图：

2）右部

<%@ page contentType="text/html;charset=UTF-8" language="java" %>\
<html>\
<head>\
    <title>主页</title>\
</head>\
<style>\
    .main{\
        height: 500px;\
    }\
    .main_right{\
        height: 100%;\
        width: 80%;\
        float: right;\
        text-align: center;\
    }\
    .main_right .info table{\
        margin:auto; /*配合div里面的text-align: center; 可以使得table居中*/\
    }\
\
    .main_right .content .info{\
        margin-top: 30px;\
    }\
\
    .main_right .content .info table{\
        border-spacing: 10px;  /*设置table tr的间距*/\
    }\
\
    .main_right .content .info input[type="text"]{\
        width: 200px;\
        height: 30px;\
    }\
\
    .main_right .content .info select{\
        width: 200px;\
        height: 30px;\
    }\
\
    .main_right .content .info button{\
        width: 200px;\
        height: 30px;\
    }\
\
\
</style>\
<body >\
<jsp:include page="top.jsp"></jsp:include>\
<div class="main">\
    <jsp:include page="left.jsp" />\
    <div class="main_right">\
        <div class="title"><h3>个人信息中心</h3></div>\
        <form name="frm" action="" method="post">\
        <div class="content">\
            <div class="img">\
                <img src="upload/imgs/test1.png">\
\
            </div>\
            <div class="info">\
                <table>\
                    <tr><td>账号：</td><td><input type="text" value="张三" readonly></td></tr>\
                    <tr><td>新密码：</td><td><input type="password" value=""></td></tr>\
                    <tr><td>性别：</td><td>\
                        <input type="radio" name="sex" value="男" checked>男  \
                        <input type="radio" name="sex" value="女">女\
\
                    </td></tr>\
                    <tr><td>出生日期：</td><td><input type="date" value=""></td></tr>\
                    <tr><td>爱好：</td><td>\
                        看书：<input type="checkbox" name="hobby" value="看书" checked><br/>\
                        打篮球：<input type="checkbox" name="hobby" value="打篮球"><br/>\
                        踢足球：<input type="checkbox" name="hobby" value="踢足球" checked>\
                    </td></tr>\
                    <tr><td>年级：</td><td>\
\
                        <select name="grade">\
                            <option value="">请选择年级</option>\
                            <option value="1">大一</option>\
                            <option selected value="2">大二</option>\
                            <option value="3">大三</option>\
                            <option value="4">大四</option>\
                        </select>\
                    </td></tr>\
                    <tr><td>头像：</td><td><input type="file" name="uploadFile"></td></tr>\
                    <tr><td colspan="2"><button type="submit">修改</button> </td></tr>\
                </table>\
            </div>\
        </div>\
\
        </form>\
    </div>\
</div>\
<%--<div class="footer">footer</div>--%>\
<jsp:include page="footer.jsp"></jsp:include>\
\
</body>\
</html>

效果图：

4、调整底部

<%--\
  Created by IntelliJ IDEA.\
  User: Administrator\
  Date: 2021/1/8\
  Time: 15:35\
  To change this template use File | Settings | File Templates.\
--%>\
<%@ page contentType="text/html;charset=UTF-8" language="java" %>\
\
<style>\
\
</style>\
<div class="footer" style="height: 110px;background-color: burlywood">\
   <ul>\
      <li>关于我们</li>\
      <li>联系我们</li>\
      <li>人才招聘</li>\
   </ul>\
</div>

开发列表页

1）copy homepage.jsp，创建一个新的booklist.jsp

2）只需要修改booklist.jsp里面的中间的主体内容就可以了

<%@ page contentType="text/html;charset=UTF-8" language="java" %>\
<html>\
<head>\
    <title>主页</title>\
</head>\
<style>\
    .book{\
        height: 500px;\
    }\
    .book .right{\
        height: 100%;\
        width: 80%;\
        float: right;\
        text-align: center;\
    }\
    .book .right .content .info{\
        margin-top: 30px;\
    }\
\
    .book .right .info table{\
        margin:auto; /*配合div里面的text-align: center; 可以使得table居中*/\
        border-spacing: 14px;  /*设置table tr的间距*/\
        width: 90%;\
        border: 1px solid #cccccc;  /*设置table 外边框*/\
        border-collapse: collapse; /*设置table 边框合并，会忽略 border-spacing,只有设置td高度了*/\
    }\
\
    .book .right .content .info table tr{\
        border-bottom: 1px solid #e5e5e5; /*设置table 底部边框样式*/\
    }\
\
    .book .right .content .info table tr th{\
        font-size: large;\
        font-weight: bold;\
        height: 50px;\
    }\
    .book .right .content .info table tr td{\
        font-size: large;\
        text-align: center;\
        height: 50px;\
    }\
\
    .book .right .content .info input[type="text"]{\
        width: 200px;\
        height: 30px;\
    }\
\
    .book .right .content .info select{\
        width: 200px;\
        height: 30px;\
    }\
\
    .book .right .content .info button{\
        width: 200px;\
        height: 30px;\
    }\
\
\
    .book .right .search select{\
        width: 200px;\
        height: 30px;\
    }\
    .book .right .search input{\
        width: 100px;\
        height: 30px;\
    }\
\
\
</style>\
<body >\
<jsp:include page="top.jsp"></jsp:include>\
<div class="book">\
    <jsp:include page="left.jsp" />\
    <div class="right">\
        <div class="title"><h3>图书管理</h3></div>\
        <form name="frm" action="" method="post">\
            <div class="search">\
                <select name="searchType">\
                    <option value="">请选择查询条件</option>\
                    <option value="1">图书名称</option>\
                    <option value="2">借阅人</option>\
                    <option value="3">借阅状态</option>\
                </select>\
                <input type="text" name="searchType">\
                <input type="submit" value="查询">\
            </div>\
        <div class="content">\
\
            <div class="info">\
                <table>\
                    <tr><th></th><th>图书名称</th><th>借阅人</th><th>借阅时间</th><th>借阅状态</th><th>操作</th></tr>\
                    <tr><td><input type="checkbox" name="sel" value=""></td><td>十万个为什么</td><td>张三</td><td>2021-1-1</td><td>借阅中</td><td>\
                        <a href="" >删除</a>   <a href="" >编辑</a>\
                    </td></tr>\
\
                    <tr><td><input type="checkbox" name="sel" value=""></td><td>十万个为什么</td><td>张三</td><td>2021-1-1</td><td>借阅中</td><td>\
                        <a href="" >删除</a>   <a href="" >编辑</a>\
                    </td></tr>\
                    <tr><td><input type="checkbox" name="sel" value=""></td><td>十万个为什么</td><td>张三</td><td>2021-1-1</td><td>借阅中</td><td>\
                        <a href="" >删除</a>   <a href="" >编辑</a>\
                    </td></tr>\
                    <tr><td><input type="checkbox" name="sel" value=""></td><td>十万个为什么</td><td>张三</td><td>2021-1-1</td><td>借阅中</td><td>\
                        <a href="" >删除</a>   <a href="" >编辑</a>\
                    </td></tr>\
\
                </table>\
            </div>\
        </div>\
\
        </form>\
    </div>\
</div>\
<%--<div class="footer">footer</div>--%>\
<jsp:include page="footer.jsp"></jsp:include>\
\
</body>\
</html>

效果图：

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

IDEA初学之HTML&CSS

开发主页

1、创建页面框架

homepage.jsp

top.jsp

footer.jsp

2、调整top.jsp页面

3、调整中部

1）左部：

2）右部

4、调整底部

开发列表页

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

IDEA初学之HTML&CSS

开发主页

1、创建页面框架

homepage.jsp

top.jsp

footer.jsp

2、调整top.jsp页面

3、调整中部

1）左部：

2）右部

4、调整底部

开发列表页

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品