之前一直很烦CSS,现在做一个模板保存,以后要是用到,修改下就行【 注意,根据需求自己修改;我没有做兼容性处理】【我CSS不太好,有错误的地方,我马上修改,欢迎指出】---------------------------------------------common.jsp------------------------------------------<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri=" http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri=" http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri=" http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
---------------------------------------------index.jsp------------------------------------------<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/static/jsp/common.jsp"%>
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--为移动设备添加 viewport-->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符" />
<!-- 页面关键词 -->
<meta name="keywords" content="" />
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow" />
<!-- 引入css样式文件 -->
<link href="${ctx}/static/css/index.css" rel="stylesheet"
type="text/css">
<!-- 引入js样式文件 -->
<script src=""></script>
<!-- 网站ico图片设置 -->
<link rel="shortcut icon" href="favicon.ico">
<title>Java数据解构和算法</title>
</head>
<body>
<div id="main">
<!-- id="main",最外层div -->
<div id="inner_top">
<!-- id="inner_top",内部最上层div -->
内部最上层div
</div>
<!-- id="innertop",内部最上层div,结束 -->
<div id="inner_navigation">
<!-- id="inner_navigation",内部导航层div -->
内部导航层div
</div>
<!-- id="inner_navigation",内部导航层div,结束 -->
<div id="inner_contents">
<!-- id="inner_contents",内部内容层div -->
<div id="inner_contents_left">
<!-- id="inner_contents_left",内部内容层左侧树div -->
内部内容层左侧树div
</div>
<!-- id="inner_contents_left",内部内容层左侧树div,结束 -->
<div id="inner_contents_middle">
<!-- id="inner_contents_middle",内部内容层中间详细内容div -->
内部内容层中间详细内容div
</div>
<!-- id="inner_contents_middle",内部内容层中间详细内容div,结束 -->
<div id="inner_contents_right">
<!-- id="inner_contents_right",内部内容层右侧更新栏目div -->
内部内容层右侧更新栏目div
</div>
<!-- id="inner_contents_right",内部内容层右侧更新栏目div,结束 -->
</div>
<!-- 内部内容层div,结束 -->
<div id="inner_buttom">
<!-- id="inner_buttom",内部最底层div -->
内部最底层div
</div>
<!-- id="inner_buttom",内部最底层div,结束 -->
</div>
<!-- id="main",最外层div,结束 -->
</body>
</html>---------------------------------------------CSS------------------------------------------div {
border: 1px solid #F00;
text-align: center; /*文字水平居中对齐*/
}/**pc端css样式:开始**/
/**最外层div设置**/
#main {
width: 1347px;
height: 530px;
overflow: hidden;
}/**内部最上层div设置**/
#inner_top {
width: 100%;
height: 5%;
background-color:#ff00ff;
}/**内部导航div设置**/
#inner_navigation {
width: 100%;
height: 5%;
background-color:yellow;
}
#inner_contents{
width: 100%;
height: 84%;
background-color:#00ffff;
}
/**内部内容左侧div设置**/
#inner_contents_left{
height: 100%;
width: 15%;
float:left;
}
/**内部内容中间div设置**/
#inner_contents_middle{
height: 100%;
width: 65%;
float:left;
}
/**内部内容右侧div设置**/
#inner_contents_right{
height: 100%;
width: 19%;
float:right;
}
/**内部底部div设置**/
#inner_buttom {
width: 100%;
height: 5%;
background-color:#808000;
}
/**pc端css样式:结束**/
前端页面div设计的css模板
最新推荐文章于 2023-06-01 10:49:54 发布